tailjng 0.1.6 → 0.1.7

package/src/lib/components/table/table-complete/complete-table.component.ts

@@ -1,172 +1,209 @@
-// TODO: BETA - IN DEVELOPMENT
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { LucideAngularModule } from 'lucide-angular';
-import { JAlertDialogService, JAlertToastService, JConverterCrudService, JGenericCrudService, JIconsService, JTransformService, TableColumn } from 'tailjng';
+import {
+  JAlertDialogService,
+  JAlertToastService,
+  JConverterCrudService,
+  JGenericCrudService,
+  JTransformService,
+  TableColumn} from 'tailjng';
 import { JButtonComponent } from '../../button/button.component';
 import { JInputCheckboxComponent } from '../../checkbox/checkbox-input/input-checkbox.component';
 import { JInputComponent } from '../../input/input/input.component';
 import { JDropdownSelectComponent } from '../../select/select-dropdown/dropdown-select.component';
-
+import type {
+  CompleteTableEquivalenceConfigs,
+  CompleteTableEquivalenceMaps,
+  CompleteTableSortDirection} from './complete-table.types';
+import {
+  applyColumnDefaults,
+  filterDisplayDataBySearch,
+  findRowIndexByJsonSnapshot,
+  flattenObject,
+  formatCellDisplayValue,
+  getStaticTableEquivalenceData,
+  hasEquivalenceConfig,
+  isBooleanValue,
+  isDateValue,
+  parseCellEditValue,
+  rebuildObject,
+  resolveStaticTableSortState,
+  setNestedValue as assignNestedValue,
+  sortDisplayDataInPlace,
+  toggleNestedBooleanOnItem} from './complete-table.util';
+import { Icons } from '../../.config/icons/icons.lucide';
+import { JIconComponent } from '../../icon/icon.component';
+
+export type {
+  CompleteTableEquivalenceConfig,
+  CompleteTableEquivalenceConfigs,
+  CompleteTableEquivalenceData,
+  CompleteTableEquivalenceMaps,
+  CompleteTableEquivalenceOption,
+  CompleteTableGetCellValueFn,
+  CompleteTableSortDirection} from './complete-table.types';
+export {
+  applyColumnDefaults,
+  filterDisplayDataBySearch,
+  findRowIndexByJsonSnapshot,
+  flattenObject,
+  formatCellDisplayValue,
+  getStaticTableEquivalenceData,
+  hasEquivalenceConfig,
+  isBooleanValue,
+  isDateValue,
+  parseCellEditValue,
+  rebuildObject,
+  resolveStaticTableSortState,
+  setNestedValue,
+  sortDisplayDataInPlace,
+  toggleNestedBooleanOnItem} from './complete-table.util';
+
+/**
+ * Static-data table for bulk entry dialogs (search, sort, inline edit, save many).
+ *
+ * Install: `npx tailjng add table-complete`
+ *
+ * Logic lives in `complete-table.util.ts`; shared cell helpers reuse `table-crud-complete` utils.
+ */
 @Component({
   selector: 'JCompleteTable',
   standalone: true,
-  imports: [CommonModule, FormsModule, LucideAngularModule, JButtonComponent, JInputCheckboxComponent, JInputComponent, JDropdownSelectComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    JIconComponent,
+    JButtonComponent,
+    JInputCheckboxComponent,
+    JInputComponent,
+    JDropdownSelectComponent,
+  ],
   templateUrl: './complete-table.component.html',
   styleUrl: './complete-table.component.scss',
 })
 export class JCompleteTableComponent implements OnInit {
+  readonly Icons = Icons;
 
   Math = Math;
 
+  // =====================================================
+  // Inputs / outputs
+  // =====================================================
+
   @Input() endpoint!: string;
   @Input() mainEndpoint!: string;
-  @Output() closeDialog: EventEmitter<void> = new EventEmitter<void>();
+  @Output() closeDialog = new EventEmitter<void>();
 
   @Input() staticData: any[] = [];
   @Input() columns: TableColumn<any>[] = [];
 
-  displayData: any[] = [];
+  @Input() isOptions = true;
 
-  // Tipo de opciones
-  @Input() isOptions: boolean = true;
+  @Input() equivalenceConfigs: CompleteTableEquivalenceConfigs = {};
+  @Input() equivalences: CompleteTableEquivalenceMaps = {};
 
-  // Buscador
-  searchQuery: string = '';
-  searchPlaceholder: string = 'Buscar...';
-  isLoadingSearch: boolean = false;
+  // =====================================================
+  // State
+  // =====================================================
+
+  displayData: any[] = [];
+
+  searchQuery = '';
+  searchPlaceholder = 'Buscar...';
+  isLoadingSearch = false;
 
-  // Ordenamiento
   sortColumn: string | null = null;
-  sortDirection: 'asc' | 'desc' | 'none' = 'none';
+  sortDirection: CompleteTableSortDirection = 'none';
   sortingColumn: string | null = null;
-  isLoadingSort: boolean = false;
+  isLoadingSort = false;
 
-  // Edicion
   editingRowIndex: number | null = null;
-  @Input() equivalenceConfigs: { [key: string]: { keyColumnSearch: string; keyReturn: string; keyAlternate?: string } } = {};
-  @Input() equivalences: any = {};
+  editingRowItem: any = null;
 
   constructor(
-    public readonly iconsService: JIconsService,
     public readonly transformService: JTransformService,
     private readonly converterService: JConverterCrudService,
     private readonly alertDialogService: JAlertDialogService,
     private readonly alertToastService: JAlertToastService,
     private readonly genericService: JGenericCrudService,
-  ) { }
-
+  ) {}
 
   ngOnInit(): void {
-    this.displayData = this.staticData.map(item => this.rebuildObject(item)) ?? [];
-
+    this.displayData = this.staticData.map((item) => this.rebuildObject(item)) ?? [];
     this.columnDefaults();
   }
 
