Acerca de @clavisco/app-header

Token: AppHeader

Permite presentar una barra superior en la aplicación para facilitar el acceso a ciertas funciones

¿Qué resuelve?

• Responsividad automática (ajuste dinámico de elementos en móvil/escritorio)
• Búsqueda integrada (filtrado de rutas con redireccionamiento)
• Personalización (botones, textos, avatar y menús configurables).
• Soporte para NotificationCenter

Dependencias requeridas

• @clavisco/core
• @clavisco/linker
• @clavisco/alerts
• @clavisco/notification-center

Resumen de versión

• Centro de notificaciones integrado
• Menús de acceso desplegables (dropdown)
• Búsqueda y redirrecionamiento de vistas de usuario
• Botones de acción configurables
• Avatar de usuario con menú personalizable
• Toolbar responsivo que se adapta a diferentes tamaños de pantalla
• Sistema de búsqueda automático basado en rutas configuradas

Instalación

npm install @clavisco/app-header

¿Cómo lo implemento?

1. Importar el módulo en la aplicación Angular.

import { AppHeaderModule } from '@clavisco/app-header';
@NgModule({
   imports: [
      AppHeaderModule
        // ... otros módulos
     ]
   })
export class AppModule { }

2. Agregar en el template

<cl-app-header>
  <router-outlet></router-outlet>
</cl-app-header>

Con esta configuración, se obtendrá una implementación básica del componente app-header.

Eventos emitidos

1. Para habilitar la respuesta a la interacción con los botones del toolbar y del menú de usuario, es necesario registrar sus eventos en los canales correspondientes.

• Registrar un evento en el canal OUTPUT para los botones del toolbar.
• Registrar un evento en el canal DATA_LINE_1 para los botones del menú de usuario.

ngOnInit(): void {
  Register<CL_CHANNEL>(this.headerId, CL_CHANNEL.OUTPUT, this.ButtonsEvent, this.callbacks);
  Register<CL_CHANNEL>(this.headerId, CL_CHANNEL.DATA_LINE_1, this.handleMenuEvent, this.callbacks);
}

2. Verificar de que la configuración del paquete @clavisco/linker esté correctamente definida y completa.
3. Definir las funciones que se asignarán a cada botón de forma individual, según la acción que deben ejecutar.
4. Implementar un método para manejar los eventos recibidos, utilizando el identificador del botón (buttonId) para determinar la acción correspondiente.

private handleActionEvent = (_event: ICLEvent): void => {
  const BUTTON_EVENT = JSON.parse(_event.Data);
  if (!BUTTON_EVENT.buttonId) {
      console.error('buttonId no definido en el evento:', BUTTON_EVENT);
      return;
  }
  try {
      switch (BUTTON_EVENT.buttonId) {
          case 'action1':
              this.eventAction1();
              break;
          case 'action2':
              this.eventAction2();
              break;
          default:
              console.warn('buttonId no implementado:', BUTTON_EVENT.buttonId);
          }
      } catch (error) {
          console.error('Error al manejar la acción:', error);
    }
};

Nota de Integración con @clavisco/menu: Para que el botón de menú del toolbar funcione correctamente con @clavisco/menu, el componente menú debe declararse con el identificador: MENU-ID ya que el toolbar utiliza LinkerService para emitir eventos de toggle (apertura/cierre) y buscará a componente que posea este ID.

API de Referencia

Propiedades de Entrada

| Parámetro | Tipo | Descripción | Valor por Defecto | Mandatorio | |-----------------------|----------------------|-----------------------------------------------------------------------------|-------------------|------------| | headerId | string | Identificador único para manejo de eventos | - | No | | toolbarconfiguration | IToolbarConfiguration | Configuración completa del toolbar | - | No |

Interface: IToolbarConfiguration
Parámetro: toolbarConfiguration
Descripción: Configuración global del toolbar.

| Propiedad | Tipo | Descripción | Valor por Defecto | Mandatorio | |----------------|--------------------|-----------------------------------------------------------------------------|-------------------|------------| | headerTitle | string | Título principal del toolbar | '' | No | | routes | IAppHeaderRoute[] | Rutas para el sistema de búsqueda | [] | No | | actions | IHeaderButton[] | Botones de acción | [] | No | | avatar | IHeaderAvatar[] | Configuración del avatar de usuario | [] | No | | plainText | IHeaderText[] | Textos informativos | [] | No | | avatarMenu | IUserMenu | Configuración del menú de usuario | {userInfo: false, buttonOption: []} | No |

Interface: IAppHeaderRoute
Propiedad: routes
Descripción: Listado de rutas utilizadas para el sistema de búsqueda y navegación.

| Propiedad | Tipo | Descripción | Valor por Defecto | Mandatorio | |-----------|----------|-----------------------------------------------|-------------------|------------| | Name | string | Nombre visible de la ruta | - | Sí | | Route | string | Ruta de navegación | - | Sí | | Icon | string | Ícono Material (opcional) | '' | No | Importante Asegurarse de que las rutas coincidan con las rutas mostradas en el menú.

Interface: IHeaderButton
Propiedad: actions
Descripción: Botones de acción principales que se muestran en el toolbar.

| Propiedad | Tipo | Descripción | Valor por Defecto | Mandatorio | |-----------------|---------------------------|-----------------------------------------------|-------------------|------------| | buttonId | string | Identificador único del botón | - | Sí | | label | string | Texto del botón | - | Sí | | icon | string | Ícono Material (opcional) | '' | No | | action | Structures.Enums.CL_ACTIONS; | Acción asociada al botón | '' | No | | buttonStyle | 'stroked'\|'flat'\|'raised' | Estilo del botón | '' | No | | buttonColor | string | Color del botón ('primary', 'accent', 'warn')| '' | No |

Interface: IHeaderAvatar
Propiedad: avatar
Descripción: Configuración de la imagen y datos del usuario para el avatar.

| Propiedad | Tipo | Descripción | Valor por Defecto | Mandatorio | |------------------|----------|-----------------------------------------------|-------------------|------------| | avatarImage | string | URL de la imagen de perfil | '' | No | | avatarLabel | string | Nombre a mostrar | 'Usuario' | No |

Interface: IUserMenu
Propiedad: avatarMenu
Descripción: Agregar un menú que se despliega al hacer click sobre el avatar en el toolbar.

| Propiedad | Tipo | Descripción | Valor por Defecto | Mandatorio | |------------------|--------------------|-----------------------------------------------|-------------------|------------| | userInfo | boolean | Mostrar información de usuario | false | No | | buttonOption | IUserMenuOption[] | Opciones del menú | [] | No |

Importante En la sección de información de usuario, se tomará el label del avatar como el nombre del usuario,

Interface: IUserMenuOption
Propiedad: buttonOption
Descripción: Botones de acción que se muestran en el avatarMenu.

| Propiedad | Tipo | Descripción | Valor por Defecto | Mandatorio | |------------------|----------|-----------------------------------------------|-------------------|------------| | optionId | string | Identificador único de la opción | - | Sí | | optionLabel | string | Texto a mostrar | - | Sí | | optionGlyph | string | Ícono Material (opcional) | '' | No | | action | string | Acción asociada (opcional) | '' | No |

Interface: IHeaderText
Propiedad: plainText
Descripción: Textos sin acción que se muestran en el toolbar.

| Propiedad | Tipo | Descripción | Valor por Defecto | Mandatorio | |------------------|----------|-------------------------------|-------------------|------------| | textId | string | Identificador único del texto | - | Sí | | message | string | Texto a mostrar | - | Sí | | glyph | string | Ícono Material (opcional) | '' | No |

ClavisCo 2024