psp_panel/src/app/shared/components/pageDataList/page-data-list-table-view.component.ts

import { Maybe } from '@/core';
import { UikitEmptyStateComponent } from '@/uikit';
import { CommonModule } from '@angular/common';
import {
  Component,
  computed,
  ContentChild,
  EventEmitter,
  Input,
  Output,
  signal,
  TemplateRef,
} from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { DrawerModule } from 'primeng/drawer';
import { PaginatorModule } from 'primeng/paginator';
import { SkeletonModule } from 'primeng/skeleton';
import { TableModule } from 'primeng/table';
import { KeyValueComponent } from '../key-value.component/key-value.component';
import { TableActionRowComponent } from '../table-action-row.component';
import { PageDataValueComponent } from './page-data-value.component';
import { IColumn } from './page-data-list.component';

@Component({
  selector: 'app-page-data-list-table-view',
  templateUrl: './page-data-list-table-view.component.html',
  host: {
    class: 'block w-full h-full overflow-hidden',
  },
  imports: [
    CommonModule,
    TableActionRowComponent,
    UikitEmptyStateComponent,
    TableModule,
    ButtonModule,
    SkeletonModule,
    PaginatorModule,
    DrawerModule,
    KeyValueComponent,
    PageDataValueComponent,
  ],
})
export class AppPageDataListTableView<I = any> {
  @Input({ required: true }) pageTitle!: string;
  @Input({ required: true }) columns!: IColumn[];
  @Input({ required: true }) items!: any[];
  @Input({ required: true }) loading!: boolean;
  @Input({ required: true }) emptyPlaceholderTitle!: string;
  @Input() addNewCtaLabel?: string;
  @Input() emptyPlaceholderDescription?: string = '';
  @Input() emptyPlaceholderCtaLabel?: string;
  @Input() currentPage?: number = 1;
  @Input() showEdit: boolean = false;
  @Input() showDelete: boolean = false;
  @Input() showDetails: boolean = false;
  @Input() showAdd: boolean = false;
  @Input() showRefresh: boolean = true;
  @Input() isFiltered: boolean = false;
  @Input() fullHeight?: boolean = false;
  @Input() height: string = '';
  @Input() expandable?: boolean = false;
  @Input() expandableItemKey?: string = '';
  @Input() expandColumns?: Maybe<IColumn[]> = null;
  @Input() dataKey?: string = 'items';
  @Input() showPaginator?: boolean;
  @Input() showIndex?: boolean = true;
  @Input() hasCaption: boolean = false;

  @ContentChild('filter', { static: true }) filter!: TemplateRef<any> | null;
  @ContentChild('paginator', { static: true }) paginator!: TemplateRef<any> | null;
  @ContentChild('moreActions', { static: true }) moreActions!: TemplateRef<any> | null;
  @ContentChild('expandableTemp', { static: false }) expandableTemp!: TemplateRef<any> | null;
  @ContentChild('captionBox', { static: false }) captionBox!: TemplateRef<any> | null;
  @ContentChild('emptyMessageCard', { static: true }) emptyMessageCard!: TemplateRef<any> | null;

  @Output() onEdit = new EventEmitter<any>();
  @Output() onDelete = new EventEmitter<any>();
  @Output() onDetails = new EventEmitter<any>();
  @Output() onAdd = new EventEmitter<void>();
  @Output() onChangePage = new EventEmitter<any>();
  @Output() onThumbnailClick = new EventEmitter<any>();
  @Output() onRefresh = new EventEmitter();

  filterDrawerVisible = signal<boolean>(false);
  expandedRows: { [key: string]: boolean } = {};

  edit = (item: I) => {
    this.onEdit.emit(item);
  };

  remove = (item: I) => {
    this.onDelete.emit(item);
  };

  details = (item: I) => {
    this.onDetails.emit(item);
  };

  openAddForm = () => {
    this.onAdd.emit();
  };

  openFilter = () => {
    this.filterDrawerVisible.set(true);
  };

  closeFilter = () => {
    this.filterDrawerVisible.set(false);
  };

  onPage = ($event: any) => {
    this.onChangePage.emit($event);
  };

  openThumbnailModal = (item: I) => {
    // this.
  };

  actionsCount = computed(() => {
    let totalCount = 0;
    if (this.showEdit) totalCount += 1;
    if (this.showDelete) totalCount += 1;
    if (this.showDetails) totalCount += 1;
    return totalCount;
  });

  refresh() {
    this.onRefresh.emit();
  }
}