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">
  <ng-template #captionTemplate let-isMobileView="isMobileView">
    @if (pageTitle || showAdd || filter || showRefresh || moreActions) {
      <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"
                  size="small"
                  [badge]="isFiltered ? '1' : undefined"
                  (click)="openFilter()"
                ></p-button>
              }
              @if (showRefresh) {
                <p-button icon="pi pi-refresh" outlined size="small" (click)="refresh()"></p-button>
              }
              @if (showAll && allItemsPageRoute) {
                @if (isMobileView) {
                  <a routerLink pButton [routerLink]="allItemsPageRoute" icon="pi pi-eye" outlined size="small"></a>
                } @else {
                  <a routerLink pButton [routerLink]="allItemsPageRoute" outlined size="small">نمایش همه</a>
                }
              }
              @if (showAdd) {
                @if (isMobileView) {
                  <p-button icon="pi pi-plus" size="small" (click)="openAddForm()"></p-button>
                } @else {
                  <p-button
                    label="{{ addNewCtaLabel }}"
                    icon="pi pi-plus"
                    size="small"
                    (click)="openAddForm()"
                  ></p-button>
                }
              }
            </div>
          }
        </div>
      </ng-container>
    }
  </ng-template>
  <ng-template #emptyMessageTemplate>
    <uikit-empty-state
      [title]="emptyPlaceholderTitle"
      [description]="emptyPlaceholderDescription"
      [ctaLabel]="emptyPlaceholderCtaLabel || addNewCtaLabel"
      [showCTA]="showAdd"
      (ctaClick)="openAddForm()"
    ></uikit-empty-state>
  </ng-template>
  <ng-template #paginatorTemplate>
    <app-paginator
      [currentPage]="currentPage || 1"
      [totalRecords]="totalRecords"
      [perPage]="perPage || 10"
      [loading]="loading"
      (onChange)="onPage($event)"
    />
  </ng-template>

  @if (!isMobile) {
    <app-page-data-list-table-view
      [pageTitle]="pageTitle"
      [columns]="columns"
      [items]="items"
      [loading]="loading"
      [emptyPlaceholderTitle]="emptyPlaceholderTitle"
      [emptyPlaceholderDescription]="emptyPlaceholderDescription"
      [emptyPlaceholderCtaLabel]="emptyPlaceholderCtaLabel || addNewCtaLabel"
      [addNewCtaLabel]="addNewCtaLabel"
      [currentPage]="currentPage"
      [showEdit]="showEdit"
      [showDelete]="showDelete"
      [showDetails]="showDetails"
      [showIndex]="showIndex"
      [hasCaption]="!!(pageTitle || showAdd || filter || showRefresh || moreActions)"
      [expandable]="expandable"
      [expandableItemKey]="expandableItemKey"
      [expandColumns]="expandColumns"
      (onEdit)="edit($event)"
      (onDelete)="remove($event)"
      (onDetails)="details($event)"
    >
      @if (pageTitle || showAdd || filter || showRefresh || moreActions) {
        <ng-template #captionBox>
          <ng-container [ngTemplateOutlet]="captionTemplate" [ngTemplateOutletContext]="{ isMobileView: false }" />
        </ng-template>
      }
      <ng-template #emptyMessageCard>
        <ng-container [ngTemplateOutlet]="emptyMessageTemplate" />
      </ng-template>
      <ng-template #paginator>
        <ng-container [ngTemplateOutlet]="paginatorTemplate" />
      </ng-template>
    </app-page-data-list-table-view>
  } @else {
    <app-page-data-list-grid-view
      [pageTitle]="pageTitle"
      [columns]="columns"
      [items]="items"
      [loading]="loading"
      [emptyPlaceholderTitle]="emptyPlaceholderTitle"
      [emptyPlaceholderDescription]="emptyPlaceholderDescription"
      [emptyPlaceholderCtaLabel]="emptyPlaceholderCtaLabel || addNewCtaLabel"
      [addNewCtaLabel]="addNewCtaLabel"
      [currentPage]="currentPage"
      [showEdit]="showEdit"
      [showDelete]="showDelete"
      [showDetails]="showDetails"
      [hasCaption]="!!(pageTitle || showAdd || filter || showRefresh || moreActions)"
      (onEdit)="edit($event)"
      (onDelete)="remove($event)"
      (onDetails)="details($event)"
    >
      <ng-template #captionBox>
        @if (pageTitle || showAdd || filter || showRefresh || moreActions) {
          <ng-container [ngTemplateOutlet]="captionTemplate" [ngTemplateOutletContext]="{ isMobileView: true }" />
        }
      </ng-template>
      <ng-template #emptyMessageCard>
        <ng-container [ngTemplateOutlet]="emptyMessageTemplate" />
      </ng-template>
      <ng-template #paginator>
        <ng-container [ngTemplateOutlet]="paginatorTemplate" />
      </ng-template>
    </app-page-data-list-grid-view>
  }

  @if (filter) {
    <p-drawer
      [visible]="filterDrawerVisible()"
      (onHide)="closeFilter()"
      header="فیلتر"
      class="contnet"
      styleClass="!w-[80vw] md:!w-96 md:!max-w-96 !max-w-sm"
    >
      <hr class="mt-0!" />
      <div class="pt-2">
        <ng-container [ngTemplateOutlet]="filter" [ngTemplateOutletContext]="{ $implicit: columns }"> </ng-container>
      </div>
    </p-drawer>
  }
</div>