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': hasCaption,
      'pb-4': true,
    }"
  >
    @if (hasCaption && captionBox) {
      <div class="pt-4">
        <ng-container [ngTemplateOutlet]="captionBox"></ng-container>
      </div>
      <hr />
    }
    <div class="grid grid-cols-1 gap-3" [ngClass]="{ 'pt-4': hasCaption }">
      @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">
                  <app-page-data-value [item]="item" [column]="col" (thumbnailClick)="openThumbnailModal($event)" />
                </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>