@unifylib/ui-lib 1.0.3 → 1.1.4

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

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

@@ -1,28 +0,0 @@
-<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

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

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

@@ -1,23 +0,0 @@
-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

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