feat: implement product creation and update features with form handling and routing

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

@@ -8,7 +8,7 @@
       columnResizeMode="fit"
       stripedRows
       [showFirstLastIcon]="false"
-      class="grow !flex flex-col overflow-hidden"
+      class="grow flex! flex-col overflow-hidden"
       [tableStyleClass]="!items.length && !loading ? 'h-full' : ''"
     >
       @if (pageTitle || showAdd || filter || caption) {
@@ -102,7 +102,7 @@
       </ng-template> -->
 
       <ng-template #loadingbody let-columns>
-        @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; track i) {
+        @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track i) {
           <tr style="height: 46px">
             @for (col of columns; track col) {
               <td>

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

@@ -4,11 +4,9 @@ import {
   Component,
   computed,
   ContentChild,
-  ElementRef,
   EventEmitter,
   Input,
   Output,
-  Renderer2,
   signal,
   TemplateRef,
 } from '@angular/core';
@@ -25,6 +23,7 @@ export interface IColumn {
   width?: string;
   minWidth?: string;
   canCopy?: boolean;
+  type?: 'text' | 'price' | 'boolean' | 'date';
   customDataModel?: TemplateRef<any> | ((item: any) => string | number | boolean);
 }
 
@@ -45,10 +44,7 @@ export interface IColumn {
   ],
 })
 export class PageDataListComponent<I> {
-  constructor(
-    private host: ElementRef,
-    private renderer: Renderer2,
-  ) {}
+  constructor() {}
 
   @Input() pageTitle!: string;
   @Input() addNewCtaLabel?: string;
@@ -125,6 +121,19 @@ export class PageDataListComponent<I> {
         return this.renderCustom(column, item);
       }
       const data = item[field];
+      switch (column.type) {
+        case 'date':
+          if (!data) return '-';
+          const date = new Date(data);
+          return isNaN(date.getTime()) ? '-' : date.toLocaleDateString();
+        case 'boolean':
+          return data ? 'بله' : 'خیر';
+        case 'price':
+          return typeof data === 'number' ? data.toLocaleString() : '-';
+        default:
+          break;
+      }
+
       if (data === undefined || data === null) {
         return '-';
       }