-  // Establece valores por defecto para las columnas si no están definidos
-  columnDefaults() {
-    this.columns.forEach(column => {
-      if (column.visible === undefined) {
-        column.visible = true;
-      }
-
-      if (column.sortable === undefined) {
-        column.sortable = true;
-      }
-
-      if (column.isSearchable === undefined) {
-        column.isSearchable = true;
-      }
-    });
+  // =====================================================
+  // Columns / cell values
+  // =====================================================
+
+  columnDefaults(): void {
+    applyColumnDefaults(this.columns);
   }
 
-  // Método para obtener el valor de las celdas dinámicamente
   getValue(item: any, column: TableColumn<any>, raw = false): any {
-    let value: any;
-
-    // Si existe un valueGetter, se usa directamente
-    if (typeof column.valueGetter === 'function') {
-      value = column.valueGetter(item);
-    } else {
-      // Si no, se busca el valor por key (con soporte para claves anidadas)
-      const keys = column.key.split('.');
-      value = item;
-
-      for (const key of keys) {
-        if (value != null) {
-          value = value[key];
-        } else {
-          value = null;
-          break;
-        }
-      }
+    if (raw) {
+      return parseCellEditValue(item, column, this.converterService);
     }
 
-    if (raw) {
-      // DESFORMATEA SI SE ESTÁ EDITANDO
-      return this.converterService.parseData(value, column);
-    } else {
+    return formatCellDisplayValue(item, column, this.converterService);
+  }
 
-      // Si value es null o undefined, retornar 'S/N'
-      if (value === null || value === undefined) {
-        return 'S/N';
-      }
+  isBoolean(value: any): boolean {
+    return isBooleanValue(value);
+  }
 
-      // Devuelve el valor formateado para mostrar en tabla
-      const formatted = this.converterService.formatData(value, column);
-      return formatted ?? value;
-    }
+  isDate(value: any): boolean {
+    return isDateValue(value);
   }
 
+  flattenObject(obj: any, prefix = ''): any {
+    return flattenObject(obj, prefix);
+  }
+
+  rebuildObject(flatObj: any): any {
+    return rebuildObject(flatObj);
+  }
 
   // =====================================================
-  // Metodos principales de la tabla
+  // Save / edit / delete
   // =====================================================
 
-  // Método para guardar los registros actuales
   saveRecords(): void {
-
     if (this.displayData.length > 0) {
-
       this.alertDialogService.AlertDialog({
         type: 'question',
         title: '¿Estás seguro de que deseas guardar los registros?',
-        description: 'Asegúrate de verificar que los datos sean correctos, tenga en cuenta que no se tiene el control total de las validaciones como el formulario unitario.',
-        onConfirm: async () => new Promise<void>((resolve, reject) => {
-
-          this.genericService.createMany<any[]>({ endpoint: this.mainEndpoint, data: this.displayData }).subscribe({
-            next: (response) => {
-
-              this.alertToastService.AlertToast({
-                type: 'success',
-                title: 'Registros guardados',
-                description: response.message,
-              });
-
-              resolve();
-
-              // Cerrar dialog
-              this.closeDialog.emit();
-            },
-            error: reject
-          })
-
-        }),
-        onCancel: () => { console.log('Guardado cancelado'); }
-      })
-
-    } else {
-      this.alertToastService.AlertToast({
-        type: 'info',
-        title: 'No hay registros',
-        description: 'No hay registros para guardar.',
-      });
+        description:
+          'Asegúrate de verificar que los datos sean correctos, tenga en cuenta que no se tiene el control total de las validaciones como el formulario unitario.',
+        onConfirm: async () =>
+          new Promise<void>((resolve, reject) => {
+            this.genericService
+              .createMany<any[]>({ endpoint: this.mainEndpoint, data: this.displayData })
+              .subscribe({
+                next: (response) => {
+                  this.alertToastService.AlertToast({
+                    type: 'success',
+                    title: 'Registros guardados',
+                    description: response.message});
+
+                  resolve();
+                  this.closeDialog.emit();
+                },
+                error: reject});
+          }),
+        onCancel: () => {
+          console.log('Guardado cancelado');
+        }});
+      return;
     }
-  }
 
