@unifylib/ui-lib 1.1.3 → 1.1.4

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

@@ -1,621 +0,0 @@
-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();
-    }
-  }
-}

package/src/lib/components/button-actions/button-actions.component.html

@@ -1,27 +0,0 @@
-<ng-container *ngIf="buttonsAction; else list_Action">
-  <div class="action-buttons-container" *ngIf="(actions?.length ? actions : listAction)?.length > 0">
-    <button
-      *ngFor="let action of (actions?.length ? actions : listAction); let i = index"
-      class="action-button"
-      (click)="getClickedAction(action)"
-      [disabled]="disabled"
-      [attr.id]="action.id || ('actions-btn-' + action.label)"
-      [title]="action.label | translate"
-    >
-      <mat-icon *ngIf="action.icon?.length" class="action-icon">{{ action.icon }}</mat-icon>
-    </button>
-  </div>
-</ng-container>
-
-<ng-template #list_Action>
-  <div *ngIf="listAction?.length > 0">
-    <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()" style="justify-content: center; color: grey" id="actions-menu-trigger">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-    <mat-menu #menu="matMenu">
-      <button mat-menu-item *ngFor="let list_Action of listAction" (click)="getClickedAction(list_Action)" [attr.id]="list_Action.id || ('actions-menu-item-' + list_Action.label)">
-        <span>{{ list_Action.label | translate }}</span>
-      </button>
-    </mat-menu>
-  </div>
-</ng-template>