ngx-redi-core 1.2.4 → 15.0.0

package/README.md

@@ -1,27 +1,22 @@
-# BazRedi
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.6.
+# NgxRediCore
+Esta librería fue generada con [Angular CLI](https://www.npmjs.com/package/@angular/cli) version 15.2.8.
 
-## Development server
+Los componentes internos que componen ngx-redi-core son:
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+- RediDragDrop: Componente Drag&Drop para la carga de archivos
+- RediGrid: Componente Grid que presenta la información en una hoja de cálculo
+- RediTable: Componente Tabla  que ordena registros interactivos en una tabla con ordenamiento, paginación, filtros y acciones
+- RediSecureInterceptor: Interceptor de seguridad para cifrado y descifrado de peticiones Web
 
-## Code scaffolding
+## Estructura del proyecto
+El proyecto se encuentra separado en módulos que contienen la funcionalidad específica de cada componente.
+Cada módulo del proyecto representa un entrypoint para el acceso para la API pública, los entrypoints de referencia son:
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+ngx-redi-core/RediTable
+ngx-redi-core/RediGrid
+ngx-redi-core/RediDragDrop
+ngx-redi-core/Security
 
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+## Importación
+Para importar en un proyecto se ejecutará el siguiente comando `npm install ngx-redi-core`, adicional se deberá incluir la importación en el Módulo sobre el modulo del entrypoint expuesto que se desee importar (https://angular.io/guide/architecture-modules)

package/{projects/ngx-redi-core/RediTable → RediForms}/src/modules/redi-table/redi-table.component.html

@@ -58,7 +58,7 @@
             <tr mat-header-row *matHeaderRowDef="columnas; sticky:true"></tr>
             <!-- Estilizados alternado de filas -->
             <tr mat-row *matRowDef="let row; columns: columnas;let rowNum = index" [class.odd]="rowNum%2"
-                [class.even]="!(rowNum%2)" (click)="onRowSelect($event)"></tr>
+                [class.even]="!(rowNum%2)" (click)="onRowSelect(row)"></tr>
         </table>
     </div>
     <!-- Paginador de datos -->

package/{projects/ngx-redi-core/RediTable → RediForms}/src/modules/redi-table/redi-table.component.ts

@@ -1,5 +1,5 @@
 /** Librerías angular */
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
@@ -295,12 +295,12 @@ export class RediTableComponent<T extends object> implements OnInit, OnChanges {
     }
   }
 
-  public onRowSelect(event: MouseEvent) {
+  public onRowSelect(event: T) {
     this.onRowClick.emit(event);
   }
 
   @Output()
-  public onRowClick = new EventEmitter<MouseEvent>();
+  public onRowClick = new EventEmitter<T>();
 
 
   protected deshabilitarAccion(action: RowAction<T>, element: any) {

package/{projects/ngx-redi-core/RediTable/index.ts → RediTable/public-api.ts}

@@ -1,6 +1,3 @@
-
-export * from './public-api';
-
 /** Módulos y componentes */
 export * from './src/modules/redi-table.module';
 export * from './src/modules/redi-table/redi-table.component';

package/RediTable/src/modules/redi-table/redi-table.component.css

@@ -0,0 +1,106 @@
+.container {
+    display: grid;
+}
+
+tbody {
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.section {
+    overflow: auto;
+    height: 300px;
+    background-color: white;
+    max-height: 90vh;
+    border: 1px solid #f4f4f4;
+}
+
+table {
+    width: 100%;
+    color: #676a6f;
+
+    overflow: auto;
+
+    padding: 0px;
+    background-color: #f7f7f7;
+}
+
+.odd {
+    background-color: #f4f4f4;
+
+    font-size: 1.05em;
+}
+
+.even {
+    background-color: white;
+}
+
+.odd,
+.even {
+    height: 2.5em;
+    cursor: pointer;
+}
+
+td.mat-cell {
+    border: 0px;
+    color: #676a6f;
+    font-size: 1.05em;
+}
+
+.odd:hover,
+.even:hover {
+    background-color: #cddce9;
+}
+
+th {
+    font-size: 1.2em;
+}
+
+tr.mat-header-row {
+    height: 2.55em;
+}
+
+input {
+    min-width: 250px;
+    border: solid 2px #dadada;
+    float: right;
+    margin-bottom: 8px;
+    outline: 0;
+    padding-right: 2em;
+}
+
+mat-icon{
+    color: #676a6f;
+}
+
+.icon {
+    float: right;
+    margin-left: -3em;
+    position: relative;
+    margin-top: 1px;
+}
+
+.visible {
+    display: contents;
+}
+
+.hidden {
+    display: none;
+}
+
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #cccccc;
+    margin-top: 2.6em;
+    margin-bottom: 1.4em;
+}
+
+caption {
+    display: none;
+}
+
+.disabled-button{
+    color: #cecece;
+}

package/RediTable/src/modules/redi-table/redi-table.component.html

@@ -0,0 +1,70 @@
+<!-- Contenedor principal del componente -->
+<div class="container">
+    <!-- Filtro de datos para la tabla -->
+    <div *ngIf="filtrarDatos">
+        <mat-icon class="icon"> search </mat-icon>
+        <input #filtroInput placeholder="Filtro" (keyup)="applyFilter(filtroInput.value)" />
+    </div>
+    <!-- Tabla de datos -->
+    <div class="section">
+        <table mat-table [dataSource]="dataSource" matSort>
+            <caption> RediTableComponent </caption>
+            <!-- Contenedor de selección -->
+            <ng-container *ngIf="seleccionarFilas" matColumnDef="select">
+                <!-- Encabezado de tabla con selección de registros -->
+                <th scope="col" mat-header-cell *matHeaderCellDef>
+                    <!-- controles de selección -->
+                    <mat-checkbox (change)="$event ? alternarSeleccion() : null"
+                        [checked]="dataTable.seleccion.hasValue() && todoSeleccionado()"
+                        [indeterminate]="dataTable.seleccion.hasValue() && !todoSeleccionado()">
+                    </mat-checkbox>
+                </th>
+                <!-- Selector de fila -->
+                <td mat-cell *matCellDef="let row">
+                    <mat-checkbox (change)="$event ? dataTable.seleccion.toggle(row) : null"
+                        [checked]="dataTable.seleccion.isSelected(row)" [aria-label]="validarEtiqueta(row)">
+                    </mat-checkbox>
+                </td>
+            </ng-container>
+            <!-- Ordenamiento de encabezados -->
+            <ng-container>
+                <ng-container [matColumnDef]="column.identificador" *ngFor="let column of datosColumna">
+                    <!-- Definición de encabezado por columna -->
+                    <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header
+                        [attr.disabled]="ordenamientoActivo()">
+                        {{column.etiqueta ||
+                        column.identificador}} </th>
+                    <!-- Creación de identificadores de tabla -->
+                    <td mat-cell *matCellDef="let element"> {{element[column.identificador]}} </td>
+                </ng-container>
+            </ng-container>
+            <!-- Definición de acciones  -->
+            <ng-container *ngIf="verAcciones()" matColumnDef="actions" stickyEnd>
+                <th scope="col" mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
+                <!-- Definición de acciones por fila -->
+                <td mat-cell *matCellDef="let element">
+                    <!-- Configuración de botones de acción -->
+                    <button mat-icon-button color="primary" *ngFor="let action of dataTable.acciones"
+                        (click)="action?.emiter?.emit({target:element,source:dataSource})"
+                        [disabled]="deshabilitarAccion(action,element)">
+                        <!-- Icono dinámico de la acción -->
+                        <mat-icon [ngClass]="deshabilitarAccion(action,element) ? 'disabled-button' : ''">
+                            {{action.icono || 'apps'}}
+                        </mat-icon>
+                    </button>
+                </td>
+            </ng-container>
+            <!-- Definición de columnas -->
+            <tr mat-header-row *matHeaderRowDef="columnas; sticky:true"></tr>
+            <!-- Estilizados alternado de filas -->
+            <tr mat-row *matRowDef="let row; columns: columnas;let rowNum = index" [class.odd]="rowNum%2"
+                [class.even]="!(rowNum%2)" (click)="onRowSelect(row)"></tr>
+        </table>
+    </div>
+    <!-- Paginador de datos -->
+    <div [ngClass]="paginar ? 'visible' : 'hidden'">
+        <!-- Configuración de Paginador -->
+        <mat-paginator [pageSizeOptions]="[5,10,20,50,100]" showFirstLastButtons aria-label="Seleccione una pagina">
+        </mat-paginator>
+    </div>
+</div>

package/RediTable/src/modules/redi-table/redi-table.component.spec.ts

@@ -0,0 +1,162 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RediTableComponent } from './redi-table.component';
+import { RediTableModule } from '../redi-table.module';
+
+import { CUSTOM_ELEMENTS_SCHEMA, Component, SimpleChange } from '@angular/core';
+
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableModule } from '@angular/material/table';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+import { CommonModule } from '@angular/common';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DataTable } from '../../models/interfaces/data-table';
+import { ColumnDefinition } from '../../models/interfaces/column-definition';
+import { RowAction } from '../../models/interfaces/row-action';
+import { SelectionModel } from '@angular/cdk/collections';
+import { MatSort } from '@angular/material/sort';
+
+describe('RediTableComponent', () => {
+  let component: RediTableComponent<Pais>;
+  let fixture: ComponentFixture<RediTableComponent<Pais>>;
+
+  interface Pais {
+    id: string;
+    nombre: string;
+    iso: string;
+    fechaAlta: string;
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RediTableComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      imports: [
+        CommonModule,
+        MatPaginatorModule,
+        MatIconModule,
+        MatTableModule,
+        ScrollingModule,
+        MatCheckboxModule,
+        BrowserAnimationsModule]
+    })
+      .compileComponents();
+    fixture = TestBed.createComponent(RediTableComponent<Pais>);
+    component = fixture.componentInstance;
+    component.dataTable = {
+      dataSource: [
+        { id: "01", nombre: "México", iso: "MX", fechaAlta: "13/10/2021" } as Pais,
+        { id: "02", nombre: "Estados Unidos", iso: "EU", fechaAlta: "13/10/2021" } as Pais,
+        { id: "03", nombre: "El Salvador", iso: "SV", fechaAlta: "13/10/2021" } as Pais,
+        { id: "04", nombre: "Guatemala", iso: "GT", fechaAlta: "22/10/2021" } as Pais,
+        { id: "05", nombre: "Puerto Rico", iso: "PR", fechaAlta: "15/10/2021" } as Pais,
+        { id: "06", nombre: "República de Cuba", iso: "CU", fechaAlta: "15/10/2021" } as Pais,
+        { id: "07", nombre: "Venezuela", iso: "VE", fechaAlta: "13/10/2021" } as Pais,
+        { id: "08", nombre: "Colombia", iso: "COL", fechaAlta: "22/10/2021" } as Pais,
+        { id: "09", nombre: "Argentina", iso: "ARG", fechaAlta: "15/10/2021" } as Pais,
+        { id: "10", nombre: "Belice", iso: "BZ", fechaAlta: "15/10/2021" } as Pais
+      ],
+      columnas: [{ identificador: 'id', etiqueta: 'ID' } as ColumnDefinition,
+      { identificador: 'nombre', etiqueta: 'Nombre' } as ColumnDefinition,
+      { identificador: 'iso', etiqueta: 'ISO' } as ColumnDefinition,
+      { identificador: 'fechaAlta', etiqueta: 'Fecha de alta' } as ColumnDefinition],
+      acciones: [
+        {
+          icono: 'delete_outline',
+          accion: (itemRow, dataSource) => {
+            dataSource?.data.splice(dataSource?.data.indexOf(itemRow), 1);
+            dataSource?._updateChangeSubscription()
+          }
+        } as RowAction,
+        {
+          icono: 'edit',
+          accion: (itemRow, dataSource) => {
+            console.log(dataSource)
+          }
+        } as RowAction],
+        seleccion: new SelectionModel<Pais>(true, [])
+    } as DataTable<Pais>;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('cambio de estados', () => {
+    component.paginar = true;
+    component.ngOnChanges({ paginar: new SimpleChange(false, component.paginar, true) });
+    fixture.detectChanges();
+
+    component.filtrarDatos = true;
+    component.ngOnChanges({ filtrarDatos: new SimpleChange(false, component.filtrarDatos, true) });
+    fixture.detectChanges();
+
+    component.filtrarDatos = false;
+    component.ngOnChanges({ filtrarDatos: new SimpleChange(true, component.filtrarDatos, false) });
+    fixture.detectChanges();
+
+    component.ordenarDatos = true;
+    component.ngOnChanges({ ordenarDatos: new SimpleChange(false, component.ordenarDatos, true) });
+    fixture.detectChanges();
+
+    component.seleccionarFilas = true;
+    component.ngOnChanges({ seleccionarFilas: new SimpleChange(false, component.seleccionarFilas, true) });
+    fixture.detectChanges();
+
+    component.seleccionarFilas = false;
+    component.ngOnChanges({ seleccionarFilas: new SimpleChange(true, component.seleccionarFilas, false) });
+    fixture.detectChanges();
+
+
+    component.paginar = false;
+    component.ngOnChanges({ paginar: new SimpleChange(true, component.paginar, false) });
+    fixture.detectChanges();
+    expect(component.paginar).toBe(false);
+
+    component.filtrarDatos = false;
+    component.ngOnChanges({ filtrarDatos: new SimpleChange(true, component.filtrarDatos, false) });
+    fixture.detectChanges();
+
+    component.ordenarDatos = false;
+    component.sort = {} as MatSort;
+    component.ngOnChanges({ ordenarDatos: new SimpleChange(true, component.ordenarDatos, false) });
+    fixture.detectChanges();
+  });
+
+  it('filtrar datos',()=>{
+    expect(component.applyFilter('Me'));
+
+    component.paginar = true;
+    component.ngOnChanges({ paginar: new SimpleChange(false, component.paginar, true) });
+    fixture.detectChanges();
+    expect(component.paginar).toBe(true);
+
+    expect(component.applyFilter('Me'));
+  });
+
+  it('seleccion de filas', () => {
+    expect(component.alternarSeleccion());
+    component.dataTable.seleccion.select(...component.dataTable.dataSource);
+    expect(component.alternarSeleccion());
+
+  });
+
+  
+  it('metodos en general', () => {
+    expect(component.validarEtiqueta(false));
+    component.dataTable.columnas=[];
+    expect(component.ngAfterViewInit())
+  });
+
+});
+
+
+interface Pais {
+  id: number;
+  nombre: string;
+}