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

<div class="h-full bg-surface-overlay">
  <div class="h-full flex flex-col gap-4">
    <p-table
      [columns]="columns"
      [scrollable]="true"
      [value]="items"
      [loading]="loading"
      columnResizeMode="fit"
      stripedRows
      [showFirstLastIcon]="false"
      class="grow flex! flex-col overflow-hidden"
      [tableStyleClass]="!items.length && !loading ? 'h-full' : ''"
    >
      @if (pageTitle || showAdd || filter || caption) {
        <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) {
                <div class="flex items-center gap-2">
                  @if (filter) {
                    <p-button
                      label="فیلتر"
                      icon="pi pi-filter"
                      variant="outlined"
                      badgeSeverity="info"
                      [badge]="isFiltered ? '1' : undefined"
                      (click)="openFilter()"
                    ></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>
          }
        </tr>
      </ng-template>

      <ng-template #body let-item let-i="rowIndex">
        <tr>
          @for (col of columns; track col.field) {
            <td>
              @if (col.type === "index") {
                {{ i * (currentPage || 1) + 1 }}
              } @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>
                  {{ 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>
          }
        </tr>
      </ng-template>

      <ng-template #emptymessage>
        <tr class="">
          <td [colSpan]="columns.length.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 #emptymessage>
        <tr>
          <td colspan="6">There are no order for this product yet.</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>