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

<div class="h-full overflow-auto border border-surface-border cardShadow">
  <div
    [ngClass]="{
      'px-4': captionBox,
      'pb-4': true,
    }"
  >
    @if (captionBox) {
      <div class="pt-4">
        <ng-container [ngTemplateOutlet]="captionBox"></ng-container>
      </div>
      <hr />
    }
    <div class="grid grid-cols-1 gap-3" [ngClass]="{ 'pt-4': captionBox }">
      @for (item of items; track `gridView_${$index}`) {
        <div class="card border border-surface-border bg-surface-0! mb-0! rounded-2xl p-4!">
          <div class="listKeyValue">
            @for (col of columns; track `gridView_${col.field.toString()}_${$index}`) {
              @if (col.type !== "index") {
                <app-key-value [label]="col.header" [variant]="col.variant">
                  @if (col.type === "thumbnail") {
                    <div
                      class="w-20 h-20 rounded-2xl overflow-hidden bg-surface-100 cursor-pointer"
                      (click)="openThumbnailModal(item)"
                    >
                      @if (item && col?.field && item[col!.field!]) {
                        <img [src]="item[col.field]" class="w-full h-full object-cover" />
                      }
                    </div>
                  } @else if (col.variant === "tag") {
                    <p-tag [value]="getCell(item, col)" [severity]="col.tagOptions?.severity || 'contrast'"></p-tag>
                  } @else if (getTemplate(col)) {
                    <ng-container
                      [ngTemplateOutlet]="getTemplate(col)"
                      [ngTemplateOutletContext]="{ $implicit: item }"
                    ></ng-container>
                  } @else if (col.canCopy) {
                    <uikit-copy [text]="getCell(item, col)"></uikit-copy>
                  } @else {
                    <span [class]="getPreviewClasses(item, col)">
                      {{ getCell(item, col) }}
                    </span>
                  }
                </app-key-value>
              }
            }
          </div>
          @if (showEdit || showDelete || showDetails) {
            <hr class="my-2" />
            <div class="flex justify-center gap-2 mt-4">
              @if (showEdit) {
                <p-button
                  icon="pi pi-pencil"
                  label="ویرایش"
                  size="small"
                  outlined
                  severity="secondary"
                  (click)="edit(item)"
                >
                </p-button>
              }
              @if (showDelete) {
                <p-button icon="pi pi-trash" label="حذف" size="small" outlined severity="danger" (click)="remove(item)">
                </p-button>
              }
              @if (showDetails) {
                <p-button
                  icon="pi pi-eye"
                  label="مشاهده"
                  size="small"
                  outlined
                  severity="primary"
                  (click)="details(item)"
                >
                </p-button>
              }
            </div>
          }
        </div>
      }
      @if (loading) {
        @for (i of [1, 2, 3, 4]; track `grid_view_loading${$index}`) {
          <div class="w-full h-40">
            <p-skeleton height="100%"></p-skeleton>
          </div>
        }
      }

      @if (showPaginator) {
        <ng-container [ngTemplateOutlet]="paginator"> </ng-container>
      }
      @if (items.length === 0 && !loading) {
        <ng-container [ngTemplateOutlet]="emptyMessageCard"></ng-container>
      }
    </div>
  </div>
</div>