generics-lib
v1.0.0
Published
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0. # Generics
Downloads
15
Readme
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:
Instalación
Para utilizar esta librería, primero, debes instalarla mediante el siguiente comando:
npm i generics-lib
Componentes
Tabla Reutilizable
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
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
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 yourangular.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
.