@dropi/ui-components 1.0.0

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

@@ -0,0 +1,580 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  HostListener,
+  ElementRef,
+  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';
+import {
+  DropiTableAction,
+  DropiTableBackendParams,
+  DropiTableColumn,
+  DropiTableConfiguration,
+  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';
+
+@Component({
+  selector: 'app-dropi-table',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DropiPaginatorComponent,
+    IconComponent,
+    DropiCheckboxComponent,
+    CurrencyComponent,
+    DatePipe,
+    DropiTagComponent,
+    CarrierImageUrl,
+    TranslateModule,
+    InputComponent,
+    SpinnerComponent,
+    TooltipModule,
+    CountryFlagsComponent,
+    DropiAvatarsComponent,
+  ],
+  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() 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>;
+
+  public currentPage: number = 1;
+  public totalPages: number;
+  public dataToShow: DropiTableRow[] = [];
+  private sortColumn: string;
+  public sortAsc: boolean = true;
+  public hidePaginator: boolean = false;
+  private pageSize: number;
+  private actionsMenuRef: ElementRef | null;
+  private selectedRows: DropiTableRow[] = [];
+  private subscriptions: Subscription = new Subscription();
+  private filterEvent: Subject<string> = new Subject();
+  public searchTerm: FormControl = new FormControl();
+  public hasActions: boolean = false;
+  public hasShortActions: boolean = false;
+
+  ngOnInit(): void {
+    this.hasActions =
+      (this.dropiTableConfiguration?.rowActions &&
+        this.dropiTableConfiguration.rowActions.length > 0) ||
+      this.dropiTableConfiguration?.showActionsPerRow;
+
+    if (!this.dropiTableConfiguration.backendPagination) {
+      this.updateData();
+      if (this.dropiTableConfiguration.showSearch) {
+        this.filterEventSusbscribe();
+        this.subscribeToSearch();
+      }
+      return;
+    }
+    this.setBackendParams();
+    // Subscribe to search for backend pagination
+    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.dataToShow = this.data;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['data']) {
+      if (!this.dropiTableConfiguration.backendPagination) {
+        this.updateData();
+        return;
+      }
+      this.setBackendParams();
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+
+  updateData() {
+    this.setPagination();
+    this.pageData();
+  }
+
+  @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();
+    }
+  }
+
+  setPagination() {
+    if (!this.dropiTableConfiguration.showPaginator) return;
+    if (!this.dropiTableConfiguration?.pageSizeConfiguration) {
+      this.dropiTableConfiguration.pageSizeConfiguration = [5, 10, 20];
+    }
+    this.pageSize = this.dropiTableConfiguration.pageSizeConfiguration[0];
+  }
+
+  subscribeToSearch() {
+    this.subscriptions.add(
+      this.searchTerm.valueChanges.subscribe((inputValue) => {
+        this.currentPage = 1;
+        this.filterEvent.next(inputValue);
+      }),
+    );
+  }
+
+  subscribeToSearchBackend() {
+    this.subscriptions.add(
+      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);
+      }),
+    );
+  }
+
+  getTotalPages() {
+    this.totalPages = Math.ceil(this.data.length / 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) {
+      this.sortData();
+      return;
+    }
+    this.onSortChange.emit({ column: this.sortColumn, asc: this.sortAsc });
+  }
+
+  pageData() {
+    if (!this.dropiTableConfiguration?.showPaginator) {
+      this.dataToShow = this.data;
+      return;
+    }
+    const start = (this.currentPage - 1) * this.pageSize;
+    this.dataToShow = this.data.slice(start, start + this.pageSize);
+    this.hidePaginator = false;
+    this.getTotalPages();
+  }
+
+  sortData() {
+    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)
+      );
+    });
+    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;
+        }));
+
+    this.rowsSelected.emit(this.selectedRows);
+  }
+
+  goToPage(page: number) {
+    if (!this.dropiTableConfiguration.backendPagination) {
+      this.currentPage = Number(page);
+      this.pageData();
+      return;
+    }
+    this.onPageChange.emit(page);
+  }
+
+  filteredData(inputValue: string) {
+    if (!inputValue) {
+      this.pageData();
+      return;
+    }
+
+    this.hidePaginator = true;
+    this.dataToShow = this.data.filter((row) => {
+      return Object.values(row).some((val: TypedField) =>
+        String(val.value).toLowerCase().includes(inputValue.toLowerCase()),
+      );
+    });
+  }
+
+  onChangePageSize(pageSize: string) {
+    if (!this.dropiTableConfiguration.backendPagination) {
+      this.pageSize = Number(pageSize);
+      this.currentPage = 1;
+      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;
+    }
+  }
+
+  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();
+    }
+
+    if (action) {
+      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;
+    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
+    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;
+  }
+}

package/src/components-source/dropi-tag/dropi-tag.component.html

@@ -0,0 +1,17 @@
+<div class="container-chips">
+  <div
+    class="tags Body-S-Medium text-style"
+    [ngStyle]="setState()"
+    [class.icon-only]="showIcon && !hasContent"
+  >
+    <app-icon
+      class="file-icon"
+      *ngIf="showIcon && icon"
+      [name]="icon"
+      width="16px"
+      height="16px"
+      [color]="this.fontColor"
+    ></app-icon>
+    <span *ngIf="hasContent">{{ text }}</span>
+  </div>
+</div>

package/src/components-source/dropi-tag/dropi-tag.component.scss

@@ -0,0 +1,50 @@
+.tags {
+  display: inline-flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border-radius: var(--Border-5, 32px);
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+// Cuando solo hay icono, ajustar el padding y eliminar el gap
+.tags.icon-only {
+  // padding: 6px;
+  gap: 0;
+}
+
+.tags.icon-only .file-icon {
+  margin-right: 0;
+}
+
+.text-style {
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+}
+
+.container-chips {
+  display: inline-block;
+  app-icon {
+    display: flex;
+  }
+}
+
+.file-icon {
+  margin-right: 4px;
+}
+
+.close-icon {
+  margin-left: 4px;
+  cursor: pointer;
+}
+
+.tags > p {
+  margin: 0;
+}
+
+.img-chips {
+  margin-right: 4px;
+  max-width: 20px;
+}