tailjng 0.0.55 → 0.0.56

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

@@ -0,0 +1,652 @@
+import { Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { LucideAngularModule } from 'lucide-angular';
+import { Params } from '@angular/router';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { EnableBoolean, FilterButton, FilterSelect, JAlertToastService, JConverterCrudService, JGenericCrudService, JIconsService, LoadingState, LoadingStates, OptionsTable, SortDirection, TableColumn } from 'tailjng';
+import { JCompletePaginatorComponent } from '../../paginator/paginator-complete/complete-paginator.component';
+import { JCompleteFilterComponent } from '../../filter/filter-complete/complete-filter.component';
+
+@Component({
+  selector: 'JCompleteCard',
+  standalone: true,
+  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, LucideAngularModule],
+  templateUrl: './complete-card.component.html',
+  styleUrl: './complete-card.component.scss',
+  animations: [
+    trigger('slideToggle', [
+      state('collapsed', style({
+        height: '0',
+        opacity: 0,
+        overflow: 'hidden',
+      })),
+      state('expanded', style({
+        height: '*',
+        opacity: 1,
+      })),
+      transition('collapsed <=> expanded', [
+        animate('0.3s ease-in-out')
+      ])
+    ])
+  ]
+})
+export class JCompleteCardComponent implements OnInit {
+
+  Math = Math;
+
+  // Loading states
+  @Output() dataLoaded = new EventEmitter<void>();
+
+  loadingStates: LoadingStates = {
+    initialLoad: 'idle',
+    search: 'idle',
+    itemsPerPage: 'idle',
+    pagination: 'idle',
+    sort: 'idle',
+    aditionalButtons: {},
+    checked: 'idle',
+    action: 'idle',
+  };
+
+  @Input() endpoint!: string;
+  mainEndpoint!: string;
+  @Input() columns: TableColumn<any>[] = [];
+  @Input() defaultFilters: { [key: string]: any } = {};
+  @Input() isPaginator = true;
+  @Input() isSearch = true;
+
+  data: any[] = [];
+  @Input() itemTemplate!: any;
+
+  // Expansion
+  expandedRows: Set<any> = new Set();
+
+  // Paginator
+  currentPage = 1;
+  @Input() itemsPerPageOptions = [12, 36, 60, 120];
+  itemsPerPage = this.itemsPerPageOptions[0];
+  totalItems = 0;
+
+  // Sorting
+  sortColumn: string | null = null;
+  sortDirection: SortDirection = 'none';
+  sortingColumn: string | null = null;
+
+  // Search
+  searchQuery = '';
+  @Input() searchPlaceholder = 'Buscar...';
+
+  // Filters
+  filters: any = {};
+
+  // Data filtered and paginated
+  displayData: any[] = [];
+
+  // Pages display
+  pages: number[] = [];
+
+  // Properties for visualization
+  get startIndex(): number {
+    return (this.currentPage - 1) * this.itemsPerPage;
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.totalItems / this.itemsPerPage);
+  }
+
+  get params(): Params {
+    return this.getQueryParams();
+  }
+
+  @Input() filtersButton: FilterButton[] = [];
+  @Input() filtersSelect: FilterSelect[] = [];
+
+  // Check
+  @Input() checked: boolean = false;
+  @Input() checkedColumn: string = 'id_status';
+  @Input() checkedValues: any[][] = [[true], [false]];
+  @Input() checkedTitles: string[] = ["Activos", "Inactivos"];
+  isChecked!: boolean;
+  titleChecked!: string;
+
+  constructor(
+    public readonly iconsService: JIconsService,
+    private readonly genericService: JGenericCrudService,
+    private readonly alertToastService: JAlertToastService,
+    private readonly converterService: JConverterCrudService,
+  ) { }
+
+  ngOnInit() {
+    this.mainEndpoint = this.endpoint.split('/')[0] ?? this.endpoint;
+    this.isChecked = this.checkedValues[0][0];
+    this.titleChecked = this.checkedTitles[0];
+    this.columnDefaults();
+    this.loadData();
+    this.overrideFilterEvents();
+  }
+
+  overrideFilterEvents() {
+    for (const filter of this.filtersSelect) {
+      if (filter.type === 'dropdown' || filter.type === 'searchable') {
+        const key = filter.optionValue ?? 'value';
+        const deepKey = filter.deep ? `${filter.deep}.${key}` : key;
+
+        const originalOnSelected = filter.onSelected;
+
+        filter.onSelected = (value: any) => {
+          const selectedValue = value?.[key] ?? value;
+
+          if (selectedValue === null || selectedValue === undefined) {
+            delete this.filters[deepKey];
+          } else {
+            this.filters[deepKey] = selectedValue;
+          }
+
+          if (typeof originalOnSelected === 'function') {
+            originalOnSelected(value);
+          }
+
+          this.loadData('search');
+        };
+      }
+    }
+  }
+
+  // =====================================================
+  // Get data
+  // =====================================================
+
+  // Load data from the server
+  loadData(loadingType: keyof LoadingStates = 'initialLoad', onFinally?: () => void) {
+    this.setLoadingState(loadingType, 'loading');
+
+    const params = this.getQueryParams();
+
+    // Simulating API wait
+    // setTimeout(() => {
+    this.genericService.findAll<any>({ endpoint: this.endpoint, params }).subscribe({
+      next: (response) => {
+        this.data = response.data[this.mainEndpoint] ?? [];
+
+        if (response.meta?.page) {
+          this.totalItems = response.meta.page.totalRecords;
+          this.currentPage = response.meta.page.currentPage;
+        } else {
+          this.totalItems = this.data.length;
+        }
+
+        if (response.meta?.sort) {
+          this.sortColumn = response.meta.sort.by;
+          this.sortDirection = response.meta.sort.order.toLowerCase() as SortDirection;
+        }
+
+        this.updateDisplayData();
+        this.generatePagination();
+        this.setLoadingState(loadingType, 'success');
+      },
+      error: (error) => {
+        console.error('Error fetching data:', error);
+        this.setLoadingState(loadingType, 'error');
+      }
+    }).add(() => {
+      this.dataLoaded.emit();
+      if (loadingType === 'sort') {
+        this.sortingColumn = null;
+      }
+
+      if (onFinally) {
+        onFinally();
+      }
+    });
+    // }, 2000);
+  }
+
+  // Update the data displayed in the table
+  updateDisplayData() {
+    this.displayData = this.data;
+  }
+
+  // =====================================================
+  // Change state in boolean fields
+  // =====================================================
+
+  // MMethod to change the state of a checkbox
+  onCheckboxChange(item: any, column: TableColumn<any>) {
+    // Get the ID field name based on dataProperty
+    const idField = `id_${this.mainEndpoint}`;
+
+    // Get the record ID
+    const recordId = item[idField];
+
+    // Get the current boolean value
+    const currentValue = this.getValue(item, column);
+
+    const formData: EnableBoolean<any> = {
+      key: idField,
+      value: currentValue,
+      values: [currentValue, !currentValue]
+    }
+
+    // Update status
+    this.genericService.toggle<any>({ endpoint: this.mainEndpoint, id: recordId, data: formData }).subscribe({
+      next: (response) => {
+        item[column.key] = !currentValue;
+
+        this.alertToastService.AlertToast({
+          type: "success",
+          title: "Registro actualizado!",
+          description: response.message,
+        });
+      }
+    })
+  }
+
+  // Change active or inactive
+  checkActiveInactive(isChecked: boolean): void {
+    this.isChecked = !isChecked;
+
+    const index = this.isChecked ? 0 : 1;
+    this.titleChecked = this.checkedTitles[index];
+
+    // ONLY update the id_status property without touching other filters
+    this.filters[this.checkedColumn] = this.checkedValues[index];
+
+    this.filtersSelect = this.filtersSelect.map(filter => {
+      if ('optionValue' in filter && filter.optionValue === this.checkedColumn) {
+        return {
+          ...filter,
+          defaultFilters: {
+            ...(filter.hasOwnProperty('defaultFilters') ? (filter as any).defaultFilters : {}),
+            [this.checkedColumn]: this.filters[this.checkedColumn]
+          },
+          selected: null
+        };
+      }
+      return filter;
+    });
+
+    this.currentPage = 1;
+    this.loadData('checked');
+  }
+
+  // Remove filters
+  onClearFilters(buttonType: string): void {
+    this.setAditionalButtonLoading(buttonType);
+
+    this.loadData('initialLoad', () => {
+      this.clearAditionalButtonLoading(buttonType);
+    });
+  }
+
+  // =====================================================
+  // Columns
+  // =====================================================
+
+  // Default column values
+  columnDefaults() {
+    this.columns.forEach(column => {
+      column.visible ??= true;
+      column.sortable ??= true;
+      column.isSearchable ??= true;
+    });
+  }
+
+  // Get the count of visible columns for colspan in empty state
+  getVisibleColumnsCount(): number {
+    return this.columns.filter(col => col.visible).length;
+  }
+
+  // =====================================================
+  // Data Processing
+  // =====================================================
+
+  // Get the cell values to identify a boolean field
+  isBoolean(value: any): boolean {
+    return typeof value === 'boolean';
+  }
+
+  // MMethod to get the cell values dynamically
+  getValue(item: any, column: TableColumn<any>): any {
+    let value: any;
+
+    // If a valueGetter exists, use it directly
+    if (typeof column.valueGetter === 'function') {
+      value = column.valueGetter(item);
+    } else {
+      // If not, look for the value by key (with support for nested keys)
+      const keys = column.key.split('.');
+      value = item;
+
+      for (const key of keys) {
+        if (value != null) {
+          value = value[key];
+        } else {
+          value = null;
+          break;
+        }
+      }
+    }
+
+    // If value is null or undefined, return 'S/N'
+    if (value === null || value === undefined) {
+      return 'S/N';
+    }
+
+    // Apply formatting according to column configuration
+    const formatted = this.converterService.formatData(value, column);
+
+    // If formatData returns nothing (unformatted value), return the original value
+    return formatted ?? value;
+  }
+
+  // =====================================================
+  // Search Parameters
+  // =====================================================
+
+  // Get the query parameters for the data request
+  getQueryParams(): Params {
+    const params: Params = this.genericService.params({
+      page: this.currentPage,
+      limit: this.itemsPerPage,
+      sort: {
+        column: this.sortColumn,
+        direction: this.sortDirection,
+      },
+      filters: this.filters,
+      defaultFilters: this.defaultFilters,
+    });
+
+    if (this.searchQuery && this.searchQuery.trim() !== '') {
+      const baseSearchKeys = this.columns
+        .filter(col => col.isSearchable)
+        .map(col => col.key);
+
+      const extraSearchKeys = this.columns
+        .flatMap(col => col.extraSearchFields || []);
+
+      const allSearchKeys = [...baseSearchKeys, ...extraSearchKeys];
+
+      params['search'] = this.searchQuery;
+      params['searchFields'] = allSearchKeys;
+    }
+
+    return params;
+  }
+
+  // =====================================================
+  // Sorting
+  // =====================================================
+
+  // Get the row number
+  getRowNumber(index: number): number {
+    return this.startIndex + index + 1;
+  }
+
+  // Column sorting
+  onSort(column: TableColumn<any>) {
+    // Prevent multiple simultaneous sort requests
+    if (this.isLoading('sort')) {
+      return;
+    }
+
+    if (!column.sortable) return;
+
+    // Guard the column that is being sorted
+    this.sortingColumn = column.key;
+
+    // Check if we are dealing with the same column as the last sort
+    const currentSortKey = this.converterService.getSortKey(this.sortColumn);
+    const columnSortKey = this.converterService.getSortKey(column.key);
+
+    // Sort direction logic
+    if (currentSortKey === columnSortKey) {
+      // Toggle sort direction
+      if (this.sortDirection === 'asc') {
+        this.sortDirection = 'desc';
+      } else if (this.sortDirection === 'desc') {
+        this.sortDirection = 'none';
+      } else {
+        this.sortDirection = 'asc';
+      }
+    } else {
+      // If a new column is selected for sorting, start with ascending order
+      this.sortColumn = column.key;
+      this.sortDirection = 'asc';
+    }
+
+    this.loadData('sort');
+  }
+
+  // Get the sort key
+  getSortKey(value: any): string {
+    return this.converterService.getSortKey(value);
+  }
+
+  // Handle the key press event for sorting
+  onSortKeyPress(event: KeyboardEvent, column: TableColumn<any>) {
+    // If a sort is already in progress, do not allow another
+    if (this.isLoading('sort')) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.onSort(column);
+    }
+  }
+
+  // =====================================================
+  // Search
+  // =====================================================
+
+  // Search functionality
+  onSearch() {
+    this.currentPage = 1;
+    this.loadData('search');
+  }
+
+  // Selector de items por página
+  onItemsPerPageChange() {
+    this.currentPage = 1;
+    this.loadData('itemsPerPage');
+  }
+
+  // =====================================================
+  // Pagination 
+  // =====================================================
+
+  // Generate pagination numbers
+  generatePagination() {
+    const totalPages = this.totalPages;
+    const currentPage = this.currentPage;
+
+    // Show 3 pagination numbers
+    const maxPagesToShow = 3;
+    let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+    let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+
+    // Adjust if we're near the end
+    if (endPage - startPage + 1 < maxPagesToShow) {
+      startPage = Math.max(1, endPage - maxPagesToShow + 1);
+    }
+
+    this.pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
+  }
+
+  // Pagination
+  handlePageChange(page: number) {
+    this.currentPage = page;
+    this.loadData('pagination');
+  }
+
+  // =====================================================
+  // Options
+  // =====================================================
+
+  // MMethod to handle button click
+  onButtonClick(button: OptionsTable, element: any): void {
+    // Executes the parent's action if defined
+    if (button.clicked) {
+      button.clicked(element);
+    }
+  }
+
+  // MMethod to get a tooltip
+  getTooltip(tooltip: string | ((data?: any) => string), data: any): string {
+    if (typeof tooltip === 'function') {
+      return tooltip(data);
+    }
+    return tooltip ?? '';
+  }
+
+  // MMethod to get an icon
+  getIcon(icon: ((data?: any) => any), data: any): any {
+    if (typeof icon === 'function') {
+      return icon(data);
+    }
+    return icon;
+  }
+
+  // Evaluate if a button is disabled
+  getDisabled(option: OptionsTable, data: any): boolean {
+    if (typeof option.disabled === 'function') {
+      return option.disabled(data);
+    }
+    return !!option.disabled;
+  }
+
+  // Evaluate if a button is visible
+  getIsVisible(option: OptionsTable, data: any): boolean {
+    if (typeof option.isVisible === 'function') {
+      return option.isVisible(data);
+    }
+    // If not defined, default is visible
+    return option.isVisible !== false;
+  }
+
+  // MMethod to get a button's CSS class
+  mergeNgClasses(optionNgClass: ((data?: any) => any), data: any): any {
+    const baseClass = {
+      'min-w-auto p-1! pl-2! pr-2!': true
+    };
+
+    let dynamicClass: any = {};
+    if (typeof optionNgClass === 'function') {
+      dynamicClass = optionNgClass(data);
+    } else {
+      dynamicClass = optionNgClass ?? {};
+    }
+
+    return {
+      ...baseClass,
+      ...(typeof dynamicClass === 'string' ? { [dynamicClass]: true } : dynamicClass)
+    };
+  }
+
+  // ====================================================
+  // Loading parameters
+  // =====================================================
+
+  // MMethod to check if a specific state is loading
+  isLoading(state: keyof LoadingStates): boolean {
+    return this.loadingStates[state] === 'loading';
+  }
+
+  // MMethod to check if any state is loading
+  isAnyLoading(): boolean {
+    return Object.values(this.loadingStates).some(state => state === 'loading');
+  }
+
+  // Method to update a loading state
+  setLoadingState(state: keyof LoadingStates, value: LoadingState | { [buttonType: string]: LoadingState }): void {
+    if (state === 'aditionalButtons') {
+      if (typeof value === 'string') {
+        // Prevent assigning a string directly if an object is expected
+        console.warn(`No puedes asignar '${value}' directamente a aditionalButtons. Usa setAditionalButtonLoading en su lugar.`);
+      } else {
+        this.loadingStates.aditionalButtons = value;
+      }
+    } else {
+      this.loadingStates[state] = value as LoadingState;
+    }
+  }
+
+  // Activate loading
+  setAditionalButtonLoading(buttonType: string, id?: number | string): void {
+    const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
+    this.loadingStates.aditionalButtons[key] = 'loading';
+  }
+
+  // Clear loading
+  clearAditionalButtonLoading(buttonType: string, id?: number | string): void {
+    const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
+    this.loadingStates.aditionalButtons[key] = 'idle';
+  }
+
+  // Verify loading
+  isAditionalButtonLoading(buttonType: string, id?: number | string): boolean {
+    const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
+    return this.loadingStates.aditionalButtons[key] === 'loading';
+  }
+
+  // ==================================================
+  // HTML
+  // ==================================================
+
+  getTemplate(row: any): string {
+    const templateColumn = this.columns.find(col => typeof col.expandTemplate === 'function');
+    return templateColumn?.expandTemplate?.(row) ?? '';
+  }
+
+  // ==================================================
+  // Expand rows
+  // ==================================================
+
+  @Input() expandTemplate?: TemplateRef<any>;
+  @Input() onExpandData?: (item: any) => Promise<any>;
+
+  expandedItems: { [key: string]: boolean } = {};
+  expandData: { [key: string]: any } = {};
+  expandLoading: { [key: string]: boolean } = {};
+
+  // MMethod to expand or collapse a row
+  toggleExpanded(item: any) {
+    const id = item?.id || item?.id_voucher || item?.id_card;
+    const isOpen = this.expandedItems[id];
+
+    if (!isOpen) {
+      this.expandLoading[id] = true;
+
+      this.expandedItems[id] = true;
+      if (this.onExpandData) {
+        this.onExpandData(item).then(data => {
+          this.expandData[id] = data;
+          this.expandLoading[id] = false;
+        });
+      }
+    } else {
+      this.expandedItems[id] = false;
+    }
+  }
+
+  isExpanded(item: any): boolean {
+    const id = item?.id || item?.id_voucher || item?.id_card;
+    return !!this.expandedItems[id];
+  }
+
+  getExpandData(item: any): any {
+    const id = item?.id || item?.id_voucher || item?.id_card;
+    return this.expandData[id];
+  }
+
+  isLoadingExpand(item: any): boolean {
+    const id = item?.id || item?.id_voucher || item?.id_card;
+    return !!this.expandLoading[id];
+  }
+
+  trackById(index: number, item: any): any {
+    const id = `${item['id_' + this.mainEndpoint]}-${index}`;
+    return id ? id : index;
+  }
+}