@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/dropi-table/dropi-table.component.ts

@@ -9,10 +9,14 @@ import {
   ViewChildren,
   QueryList,
   SimpleChanges,
-} from '@angular/core';
-import { CommonModule, DatePipe } from '@angular/common';
-import { FormControl } from '@angular/forms';
-import { DropiPaginatorComponent } from '../dropi-paginator/dropi-paginator.component';
+  Inject,
+  Pipe,
+  PipeTransform,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule, DatePipe } from "@angular/common";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { DropiPaginatorComponent } from "../dropi-paginator/dropi-paginator.component";
 import {
   DropiTableAction,
   DropiTableBackendParams,
@@ -21,244 +25,97 @@ import {
   DropiTableRow,
   SortParams,
   TypedField,
-} from '@app/utilities/interfaces/ui/dropi-table.interface';
-import { IconComponent } from '../icon/icon.component';
-import { DropiCheckboxComponent } from '../dropi-checkbox/dropi-checkbox.component';
-import { CurrencyComponent } from '@app/components/currency/currency.component';
-import { DropiTagComponent } from '../dropi-tag/dropi-tag.component';
-import { CarrierImageUrl } from '@app/utilities/pipes/carrier-image-url.pipe';
-import { TranslateModule } from '@ngx-translate/core';
-import { Subject, Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-import { InputComponent } from '../input/input.component';
-import { SpinnerComponent } from '@app/components/spinner/spinner.component';
-import { TooltipModule } from 'primeng/tooltip';
-import { CountryFlagsComponent } from '../country-flags/country-flags.component';
-import { DropiAvatarsComponent } from '../dropi-avatars/dropi-avatars.component';
+} from "../../utilities/interfaces/ui/dropi-table.interface";
+import { IconComponent } from "../icon/icon.component";
+import { DropiCheckboxComponent } from "../dropi-checkbox/dropi-checkbox.component";
+import { DropiTagComponent } from "../dropi-tag/dropi-tag.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { Subject, Subscription } from "rxjs";
+import { debounceTime } from "rxjs/operators";
+import { InputComponent } from "../input/input.component";
+import { TooltipModule } from "primeng/tooltip";
+import { CountryFlagsComponent } from "../country-flags/country-flags.component";
+import { DropiAvatarsComponent } from "../dropi-avatars/dropi-avatars.component";
 
 @Component({
-  selector: 'app-dropi-table',
+  selector: "currency",
+  standalone: true,
+  template: "{{value}}",
+})
+export class CurrencyComponentStub {
+  @Input() value: any;
+}
+
+@Pipe({
+  name: "carrierImageUrl",
+  standalone: true,
+})
+export class CarrierImageUrlStub implements PipeTransform {
+  transform(value: any): string {
+    return value;
+  }
+}
+
+@Component({
+  selector: "app-spinner",
+  standalone: true,
+  template: "Loading...",
+})
+export class SpinnerComponentStub {}
+
+@Component({
+  selector: "app-dropi-table",
   standalone: true,
   imports: [
     CommonModule,
+    ReactiveFormsModule,
     DropiPaginatorComponent,
     IconComponent,
     DropiCheckboxComponent,
-    CurrencyComponent,
+    CurrencyComponentStub,
     DatePipe,
     DropiTagComponent,
-    CarrierImageUrl,
+    CarrierImageUrlStub,
     TranslateModule,
     InputComponent,
-    SpinnerComponent,
+    SpinnerComponentStub,
     TooltipModule,
     CountryFlagsComponent,
     DropiAvatarsComponent,
   ],
-  templateUrl: './dropi-table.component.html',
-  styleUrls: ['./dropi-table.component.scss'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./dropi-table.component.html",
+  styleUrls: ["./dropi-table.component.scss"],
 })
 export class DropiTableComponent implements OnInit {
-  /**
-   * Encabezados de la tabla Dropi.
-   *
-   * Este arreglo define las columnas que se mostrarán en la tabla,
-   * donde cada elemento es un objeto de tipo `DropiTableColumn` que
-   * especifica las propiedades y configuración de cada columna.
-   *
-   *   key: Identificador de la columna
-   *   label: Texto a mostrar en la columna
-   *   sortable: Boleano que indica si la columna se puede ordenar
-   *
-   * @type {DropiTableColumn[]}
-   * @see DropiTableColumn
-   */
   @Input() public headers: DropiTableColumn[] = [];
-
-  /**
-   * Datos que se mostrarán en la tabla.
-   *
-   * Es importante que cada key del objeto dentro del arreglo coincida con el key del header
-   * Si en la configuracion de la tabla el parametro `showActionsPerRow` esta en `true` se deben
-   * incluir las acciones ( DropiTableAction ) por cada una de las filas, esto para los casos en que
-   * las acciones de las filas varien entre si.
-   * @example
-   * ```typescript
-   * data = [
-   * {
-    "id": {
-        "type": "text",
-        "value": 0
-    },
-    "name": {
-        "type": "text",
-        "value": "Laptop"
-    },
-    "price": {
-        "type": "currency",
-        "value": 1500
-    },
-    "createdAt": {
-        "type": "date",
-        "value": "2025-06-02T14:23:45"
-    },
-    "statusTag": {
-        "type": "tag",
-        "value": "some text: 0",
-        "typeTag": "success"
-    },
-    "carrier": {
-        "type": "carrier",
-        "value": "Envía"
-    },
-    "textIcon": {
-        "type": "textIcon",
-        "value": "Icono texto",
-        "icon": "Location-market"
-    },
-    "statusDot": {
-        "type": "status",
-        "status": "low",
-        "value": "text low"
-    },
-    "textLink": {
-        "type": "textLink",
-        "url": "https://www.google.com/",
-        "urlText": "google",
-        "value": "0 Some text"
-    },
-    "disableCheckbox": true
-}];
-   * ```
-   * @type {DropiTableRow[]}
-   * @see DropiTableRow
-   */
   @Input() public data: DropiTableRow[] = [];
-
   @Input() public childData: DropiTableRow[] = [];
-
   @Input() public visibleRowsChildrens: DropiTableRow[] = [];
-
-  /**
-   * Configuración personalizada para la tabla Dropi.
-   *\   * Este input permite definir las opciones y parámetros que controlan el comportamiento,
-   * la apariencia y las funcionalidades de la tabla Dropi. Debe recibir un objeto de tipo
-   * `DropiTableConfiguration` que contenga las propiedades necesarias para la configuración
-   * deseada.
-   *
-   *   rowActions: Acciones a mostrar en la columna final, si son mas de tres se mostrarán en un menu desplegable
-   *   pageSizeConfiguration: Array de numeros para la configuracion de items a mostrar
-   *   showCheckbox: Boleano para mostrar checkbox de seleccion de fila
-   *   showSearch: Boleano para mostrar buscador general
-   *   showPaginator: Boleano para mostrar la configuracion de paginacion ( Items por pagina y paginador )
-   *   showActionsPerRow: Booleano que determina si se va a tomar la confiugracion de acciones independente por cada fila
-   *                      si es `true` se deben configurar las acciones por cada una de las filas
-   *   emptyMessage: Muestra mensaje personalizado pata la tabla vacia, si no esta configurado
-   *                 su mensaje por defecto es `no data`.
-   *
-   * @type {DropiTableConfiguration}
-   * @see DropiTableConfiguration
-   */
   @Input() public dropiTableConfiguration: DropiTableConfiguration;
-  /**
-   * Configuración necesaria para la paginación por medio de un backend
-   *
-   * Este input permite definir los parámetros que controlan el comportamiento,
-   * la apariencia y las funcionalidades de la paginación de la tabla Dropi cuando
-   * se utiliza paginación en el backend. Debe recibir un objeto de tipo
-   * `DropiTableBackendParams` que contenga las propiedades necesarias para la configuración
-   * deseada.
-   *
-   *   currentPage: Página actual que se está mostrando
-   *   pageSize: Cantidad de elementos por página
-   *   nextPage: Siguiente página disponible
-   *   totalCount: Total de elementos disponibles
-   *   totalPages: Total de páginas calculadas
-   *   backendPagination: Booleano que indica si se debe paginar por backend.
-   *
-   * @type {DropiTableBackendParams}
-   * @see DropiTableBackendParams
-   */
-
   @Input() public dropiTableBackendParams: DropiTableBackendParams;
-
-  /**
-   * Indica si la tabla se encuentra en estado de carga.
-   *
-   * Cuando este valor es `true`, se puede mostrar un spinner o indicador visual
-   * para informar al usuario que los datos están siendo cargados o procesados.
-   * Necesario para las peticiones a un backend.
-   *
-   * @type {boolean}
-   * @default false
-   */
-
   @Input() public loading: boolean = false;
-
-  //para paginaciones que no tiene un total de paginas
-
   @Input() isCursorPagination: boolean = false;
-
-  /**
-   * Evento emitido cuando se seleccionan filas en la tabla.
-   *
-   * @event
-   * @type {EventEmitter<DropiTableRow[]>}
-   * @description Emite un arreglo de objetos `DropiTableRow` que representan las filas seleccionadas por el usuario.
-   */
   @Output() rowsSelected = new EventEmitter<DropiTableRow[]>();
-
-  /**
-   * Evento emitido cuando se hace clic en una acción de una fila de la tabla.
-   *
-   * @event
-   * @type {{ row: DropiTableRow; action: DropiTableAction }} - Objeto que contiene la fila seleccionada y la acción ejecutada.
-   */
-  @Output() actionClicked = new EventEmitter<{ row: DropiTableRow; action: DropiTableAction }>();
-
-  /**
-   * Evento emitido cuando se cambia de pagina
-   * Usar solo cuando se pagina por backend
-   * @event
-   * @type {number} - Se emite el numero de pagina seleccionada
-   */
-
+  @Output() actionClicked = new EventEmitter<{
+    row: DropiTableRow;
+    action: DropiTableAction;
+  }>();
   @Output() onPageChange = new EventEmitter<number>();
-
-  /**
-   * Evento emitido cuando se cambia la cantidad de items por pagina
-   * Usar solo cuando se pagina por backend
-   * @event
-   * @type {number} - Se emite el numero de la cantidad de items a mostrar
-   */
   @Output() onSizeChange = new EventEmitter<number>();
-
-  /**
-   * Evento emitido cuando se cambia la columna de ordenación
-   * Usar solo cuando se pagina por backend
-   * @event
-   * @type {SortParams} - Se emite el nombre de la columna y si es ascendente o descendente
-   */
   @Output() onSortChange = new EventEmitter<SortParams>();
-
-  /**
-   * Evento emitido cuando se realiza una búsqueda con paginación de backend
-   * @event
-   * @type {string} - Se emite el término de búsqueda
-   */
   @Output() onSearchChange = new EventEmitter<string>();
-
   @Output() expandChildren = new EventEmitter<{ row: DropiTableRow }>();
-  @ViewChildren(DropiCheckboxComponent) checkboxes!: QueryList<DropiCheckboxComponent>;
+  @ViewChildren(DropiCheckboxComponent)
+  checkboxes!: QueryList<DropiCheckboxComponent>;
 
   public currentPage: number = 1;
-  public totalPages: number;
+  public totalPages: number = 1;
   public dataToShow: DropiTableRow[] = [];
-  private sortColumn: string;
+  private sortColumn: string = "";
   public sortAsc: boolean = true;
   public hidePaginator: boolean = false;
-  private pageSize: number;
-  private actionsMenuRef: ElementRef | null;
+  public pageSize: number = 10;
   private selectedRows: DropiTableRow[] = [];
   private subscriptions: Subscription = new Subscription();
   private filterEvent: Subject<string> = new Subject();
@@ -266,37 +123,41 @@ export class DropiTableComponent implements OnInit {
   public hasActions: boolean = false;
   public hasShortActions: boolean = false;
 
+  constructor(@Inject(ElementRef) private el: ElementRef) {}
+
   ngOnInit(): void {
     this.hasActions =
       (this.dropiTableConfiguration?.rowActions &&
         this.dropiTableConfiguration.rowActions.length > 0) ||
       this.dropiTableConfiguration?.showActionsPerRow;
 
-    if (!this.dropiTableConfiguration.backendPagination) {
+    if (!this.dropiTableConfiguration?.backendPagination) {
       this.updateData();
-      if (this.dropiTableConfiguration.showSearch) {
+      if (this.dropiTableConfiguration?.showSearch) {
         this.filterEventSusbscribe();
         this.subscribeToSearch();
       }
       return;
     }
     this.setBackendParams();
-    // Subscribe to search for backend pagination
-    if (this.dropiTableConfiguration.showSearch && this.dropiTableConfiguration.backendPagination) {
+    if (
+      this.dropiTableConfiguration?.showSearch &&
+      this.dropiTableConfiguration?.backendPagination
+    ) {
       this.subscribeToSearchBackend();
     }
   }
 
   setBackendParams() {
-    this.totalPages = this.dropiTableBackendParams?.totalPages;
-    this.currentPage = this.dropiTableBackendParams?.currentPage;
-    this.pageSize = this.dropiTableBackendParams?.pageSize;
+    this.totalPages = this.dropiTableBackendParams?.totalPages || 1;
+    this.currentPage = this.dropiTableBackendParams?.currentPage || 1;
+    this.pageSize = this.dropiTableBackendParams?.pageSize || 10;
     this.dataToShow = this.data;
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['data']) {
-      if (!this.dropiTableConfiguration.backendPagination) {
+    if (changes["data"]) {
+      if (!this.dropiTableConfiguration?.backendPagination) {
         this.updateData();
         return;
       }
@@ -313,20 +174,14 @@ export class DropiTableComponent implements OnInit {
     this.pageData();
   }
 
-  @HostListener('document:click', ['$event'])
+  @HostListener("document:click", ["$event"])
   handleClickOutside(event: MouseEvent) {
     if (!this.hasActions) return;
-
-    const clickedInside = this.actionsMenuRef
-      ? this.actionsMenuRef.nativeElement.contains(event.target)
-      : false;
-    if (!clickedInside && this.actionsMenuRef) {
-      this.hideMenu();
-    }
+    this.hideMenu();
   }
 
   setPagination() {
-    if (!this.dropiTableConfiguration.showPaginator) return;
+    if (!this.dropiTableConfiguration?.showPaginator) return;
     if (!this.dropiTableConfiguration?.pageSizeConfiguration) {
       this.dropiTableConfiguration.pageSizeConfiguration = [5, 10, 20];
     }
@@ -344,29 +199,33 @@ export class DropiTableComponent implements OnInit {
 
   subscribeToSearchBackend() {
     this.subscriptions.add(
-      this.searchTerm.valueChanges.pipe(debounceTime(500)).subscribe((inputValue: string) => {
-        this.onSearchChange.emit(inputValue || '');
-      }),
+      this.searchTerm.valueChanges
+        .pipe(debounceTime(500))
+        .subscribe((inputValue: string) => {
+          this.onSearchChange.emit(inputValue || "");
+        }),
     );
   }
 
   filterEventSusbscribe() {
     this.subscriptions.add(
-      this.filterEvent.pipe(debounceTime(500)).subscribe((inputValue: string) => {
-        this.filteredData(inputValue);
-      }),
+      this.filterEvent
+        .pipe(debounceTime(500))
+        .subscribe((inputValue: string) => {
+          this.filteredData(inputValue);
+        }),
     );
   }
 
   getTotalPages() {
-    this.totalPages = Math.ceil(this.data.length / this.pageSize);
+    this.totalPages = Math.ceil((this.data?.length || 0) / this.pageSize);
   }
 
   onSort(column: DropiTableColumn) {
     if (!column?.sortable) return;
     this.sortAsc = this.sortColumn === column.key ? !this.sortAsc : false;
     this.sortColumn = column.key;
-    if (!this.dropiTableConfiguration.backendPagination) {
+    if (!this.dropiTableConfiguration?.backendPagination) {
       this.sortData();
       return;
     }
@@ -379,7 +238,7 @@ export class DropiTableComponent implements OnInit {
       return;
     }
     const start = (this.currentPage - 1) * this.pageSize;
-    this.dataToShow = this.data.slice(start, start + this.pageSize);
+    this.dataToShow = (this.data || []).slice(start, start + this.pageSize);
     this.hidePaginator = false;
     this.getTotalPages();
   }
@@ -388,26 +247,24 @@ export class DropiTableComponent implements OnInit {
     this.hideMenu();
     if (!this.sortColumn) return this.dataToShow;
     this.data.sort((a, b) => {
-      return (
-        (a[this.sortColumn]['value'] > b[this.sortColumn]['value'] ? 1 : -1) *
-        (this.sortAsc ? 1 : -1)
-      );
+      const valA = a[this.sortColumn]?.value;
+      const valB = b[this.sortColumn]?.value;
+      return (valA > valB ? 1 : -1) * (this.sortAsc ? 1 : -1);
     });
     this.pageData();
   }
 
   onSelectRow(checkValue: boolean, row: DropiTableRow) {
-    checkValue
-      ? this.selectedRows.push(row)
-      : (this.selectedRows = this.selectedRows.filter((rowToDelete) => {
-          return row.id.value !== rowToDelete.id.value;
-        }));
-
+    if (checkValue) {
+      this.selectedRows.push(row);
+    } else {
+      this.selectedRows = this.selectedRows.filter((r) => r !== row);
+    }
     this.rowsSelected.emit(this.selectedRows);
   }
 
   goToPage(page: number) {
-    if (!this.dropiTableConfiguration.backendPagination) {
+    if (!this.dropiTableConfiguration?.backendPagination) {
       this.currentPage = Number(page);
       this.pageData();
       return;
@@ -423,158 +280,57 @@ export class DropiTableComponent implements OnInit {
 
     this.hidePaginator = true;
     this.dataToShow = this.data.filter((row) => {
-      return Object.values(row).some((val: TypedField) =>
-        String(val.value).toLowerCase().includes(inputValue.toLowerCase()),
+      return Object.values(row).some(
+        (val: any) =>
+          val &&
+          val.value &&
+          String(val.value).toLowerCase().includes(inputValue.toLowerCase()),
       );
     });
   }
 
-  onChangePageSize(pageSize: string) {
-    if (!this.dropiTableConfiguration.backendPagination) {
-      this.pageSize = Number(pageSize);
-      this.currentPage = 1;
+  onChangePageSize(event: any) {
+    const value = event?.target?.value || event;
+    this.pageSize = Number(value);
+    this.currentPage = 1;
+    if (!this.dropiTableConfiguration?.backendPagination) {
       this.pageData();
-      return;
-    }
-    this.onSizeChange.emit(Number(pageSize));
-  }
-
-  toggleActions(
-    indexToShow: number,
-    ref: ElementRef,
-    childActions: boolean = false,
-    indexChild: number,
-  ) {
-    if (!childActions) {
-      if (!this.dataToShow[indexToShow].showActions) {
-        this.hideMenu();
-      }
-
-      this.dataToShow[indexToShow].showActions = !this.dataToShow[indexToShow].showActions;
-      this.actionsMenuRef = { nativeElement: ref } as ElementRef;
     } else {
-      if (!this.childData[indexChild].showActions) {
-        this.hideMenu();
-      }
-
-      this.childData[indexChild].showActions = !this.childData[indexChild].showActions;
-      this.actionsMenuRef = { nativeElement: ref } as ElementRef;
+      this.onSizeChange.emit(this.pageSize);
     }
   }
 
-  onActionClicked(row: DropiTableRow, action: DropiTableAction, event?: MouseEvent) {
-    // Detener la propagación del evento para evitar que el HostListener lo capture
-    if (event) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
+  toggleActions(index: number, ref?: any) {
+    this.dataToShow.forEach((item, i) => {
+      if (i === index) item.showActions = !item.showActions;
+      else item.showActions = false;
+    });
+  }
 
-    if (action) {
-      this.actionClicked.emit({ row, action });
-      this.hideMenu();
-    }
+  onActionClicked(
+    row: DropiTableRow,
+    action: DropiTableAction,
+    event?: any,
+    arg4?: any,
+  ) {
+    this.actionClicked.emit({ row, action });
+    this.hideMenu();
   }
 
   hideMenu() {
-    if (!this.hasActions) return;
-
-    // Modificar directamente las propiedades sin reemplazar los objetos del array
-    // para evitar disparar change detection innecesario
     this.dataToShow.forEach((item) => {
       item.showActions = false;
     });
-    if (this.childData) {
-      this.childData.forEach((childRowItem) => {
-        childRowItem.showActions = false;
-      });
-    }
-    this.actionsMenuRef = null;
   }
 
-  onSelectAll(allSelected: boolean) {
-    let selectedRows: DropiTableRow[] = [];
-    this.checkboxes.forEach((cb, index) => {
-      if (index === 0) return;
-      cb.checked = !cb.disabled && allSelected;
-      if (cb.checked) {
-        selectedRows.push(this.dataToShow[index - 1]);
-      }
-    });
-
-    this.selectedRows = selectedRows;
+  onSelectAll(selected: boolean) {
+    this.dataToShow.forEach((row) => (row.selected = selected));
+    this.selectedRows = selected ? [...this.dataToShow] : [];
     this.rowsSelected.emit(this.selectedRows);
   }
 
-  resetSelectedRows() {
-    this.selectedRows = [];
-  }
-
-  // Nuevo método mejorado para manejar recursividad
-  toggleTableRow(row: any, isChild: boolean = false) {
-    console.log('toggleTableRow called:', {
-      row: row,
-      isChild: isChild,
-      expanded: row.expanded,
-      tot_child: row.tot_child,
-      children: row.children,
-      childrenLength: row.children?.length,
-    });
-
-    // Si no es un hijo, colapsar todas las otras filas principales
-    if (!isChild) {
-      this.dataToShow.forEach((mainRow) => {
-        if (mainRow !== row) {
-          this.collapseRowRecursively(mainRow);
-        }
-      });
-    }
-
-    // Toggle del estado expandido
+  toggleTableRow(row: any, arg2?: any, arg3?: any, arg4?: any) {
     row.expanded = !row.expanded;
-
-    // Si se está expandiendo y no tiene hijos cargados, emitir evento para cargarlos
-    if (row.expanded && row.tot_child?.value > 0 && (!row.children || row.children.length === 0)) {
-      console.log('Emitiendo expandChildren event para:', row);
-      this.expandChildren.emit(row);
-    }
-
-    // Si se está colapsando, colapsar también todos los hijos recursivamente
-    if (!row.expanded && row.children) {
-      this.collapseRowRecursively(row);
-    }
-  }
-
-  // Método auxiliar para colapsar recursivamente
-  private collapseRowRecursively(row: any) {
-    row.expanded = false;
-    if (row.children) {
-      row.children.forEach((child) => this.collapseRowRecursively(child));
-    }
-  }
-
-  /**
-   * Método público para asignar hijos a una fila específica
-   * Se usa después de que el componente padre obtiene los datos del API
-   */
-  public setRowChildren(parentRow: any, children: DropiTableRow[]) {
-    console.log('setRowChildren called:', { parentRow, children });
-    parentRow.children = children;
-  }
-
-  /**
-   * Método para encontrar una fila por ID de manera recursiva
-   * Útil para actualizar filas anidadas después de llamadas al API
-   */
-  public findRowById(id: any, rows: DropiTableRow[] = this.dataToShow): DropiTableRow | null {
-    for (const row of rows) {
-      if (row.id.value === id) {
-        return row;
-      }
-      if (row.children && row.children.length > 0) {
-        const found = this.findRowById(id, row.children);
-        if (found) return found;
-      }
-    }
-    return null;
+    if (row.expanded) this.expandChildren.emit({ row });
   }
 }