@unifylib/ui-lib 1.0.3

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

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

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

@@ -0,0 +1,28 @@
+<ng-container *ngIf="buttonsAction; else list_Action">
+    <div fxLayout="row" fxLayoutAlign="start start" style="padding: 0 10px">
+        <div fxLayout="column" *ngFor="let action of actions; let i = index" style="padding: 0 10px">
+            <button  [ngClass]="action.isPrimary ? 'btn-background-primary' : 'btn-none-background-primary'"
+                     (click)="getClickedAction(action)"
+                     [style]="'width: auto;border: var(--primary-color-2nd) solid 1px;cursor: pointer'"
+                     class="icon-design"
+                     [disabled]="disabled"
+            >
+                {{ action.label | translate}}
+                <mat-icon *ngIf="action.icon?.length" svgIcon={{action.icon}} class="svgColor"></mat-icon>
+            </button>
+        </div>
+    </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">
+            <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)">
+                <span>{{list_Action.label}}</span>
+            </button>
+        </mat-menu>
+    </div>
+</ng-template>

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

@@ -0,0 +1,6 @@
+
+.svgColor{
+  fill: transparent !important;
+  stroke: var(--accent-color) !important;
+
+}

package/src/lib/components/button-actions/button-actions.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonActionsComponent } from './button-actions.component';
+
+describe('ButtonActionsComponent', () => {
+  let component: ButtonActionsComponent;
+  let fixture: ComponentFixture<ButtonActionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonActionsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ButtonActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,72 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {ButtonActionSettings} from "../../base-model/button-action-settings";
+import {MatDialog} from "@angular/material/dialog";
+import {ActionCommentComponent} from "../rejection-comment/action-comment.component";
+import {MatIcon} from "@angular/material/icon";
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+import {MatIconButton} from "@angular/material/button";
+import {NgClass, NgForOf, NgIf} from "@angular/common";
+import {TranslateModule} from "@ngx-translate/core";
+import {FlexModule} from "@angular/flex-layout";
+
+@Component({
+  selector: 'app-button-actions',
+  standalone: true,
+  imports: [
+    MatIcon,
+    MatMenuTrigger,
+    MatIconButton,
+    MatMenu,
+    MatMenuItem,
+    NgIf,
+    NgClass,
+    FlexModule,
+    NgForOf,
+    TranslateModule
+  ],
+  templateUrl: './button-actions.component.html',
+  styleUrl: './button-actions.component.scss'
+})
+export class ButtonActionsComponent {
+  constructor(public dialog: MatDialog) { }
+
+  @Input()
+  actions: ButtonActionSettings[] =[];
+  @Input()
+  disabled?: boolean = false;
+
+  @Output()
+  clickedButton: EventEmitter<any> = new EventEmitter();
+
+  @Input()
+  buttonsAction: boolean = false;
+
+  @Input()
+  listAction: ButtonActionSettings[] = [];
+  ngOnInit(): void {
+  }
+
+
+  getClickedAction(action: ButtonActionSettings) {
+    if (action.showCommentDialog === true) {
+      const dialogRef = this.dialog.open(ActionCommentComponent, {
+        data: {label: action.label, isTermination: action.commentRequired, external: false,
+          warningMsg: false},
+        width: '600px',
+        height: 'auto',
+        direction:  'ltr' // this.authService.dir === 'rtl' ? 'rtl': 'ltr'
+      });
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          action.comment = result.comment;
+          action.shareExternal = result.shareExternal;
+          this.clickedButton.emit(action);
+        }
+      });
+
+    } else {
+      this.clickedButton.emit(action);
+    }
+  }
+
+}