update many things

src/app/shared/components/pageDataList/page-data-list-table-view.component.ts

@@ -0,0 +1,255 @@
+import { Maybe } from '@/core';
+import { UikitCopyComponent, UikitEmptyStateComponent } from '@/uikit';
+import { formatJalali, formatWithCurrency, jalaliDiff } from '@/utils';
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  computed,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output,
+  signal,
+  TemplateRef,
+} from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { DrawerModule } from 'primeng/drawer';
+import { PaginatorModule } from 'primeng/paginator';
+import { SkeletonModule } from 'primeng/skeleton';
+import { TableModule } from 'primeng/table';
+import { KeyValueComponent } from '../key-value.component/key-value.component';
+import { TableActionRowComponent } from '../table-action-row.component';
+
+type TDataType =
+  | 'simple'
+  | 'price'
+  | 'boolean'
+  | 'date'
+  | 'nested'
+  | 'index'
+  | 'id'
+  | 'thumbnail'
+  | 'number';
+export interface IColumn<T = any> {
+  field: T extends object ? keyof T | string : string;
+  header: string;
+  width?: string;
+  minWidth?: string;
+  canCopy?: boolean;
+  type?: TDataType;
+
+  nestedOption?: {
+    path: string;
+    type?: TDataType;
+  };
+  thumbnailOptions?: {
+    editable: boolean;
+    deletable: boolean;
+    showPreview: boolean;
+  };
+  dateOption?: {
+    expiredMode?: boolean;
+    dateTime?: boolean;
+    onlyTime?: boolean;
+  };
+  customDataModel?: TemplateRef<any> | ((item: T) => string | number | boolean);
+}
+
+@Component({
+  selector: 'app-page-data-list-table-view',
+  templateUrl: './page-data-list-table-view.component.html',
+  host: {
+    class: 'block w-full h-full overflow-hidden',
+  },
+  imports: [
+    CommonModule,
+    TableActionRowComponent,
+    UikitEmptyStateComponent,
+    TableModule,
+    ButtonModule,
+    SkeletonModule,
+    PaginatorModule,
+    DrawerModule,
+    UikitCopyComponent,
+    KeyValueComponent,
+  ],
+})
+export class AppPageDataListTableView<I = any> {
+  @Input({ required: true }) pageTitle!: string;
+  @Input({ required: true }) columns!: IColumn[];
+  @Input({ required: true }) items!: any[];
+  @Input({ required: true }) loading!: boolean;
+  @Input({ required: true }) emptyPlaceholderTitle!: string;
+  @Input() addNewCtaLabel?: string;
+  @Input() emptyPlaceholderDescription?: string = '';
+  @Input() emptyPlaceholderCtaLabel?: string;
+  @Input() currentPage?: number = 1;
+  @Input() showEdit: boolean = false;
+  @Input() showDelete: boolean = false;
+  @Input() showDetails: boolean = false;
+  @Input() showAdd: boolean = false;
+  @Input() showRefresh: boolean = true;
+  @Input() isFiltered: boolean = false;
+  @Input() fullHeight?: boolean = false;
+  @Input() height: string = '';
+  @Input() expandable?: boolean = false;
+  @Input() expandableItemKey?: string = '';
+  @Input() expandColumns?: Maybe<IColumn[]> = null;
+  @Input() dataKey?: string = 'items';
+  @Input() showPaginator?: boolean;
+
+  @ContentChild('filter', { static: true }) filter!: TemplateRef<any> | null;
+  @ContentChild('paginator', { static: true }) paginator!: TemplateRef<any> | null;
+  @ContentChild('moreActions', { static: true }) moreActions!: TemplateRef<any> | null;
+  @ContentChild('expandableTemp', { static: false }) expandableTemp!: TemplateRef<any> | null;
+  @ContentChild('captionBox', { static: true }) captionBox!: TemplateRef<any> | null;
+  @ContentChild('emptyMessageCard', { static: true }) emptyMessageCard!: TemplateRef<any> | null;
+
+  @Output() onEdit = new EventEmitter<any>();
+  @Output() onDelete = new EventEmitter<any>();
+  @Output() onDetails = new EventEmitter<any>();
+  @Output() onAdd = new EventEmitter<void>();
+  @Output() onChangePage = new EventEmitter<any>();
+  @Output() onThumbnailClick = new EventEmitter<any>();
+  @Output() onRefresh = new EventEmitter();
+
+  filterDrawerVisible = signal<boolean>(false);
+  expandedRows: { [key: string]: boolean } = {};
+
+  edit = (item: I) => {
+    this.onEdit.emit(item);
+  };
+
+  remove = (item: I) => {
+    this.onDelete.emit(item);
+  };
+
+  details = (item: I) => {
+    this.onDetails.emit(item);
+  };
+
+  openAddForm = () => {
+    this.onAdd.emit();
+  };
+
+  openFilter = () => {
+    this.filterDrawerVisible.set(true);
+  };
+
+  closeFilter = () => {
+    this.filterDrawerVisible.set(false);
+  };
+
+  onPage = ($event: any) => {
+    this.onChangePage.emit($event);
+  };
+
+  openThumbnailModal = (item: I) => {
+    // this.
+  };
+
+  getPreviewClasses(item: Record<string, any>, column: IColumn): any {
+    if (!item || !column || column.customDataModel) return '';
+    try {
+      const { field } = column;
+
+      const data = item[String(field)];
+      switch (column.type) {
+        case 'date':
+          if (column.dateOption?.expiredMode) {
+            if (jalaliDiff(new Date(), data) > 0) {
+              return 'text-error';
+            }
+          }
+          return '';
+        default:
+          return;
+      }
+    } catch (e) {
+      return '';
+    }
+  }
+
+  getCell(item: Record<string, any>, column: IColumn): any {
+    if (!item || !column) return '';
+    try {
+      let { field, type } = column;
+
+      if (column.customDataModel) {
+        return this.renderCustom(column, item);
+      }
+
+      let data = item[String(field)];
+      if (column.type === 'nested') {
+        const path = column.nestedOption?.path;
+        if (!path) return '-';
+        data = path
+          .split('.')
+          .reduce((obj, key) => (obj && obj[key] !== undefined ? obj[key] : null), item);
+        type = column.nestedOption?.type || 'simple';
+      }
+
+      if (type) {
+        switch (type) {
+          case 'id':
+            if (!data) return '-';
+            return `${data.slice(0, 5)}...${data.slice(data.length - 5, data.length)}`;
+          case 'date':
+            if (!data) return '-';
+            return formatJalali(data);
+          case 'boolean':
+            return data ? 'بله' : 'خیر';
+          case 'price':
+            return formatWithCurrency(data, false, 'ریال');
+          case 'number':
+            return data || 0;
+          default:
+            break;
+        }
+      }
+      if (data === undefined || data === null) {
+        return '-';
+      }
+      if (typeof data === 'object') {
+        return data.title || '-';
+      }
+      return data || '-';
+    } catch (e) {
+      return '-';
+    }
+  }
+
+  getTemplate(col: IColumn): TemplateRef<any> | null {
+    const v = col.customDataModel;
+    return v instanceof TemplateRef ? (v as TemplateRef<any>) : null;
+  }
+
+  renderCustom(column: IColumn, item: any): any {
+    const v = column.customDataModel;
+
+    if (!v) {
+      return null;
+    }
+    if (typeof v === 'function') {
+      try {
+        return (v as (item: any) => any)(item);
+      } catch {
+        return '-';
+      }
+    }
+    if (typeof v === 'string') return v;
+    return null;
+  }
+
+  actionsCount = computed(() => {
+    let totalCount = 0;
+    if (this.showEdit) totalCount += 1;
+    if (this.showDelete) totalCount += 1;
+    if (this.showDetails) totalCount += 1;
+    return totalCount;
+  });
+
+  refresh() {
+    this.onRefresh.emit();
+  }
+}