@clavisco/linker

Acerca de @clavisco/linker

Token: Linker Este componente es el encargado de comunicación entre los distintos componentes

¿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

Funciones disponibles LinkerService

• Publish(_event: ClvsEvent), envía el Objeto ClvsEvent a hacia todos los oyentes del proceso, cada oyente debe encargarse de filtrar los datos que solo ocupa. A su vez opcionalmente puede hacer llamanda de una funcion externa al componetente mediante la variable Target.

• Flow(), todos los procesos interesados deben suscribirse a esta función para poder escuchar toda la información que se transmite para cada proceso a través de la función Publish. Al subscribirse es posible obtener la información procesada con el objeto ClvsEvent en la variable Data

Funciones diponibles en Linker.Space

Este workspace es usado para especificar el estandar de comunicación entre los componentes

• Register(T)(_componentId: string, _action: T, _callback: Function, _interface: ICLCallbackInterface), mapea todos los eventos que suceden entre el componente padre y su hijo. Este se define mediante un enum que representa el contexto del componente mediante un genérico.
  • _componentId: suele ser un identificardor único por componente
  • _action:: es evento que se va a ejecutar, por ejemplo "GET". Estaría obteniendo registros para el componente
  • _callback: es la función que se va a ejecutar cuando algún componente emita un evento
  • _interface: es el objeto que guarda todos los mapeos de eventos y funciones.
• Run(_componentId: string, _clEvent: ICLEvent, _interface: ICLCallbacks), ejectuta una funcion mapeada previamente a un evento previamente
  • _componentId: suele ser un identificardor único por componente
  • _clEvent: contiene información enviada por el componente origen para ser procesada en el componente destino
  • _interface: es el objeto que almacena todos los eventos enlazados a funciones

¿Cómo lo uso?

LinkerService

1. Ejecutar el comando npm i @clavisco/linker en el directorio root del proyecto
2. Injectamos el servicio el módulo LinkerService, sin olvidar incluir la etiqueta @Inject('LinkerService'), con el objetivo de que comparta el mismo contexto en todo momento entre todos los componentes.
3. Luego podemos llamar a los metodos del servicio como se muestra en el siguiente ejemplo:

callbacks: ICLCallbacksInterface<CL_CHANNEL> = {
    Callbacks: {},
    Tracks: [],
};

ngOnInit(): void {
  this.linkerService.Flow()?.pipe(
    StepDown<CL_CHANNEL>(this.callbacks),
  ).subscribe({
    next: callback => Run(callback.Target, callback, this.callbacks.Callbacks),
    error: error => console.log(`mi error`, error)
  });
}

RequestSelectedItems(): void {
  try {
    const EVENT = {
      CallBack: CL_CHANNEL.DATA_LINE_2,
      Target: this.tableId,
    } as ICLEvent;

    this.linkerService.Publish(EVENT);
  } catch (error) {
  }
}

Nota: En este ejemplo se publica un conjunto de datos por medio del DATA_LINE_2 en este caso los datos son enviados a un componente de tabla, pero podrian ser enviados a cualquier componente que acepte datos por el DATA_LINE_2 cada componente o vista se encarga de validar el estado de los datos y el formato correspondiente, el parametro Target define el id del componente que recibe el evento.

Linker.Space

1. Ejecutar el comando npm i @clavisco/linker en el directorio root del proyecto
2. Debido a que estas funciones no comparten contexto con el proyecto root, no es necesario importarlo en el módulo.
3. Injectamos el servicio el módulo LinkerService, sin olvidar incluir la etiqueta @Inject('LinkerService'), con el objetivo de que comparta el mismo contexto en todo momento entre todos los componentes.
4. Importar la función que desee utilizar en el componente o servicio donde será utilizada
5. Ejemplo de cómo importar y utilizar

import { Register } from '@clavisco/linker';

ngOnInit(): void {
    Register<CL_CHANNEL>(this.tableId, CL_CHANNEL.INPUT, this.  GetElementsRecords, this.callbacks);

    this.linkerService.Flow()?.pipe(
      StepDown<CL_CHANNEL>(this.callbacks),
    ).subscribe({
      next: callback => Run(callback.Target, callback, this.callbacks.Callbacks),
      error: error => console.log(`mi error`, error)
    });
}

Nota: La funcion Register es dependiente del servicio linkerService para poder registrar los elementos en el mismo pipe de comunicaciones para todos los componentes, en este ejemplo se registra para el canal INPUT la funcion GetElementsRecords para un componente tabla, el componente de destino mantiene registro de estas funciones y cuando emite un evento se encarga de ejecutarlas para los elementos que apliquen dentro del filtro del pipe

Clavis Consultores ©