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

<div class="h-full bg-surface-overlay rounded-(--p-card-border-radius) overflow-hidden">
  <div class="h-full flex flex-col gap-4">
    <p-table
      [columns]="columns"
      [scrollable]="true"
      [value]="items"
      [loading]="loading"
      columnResizeMode="fit"
      stripedRows
      [showFirstLastIcon]="false"
      [expandedRowKeys]="expandedRows"
      [dataKey]="dataKey"
      class="grow flex! flex-col overflow-hidden"
      [tableStyleClass]="!items.length && !loading ? 'h-full' : ''"
    >
      @if (pageTitle || showAdd || filter || caption || showRefresh || moreActions) {
        <ng-template pTemplate="caption">
          <ng-container [ngTemplateOutlet]="caption">
            <div class="flex justify-between items-center gap-4">
              <h5 class="font-bold">{{ pageTitle }}</h5>
              @if (showAdd || filter || showRefresh || moreActions) {
                <div class="flex items-center gap-2">
                  <ng-container [ngTemplateOutlet]="moreActions" />
                  @if (filter) {
                    <p-button
                      label="فیلتر"
                      icon="pi pi-filter"
                      variant="outlined"
                      badgeSeverity="info"
                      [badge]="isFiltered ? '1' : undefined"
                      (click)="openFilter()"
                    ></p-button>
                  }
                  @if (showRefresh) {
                    <p-button icon="pi pi-refresh" outlined (click)="refresh()"></p-button>
                  }
                  @if (showAdd) {
                    <p-button label="{{ addNewCtaLabel }}" icon="pi pi-plus" (click)="openAddForm()"></p-button>
                  }
                </div>
              }
            </div>
          </ng-container>
        </ng-template>
      }

      <ng-template #header let-columns>
        <tr>
          @for (col of columns; track col.header) {
            <th
              [style]="
                col.type === 'index'
                  ? { width: '3rem', minWidth: '3rem' }
                  : { width: col.width, minWidth: col.minWidth }
              "
            >
              {{ col.header }}
            </th>
          }
          @if (actionsCount()) {
            <th type="th" [style]="{ width: `${actionsCount() * 2 + (actionsCount() - 1) * 0.25}rem` }"></th>
          }
          @if (expandable) {
            <th style="width: 3rem"></th>
          }
        </tr>
      </ng-template>

      <ng-template #body let-item let-i="rowIndex" let-expanded="expanded">
        <tr>
          @for (col of columns; track col.field) {
            <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)"
                  [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>
              }
            </td>
          }
          @if (actionsCount()) {
            <td
              table-action-row
              type="td"
              [showDetails]="showDetails"
              [showDelete]="showDelete"
              [showEdit]="showEdit"
              (edit)="edit(item)"
              (delete)="remove(item)"
              (details)="details(item)"
            ></td>
          }

          @if (expandable) {
            <td>
              <p-button
                type="button"
                pRipple
                [pRowToggler]="item"
                [text]="true"
                [rounded]="true"
                [plain]="true"
                [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
              />
            </td>
          }
        </tr>
      </ng-template>

      @if (expandable && expandColumns && expandableItemKey) {
        <ng-template #expandedrow let-item>
          <tr>
            <td [attr.colspan]="columns.length + 1">
              <div class="px-4">
                @if (item[expandableItemKey]?.length) {
                  <p-table
                    [columns]="expandColumns || []"
                    [scrollable]="true"
                    [value]="item[expandableItemKey]"
                    [loading]="loading"
                    columnResizeMode="fit"
                    stripedRows
                    [showFirstLastIcon]="false"
                    [expandedRowKeys]="expandedRows"
                    class="grow flex! flex-col overflow-hidden"
                    [tableStyleClass]="!item.items?.length && !loading ? 'h-full' : ''"
                  >
                    <ng-template #header let-columns>
                      <tr>
                        @for (col of expandColumns; track col.header) {
                          <th
                            [style]="
                              col.type === 'index'
                                ? { width: '3rem', minWidth: '3rem' }
                                : { width: col.width, minWidth: col.minWidth }
                            "
                          >
                            {{ col.header }}
                          </th>
                        }
                      </tr>
                    </ng-template>

                    <ng-template #body let-item let-i="rowIndex">
                      <tr>
                        @for (col of expandColumns; track col.field) {
                          <td>
                            {{ item.name }}
                            @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)"
                                [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>
                            }
                          </td>
                        }
                      </tr>
                    </ng-template>

                    <ng-template #emptymessage>
                      <tr class="">
                        <td [colSpan]="(expandColumns.length + 1).toString()" class="w-full">
                          <uikit-empty-state
                            [title]="emptyPlaceholderTitle"
                            [description]="emptyPlaceholderDescription"
                            [ctaLabel]="emptyPlaceholderCtaLabel || addNewCtaLabel"
                            [showCTA]="showAdd"
                            (ctaClick)="openAddForm()"
                          ></uikit-empty-state>
                        </td>
                      </tr>
                    </ng-template>
                  </p-table>
                } @else {
                  <div class="grid grid-cols-3 gap-4 py-2">
                    @for (col of expandColumns; track $index) {
                      <app-key-value
                        [label]="col.header"
                        [value]="item[expandableItemKey][col.field]"
                        [type]="col.type || 'simple'"
                      />
                    }
                  </div>
                }
              </div>
            </td>
          </tr>
        </ng-template>
      }

      <ng-template #emptymessage>
        <tr class="">
          <td [colSpan]="(columns.length + 1).toString()" class="w-full">
            <uikit-empty-state
              [title]="emptyPlaceholderTitle"
              [description]="emptyPlaceholderDescription"
              [ctaLabel]="emptyPlaceholderCtaLabel || addNewCtaLabel"
              [showCTA]="showAdd"
              (ctaClick)="openAddForm()"
            ></uikit-empty-state>
          </td>
        </tr>
      </ng-template>

      <ng-template #loadingbody let-columns>
        @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>
                <p-skeleton></p-skeleton>
              </td>
            }
            @if (actionsCount()) {
              <td>
                <p-skeleton></p-skeleton>
              </td>
            }
          </tr>
        }
      </ng-template>
    </p-table>
    @if (showPaginator) {
      <app-paginator
        [currentPage]="currentPage || 1"
        [totalRecords]="totalRecords"
        [perPage]="perPage || 10"
        [loading]="loading"
        (onChange)="onPage($event)"
      />
    }
  </div>
  @if (filter) {
    <p-drawer
      [visible]="filterDrawerVisible()"
      (onHide)="closeFilter()"
      header="فیلتر"
      class="contnet"
      styleClass="!w-[80vw] md:!w-96 md:!max-w-96 !max-w-sm"
    >
      <div class="pt-2">
        <ng-container [ngTemplateOutlet]="filter" [ngTemplateOutletContext]="{ $implicit: columns }"> </ng-container>
      </div>
    </p-drawer>
  }
</div>