@clavisco/menu v0.0.7

Acerca de @clavisco/menu

Token: Menu

Permite agregar un side menú al aplicativo, redireccionar desde este o aplicar acciones desde las opciones del menú

¿Qué resuelve?

Estandariza el formato y arquitectura de los side menu, al mismo tiempo que, reduce considerablemente el tiempo de implementación.

Dependencias

• @clavisco/core
• @clavisco/linker

Menu

Está compuesta por un módulo y su respectivo componente visual cl-menu a continuación se detalla sus diferentes atributos:

• Id: string(Requerido): Este identificador debe ser único para evitar cruce de registros cuando se use en el componente en una misma vista n cantidad de veces
• Logo: string(Opcional): Establece la dirección de un recurso para mostrar un logotipo
• Title: string(Opcional): Linea de texto del titulo, puede utilizarse para mostrar el nombre de la compañia o de la aplicación
• User: string(Opcional): Linea de texto del usuario, puede utilizarse para indicar el nombre o correo del usurio activo
• Toggle: boolean(Opcional): Definie si el side menú inicia oculto o se muestra.
  • Por defecto se inicializa en verdadero
• Nodes: IMenuNode[](Requerido): Define una lista multi-nivel de nodos para mostrar en las opciones, cada nodo puede tener un conjunto de sub-nodos a mostrar.

¿Cómo se usa?

1. Primero debemos cumplir las depencias mencionadas al inicio de este documento
2. Ejecutar el comando npm i @clavisco/menu en el directorio root del proyecto
3. Importar el módulo MenuModule en el app.module.ts o en el módulo donde desea utilizar el login.
4. Inyectar el servicio de Linker en el controlador para realizar la comunicación con el componente constructor(@Inject('LinkerService') private linkerervice: LinkerService)
5. Ejemplo de implementacion del componente en el template html

<cl-menu 
  [Id]="MenuId" 
  [Logo]="Logo"
  [Title]="Title" 
  [User]="User" 
  [Nodes]="Nodes">
  Contenido de la aplicación
  <router-outlet></router-outlet>
</cl-menu>

Nota: Se recomienda definir el router-outlet dentro del contenido del menu para cargar el menu siempre al margen del contenido y evitar errores donde le menu no se carga, pero si el contenido. 6. Si quiere definir la acciones a ejecutar cuando se acciona una opcion del menu puede registrar un evento de tipo OUTPUT asignando la siguiente función como se muestra en el ejemplo:

ngOnInit(): void {
  Register<CL_CHANNEL>(this.MenuId, CL_CHANNEL.OUTPUT, this.OnMenuOption, this.callbacks);
}

OnMenuOption = (_event: ICLEvent): void => {
  if (_event) {
    const NODE_OPTION = JSON.parse(_event.Data);
    if(NODE_OPTION.Key === 'exit'){
      // Some code to do on "exit" option select
    }
  }
}

7. Para actualizar todos los nodos del menú puede publicar un evento de tipo INFLATE como se muestra en el ejemplo:

this.linkerService.Publish(
  { 
    CallBack: CL_CHANNEL.INFLATE, 
    Data: JSON.stringify(this.MenuNodes), 
    Target: this.MenuId 
  }
);

8. Para actualizar un único nodo del menú puede publicar un evento de tipo INPUT como se muestra en el ejemplo:

this.linkerService.Publish(
  { 
    CallBack: CL_CHANNEL.INPUT, 
    Data: JSON.stringify(
      { 
        Node: this.MenuNode, 
        Expanded: true
      }
    ), 
    Target: this.MenuId 
  }
);

Nota: El Key del nodo debe ser el mismo que el ya existente en el menú. 9. Si desea mostrar u ocultar el menú puede publicar un evento de tipo DATA_LINE_1 como se muestra en el ejemplo:

this.Toggle = !this.Toggle;

this.linkerService.Publish({
  CallBack: CL_CHANNEL.DATA_LINE_1,
  Target: this.MenuId,
  Data: JSON.stringify(this.Toggle)
} as ICLEvent);

10. Ya con esto tenemos una implementación básica del componente menu
11. Video explicativo sobre el uso de @clavisco/menu

Clavis Consultores ©