@clavisco/alerts

Acerca de @clavisco/alerts

Token: Alerts

Permite mostrar alertas para información, error, advertencia, éxito y pregunta mediante modales de materíal y uso de observables para subscribirnos al evento cierre de la modal.

¿Qué resuelve?

Habilita un entorno general que permite mostrar mensajes y alertas mediante una sola interface, permitiendo al usuario final estar informado del estado de una aplicación en cada paso que da dentro de un sistema.

Dependencias

• @clavisco/core
• @clavisco/linker

Alerts Service

Este servicio dispone de una serie de métodos para notificar al usuario todos aquellos eventos que le indiquemos mediante un Toast

Métodos disponibles

• Toast(_args: { type: CLToastType, message: string, closeText: string, horizontalPosition: MatSnackBarHorizontalPosition, verticalPosition: MatSnackBarVerticalPosition, duration: number, cssClases: string | string[], darkMode: boolean }): Muestra una alerta toast, recibe un objeto con las siguientes propiedades:
• type: Indica el tipo de alerta, si es exitosa, error, informacion, etc, por defecto es exitosa.
• closeText: Texto que se mostrara en el boton de cerrar la alerta, por defecto es 'Cerrar'
• message: Texto que se mostrara en la alerta.
• horizontalPosition: Posicion horizontal de la alerta. Por defecto es center.
• verticalPosition: Posicion vertical de la alerta, por defecto es bottom.
• duration: Tiempo que la alerta permanecera visible, por defecto es de 5000ms.
• cssClases: Clases CSS para estilos custom de la alerta.
• darkMode: Muestra la alerta con los estilos por defecto de material, por defecto el tema es light

• ShowAlert< T extends { Code: number, Message: string }>(_args: { Response: T, HttpErrorResponse: HttpErrorResponse, closeText: string, horizontalPosition: MatSnackBarHorizontalPosition, verticalPosition: MatSnackBarVerticalPosition, duration: number, cssClases: string | string[], darkMode: boolean }): Muestra una alerta toast, recibe un objeto con las siguientes propiedades:
• Response: Respuesta del API debe seguir la estructura del modelo Response de CL.STRUCTURES.CLASSES.
• closeText: Texto que se mostrara en el boton de cerrar la alerta, por defecto es 'Cerrar'
• HttpErrorResponse: Error HTTP generado por la solicitud.
• horizontalPosition: Posicion horizontal de la alerta. Por defecto es center.
• verticalPosition: Posicion vertical de la alerta, por defecto es bottom.
• duration: Tiempo que la alerta permanecera visible, por defecto es de 5000ms.
• cssClases: Clases CSS para estilos custom de la alerta.
• darkMode: Muestra la alerta con los estilos por defecto de material, por defecto el tema es light

Modal Service

Métodos disponibles

• Open(_args: { type: CLToastType, title: string, subtitle: string, disableClose: boolean, options: { ConfirmButton: { Action: Structures.Enums.CL_ACTIONS.CONTINUE, Color: 'primary', Title: 'Continuar', Data: '', Icon: '' }, YesNoQuestion: true }}): Devuelve un Observable y recibe un objeto como parámetro, el objeto tiene las siguientes propiedades:
• type: Tipo de alerta. Por defecto es exitoso
• title: Titulo de la alerta
• subtitle: Mensaje de la alerta
• disableClose: Indica si se podra cerrar la alerta al presionar desde fuera
• options: Opciones de configuracion de la alerta

• Continue(_args: { type: CLToastType, title: string, subtitle: string, disableClose: boolean }): Abre una alerta con el botón de continuar por defecto, recibe un objeto con las siguientes propiedades:
• type: Tipo de alerta. Por defecto es exitoso
• title: Titulo de la alerta
• subtitle: Mensaje de la alerta
• disableClose: Indica si se podra cerrar la alerta al presionar desde fuera

• NextError(_args: { title: string, subtitle: string, disableClose: boolean }): Abre una alerta de tipo error con un boton de continuar
• title: Titulo de la alerta
• subtitle: Mensaje de la alerta
• disableClose: Indica si se podra cerrar la alerta al presionar desde fuera

• NextInfo(_args: { title: string, subtitle: string, disableClose: boolean }): Abre una alerta de tipo informacion con un boton de continuar
• title: Titulo de la alerta
• subtitle: Mensaje de la alerta
• disableClose: Indica si se podra cerrar la alerta al presionar desde fuera

• NextSuccess(_args: { title: string, subtitle: string, disableClose: string }): Abre una alerta de tipo éxito con un boton de continuar
• title: Titulo de la alerta
• subtitle: Mensaje de la alerta
• disableClose: Indica si se podra cerrar la alerta al presionar desde fuera

• NextWarning(_args: { title: string, subtitle: string, disableClose: string }): Abre una alerta de tipo advertencia con un boton de continuar
• title: Titulo de la alerta
• subtitle: Mensaje de la alerta
• disableClose: Indica si se podra cerrar la alerta al presionar desde fuera

