update license structures and init to setup image uploader

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

@@ -64,6 +64,15 @@
             <td>
               @if (col.type === "index") {
                 {{ i * (currentPage || 1) + 1 }}
+              } @else if (col.type === "thumbnail") {
+                <div
+                  class="w-20 h-20 rounded-2xl overflow-hidden bg-surface-50 cursor-pointer"
+                  (click)="openThumbnailModal(item)"
+                >
+                  @if (item[col.field]) {
+                    <img [src]="item[col.field]" class="w-full h-full object-cover" />
+                  }
+                </div>
               } @else if (getTemplate(col)) {
                 <ng-container
                   [ngTemplateOutlet]="getTemplate(col)"
@@ -72,7 +81,7 @@
               } @else if (col.canCopy) {
                 <uikit-copy [text]="getCell(item, col)"></uikit-copy>
               } @else {
-                <span>
+                <span [class]="getPreviewClasses(item, col)">
                   {{ getCell(item, col) }}
                 </span>
               }

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

@@ -1,5 +1,5 @@
 import { PaginatorComponent, UikitCopyComponent, UikitEmptyStateComponent } from '@/uikit';
-import { formatJalali, formatWithCurrency } from '@/utils';
+import { formatJalali, formatWithCurrency, jalaliDiff } from '@/utils';
 import { CommonModule } from '@angular/common';
 import {
   Component,
@@ -26,8 +26,18 @@ export interface IColumn<T = any> {
   width?: string;
   minWidth?: string;
   canCopy?: boolean;
-  type?: 'text' | 'price' | 'boolean' | 'date' | 'nested' | 'index' | 'id';
+  type?: 'text' | 'price' | 'boolean' | 'date' | 'nested' | 'index' | 'id' | 'thumbnail';
   nestedPath?: string;
+  thumbnailOptions?: {
+    editable: boolean;
+    deletable: boolean;
+    showPreview: boolean;
+  };
+  dateOption?: {
+    expiredMode?: boolean;
+    dateTime?: boolean;
+    onlyTime?: boolean;
+  };
   customDataModel?: TemplateRef<any> | ((item: T) => string | number | boolean);
 }
 
@@ -84,6 +94,7 @@ export class PageDataListComponent<I> {
   @Output() onDetails = new EventEmitter<I>();
   @Output() onAdd = new EventEmitter<void>();
   @Output() pageChange = new EventEmitter<any>();
+  @Output() onThumbnailClick = new EventEmitter<I>();
 
   filterDrawerVisible = signal<boolean>(false);
 
@@ -126,10 +137,36 @@ export class PageDataListComponent<I> {
     this.pageChange.emit($event);
   };
 
+  openThumbnailModal = (item: I) => {
+    // this.
+  };
+
   get showPaginator() {
     return !!(this.totalRecords && this.perPage && this.totalRecords > this.perPage);
   }
 
+  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 {

src/app/shared/components/uploadFile/model.d.ts

@@ -0,0 +1,4 @@
+export interface onSelectArgs {
+  data: FormData;
+  file: File;
+}

src/app/shared/components/uploadFile/upload-file.component.html

@@ -0,0 +1,8 @@
+<p-fileupload [name]="name" [accept]="accept" [maxFileSize]="maxSize" (onSelect)="onSelectedFile($event)">
+  <ng-template #header let-chooseCallback="chooseCallback">
+    <div class="flex items-center justify-center flex-col cursor-pointer py-5 w-full" (click)="chooseCallback()">
+      <i class="pi pi-cloud-upload border-2! rounded-full! p-8! text-4xl! text-muted-color!"></i>
+      <p class="mt-6 mb-0">فایل مورد نظر خود را در اینجا رها کنید</p>
+    </div>
+  </ng-template>
+</p-fileupload>

src/app/shared/components/uploadFile/upload-file.component.ts

@@ -0,0 +1,31 @@
+import { Maybe } from '@/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FileSelectEvent, FileUpload } from 'primeng/fileupload';
+import { onSelectArgs } from './model';
+
+@Component({
+  selector: 'app-shared-upload-file',
+  templateUrl: './upload-file.component.html',
+  imports: [FileUpload],
+})
+export class SharedUploadFileComponent {
+  @Input() currentImage: Maybe<string> = null;
+  @Input() loading: boolean = false;
+  @Input() name: string = 'file';
+  @Input() accept: string = 'image/*';
+  @Input() maxSize: Maybe<number> = 5 * 1024;
+  @Input() error: Maybe<string> = null;
+  @Input() hint: Maybe<string> = null;
+
+  @Output() onSelect = new EventEmitter<onSelectArgs>();
+
+  onSelectedFile($event: FileSelectEvent) {
+    const file = $event.files?.[0];
+    if (!file) {
+      return;
+    }
+    const payload = new FormData();
+    payload.append(this.name, file, file.name);
+    this.onSelect.emit({ data: payload, file });
+  }
+}