@unifylib/ui-lib 1.0.3

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

@@ -0,0 +1,570 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from "@angular/core";
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatRow,
+  MatRowDef,
+  MatTable
+} from "@angular/material/table";
+import {TranslateModule} from "@ngx-translate/core";
+import {MatSortModule} from "@angular/material/sort";
+import {NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault} from "@angular/common";
+import {MatIcon} from "@angular/material/icon";
+import {MatButton, MatButtonModule} from "@angular/material/button";
+import {NgxPaginationModule} from "ngx-pagination";
+import {FlexLayoutModule} from "@angular/flex-layout";
+import {Router} from "@angular/router";
+import {AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {MatError, MatFormField, MatInput, MatLabel, MatSuffix} from "@angular/material/input";
+import {BackendService} from "../../services";
+import {
+  BaseUtils,
+  buildFormFields,
+  getNegativeWfActionKey,
+  getPositiveWfActionKey,
+  getWfActionId
+} from "../../utils/base-utils";
+import {
+  EMPTY_PAGE_INFO,
+  FieldInfo,
+  Filter,
+  FilterRequest,
+  LookupItem,
+  PageInfo,
+  SELECT_RECORD_ACTION,
+  SnackMessage,
+  TableColumn
+} from "../../base-model";
+import {DoActionRequest, REJECT, SAVE} from "../../base-model/do-action-request";
+import {ActionCommentComponent} from "../rejection-comment/action-comment.component";
+import {MatDialog} from "@angular/material/dialog";
+import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from "@angular/material/datepicker";
+import moment, {Moment} from 'moment';
+import {AutoCompleteComponent} from "../auto-complete/auto-complete.component";
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatOption} from "@angular/material/core";
+import {MatChipListbox, MatChipOption} from "@angular/material/chips";
+import {TitleBarComponent} from "../title-bar/title-bar.component";
+import {PaginatorComponent} from "../paginator/paginator.component";
+import {Directionality} from "@angular/cdk/bidi";
+import {AttachmentUploaderComponent} from "../shared/attachment-uploader/attachment-uploader.component";
+import {EquationBuilderComponent} from "../equation-builder/equation-builder.component";
+import {MatSelect} from "@angular/material/select";
+
+import {BaseFormCanvasComponent} from "../base-form-canvas/base-form-canvas.component";
+import {MatCheckbox} from "@angular/material/checkbox";
+@Component({
+  selector: 'app-editable-base-table',
+  standalone: true,
+  templateUrl: './editable-base-table.component.html',
+  styleUrls: ['./editable-base-table.component.scss'],
+  animations: [],
+  imports: [
+    NgClass,
+    TranslateModule,
+    MatIcon,
+    MatSortModule,
+    MatColumnDef,
+    MatHeaderCellDef,
+    NgIf,
+    MatTable,
+    MatHeaderCell,
+    NgSwitch,
+    MatButtonModule,
+    MatCell,
+    MatCellDef,
+    NgxPaginationModule,
+    MatRow,
+    MatRowDef,
+    MatHeaderRow,
+    NgSwitchCase,
+    NgSwitchDefault,
+    MatHeaderRowDef,
+    NgForOf,
+    FlexLayoutModule,
+    MatButton,
+    ReactiveFormsModule,
+    MatInput,
+    AutoCompleteComponent,
+    MatFormField,
+    MatDatepicker,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatLabel,
+    MatSuffix,
+    MatChipListbox,
+    MatChipOption,
+    TitleBarComponent,
+    PaginatorComponent,
+    AttachmentUploaderComponent,
+    EquationBuilderComponent,
+    MatSelect,
+    MatOption,
+    BaseFormCanvasComponent,
+    MatCheckbox,
+  ],
+  providers: [
+    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
+    // application's root module. We provide it at the component level here, due to limitations of
+    // our example generation script.
+    // {
+    //   provide: DateAdapter,
+    //   useClass: MomentDateAdapter,
+    //   deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
+    // },
+
+    // { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+  ],
+})
+
+export class EditableBaseTableComponent extends BaseUtils implements OnInit, OnChanges {
+
+  collection = {count: 60, data: []};
+  config = {
+    itemsPerPage: 10,
+    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`
+  };
+
+  private timer: any;
+  dataElements: any[] = [];
+  noDataFound = false;
+  isLoaded: boolean = false;
+  totalElements = 0;
+  pagesCount = 0;
+  pageIndex = 0;
+  formParam: FormGroup;
+  searchForm: FormGroup;
+
+  @Input()
+  filterRequest: FilterRequest;
+
+  @Input()
+  superDataElements: any[];
+
+  @Input()
+  override pageInfo: PageInfo = EMPTY_PAGE_INFO;
+
+  @Input() //@ts-ignore
+  enforceRefresh: boolean = false;
+
+  @Input()
+  isPending: boolean = false;
+
+  @Input()
+  isBulkItemsSupported: boolean = false;
+
+  @Input()// @ts-ignore
+  public fields: FieldInfo[] = [];
+
+  @Input()// @ts-ignore
+  public searchFormFields: FieldInfo[] = [];
+
+  @Input() translationKey: string = 'addNew';
+
+  @Output()
+  formUpdated: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  saveActionEmitter: EventEmitter<any> = new EventEmitter<any>();
+  @Output()
+  saveAttachmentEmitter: EventEmitter<any> = new EventEmitter<any>();
+
+  @Input() actionRequestCallback!: (actionRequest: DoActionRequest) => DoActionRequest;
+
+  @ViewChild('uploader') uploaderComponent!: AttachmentUploaderComponent;
+
+  currentDirection: 'ltr' | 'rtl';
+  selectedFileFromUploader: File | null = null;
+  private selectedItem: any;
+
+
+  constructor(
+    private backendService: BackendService,
+    private router: Router,
+    private fb: FormBuilder,
+    public dialog: MatDialog,
+    private directionality: Directionality
+  ) {
+    super();
+  }
+
+  get dataFormArray(): FormArray {
+    return this.formParam.get('dataFormArray') as FormArray;
+  }
+
+  extractFormat(column: TableColumn<any>) {
+    return column?.format || 'd/M/yyyy, h:mm a';
+  }
+
+  get dataSource() {
+    return this.dataFormArray.value;
+  }
+
+  ngOnInit(): void {
+
+    this.currentDirection = this.directionality.value;
+    this.directionality.change.subscribe((value) => {
+      this.currentDirection = value;
+    })
+
+    if(this.superDataElements?.length>0){
+      this.dataElements=this.superDataElements;
+      this.buildForm();
+      this.isLoaded = true;
+    }else {
+      this.loadData();
+    }
+  }
+
+  private loadData() {
+    if (this.isPending) {
+      this.fields.forEach(field => {
+        field.readonly = true;
+      });
+    } else {
+      this.fields.forEach(field => {
+        field.readonly = false;
+      });
+    }
+
+    this.filterRequest.pendingPage = this.isPending
+    this.backendService.getItemsByFilter(this.filterRequest, this.pageInfo.apiUri).subscribe(resp => {
+      if (resp?.valid) {
+        this.dataElements = resp.body;
+        this.totalElements = resp.totalSize || 0;
+        this.noDataFound = resp.body.length < 1;
+        this.pagesCount = resp.pagesCount || 1;
+        this.pageIndex = this.filterRequest.pageIndex + 1;
+        this.buildForm();
+        this.isLoaded = true;
+      }
+    });
+  }
+
+  private buildForm() {
+    this.formParam = this.fb.group({
+      dataFormArray: this.fb.array(this.dataElements.map(item => this.fb.group(buildFormFields(this.fields, item)))),
+    });
+  }
+
+  onPageChange(event: number) {
+    this.getNext(event - 1);
+    this.config.currentPage = event;
+  }
+  getNext($event: number) {
+    this.filterRequest.pageIndex = $event;
+    this.loadData()
+  }
+
+  extractFieldName(element: any, property: string) {
+    if (property.includes('.')) {
+      return property.split('.').reduce((acc, part) => acc && acc[part], element);
+    } else {
+      return element[property];
+    }
+  }
+
+  get visibleColumns() {
+    return this.fields.filter(column => column.visible).map(column => column.property);
+  }
+
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["enforceRefresh"] && !changes["enforceRefresh"].isFirstChange() && changes["enforceRefresh"].currentValue === true) {
+      // this.loadData();
+    }
+  }
+
+  onSelectItem(row: any) {
+    if (this.pageInfo.selfRouting) {
+      const mode = this.isPending ? 'pending' : 'view';
+      const url = `${this.pageInfo.listRoutePath || this.router.url}/${mode}`;
+      this.router.navigate([`${url}`, row?.id]);
+    }
+    const action = SELECT_RECORD_ACTION;
+    action.id = row?.id;
+    // this.userAction.emit(action)
+    this.selectedItem = row;
+  }
+
+  openNewTab(row) {
+    if (!this.pageInfo.embededTableOnly) {
+      const mode = this.isPending ? 'pending' : 'view';
+      window.open(`${this.pageInfo.listRoutePath}/${mode}` + '/' + row?.id);
+    }
+  }
+
+
+  getField(element, column: FieldInfo) {
+      return  element.controls[column.property];
+  }
+
+  fieldButtonEvent(column, element, actionId: number) {
+    this.doSaveApproveAction(element, actionId);
+  }
+
+  patchLookupValue($event: LookupItem, property: string) {
+    this.formUpdated.emit(this.selectedItem)
+  }
+
+  addNewItem() {
+    const currentValues = this.formParam?.get('dataFormArray')?.value;
+    if (currentValues) {
+      this.dataElements = [...currentValues];
+    }
+    this.dataElements.push({});
+    this.buildForm();
+  }
+
+
+  doSaveApproveAction(element, userActionId) {
+    let actionId =  getWfActionId(element.value.stateType);
+    if (userActionId === REJECT && this.isPending) {
+      actionId =3
+    }
+    let request = new DoActionRequest();
+    request.actionId = actionId;
+    request.subject = element.value;
+
+    if (this.actionRequestCallback) {
+      request = this.actionRequestCallback(request);
+      if (request.subject.id === "") {
+        request.subject.id = null;
+        request.subject.stateType = "NEW";
+      }
+    }
+
+    if (request.subject.id === "") {
+      request.subject.id = null;
+      request.subject.stateType = "NEW";
+    }
+
+
+    const dialogRef = this.dialog.open(ActionCommentComponent, {
+      data: {label: userActionId === 2 ? 'save' : 'reject', isTermination: false},
+      width: '600px',
+      height: 'auto',
+      direction:  this.currentDirection
+    });
+    console.log(actionId)
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        request.comment = result.comment;
+        this.backendService.doActionWithAttachments(request, [], this.pageInfo!).subscribe(resp => {
+          if (resp.valid) {
+            this.loadData();
+            console.log("actionId", actionId);
+            let  message = '';
+            if (actionId === 1 ) {
+              message = 'saved_successfully' ;
+            } else if (actionId ===2 ) {
+              message = 'updated_successfully';
+            } else if (actionId ===3 ) {
+                message = 'successful_reject_message';
+            }  else if (actionId ===4 ) {
+              message = 'approve_successfully';
+            }
+            this.backendService.topPanelMessage$.next(new SnackMessage(message, true, 'success'));
+          }else {
+            const x = resp.message?.length >0 ? resp.message[0].errorMessage : 'FAILED_CONTACT_ADMIN';
+            this.backendService.topPanelMessage$.next(new SnackMessage(x, true, 'error'));
+          }
+          this.saveActionEmitter.emit({item:request.subject, resp});
+        });
+      }
+    });
+  }
+  protected readonly getPositiveWfActionKey = getPositiveWfActionKey;
+  protected readonly getNegativeWfActionKey = getNegativeWfActionKey;
+  protected readonly SAVE = SAVE;
+  protected readonly REJECT = REJECT;
+
+
+  setMonthAndYear(normalizedMonthAndYear: Moment, picker: MatDatepicker<Moment>, element, column) {
+    const date = new FormControl(moment());
+    const ctrlValue = date.value;
+    ctrlValue.year(normalizedMonthAndYear.year());
+    ctrlValue.month(1);
+    ctrlValue.dayOfYear(1);
+    element.controls[column.property].setValue(ctrlValue);
+    picker.close();
+  }
+
+  switchViewMode(b: boolean) {
+    this.isPending = b;
+    this.loadData();
+  }
+
+  addBulkItems() {
+    const merged: any[] = [];
+
+    this.dataFormArray.controls.forEach((group: AbstractControl) => {
+      merged.push(group.value);
+    });
+
+    let request = new DoActionRequest();
+    request.actionId = 1;
+
+    request.subject = { invoices: merged };
+
+    if (this.actionRequestCallback) {
+      request = this.actionRequestCallback(request);
+
+      request.subject.invoices = request.subject.invoices.map((item: any) => {
+        if (item.id === "") {
+          item.id = null;
+          item.stateType = "NEW";
+        }
+        return item;
+      });
+    }
+
+    request.subject.invoices = request.subject.invoices.map((item: any) => {
+      if (item.id === "") {
+        item.id = null;
+        item.stateType = "NEW";
+      }
+      return item;
+    });
+
+
+
+    const dialogRef = this.dialog.open(ActionCommentComponent, {
+      data: {label:  'save' , isTermination: false},
+      width: '600px',
+      height: 'auto',
+      direction:  this.currentDirection
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        request.comment = result.comment;
+        this.backendService.doActionWithAttachment(request, this.selectedFileFromUploader, this.pageInfo!).subscribe(resp => {
+          if (resp.valid) {
+            this.clearBulkItems();
+            this.backendService.topPanelMessage$.next(new SnackMessage('saved_successfully', true, 'success'));
+            this.loadData();
+          }else {
+            this.backendService.topPanelMessage$.next(new SnackMessage(this.pageInfo.labelsSection + '.' + resp.message?.[0]?.errorCode, true, 'error'));
+          }
+          this.saveAttachmentEmitter.emit({item:request.subject, resp});
+        });
+      }
+    });  }
+
+  @ViewChild('fileUpload') fileUpload: ElementRef<HTMLInputElement>;
+
+  handleFileUpload($event: File) {
+    let actionId =  getWfActionId('NEW');
+    let request = new DoActionRequest();
+    request.actionId = actionId;
+
+    this.selectedFileFromUploader = $event;
+
+  }
+
+  shouldDisableBulkAdd() {
+    const hasFile = !!this.selectedFileFromUploader;
+    return (!this.formParam?.valid || this.dataFormArray.controls.length === 0) && !hasFile;
+  }
+  handleEquationChange(event: { value: any[], valid: boolean }, element: FormGroup, column: any): void {
+    element.value[column.property] = event.value;
+    const { value, valid } = event;
+    element.get(column.property)?.setValue(value);
+    if (!valid) {
+      element.get(column.property)?.setErrors({ invalidEquation: true });
+    } else {
+      element.get(column.property)?.setErrors(null);
+    }
+  }
+
+  clearBulkItems() {
+    this.dataElements = [];
+    this.selectedFileFromUploader = null;
+    this.uploaderComponent.clearFile();
+    this.buildForm();
+    this.formUpdated.emit(this.formParam);
+  }
+
+  hasDataToClear(): boolean {
+    return (this.dataElements && this.dataElements.length > 0) || !!this.selectedFileFromUploader;
+  }
+getOptionValue(item: any) {
+    const value = typeof item === 'object' ?
+      item.englishName : item;
+    return value;
+  }
+
+  disabledSaveButton(element) {
+    return !element.valid || (!this.isPending && element.value.stateType == 'PENDING');
+  }
+
+  doSearch() {
+    if (this.searchForm.valid) {
+      const rawValues = this.searchForm.getRawValue();
+      this.filterRequest.pageIndex=0;
+      this.filterRequest.filters = [];
+      this.searchFormFields.forEach(x => {
+          const value = rawValues[x.property];
+          if (value !== null && value !== undefined && value !== '') {
+            const filter = new Filter({
+              key: 0,
+              label: x.property,
+              fieldName: x.searchAttribute,
+              valueObject : x.searchAttribute.includes('.') ? value[x.searchAttribute.split('.').pop()] : value,
+              operator: x.searchOperator,
+              filterType: 'FILED_FILTER'
+            });
+            this.filterRequest.filters.push(filter);
+          }
+      });
+      this.loadData();
+    } else {
+      this.backendService.topPanelMessage$.next(new SnackMessage('INVALID_SEARCH_FORM', true, 'error'));
+    }
+  }
+
+  showSearch() {
+    return this.searchFormFields?.length > 0;
+  }
+
+  clearSearch() {
+    this.searchForm.get('sectorType').setValue({id:-100, englishName:'aaa', code:'aaa', arabicName:'aaa'});
+    this.searchForm.reset();
+    this.doSearch();
+  }
+
+  updateSearchForm($event: FormGroup) {
+    this.searchForm = $event
+  }
+
+  validSearchData() {
+    return !this.searchForm.valid || true;
+  }
+
+}

package/src/lib/components/equation-builder/equation-builder.component.html

@@ -0,0 +1,31 @@
+<div fxLayout="row" fxLayoutGap="10px" fxFlexFill fxLayoutAlign="start center">
+  <ng-container *ngFor="let item of items; let i = index">
+    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
+      <ng-container [ngSwitch]="item.type">
+        <ng-container *ngSwitchCase="'lookup'">
+          <app-auto-complete
+            fxFlex
+            [field]="field"
+            [form]="form"
+            [defaultValue]="item.value"
+            (selectedValue)="onLookupChange(i, $event)">
+          </app-auto-complete>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'dropdown'">
+          <mat-form-field appearance="outline" fxFlex="none" style="width: 100px">
+            <mat-select [disabled]="readOnly" [value]="item.value" (selectionChange)="onDropdownChange(i, $event.value)">
+              <mat-option *ngFor="let opt of operators" [value]="opt.value">
+                {{ opt.label }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </ng-container>
+      </ng-container>
+    </div>
+  </ng-container>
+
+  <button [disabled]="isPending"  mat-icon-button color="warn" (click)="onClearAll()" *ngIf="items.length > 0">
+    <mat-icon>delete</mat-icon>
+  </button>
+</div>

package/src/lib/components/equation-builder/equation-builder.component.spec.ts

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