@unifylib/ui-lib 1.0.3 → 1.1.4

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

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

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

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