Acerca de @clavisco/pages

Token: Pages

Permite cargar una ventana de advertencia según la configuración del sistema (multi ventana o ventana única).

¿Qué resuelve?

Facilita el bloqueo de nuevas ventanas en sistemas que lo requieran mediante la utilización del servicio de @clavisco/core.

Dependencias

• @clavisco/core

Funciones disponibles StorageService

• ValidateWindowConfig(): método principal se encarga de realizar la validación de las ventanas y devolver true en caso de que la ventana pueda ser mostrada, también es el encargado de indicar que tipo de almacenamiento local utilizará la aplicación (depende de la configuración de ventana suministrada, Session storage para ventana múltiple y local storage para una sola ventana).

• SetItem(key:string,item: IStorage|IStorage[]): método para guardar un ítem según la configuración de ventanas, recibe el nombre del ítem y el ítem a guardar, este puede ser un objeto y es de tipo IStorage o IStorage[].

• GetItem(item:string): método que permite obtener un ítem almacenado en el storage, recibe el nombre del ítem a consultar.

• RemoveItem(item:string): método que permite eliminar un ítem almacenado en el storage, recibe el nombre del ítem a eliminar.

Configuraciones globales

Este componente posee soporte para las siguientes configuraciones globales:

• 'MUL_WiNDOW': Con este token se podrá configurar el 'windowConfig', el cual define la cantidad máxima de ventanas abiertas permitidas.

Configurar windowConfig

Para configurar el windowConfig se tiene que establecer la configuración global en el app.component.ts de la siguiente manera.

• Donde el 'numberOfWindow' como su nombre lo indica, representa el número de ventanas duplicadas permitido.

   Repository.Behavior.SetTokenConfiguration({
     token: Structures.Enums.TOKENS.MUL_WiNDOW,
     setting: 'windowConfig',
     value: {
       numberOfWindow: 2
     } as IConfigMultiWindow
   })

Nota Importante!!! El valor de numberOfWindow debe configurarse idealmente desde una fuente externa, como una base de datos, para minimizar dependencias directas del código. La implementación específica de esta configuración queda a criterio de cada desarrollador.

El siguiente namespaces Repository.Behavior.SetTokenConfiguration se obtienen del paquete @clavisco/core.

¿Cómo lo uso?

StorageService

Configuración Global

1. Ejecutar el comando npm i @clavisco/core en el directorio root del proyecto.
2. Una vez terminada la instalación anterior, ejecutamos el comando npm i @clavisco/page en el directorio root del proyecto.
3. Luego podemos llamar a los métodos del servicio como se muestra en el siguiente ejemplo ( toda la configuración siguiente en los archivos app.component.ts y app.component.html):

ngOnInit(): void {
  Repository.Behavior.SetTokenConfiguration({
     token: Structures.Enums.TOKENS.MUL_WiNDOW,
     setting: 'windowConfig',
     value: {
       numberOfWindow: 2
     } as IConfigMultiWindow
   });
}

app.component.html

<cl-pages>
<router-outlet></router-outlet>
</cl-pages>

Métodos del servicio

Este servicio implementa tres métodos para gestionar la información en el almacenamiento local (Storage). A continuación, se describen dichos métodos:

Importante!!! Para utilizar estos métodos, primero debes crear una instancia del servicio en el constructor de tu componente o servicio:

  constructor(private StorageService: StorageService) {}

1. SetItem: Este método se utiliza para almacenar ítems en el Storage. A continuación se muestra cómo implementarlo:

• Primero, crea una variable de tipo IStorage que será enviada como parámetro al método SetItem

  displayedColumns: string = 'description';
  SeveStorage:IStorage = {
      Key: 'displayedColumns',
      Value:displayedColumns,
      IsActive: true,
      Date: new Date()
  };
  this.StorageService.SetItem('Display',this.SeveStorage)

Si necesitas almacenar un objeto, puedes hacerlo de la siguiente manera:

  displayedColumns: string[] = ['description', 'price', 'amount', 'discount', 'tax', 'warehousecode', 'warehouse', 'total', 'opc', 'lintotal'];
  SeveStorage:IStorage = {
      Key: 'displayedColumns',
      Value: JSON.stringify(displayedColumns),
      IsActive: true,
      Date: new Date()
  };
  this.StorageService.SetItem('Display',this.SeveStorage);

2. GetItem: Como su nombre lo indica, este método se utiliza para obtener un ítem almacenado en el Storage. La implementación sería la siguiente:

let storage : IStorage = JSON.parse(this.StorageService.GetItem('Display'))
console.log(storage)

Si el ítem almacenado es un objeto, puedes acceder a su valor de la siguiente manera:

  let storage : IStorage = JSON.parse(this.StorageService.GetItem('Display'))
  console.log(JSON.parse(storage.Value))

3. RemoveItem: Este método se utiliza para eliminar un ítem del Storage. Solo necesitas pasar el nombre del ítem que deseas eliminar:

  this.StorageService.RemoveItem('Display');

Nota!!! La elección entre localStorage y sessionStorage dependerá de si se permite o no el uso de multiventana en la aplicación.

• Multiventana permitida: Si se permiten múltiples ventanas o pestañas, se utilizara sessionStorage para evitar compartir datos entre sesiones de diferentes ventanas, ya que sessionStorage es exclusivo para cada pestaña.
• Multiventana no permitida: Si no se permiten múltiples ventanas, se utilizara localStorage. En este caso, los datos almacenados estarán disponibles en todas las ventanas de la misma aplicación, incluso si la ventana se cierra y se vuelve a abrir.

Recomendaciones

De manera general puede visitar el siguiente video para conocer como implementar cada uno de los elementos mencionados Video explicativo sobre el uso @clavisco/pages.

ClavisCo ©