• CancelAndContinue(_args: { type: CLToastType, title: string, subtitle: string, disableClose: boolean }): Abre una alerta con los botones de cancelar y continuar agregados, recibe un objeto con las siguientes propiedades:
• type: Tipo de alerta. Por defecto es exitoso
• title: Titulo de la alerta
• subtitle: Mensaje de la alerta
• disableClose: Indica si se podra cerrar la alerta al presionar desde fuera

• Question(_args: { title: string, subtitle: string, disableClose: boolean }) Muestra una alerta de pregunta con los botones de cancelar y continuar, recibe un objeto con las siguientes propiedades:
• title: Titulo de la alerta
• subtitle: Mensaje de la alerta
• disableClose: Indica si se podra cerrar la alerta al presionar desde fuera

• ShowAlert< T extends {Code: number, Message: string} >(_args: { Response?: T, HttpErrorResponse?: HttpErrorResponse}): Muestra una alerta en la cual el tipo es definido por el codigo HTTP de la solicitud:
• Response: Respuesta del API debe seguir la estructura del modelo Response de CL.STRUCTURES.CLASSES.
• HttpErrorResponse: Error HTTP generado por la solicitud.

NOTA: Los codigos soportados son los siguientes:

• 200 OK: Para alertas de información.
• 201 Created: Para alertas de éxito.
• 202 Accepted: Para alertas de warning.
• 500 Internal Server Error: Para alertas de error.

• Dismiss(_args: { closeAll: boolean }): Cierra una o todas las modales abiertas, por defecto cierra todas las modales abiertas, recibe un objeto como parametro el cual tiene las siguientes propeiedades:
• closeAll: Indica si se cierran todas las modales abiertas, por defecto es true

¿Cómo lo uso?

1. Primero debemos cumplir las depencias mencionadas al inicio de este documento
2. Ejecutar el comando npm i @clavisco/alerts en el directorio root del proyecto
3. Debido a que este componente no comparte contexto con el proyecto root, no es necesario importalo en el app.module.ts.
4. Inyectar el servicio en el controlador donde queremos usar las alertas constructor(private alertService: AlertsService)
5. En el caso de querer usar el toast ingresamos la siguiente línea this.alertService.Toast({ message: 'Mensaje de prueba' })
6. Si queremos usar una modal debemos inyectar el respectivo servicio constructor(private modalService: ModalService)
7. Ejemplo de llamado de una modal

this.modalService.NextInfo({
               title: `titulo de prueba`,
               subtitle: `subtitulo de prueba`
             }
           )

8. Si queremos usar el servicio de notificaciones debemos inyectar el respectivo servicio constructor(private notificationPanel: NotificationPanel)
9. Ejemplo de implementación del componente en el template html

<cl-notification-panel></cl-notification-panel>

8. Ya con esto tenemos una implementación básica con el uso de modal, toast y panel de notificaciones
9. Video explicativo sobre el uso @clavisco/core

Ejemplo extra de una modal configurada de manera específica

this.modalService.Open({
     type: _type as CLModalType, 
     subtitle: 'Texto de prueba para mostrar alerta',
     disableClose: false,
     title: 'Titulo de prueba',
     options: {
       ConfirmButton: {
         Action: Structures.Enums.CL_ACTIONS.CONTINUE,
         Color: 'primary',
         Title: 'Continuar',
         Data: '',
         Icon: ''
       },
       YesNoQuestion: true
     }
   })
   .subscribe({next: (result: any) => console.log(result)});

Configuraciones por defecto del componente

Este componente dispone de una serie de configuraciones que nos permite cambiar el comportamiento del mismo sin tener que estárselo indicando en cada llamado de función que hagamos. Es recomendable agregar estas configuraciones en el app.component.ts para obtener mejores resultados.

Para lograr establecer estas configuraciones el componente hace uso de una librería llamada core, la cual dispone de una serie de métodos para guardar configuraciones. Específicamente vamos a trabajar con el namespace Repository.Behavior con el métodoSetTokenConfigurationel cual es el encargado de configurar nuestro componente.

Para configurar nuestro componente debemos usar las siguientes intrucciones

  Repository.Behavior.SetTokenConfiguration({
      token: `Alerts`, // Identificador que va a guardar nuestras configuraciones, este se indica al inicio del documento
      settings: {
        toastDuration: 10000, // Tiempo que va a ser mostrada nuestra alerta en pantalla
        verticalPosition: 'top', // Posicón en vertical de la alerta, posible valores: ['top', 'bottom']
        horizontalPosition: 'rigdht', // Posición horizontal de la alerta, posible valores :['start','center','end','left','right']
        darkMode: true, // Tema de la alerta, claro o oscuro
        defaultCloseText: `Close` // Texto que va a tener el botón de cerrar de la alerta
      },
      override: true /*Cuando está en true reemplaza todas las configuraciones viejas de este componente con las nuevas y cuando está en false solo actualiza las configuraciones que le indiquemos*/
    });

Recomendaciones

Visitar @clavisco/core para conocer la amplia gama de funcionalidades que se nos ofrecen para facilitarnos el proceso de desarrollo

Clavis Consultores ©