@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/base-table/base-table.component.ts

@@ -1,568 +1,621 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  effect,
-  EventEmitter,
-  Inject,
-  Input,
-  OnChanges, OnDestroy,
-  OnInit,
-  Output,
-  SimpleChanges
-} from "@angular/core";
-import {
-  MatCell,
-  MatCellDef,
-  MatColumnDef,
-  MatHeaderCell,
-  MatHeaderCellDef,
-  MatHeaderRow,
-  MatHeaderRowDef,
-  MatRow,
-  MatRowDef,
-  MatTable,
-  MatTableDataSource
-} from "@angular/material/table";
-import {TranslateModule, TranslateService} from "@ngx-translate/core";
-import {MatSortModule} from "@angular/material/sort";
-import {
-  CurrencyPipe,
-  DatePipe, DecimalPipe,
-  JsonPipe,
-  NgClass,
-  NgForOf,
-  NgIf,
-  NgStyle,
-  NgSwitch,
-  NgSwitchCase,
-  NgSwitchDefault
-} from "@angular/common";
-import {MatIcon} from "@angular/material/icon";
-import {MatButton, MatButtonModule, MatIconButton} from "@angular/material/button";
-import {NgxPaginationModule} from "ngx-pagination";
-import {ButtonActionsComponent} from "../button-actions/button-actions.component";
-import {ShareDataService} from "../../services/trigger-form.service";
-import {BaseUtils} from "../../utils/base-utils";
-import {BackendService} from "../../services/backend-service";
-import {FlexLayoutModule} from "@angular/flex-layout";
-import {Filter} from "../../base-model/filter.model";
-import {FilterRequest} from "../../base-model/filter-request";
-import {
-  ADD_NEW_RECORD_ACTION,
-  ButtonActionSettings,
-  EMPTY_PAGE_INFO,
-  FRONT_END_COLUMN_TYPES,
-  PageInfo,
-  SELECT_RECORD_ACTION, TABLE_RECORD_ACTION,
-  TableColumn
-} from "../../base-model";
-import {ReportRequest} from "../../base-model/report-request.model";
-import {TablePageUserAction} from "../../base-model/table-page-user-action.interface";
-import {Workflow} from "../../base-model/workflow/workflow.model";
-import {ResponseEnvelop} from "../../base-model/response-envelop.model";
-import {Router} from "@angular/router";
-import {MatLabel} from "@angular/material/form-field";
-import {MatChipListbox, MatChipOption} from "@angular/material/chips";
-import {MatButtonToggle, MatButtonToggleGroup} from "@angular/material/button-toggle";
-import {TitleBarComponent} from "../title-bar/title-bar.component";
-import {PaginatorComponent} from "../paginator/paginator.component";
-import {MatCheckbox} from "@angular/material/checkbox";
-
-@Component({
-  selector: 'app-base-table',
-  standalone: true,
-  templateUrl: './base-table.component.html',
-  styleUrls: ['./base-table.component.scss'],
-  animations: [],
-  imports: [
-    NgStyle,
-    NgClass,
-    TranslateModule,
-    MatIcon,
-    MatSortModule,
-    MatColumnDef,
-    MatHeaderCellDef,
-    NgIf,
-    MatTable,
-    MatHeaderCell,
-    NgSwitch,
-    MatButtonModule,
-    MatCell,
-    MatCellDef,
-    DatePipe,
-    CurrencyPipe,
-    NgxPaginationModule,
-    MatRow,
-    MatRowDef,
-    MatHeaderRow,
-    NgSwitchCase,
-    NgSwitchDefault,
-    MatHeaderRowDef,
-    MatIconButton,
-    NgForOf,
-    JsonPipe,
-    FlexLayoutModule,
-    MatButton,
-    ButtonActionsComponent,
-    MatLabel,
-    MatChipListbox,
-    MatChipOption,
-    MatButtonToggleGroup,
-    MatButtonToggle,
-    TitleBarComponent,
-    PaginatorComponent,
-    DecimalPipe,
-    MatCheckbox,
-  ]
-})
-export class BaseTableComponent extends BaseUtils implements OnInit, OnChanges, OnDestroy {
-
-  collection = {count: 60, data: []};
-  config = {
-    itemsPerPage: 15,
-    currentPage: 1,
-    totalItems: this.collection.count
-  };
-  public maxSize: number = 7;
-  public directionLinks: boolean = true;
-  public autoHide: boolean = false;
-  public responsive: boolean = true;
-  public labels: any = {
-    previousLabel: '<',
-    nextLabel: '>',
-    screenReaderPaginationLabel: 'Pagination',
-    screenReaderPageLabel: 'page',
-    screenReaderCurrentLabel: `You're on page`
-  };
-
-  totalElements = 0;
-  pagesCount = 0;
-  pageIndex = 0;
-  private selectedStatusFilter: Filter[] = [];
-  advancedAppliedFilter: any[] = [];
-  searchStr: string = '';
-  private filterRequest: FilterRequest = new FilterRequest();
-  private timer: any;
-  @Input()
-  override pageInfo: PageInfo = EMPTY_PAGE_INFO;
-
-  @Input()
-  enablePagination: boolean = true;
-
-  @Input() data?: MatTableDataSource<any>;
-  @Input()
-  listAction: ButtonActionSettings[] = [];
-
-  @Input()
-  columns: TableColumn<any>[];
-
-  @Input()
-  filters: Filter[] = [];
-
-  @Input() //@ts-ignore
-  pathParam: number;
-
-  @Input() //@ts-ignore
-  extraButton: string;
-
-  @Input() //@ts-ignore
-  enforceRefresh: boolean = false;
-
-  @Input()
-  isPending: boolean = false;
-
-  @Input()
-  trigger: boolean = false;
-
-  @Input()
-  reportRequest: ReportRequest = new ReportRequest({});
-
-  @Input()
-  separateEndpointData: any;
-  @Input()
-  manageablePages: boolean = false;
-  @Input()
-  totalPagesCount: number = 0;
-  @Input()
-  currentPageIndex: number = 0;
-
-  @Output()
-  pageChange: EventEmitter<any> = new EventEmitter();
-
-
-  @Output()
-  userAction: EventEmitter<TablePageUserAction> = new EventEmitter<TablePageUserAction>();
-  @Output()
-  hyperLinkAction: EventEmitter<TablePageUserAction> = new EventEmitter<TablePageUserAction>();
-
-  @Output()
-  extraAction: EventEmitter<TablePageUserAction> = new EventEmitter<TablePageUserAction>();
-
-  @Output()
-  listActionClicked: EventEmitter<{ action: ButtonActionSettings, row: any }> = new EventEmitter<{
-    action: ButtonActionSettings,
-    row: any
-  }>();
-
-  @Output()
-  showDialog: EventEmitter<any> = new EventEmitter<any>();
-
-  usedWorkflow!: Workflow;
-
-  mode:any;
-
-  @Input()
-  customizedData?: MatTableDataSource<any>;
-  dataSource: MatTableDataSource<any>;
-  selectedRowIndex = -1;
-  noDataFound = false;
-  totalRequiredCountItem = 0;
-
-
-
-  @Output()
-  clickRoutePage: EventEmitter<any> = new EventEmitter<any>();
-
-  constructor(
-      private backendService: BackendService,
-      public translateService: TranslateService,
-      public shareDataService: ShareDataService,
-      @Inject('securityManager') private securityManager: any,
-      private router: Router,
-  ) {
-    super();
-    this.dataSource = new MatTableDataSource();
-    this.columns = [];
-    this.filterRequest = new FilterRequest();
-
-    effect(() => {
-      if (this.pageInfo.lazyLoadData !== true || this.enforceRefresh === true) {
-        this.loadData();
-      }
-    });
-
-  }
-
-  ngOnDestroy(): void {
-    console.log('Component Destroyed ');
-  }
-
-  ngOnInit(): void {
-    this.backendService.isEmptyItems = this.dataSource.data.length <= 0;
-    if (this.customizedData) {
-      this.dataSource = this.customizedData;
-    }
-    if(this.manageablePages) {
-      this.pagesCount = this.totalPagesCount;
-      this.pageIndex = this.currentPageIndex;
-    }
-    console.log(`${this.customizedData?.data},${this.dataSource.data?.length > 0} && ${!this.pageInfo.hidePagination} from Down ***** manage ${this.manageablePages}, page Count ${this.pagesCount}, page Index ${this.pageIndex}, ${this.totalPagesCount},${this.currentPageIndex}`);
-
-  }
-
-  onPageChange(event: number) {
-    this.getNext(event - 1);
-    if(this.manageablePages){
-      this.pageChange.emit(event);
-    }else {
-      this.getNext(event - 1);
-    }
-    this.config.currentPage = event;
-  }
-
-  extractFieldName(element: any, property: string) {
-    if (property.includes('.')) {
-      return property.split('.').reduce((acc, part) => acc && acc[part], element);
-    } else {
-      const c = this.columns.find(c => c.property === property);
-      if (Array.isArray(element[property]) && c.arraySubProperty ) {
-        const fieldValues = element[property].map(f => f[c.arraySubProperty]);
-        return  fieldValues.join(', ');
-      }else {
-        return element[property];
-      }
-    }
-  }
-
-  get visibleColumns() {
-    this.buildGroups()
-    return this.columns.filter(column => column.visible).map(column => column.property);
-  }
-
-  getNext($event: number) {
-    this.reportRequest.filterRequest.pageIndex = $event;
-    this.loadData()
-  }
-
-  private loadData() {
-    clearTimeout(this.timer);
-    if (!this.reportRequest.filterRequest) {
-      this.reportRequest.filterRequest = new FilterRequest(this.pageInfo.pageSize);
-      this.reportRequest.filterRequest.filters = [];
-    }
-    if (this.separateEndpointData || !this.pageInfo.apiUri || this.pageInfo.apiUri.length === 0) {
-      this.dataSource.data = this.separateEndpointData;
-    } else if(this.reportRequest == undefined){
-      return;
-    } else if(!this.manageablePages)  {
-      this.timer = setTimeout(() => {
-          this.reportRequest.filterRequest.columns = this.columns?.filter(c => FRONT_END_COLUMN_TYPES.indexOf(c.type) < 0 ).map(c => c.property) || [];
-          this.reportRequest.filterRequest.pendingPage = this.isPending;
-          if (this.filters?.length>0) {
-            this.reportRequest.filterRequest.filters = this.reportRequest.filterRequest.filters.concat(this.filters);
-          }
-            this.backendService.getItemsByFilter(this.reportRequest?.filterRequest, this.pageInfo.apiUri).subscribe(resp => {
-              const responseEnvelope = new ResponseEnvelop(resp);
-              if (responseEnvelope.valid) {
-                this.totalRequiredCountItem = this.reportRequest.filterRequest.pageSize
-                this.noDataFound = responseEnvelope.body.length < 1;
-                this.dataSource.data = responseEnvelope.body;
-                this.backendService.isEmptyItems = this.dataSource.data.length <= 0;
-                this.totalElements = responseEnvelope.totalSize || 0;
-                this.pagesCount = responseEnvelope.pagesCount || 1;
-                this.pageIndex = this.reportRequest.filterRequest.pageIndex + 1;
-                this.config.totalItems = responseEnvelope.totalSize || 0;
-                this.config.currentPage = this.pageIndex + 1;
-                // this.pageSize = this.reportRequest.filterRequest.pageSize;
-              }
-            });
-          }
-          , 300);
-    }
-  }
-
-  getStatusDescription(element: any) {
-    return this.backendService.getStatusDescription(element, this.usedWorkflow);
-  }
-
-  getStateType(element: any) {
-    return element.stateType
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes["customizedData"] && !changes["customizedData"].isFirstChange()) {
-      this.dataSource.data = changes["customizedData"].currentValue?.data || [];  // Update data source with new data
-      this.pagesCount=this.totalPagesCount;
-      this.pageIndex=this.currentPageIndex;
-    }
-    if (changes["enforceRefresh"] && !changes["enforceRefresh"].isFirstChange()) {
-      this.loadData();
-    }
-  }
-  getCroppedText(elementValue: any, subWidth: number = 20) {
-    return elementValue && elementValue.length > subWidth ? elementValue.substring(0, subWidth) + "..." : elementValue;
-  }
-
-  emitEvent(element: any) {
-    this.showDialog.emit(element);
-  }
-
-  extractFormat(column: TableColumn<any>) {
-    return column?.format || 'd/M/yyyy, h:mm a';
-  }
-
-  actionListClicked(listAction: ButtonActionSettings, element: any) {
-    this.listActionClicked.emit({action:listAction, row: element});
-  }
-
-  hyperLinkClicked(actionName: string, element: any) {
-    const action = TABLE_RECORD_ACTION;
-    action.actionKey = actionName;
-    action.item = element;
-    action.pageInfo = this.pageInfo;
-    this.hyperLinkAction.emit(action)
-  }
-
-
-  emitRoutePage(element: any){
-    this.clickRoutePage.emit(element);
-  }
-
-  onSelectItem(row: any) {
-    // console.log('row', row)
-    if (this.pageInfo.selfRouting) {
-        const mode = this.isPending ? 'pending' : 'view';
-        const url = `${this.pageInfo.listRoutePath || this.router.url}/view`;
-        const encryptedId = this.backendService.encrypt(row.id+"");
-        const encryptedMode = this.backendService.encrypt(mode);
-        this.router.navigate([`${url}`],
-          { queryParams: { token: encryptedId , mode : encryptedMode } });
-        return;
-    }
-    // const action = SELECT_RECORD_ACTION;
-    // action.id = row?.id;
-    // action.item = row;
-    // this.userAction.emit(action)
-  }
-
-  openNewTab(row) {
-    if (!this.pageInfo.embededTableOnly) {
-      const mode = this.isPending ? 'pending' : 'view';
-      window.open(`${this.pageInfo.listRoutePath}/${mode}` + '/' + row?.id);
-    }
-  }
-
-  switchViewMode(b: boolean) {
-    this.isPending = !this.isPending;
-    this.loadData();
-  }
-
-  onAddNewAction($event: any) {
-    const url = `${this.pageInfo.listRoutePath || this.router.url}/view`;
-    const encryptedId = this.backendService.encrypt("-1");
-    const encryptedMode = this.backendService.encrypt("pending");
-    this.router.navigate([`${url}`],
-      { queryParams: { token: encryptedId , mode : encryptedMode } });
-
-    // const action = SELECT_RECORD_ACTION;
-    // action.id = row?.id;
-    // action.item = row;
-    // this.userAction.emit(action)
-  }
-
-  showAddNew() {
-    return this.pageInfo.hasAddButton ;
-  }
-
-  onExtraButtionAction($event: any) {
-    this.extraAction.emit($event);
-
-  }
-
-  hasGroups() {
-    let b = this.columns.findIndex(p => p.group);
-    return b >= 0;
-  }
-  groupNames: any = []
-  groupSpans: Map<string, number> = new Map();
-
-  buildGroups(){
-    let count = 0;
-    this.groupNames = [];
-    this.groupSpans.clear();
-    if(this.hasGroups() === false){
-      return;
-    }
-    this.columns
-      .filter(column => column.visible === true)
-      .forEach((column) => {
-        if (column.group === "-") {
-          this.groupNames.push(count.toString());
-          this.insertInMap(count);
-          count++;
-          return;
-        } else if (!this.groupNames.includes(column.group)) {
-          this.groupNames.push(column.group);
-          this.insertInMap(column.group);
-          return;
-        }
-        this.insertInMap(column.group);
-      });
-  }
-
-  insertInMap(key){
-    if(this.groupSpans.has(key)){
-      this.groupSpans.set(key.toString(), this.groupSpans.get(key) + 1);
-    } else {
-      this.groupSpans.set(key.toString(), 1);
-    }
-  }
-
-  isHumanMade(str){
-    return isNaN(str);
-  }
-
-  actionButtonClicked(actionKey: string, item: any): void {
-    if (actionKey === 'navigate') {
-      this.handleNavigateAction(item);
-      return;
-    }
-
-    this.emitTableAction(actionKey, item);
-  }
-
-  private handleNavigateAction(item: any): void {
-    const mode = this.isPending ? 'pending' : 'view';
-    const basePath = this.pageInfo.listRoutePath || this.router.url;
-    const url = `${basePath}/view`;
-
-    const encryptedId = this.backendService.encrypt(item.id.toString());
-    const encryptedMode = this.backendService.encrypt(mode);
-
-    this.router.navigate([url], {
-      queryParams: { token: encryptedId, mode: encryptedMode }
-    });
-  }
-
-  private emitTableAction(actionKey: string, item: any): void {
-    const action = TABLE_RECORD_ACTION;
-    action.actionKey = actionKey;
-    action.item = item;
-    action.pageInfo = this.pageInfo;
-    this.userAction.emit(action);
-  }
-
-  extractReport(reportType: any) {
-    const myFilters = this.reportRequest.filterRequest;
-    const reportRequest = this.backendService.buildReportRequest(this.columns, this.pageInfo.labelsSection + '.list_title',
-      myFilters, reportType, this.pageInfo, this.searchStr, 'LANDSCAPE');
-    this.backendService.downloadReport(reportRequest, this.pageInfo.apiUri);
-  }
-
-  getIcon(status: string): string {
-    switch (status) {
-      case 'pass': return 'check_circle';
-      case 'warning': return 'warning';
-      case 'error': return 'error';
-      default: return 'help';
-    }
-  }
-
-  actionCheckedClicked(property: string, element) {
-    element[property]= !element[property];
-    this.actionButtonClicked(property, element);
-  }
-
-
-  isDarkHighlight(row: any): boolean {
-    const groupByProp = this.pageInfo?.groupByProperty;
-    const groupByValues = this.pageInfo?.groupByValue;
-
-    if (!groupByProp || !groupByValues || !row[groupByProp]) {
-      return false;
-    }
-
-    const cellValue = row[groupByProp].toString();
-
-    return groupByValues.some(val =>
-      cellValue.includes(val) && cellValue.length > val.length
-    );
-  }
-
-  shouldRenderAsHyperLink(element: any): boolean {
-    const groupByProp = this.pageInfo?.groupByProperty;
-    const groupByValues = this.pageInfo?.groupByValue;
-
-    if (!groupByProp || !groupByValues || !element[groupByProp]) {
-      return false;
-    }
-
-    const value = element[groupByProp].toString();
-
-    return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
-  }
-
-  shouldShowButton(element: any): boolean {
-    const groupByProp = this.pageInfo?.groupByProperty;
-    const groupByValues = this.pageInfo?.groupByValue;
-
-    if (!groupByProp || !groupByValues || !element[groupByProp]) {
-      return true;
-    }
-
-    const value = element[groupByProp].toString();
-
-    return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
-  }
-
-}
+import {
+  ChangeDetectorRef,
+  Component,
+  effect,
+  EventEmitter,
+  Inject,
+  Input,
+  OnChanges, OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges
+} from "@angular/core";
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatRow,
+  MatRowDef,
+  MatTable,
+  MatTableDataSource
+} from "@angular/material/table";
+import {TranslateModule, TranslateService} from "@ngx-translate/core";
+import {MatSortModule, Sort} from "@angular/material/sort";
+import {
+  CurrencyPipe,
+  DatePipe, DecimalPipe,
+  JsonPipe,
+  NgClass,
+  NgForOf,
+  NgIf,
+  NgStyle,
+  NgSwitch,
+  NgSwitchCase,
+  NgSwitchDefault, UpperCasePipe
+} from "@angular/common";
+import {MatIcon} from "@angular/material/icon";
+import {MatButton, MatButtonModule, MatIconButton} from "@angular/material/button";
+import {NgxPaginationModule} from "ngx-pagination";
+import {ButtonActionsComponent} from "../button-actions/button-actions.component";
+import {ShareDataService} from "../../services/trigger-form.service";
+import {BaseUtils} from "../../utils/base-utils";
+import {BackendService} from "../../services/backend-service";
+import {Filter} from "../../base-model/filter.model";
+import {FilterRequest} from "../../base-model/filter-request";
+import {
+  ADD_NEW_RECORD_ACTION,
+  ButtonActionSettings,
+  EMPTY_PAGE_INFO, FieldInfo,
+  FRONT_END_COLUMN_TYPES,
+  PageInfo,
+  SELECT_RECORD_ACTION, TABLE_RECORD_ACTION,
+  TableColumn
+} from "../../base-model";
+import {ReportRequest} from "../../base-model/report-request.model";
+import {TablePageUserAction} from "../../base-model/table-page-user-action.interface";
+import {Workflow} from "../../base-model/workflow/workflow.model";
+import {ResponseEnvelop} from "../../base-model/response-envelop.model";
+import {Router} from "@angular/router";
+import {MatLabel} from "@angular/material/form-field";
+import {MatChipListbox, MatChipOption} from "@angular/material/chips";
+import {MatButtonToggle, MatButtonToggleGroup} from "@angular/material/button-toggle";
+import {TitleBarComponent} from "../title-bar/title-bar.component";
+import {PaginatorComponent} from "../paginator/paginator.component";
+import {MatCheckbox} from "@angular/material/checkbox";
+import {BaseFormCanvasComponent} from "../base-form-canvas/base-form-canvas.component";
+import {FilterBuilderComponent} from "../advanced-filter/filter-builder/filter-builder.component";
+import {FieldFilter} from "../../base-model/field-filter.model";
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+
+@Component({
+  selector: 'app-base-table',
+  standalone: true,
+  templateUrl: './base-table.component.html',
+  styleUrls: ['./base-table.component.scss'],
+  animations: [],
+  imports: [
+    NgStyle,
+    NgClass,
+    TranslateModule,
+    MatIcon,
+    MatSortModule,
+    MatColumnDef,
+    MatHeaderCellDef,
+    NgIf,
+    MatTable,
+    MatHeaderCell,
+    NgSwitch,
+    MatButtonModule,
+    MatCell,
+    MatCellDef,
+    DatePipe,
+    CurrencyPipe,
+    NgxPaginationModule,
+    MatRow,
+    MatRowDef,
+    MatHeaderRow,
+    NgSwitchCase,
+    NgSwitchDefault,
+    MatHeaderRowDef,
+    MatIconButton,
+    NgForOf,
+    JsonPipe,
+    MatButton,
+    ButtonActionsComponent,
+    MatLabel,
+    MatChipListbox,
+    MatChipOption,
+    MatButtonToggleGroup,
+    MatButtonToggle,
+    TitleBarComponent,
+    PaginatorComponent,
+    DecimalPipe,
+    MatCheckbox,
+    BaseFormCanvasComponent,
+    FilterBuilderComponent,
+    MatMenuTrigger,
+    MatMenu,
+    MatMenuItem,
+    UpperCasePipe,
+  ]
+})
+export class BaseTableComponent extends BaseUtils implements OnInit, OnChanges, OnDestroy {
+  types: string[] = ["pdf", "csv", "xlsx"]
+  collection = {count: 60, data: []};
+  config = {
+    itemsPerPage: 15,
+    currentPage: 1,
+    totalItems: this.collection.count
+  };
+  public maxSize: number = 7;
+  public directionLinks: boolean = true;
+  public autoHide: boolean = false;
+  public responsive: boolean = true;
+  public labels: any = {
+    previousLabel: '<',
+    nextLabel: '>',
+    screenReaderPaginationLabel: 'Pagination',
+    screenReaderPageLabel: 'page',
+    screenReaderCurrentLabel: `You're on page`
+  };
+
+  @Input()
+  filterFields: FieldInfo[];
+  @Input() noDataFoundIcon = 'close';
+  @Input() noDataFoundTitle = 'noDataFoundTitle';
+  @Input() noDataFoundSubtitle = 'noDataFoundSubtitle';
+  totalElements = 0;
+  pagesCount = 0;
+  pageIndex = 1;
+  pageSize = 15;
+  private selectedStatusFilter: Filter[] = [];
+  advancedAppliedFilter: any[] = [];
+  searchStr: string = '';
+  private filterRequest: FilterRequest = new FilterRequest();
+  private timer: any;
+  @Input()
+  override pageInfo: PageInfo = EMPTY_PAGE_INFO;
+
+  @Input()
+  enablePagination: boolean = true;
+
+  @Input() data?: MatTableDataSource<any>;
+  @Input()
+  listAction: ButtonActionSettings[] = [];
+
+  @Input()
+  columns: TableColumn<any>[];
+
+  @Input()
+  filters: Filter[] = [];
+
+  @Input() //@ts-ignore
+  pathParam: number;
+
+  @Input() //@ts-ignore
+  extraButton: string;
+
+  @Input() //@ts-ignore
+  enforceRefresh: boolean = false;
+
+  @Input()
+  isPending: boolean = false;
+
+  @Input()
+  trigger: boolean = false;
+
+  @Input()
+  reportRequest: ReportRequest = new ReportRequest({});
+
+  @Input()
+  separateEndpointData: any;
+  @Input()
+  manageablePages: boolean = false;
+  @Input()
+  totalPagesCount: number = 0;
+  @Input()
+  currentPageIndex: number = 0;
+
+  @Output()
+  pageChange: EventEmitter<any> = new EventEmitter();
+
+
+  @Output()
+  userAction: EventEmitter<TablePageUserAction> = new EventEmitter<TablePageUserAction>();
+  @Output()
+  hyperLinkAction: EventEmitter<TablePageUserAction> = new EventEmitter<TablePageUserAction>();
+
+  @Output()
+  extraAction: EventEmitter<TablePageUserAction> = new EventEmitter<TablePageUserAction>();
+
+  @Output()
+  selectedColumn: EventEmitter<Sort> = new EventEmitter<Sort>();
+
+  @Output()
+  listActionClicked: EventEmitter<{ action: ButtonActionSettings, row: any }> = new EventEmitter<{
+    action: ButtonActionSettings,
+    row: any
+  }>();
+
+  @Output()
+  showDialog: EventEmitter<any> = new EventEmitter<any>();
+
+  usedWorkflow!: Workflow;
+
+  mode:any;
+
+  @Input()
+  customizedData?: MatTableDataSource<any>;
+  dataSource: MatTableDataSource<any>;
+  selectedRowIndex = -1;
+  noDataFound = false;
+  totalRequiredCountItem = 0;
+
+
+  @Output()
+  clickRoutePage: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+      private backendService: BackendService,
+      public translateService: TranslateService,
+      public shareDataService: ShareDataService,
+      @Inject('securityManager') private securityManager: any,
+      private router: Router,
+  ) {
+    super();
+    this.dataSource = new MatTableDataSource();
+    this.columns = [];
+    this.filterRequest = new FilterRequest();
+
+    effect(() => {
+      if (this.pageInfo.lazyLoadData !== true || this.enforceRefresh === true) {
+        this.loadData();
+      }
+    });
+
+  }
+
+  ngOnDestroy(): void {
+  }
+
+  ngOnInit(): void {
+    this.backendService.isEmptyItems = this.dataSource.data.length <= 0;
+    if (this.customizedData) {
+      this.dataSource = this.customizedData;
+    }
+    if(this.manageablePages) {
+      this.pagesCount = this.totalPagesCount;
+      this.pageIndex = this.currentPageIndex;
+    }
+
+  }
+
+  onPageChange(event: number) {
+    this.pageIndex = event;
+    this.getNext(this.pageIndex - 1);
+    if (this.manageablePages) {
+      this.pageChange.emit(this.pageIndex);
+    }
+  }
+
+
+  extractFieldName(element: any, property: string) {
+    if (property.includes('.')) {
+      return property.split('.').reduce((acc, part) => acc && acc[part], element);
+    } else {
+      const c = this.columns.find(c => c.property === property);
+      if (Array.isArray(element[property]) && c.arraySubProperty ) {
+        const fieldValues = element[property].map(f => f[c.arraySubProperty]);
+        return  fieldValues.join(', ');
+      }else {
+        return element[property];
+      }
+    }
+  }
+
+  get visibleColumns() {
+    this.buildGroups()
+    return this.columns.filter(column => column.visible).map(column => column.property);
+  }
+
+  getNext(pageIndex: number) {
+    this.reportRequest.filterRequest.pageIndex = pageIndex;
+    this.reportRequest.filterRequest.pageSize = this.pageSize;
+    this.loadData();
+  }
+  onPageSizeChange(event: number) {
+    this.pageSize = event;
+    this.pageIndex = 1; // reset to first page on page size change
+    this.reportRequest.filterRequest.pageSize = this.pageSize;
+    this.getNext(0);
+  }
+
+
+
+  private loadData() {
+    clearTimeout(this.timer);
+    if (!this.reportRequest.filterRequest) {
+      this.reportRequest.filterRequest = new FilterRequest(this.pageInfo.pageSize);
+      this.reportRequest.filterRequest.filters = this.advancedAppliedFilter;
+    }
+    if (this.separateEndpointData || !this.pageInfo.apiUri || this.pageInfo.apiUri.length === 0) {
+      this.dataSource.data = this.separateEndpointData;
+    } else if(this.reportRequest == undefined){
+      return;
+    } else if(!this.manageablePages)  {
+      this.timer = setTimeout(() => {
+          this.reportRequest.filterRequest.columns = this.columns?.filter(c => FRONT_END_COLUMN_TYPES.indexOf(c.type) < 0 ).map(c => c.property) || [];
+          this.reportRequest.filterRequest.pendingPage = this.isPending;
+          this.reportRequest.filterRequest.filters = this.advancedAppliedFilter;
+            this.backendService.getItemsByFilter(this.reportRequest?.filterRequest, this.pageInfo.apiUri).subscribe(resp => {
+              const responseEnvelope = new ResponseEnvelop(resp);
+              if (responseEnvelope.valid) {
+                this.totalRequiredCountItem = this.reportRequest.filterRequest.pageSize
+                this.noDataFound = responseEnvelope.body.length < 1;
+                this.dataSource.data = responseEnvelope.body;
+                this.backendService.isEmptyItems = this.dataSource.data.length <= 0;
+                this.totalElements = responseEnvelope.totalSize || 0;
+                this.pagesCount = Math.ceil(this.totalElements / this.pageSize) || 1;
+                this.pageIndex = (this.reportRequest.filterRequest.pageIndex || 0) + 1;
+                this.config.totalItems = responseEnvelope.totalSize || 0;
+                this.config.currentPage = this.pageIndex + 1;
+                // this.pageSize = this.reportRequest.filterRequest.pageSize;
+              }
+            });
+          }
+          , 300);
+    }
+  }
+
+  getStatusDescription(element: any) {
+    return this.backendService.getStatusDescription(element, this.usedWorkflow);
+  }
+
+  getStateType(element: any) {
+    return element.stateType
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["customizedData"] && !changes["customizedData"].isFirstChange()) {
+      this.dataSource.data = changes["customizedData"].currentValue?.data || [];  // Update data source with new data
+      this.pagesCount=this.totalPagesCount;
+      this.pageIndex=this.currentPageIndex;
+    }
+    if (changes["enforceRefresh"] && !changes["enforceRefresh"].isFirstChange()) {
+      this.loadData();
+    }
+  }
+  getCroppedText(elementValue: any, subWidth: number = 20) {
+    return elementValue && elementValue.length > subWidth ? elementValue.substring(0, subWidth) + "..." : elementValue;
+  }
+
+  emitEvent(element: any) {
+    this.showDialog.emit(element);
+  }
+
+  extractFormat(column: TableColumn<any>) {
+    return column?.format || 'd/M/yyyy, h:mm a';
+  }
+
+  actionListClicked(listAction: ButtonActionSettings, element: any) {
+    this.listActionClicked.emit({action:listAction, row: element});
+  }
+
+  hyperLinkClicked(actionName: string, element: any) {
+    const action = TABLE_RECORD_ACTION;
+    action.actionKey = actionName;
+    action.item = element;
+    action.pageInfo = this.pageInfo;
+    this.hyperLinkAction.emit(action)
+  }
+
+
+  emitRoutePage(element: any){
+    this.clickRoutePage.emit(element);
+  }
+
+  onSelectItem(row: any) {
+    if (this.pageInfo.selfRouting) {
+      const mode = this.isPending ? 'pending' : 'view';
+      const url = `${this.pageInfo.listRoutePath || this.router.url}/view`;
+
+      const encryptedId = this.backendService.encrypt(String(row.id));
+      const encryptedMode = this.backendService.encrypt(mode);
+
+      const encryptedRow = this.backendService.encrypt(JSON.stringify(row));
+
+      this.router.navigate([url], {
+        queryParams: { token: encryptedId, mode: encryptedMode },
+        state: { raw: encryptedRow },
+      });
+      return;
+    }
+    // const action = SELECT_RECORD_ACTION;
+    // action.id = row?.id;
+    // action.item = row;
+    // this.userAction.emit(action)
+  }
+
+  openNewTab(row) {
+    if (!this.pageInfo.embededTableOnly) {
+      const mode = this.isPending ? 'pending' : 'view';
+      window.open(`${this.pageInfo.listRoutePath}/${mode}` + '/' + row?.id);
+    }
+  }
+
+  switchViewMode(b: boolean) {
+    this.isPending = !this.isPending;
+    this.loadData();
+  }
+
+  onAddNewAction($event: any) {
+    const url = `${this.pageInfo.listRoutePath || this.router.url}/view`;
+    const encryptedId = this.backendService.encrypt("-1");
+    const encryptedMode = this.backendService.encrypt("pending");
+    this.router.navigate([`${url}`],
+      { queryParams: { token: encryptedId , mode : encryptedMode } });
+
+    // const action = SELECT_RECORD_ACTION;
+    // action.id = row?.id;
+    // action.item = row;
+    // this.userAction.emit(action)
+  }
+
+  showAddNew() {
+    return this.pageInfo.hasAddButton ;
+  }
+
+  onExtraButtionAction($event: any) {
+    this.extraAction.emit($event);
+
+  }
+
+  hasGroups() {
+    let b = this.columns.findIndex(p => p.group);
+    return b >= 0;
+  }
+  groupNames: any = []
+  groupSpans: Map<string, number> = new Map();
+
+  buildGroups(){
+    let count = 0;
+    this.groupNames = [];
+    this.groupSpans.clear();
+    if(this.hasGroups() === false){
+      return;
+    }
+    this.columns
+      .filter(column => column.visible === true)
+      .forEach((column) => {
+        if (column.group === "-") {
+          this.groupNames.push(count.toString());
+          this.insertInMap(count);
+          count++;
+          return;
+        } else if (!this.groupNames.includes(column.group)) {
+          this.groupNames.push(column.group);
+          this.insertInMap(column.group);
+          return;
+        }
+        this.insertInMap(column.group);
+      });
+  }
+
+  insertInMap(key){
+    if(this.groupSpans.has(key)){
+      this.groupSpans.set(key.toString(), this.groupSpans.get(key) + 1);
+    } else {
+      this.groupSpans.set(key.toString(), 1);
+    }
+  }
+
+  isHumanMade(str){
+    return isNaN(str);
+  }
+
+  actionButtonClicked(actionKey: string, item: any): void {
+    if (actionKey === 'navigate') {
+      this.handleNavigateAction(item);
+      return;
+    }
+
+    this.emitTableAction(actionKey, item);
+  }
+
+  private handleNavigateAction(item: any): void {
+    const mode = this.isPending ? 'pending' : 'view';
+    const basePath = this.pageInfo.listRoutePath || this.router.url;
+    const url = `${basePath}/view`;
+
+    const encryptedId = this.backendService.encrypt(item.id.toString());
+    const encryptedMode = this.backendService.encrypt(mode);
+
+    this.router.navigate([url], {
+      queryParams: { token: encryptedId, mode: encryptedMode }
+    });
+  }
+
+  private emitTableAction(actionKey: string, item: any): void {
+    const action = TABLE_RECORD_ACTION;
+    action.actionKey = actionKey;
+    action.item = item;
+    action.pageInfo = this.pageInfo;
+    this.userAction.emit(action);
+  }
+
+  extractReport(reportType: any) {
+    const myFilters = this.reportRequest.filterRequest;
+    const reportRequest = this.backendService.buildReportRequest(this.columns, this.pageInfo.labelsSection + '.list_title',
+      myFilters, reportType, this.pageInfo, this.searchStr, 'LANDSCAPE');
+    this.backendService.downloadReport(reportRequest, this.pageInfo.apiUri);
+  }
+
+  getIcon(status: string): string {
+    switch (status) {
+      case 'pass': return 'check_circle';
+      case 'warning': return 'warning';
+      case 'error': return 'error';
+      default: return 'help';
+    }
+  }
+
+  actionCheckedClicked(property: string, element) {
+    element[property]= !element[property];
+    this.actionButtonClicked(property, element);
+  }
+
+
+  isDarkHighlight(row: any): boolean {
+    const groupByProp = this.pageInfo?.groupByProperty;
+    const groupByValues = this.pageInfo?.groupByValue;
+
+    if (!groupByProp || !groupByValues || !row[groupByProp]) {
+      return false;
+    }
+
+    const cellValue = row[groupByProp].toString();
+
+    return groupByValues.some(val =>
+      cellValue.includes(val) && cellValue.length > val.length
+    );
+  }
+
+  shouldRenderAsHyperLink(element: any): boolean {
+    const groupByProp = this.pageInfo?.groupByProperty;
+    const groupByValues = this.pageInfo?.groupByValue;
+
+    if (!groupByProp || !groupByValues || !element[groupByProp]) {
+      return false;
+    }
+
+    const value = element[groupByProp].toString();
+
+    return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
+  }
+
+
+  onSortAction($event: Sort) {
+    this.reportRequest.filterRequest.sortKey = $event.active && $event.direction ?
+      this.columns.find(c => c.property === $event.active)?.orderByProperty || $event.active
+      : 'id';
+    this.reportRequest.filterRequest.sortDirection = $event.direction === 'asc' ? 'ASC' : 'DESC';
+    this.reportRequest.filterRequest.pageIndex = 0;
+      this.selectedColumn.emit($event);
+      this.loadData();
+  }
+
+  shouldShowButton(element: any): boolean {
+    const groupByProp = this.pageInfo?.groupByProperty;
+    const groupByValues = this.pageInfo?.groupByValue;
+
+    if (!groupByProp || !groupByValues || !element[groupByProp]) {
+      return true;
+    }
+
+    const value = element[groupByProp].toString();
+
+    return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
+  }
+  doAdvancedSearch($event: FieldFilter[]) {
+    this.advancedAppliedFilter = [];
+    if ($event.length === 0) {
+      this.advancedAppliedFilter = [];
+      this.loadData();
+      // this.paginator.firstPage();
+    } else {
+      this.advancedAppliedFilter = $event;
+      this.loadData();
+    }
+  }
+  resetData($event: boolean) {
+    if ($event) {
+      this.advancedAppliedFilter = [];
+      this.loadData();
+      // this.paginator.firstPage();
+    }
+  }
+}