update many things

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

@@ -1,13 +1,13 @@
 import { Maybe } from '@/core';
-import { PaginatorComponent, UikitCopyComponent, UikitEmptyStateComponent } from '@/uikit';
-import { formatJalali, formatWithCurrency, jalaliDiff } from '@/utils';
+import { PaginatorComponent, UikitEmptyStateComponent } from '@/uikit';
+import { jalaliDiff } from '@/utils';
 import { CommonModule } from '@angular/common';
 import {
   Component,
-  computed,
   ContentChild,
   ElementRef,
   EventEmitter,
+  HostListener,
   Input,
   Output,
   Renderer2,
@@ -19,10 +19,19 @@ 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';
+import { AppPageDataListGridView } from './page-data-list-grid-view.component';
+import { AppPageDataListTableView } from './page-data-list-table-view.component';
 
-type TDataType = 'simple' | 'price' | 'boolean' | 'date' | 'nested' | 'index' | 'id' | 'thumbnail';
+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;
@@ -56,19 +65,18 @@ export interface IColumn<T = any> {
   },
   imports: [
     CommonModule,
-    TableActionRowComponent,
-    UikitEmptyStateComponent,
     TableModule,
     ButtonModule,
     SkeletonModule,
     PaginatorModule,
     DrawerModule,
     PaginatorComponent,
-    UikitCopyComponent,
-    KeyValueComponent,
+    AppPageDataListTableView,
+    AppPageDataListGridView,
+    UikitEmptyStateComponent,
   ],
 })
-export class PageDataListComponent<I> {
+export class PageDataListComponent<I = any> {
   constructor(
     private host: ElementRef,
     private renderer: Renderer2,
@@ -77,7 +85,7 @@ export class PageDataListComponent<I> {
   @Input({ required: true }) pageTitle!: string;
   @Input() addNewCtaLabel?: string;
   @Input({ required: true }) columns!: IColumn[];
-  @Input({ required: true }) items!: I[];
+  @Input({ required: true }) items!: any[];
   @Input({ required: true }) loading!: boolean;
   @Input() emptyPlaceholderTitle: string = 'موردی برای نمایش وجود ندارد';
   @Input() emptyPlaceholderDescription?: string = '';
@@ -123,17 +131,19 @@ export class PageDataListComponent<I> {
       );
     // if (this.fullHeight) {
     // }
+
+    this.updateViewportMode();
   }
 
-  edit = (item: I) => {
+  edit = (item: any) => {
     this.onEdit.emit(item);
   };
 
-  remove = (item: I) => {
+  remove = (item: any) => {
     this.onDelete.emit(item);
   };
 
-  details = (item: I) => {
+  details = (item: any) => {
     this.onDetails.emit(item);
   };
 
@@ -183,84 +193,18 @@ export class PageDataListComponent<I> {
     }
   }
 
-  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, 'ریال');
-          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();
   }
+
+  isMobile = false;
+
+  @HostListener('window:resize')
+  onResize() {
+    this.updateViewportMode();
+  }
+
+  private updateViewportMode() {
+    this.isMobile = typeof window !== 'undefined' && window.innerWidth <= 768;
+  }
 }