-  // Editar registro
-  editingRowItem: any = null;
+    this.alertToastService.AlertToast({
+      type: 'info',
+      title: 'No hay registros',
+      description: 'No hay registros para guardar.'});
+  }
 
   onEdit(item: any): void {
     if (this.editingRowItem === item) {
@@ -176,22 +213,16 @@ export class JCompleteTableComponent implements OnInit {
     }
   }
 
-  // Eliminar registro
   onDelete(index: number): void {
-
     this.alertDialogService.AlertDialog({
       type: 'question',
       title: 'Confirmar eliminación',
       description: '¿Estás seguro de que deseas eliminar este registro?',
       onConfirm: () => {
-        // Encuentra el objeto real que corresponde en staticData
         const itemToDelete = this.displayData[index];
-
-        // Borrar de displayData
         this.displayData.splice(index, 1);
 
-        // Buscar y borrar de staticData
-        const indexInStatic = this.staticData.findIndex(item => {
+        const indexInStatic = this.staticData.findIndex((item) => {
           const rebuilt = this.rebuildObject(item);
           return JSON.stringify(rebuilt) === JSON.stringify(itemToDelete);
         });
@@ -200,321 +231,142 @@ export class JCompleteTableComponent implements OnInit {
           this.staticData.splice(indexInStatic, 1);
         }
       },
-      onCancel: () => { console.log('Eliminación cancelada'); }
-    })
-
+      onCancel: () => {
+        console.log('Eliminación cancelada');
+      }});
   }
 
   // =====================================================
-  // Funcionalidad de editar en tabla
+  // Inline editing
   // =====================================================
 
-  // Verifica si una columna tiene configuración de equivalencia
   hasEquivalence(columnKey: string): boolean {
-    for (const [, conf] of Object.entries(this.equivalenceConfigs || {})) {
-      if (conf && conf.keyColumnSearch === columnKey) {
-        return true;
-      }
-    }
-    return false;
+    return hasEquivalenceConfig(this.equivalenceConfigs, columnKey);
   }
 
-  // Obtiene los datos de equivalencia para una columna específica
-  getEquivalenceData(columnKey: string): {
-    keyReturn: string;
-    options: { key: any; label: string }[];
-  } | null {
-    for (const [name, conf] of Object.entries(this.equivalenceConfigs || {})) {
-      if (conf && conf.keyColumnSearch === columnKey) {
-        const keyReturn = conf.keyReturn;
-        const idMap = (this.equivalences as any)[keyReturn];
-        if (!idMap) return null;
-
-        const options = Object.entries(idMap).map(([id, label]) => ({
-          key: +id,
-          label: String(label),
-        }));
-
-        return {
-          keyReturn,
-          options,
-        };
-      }
-    }
-    return null;
+  getEquivalenceData(columnKey: string): ReturnType<typeof getStaticTableEquivalenceData> {
+    return getStaticTableEquivalenceData(this.equivalenceConfigs, this.equivalences, columnKey);
   }
 
-
-
-  // Maneja el cambio de equivalencia en un item
   onEquivalenceChange(item: any, columnKey: string, newId: any): void {
     const eqData = this.getEquivalenceData(columnKey);
-    if (!eqData) return;
+    if (!eqData) {
+      return;
+    }
 
     const newLabel = eqData.options.find((opt) => opt.key == newId)?.label ?? null;
-
-    this.setNestedValue(item, columnKey, newLabel);
+    assignNestedValue(item, columnKey, newLabel);
     item[eqData.keyReturn] = newId;
 
-    const index = this.displayData.findIndex(
-      (row) => JSON.stringify(row) === JSON.stringify(item)
-    );
+    const index = findRowIndexByJsonSnapshot(this.displayData, item);
     if (index !== -1) {
       this.staticData[index] = this.flattenObject(item);
     }
   }
 
-
-  // Maneja el cambio de valor en un campo editable
   onFieldChange(item: any, columnKey: string, value: any): void {
-    this.setNestedValue(item, columnKey, value);
-    const index = this.displayData.findIndex(row => JSON.stringify(row) === JSON.stringify(item));
+    assignNestedValue(item, columnKey, value);
+
+    const index = findRowIndexByJsonSnapshot(this.displayData, item);
     if (index !== -1) {
       this.staticData[index] = this.flattenObject(item);
     }
   }
 
-
-  // Establece un valor anidado en un objeto según la clave de columna
   setNestedValue(item: any, columnKey: string, value: any): void {
-    const keys = columnKey.split('.');
-    let current = item;
-
-    for (let i = 0; i < keys.length; i++) {
-      const key = keys[i];
-      if (i === keys.length - 1) {
-        current[key] = value;
-      } else {
-        if (!current[key]) {
-          current[key] = {};
-        }
-        current = current[key];
-      }
-    }
+    assignNestedValue(item, columnKey, value);
   }
 
   // =====================================================
-  // Cambiar estado en campos booleanos
+  // Checkbox (local toggle)
   // =====================================================
 
-  // Método para cambiar el estado de un checkbox
   onCheckboxChange(item: any, column: TableColumn<any>): void {
     const newValue = this.getValue(item, column);
+    toggleNestedBooleanOnItem(item, column, newValue);
 
-    // Invierte el valor
-    const updatedValue = !newValue;
-
-    const keys = column.key.split('.');
-    let current = item;
-
-    for (let i = 0; i < keys.length; i++) {
-      const key = keys[i];
-
-      if (i === keys.length - 1) {
-        current[key] = updatedValue;
-      } else {
-        if (!current[key]) {
-          current[key] = {};
-        }
-        current = current[key];
-      }
-    }
-
-    // Buscar índice real
-    const index = this.displayData.findIndex((row) => {
-      return JSON.stringify(row) === JSON.stringify(item);
-    });
-
+    const index = findRowIndexByJsonSnapshot(this.displayData, item);
     if (index !== -1) {
       this.staticData[index] = this.flattenObject(item);
     }
   }
 
-
-
   // =====================================================
-  // Buscador
+  // Search
   // =====================================================
 
-  // Ejecuta búsqueda al cambiar el valor del input.
   onSearch(): void {
     this.isLoadingSearch = true;
 
     setTimeout(() => {
-      if (!this.searchQuery?.trim()) {
-        // Si está vacío, mostrar todo
-        this.displayData = this.staticData.map(item => this.rebuildObject(item));
-      } else {
-        // Campos sobre los que buscar
-        const searchableKeys = this.columns
-          .filter((col) => col.isSearchable)
-          .map(col => col.key);
-
-        this.displayData = this.staticData
-          .map(item => this.rebuildObject(item))
-          .filter(item => {
-            return searchableKeys.some(key => {
-              const column = this.columns.find(col => col.key === key);
-              const value = column ? this.getValue(item, column) : undefined;
-              return value?.toString().toLowerCase().includes(this.searchQuery.trim().toLowerCase());
-            });
-          });
-      }
+      this.displayData = filterDisplayDataBySearch(
+        this.staticData,
+        this.columns,
+        this.searchQuery,
+        (row, column) => this.getValue(row, column),
+      );
 
       this.isLoadingSearch = false;
     }, 300);
   }
 
-  // Limpia el campo de búsqueda y vuelve a cargar los datos originales.
   clearSearch(): void {
     this.searchQuery = '';
     this.onSearch();
   }
 
-
   // =====================================================
-  // Ordenamiento
+  // Sort
   // =====================================================
 
-  // Ejecuta ordenamiento al hacer clic en cabecera.
   onSort(column: TableColumn<any>): void {
-    if (!column.sortable) return;
+    if (!column.sortable) {
+      return;
+    }
 
     this.sortingColumn = column.key;
     this.isLoadingSort = true;
 
     setTimeout(() => {
-      if (this.sortColumn === column.key) {
-        if (this.sortDirection === 'asc') {
-          this.sortDirection = 'desc';
-        } else if (this.sortDirection === 'desc') {
-          this.sortDirection = 'none';
-          this.sortColumn = null;
-        } else {
-          this.sortDirection = 'asc';
-        }
-      } else {
-        this.sortColumn = column.key;
-        this.sortDirection = 'asc';
-      }
-
+      const next = resolveStaticTableSortState(column, this.sortColumn, this.sortDirection);
+      this.sortColumn = next.sortColumn;
+      this.sortDirection = next.sortDirection;
       this.sortData();
-
       this.isLoadingSort = false;
     }, 300);
   }
 
-
-  // Ordena los datos estáticos según sortColumn y sortDirection.
   sortData(): void {
     if (!this.sortColumn || this.sortDirection === 'none') {
-      // Restaurar orden original si no hay ordenamiento
       this.onSearch();
       return;
     }
 
-    const column = this.columns.find(col => col.key === this.sortColumn);
-    if (!column) return;
-
-    this.displayData.sort((a, b) => {
-      const valA = this.getValue(a, column);
-      const valB = this.getValue(b, column);
-
-      if (valA === 'S/N' && valB !== 'S/N') return -1;
-      if (valB === 'S/N' && valA !== 'S/N') return 1;
-
-      if (valA == null || valB == null) return 0;
-
-      const compA = valA.toString().toLowerCase();
-      const compB = valB.toString().toLowerCase();
-
-      if (compA < compB) return this.sortDirection === 'asc' ? -1 : 1;
-      if (compA > compB) return this.sortDirection === 'asc' ? 1 : -1;
-      return 0;
-    });
+    sortDisplayDataInPlace(
+      this.displayData,
+      this.sortColumn,
+      this.sortDirection,
+      this.columns,
+      (row, column) => this.getValue(row, column),
+    );
   }
 
-  // Verifica si la tabla está en proceso de ordenamiento o búsqueda.
   isLoading(type: 'sort' | 'search'): boolean {
     if (type === 'sort') {
       return this.isLoadingSort;
-    } else if (type === 'search') {
+    }
+
+    if (type === 'search') {
       return this.isLoadingSearch;
     }
+
     return false;
   }
 
-  // Maneja el evento de ordenamiento al presionar Enter o Espacio en la cabecera.
   onSortKeyPress(event: KeyboardEvent, column: TableColumn<any>): void {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       this.onSort(column);
     }
   }
-
-  // =====================================================
-  // Prosesamiento de datos
-  // =====================================================
-
-  // Obtener el valor de las celdas para identificar un campo booleano
-  isBoolean(value: any): boolean {
-    return typeof value === 'boolean';
-  }
-
-  // Obtener el valor de las celdas para identificar un campo de fecha
-  isDate(value: any): boolean {
-    return value instanceof Date || (typeof value === 'string' && !isNaN(Date.parse(value)));
-  }
-
-  // Obtener los datos planos
-  flattenObject(obj: any, prefix: string = ''): any {
-    let result: any = {};
-
-    for (const key of Object.keys(obj)) {
-      const value = obj[key];
-      const prefixedKey = prefix ? `${prefix}.${key}` : key;
-
-      if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
-        Object.assign(result, this.flattenObject(value, prefixedKey));
-      } else {
-        result[prefixedKey] = value;
-      }
-    }
-
-    return result;
-  }
-
-  // Reconstruir el objeto a partir de los datos planos
-  rebuildObject(flatObj: any): any {
-    const result: any = {};
-
-    for (const key in flatObj) {
-      if (!Object.prototype.hasOwnProperty.call(flatObj, key)) continue;
-
-      const value = flatObj[key];
-
-      if (key.includes('.')) {
-        const parts = key.split('.');
-        let current = result;
-
-        for (let i = 0; i < parts.length; i++) {
-          const part = parts[i];
-
-          if (i === parts.length - 1) {
-            current[part] = value;
-          } else {
-            if (!current[part]) {
-              current[part] = {};
-            }
-            current = current[part];
-          }
-        }
-      } else {
-        result[key] = value;
-      }
-    }
-
-    return result;
-  }
-
-}
+}