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

<div [ngClass]="{ 'h-full overflow-auto': true, 'border border-surface-border cardShadow': hasCaption }">
  <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 [ngClass]="{ listKeyValue: true, 'mb-2': expandable }">
            @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 (expandable) {
            <p-accordion [unstyled]="true" [value]="['0']">
              <p-accordion-panel value="0" class="border! rounded-lg! overflow-hidden">
                <p-accordion-header class="bg-surface-200! text-text-color! py-2!">
                  <ng-template #toggleicon let-active="active">
                    <div class="flex items-center gap-4 w-full">
                      <i [ngClass]="{ 'pi pi-chevron-left text-xs! transition': true, '-rotate-90': active }"></i>
                      جزییات بیشتر
                    </div>
                  </ng-template>
                </p-accordion-header>
                <p-accordion-content>
                  <div class="listKeyValue pt-4">
                    @for (col of expandColumns; track `gridView_expand_${col.field.toString()}_${$index}`) {
                      @if (col.type !== "index") {
                        <app-key-value [label]="col.header" [variant]="col.variant">
                          <app-page-data-value
                            [item]="item[expandableItemKey!]"
                            [column]="col"
                            (thumbnailClick)="openThumbnailModal($event)"
                          />
                        </app-key-value>
                      }
                    }
                  </div>
                </p-accordion-content>
              </p-accordion-panel>
            </p-accordion>
          }
          @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>