generics-lib

1.0.0 • Public • Published

GenericsLib

This library was generated with Angular CLI version 16.2.0.

Generics

This project was generated with Angular CLI version 17.0.7. (Have version 16.0.2)

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Librería Generics

Esta documentación proporciona información sobre el uso de la librería Generics, una colección de componentes reutilizables. Hasta el momento, la librería incluye los siguientes componentes:

  1. Tabla Reutilizable
  2. Paginación Reutilizable
  3. Tabla Dinámica

Instalación

Para utilizar esta librería, primero, debes instalarla mediante el siguiente comando:

npm i generics-lib

Componentes

Tabla Reutilizable

TablaReutilizable

La tabla reutilizable es un componente que incluye filtros y diversos campos. Puede tener una sección de acciones laterales relacionadas con los registros.

Uso

import { TablaSAComponent } from 'generics-lib';

// ...

<generics-tabla
  [headers]="headers2"
  [mostrarAcciones]="true"
  (accionClick)="handleEventoBotonAccion($event)"
  (BotoneraClick)="handleEventoBotonera($event)"
  [data]="listadoHistorialContratosAsociados.resultados"
></generics-tabla>

Detalles de los Campos

  • Headers: Arreglo que sigue la interfaz TablaHeaders.
  • MostrarAcciones: Booleano que determina si se deben mostrar las acciones al final de la tabla.
  • accionClick: Evento que se emite cuando se hace clic en un botón de acción. El objeto emitido contiene el nombre de la acción y el elemento correspondiente.
handleEventoBotonAccion(event: any) {
  switch (event.nombre) {
    case 'verPoliza':
      // Acciones específicas para 'verPoliza'.
      break;
    default:
      break;
  }
}
  • BotoneraClick: Similar a accionClick, pero para la botonera superior.

Paginación Reutilizable

paginacion-Reutilizable

Este componente maneja la paginación y las llamadas al backend.

Uso

import { PaginatorSAComponent } from 'generics-lib';

// ...

<generics-paginator
  [pageSize]="pageSize"
  [totalResults]="totalResults"
  [totalPages]="totalPages"
  [currentPage]="currentPage"
  [cantidadesPages]="cantidadesPages"
  (pageChange)="onPageChange($event)"
  (pageSizeChange)="onPageSizeChange($event)"
  [mostrarPaginador]="true"
></generics-paginator>

Campos

  • MostrarPaginador: Booleano para determinar si se debe mostrar la paginación.
  • pageSize: Tamaño de la página.
  • totalResults: Cantidad total de resultados.
  • totalPages: Número total de páginas.
  • currentPage: Página actual.
  • cantidadesPages: Array de cantidades de páginas a mostrar en la paginación.
  • pageChange: Evento que se emite cuando se cambia de página.
  • pageSizeChange: Evento que se emite cuando se cambia el tamaño de la página.

Importante: Para gestionar los eventos pageChange y pageSizeChange correctamente, se deben realizar las llamadas al backend manualmente en el componente padre.

Tabla Dinámica

tabla-dinamica

Este componente combina la tabla reutilizable y la paginación reutilizable.

Uso

import { DynamicTablesSAComponent } from 'generics-lib';

// ...

<dynamic-table
  [headers]="headers2"
  [mostrarAcciones]="true"
  (accionClick)="handleEventoBotonAccion($event)"
  (BotoneraClick)="handleEventoBotonera($event)"
  [data]="listadoHistorialContratosAsociados.resultados"
  [pageSize]="pageSize"
  [totalResults]="totalResults"
  [totalPages]="totalPages"
  [currentPage]="currentPage"
  [cantidadesPages]="cantidadesPages"
  (pageChange)="onPageChange($event)"
  (pageSizeChange)="onPageSizeChange($event)"
  [mostrarPaginador]="true"
></dynamic-table>

Marzo-2024

Code scaffolding

Run ng generate component component-name --project generics-lib to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project generics-lib.

Note: Don't forget to add --project generics-lib or else it will be added to the default project in your angular.json file.

Build

Run ng build generics-lib to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build generics-lib, go to the dist folder cd dist/generics-lib and run npm publish.

Readme

Keywords

none

Package Sidebar

Install

npm i generics-lib

Weekly Downloads

1

Version

1.0.0

License

none

Unpacked Size

98.6 kB

Total Files

36

Last publish

Collaborators

  • franflockit