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

src/app/shared/components/barcodeInput/barcode-input.component.html

@@ -0,0 +1,14 @@
+<uikit-field [control]="control" name="barcode" label="بارکد">
+  <p-input-group>
+    <input
+      pInputText
+      type="text"
+      [formControl]="control"
+      name="barcode"
+      [invalid]="control.invalid && (control.touched || control.dirty)"
+    />
+    <p-inputgroup-addon>
+      <button pButton type="button" icon="pi pi-barcode" text (click)="scanBarcode()"></button>
+    </p-inputgroup-addon>
+  </p-input-group>
+</uikit-field>

src/app/shared/components/barcodeInput/barcode-input.component.ts

@@ -0,0 +1,27 @@
+import { Maybe } from '@/core';
+import { UikitFieldComponent } from '@/uikit';
+import { Component, Input } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ButtonDirective } from 'primeng/button';
+import { InputGroup } from 'primeng/inputgroup';
+import { InputGroupAddon } from 'primeng/inputgroupaddon';
+import { InputText } from 'primeng/inputtext';
+
+@Component({
+  selector: 'barcode-input',
+  templateUrl: './barcode-input.component.html',
+  imports: [
+    ReactiveFormsModule,
+    UikitFieldComponent,
+    InputGroup,
+    InputGroupAddon,
+    ButtonDirective,
+    InputText,
+  ],
+})
+export class BarcodeInputComponent {
+  @Input() control!: FormControl<Maybe<string>>;
+  constructor() {}
+
+  scanBarcode() {}
+}

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 '-';
       }