@unifylib/ui-lib 1.0.3 → 1.1.3

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

@@ -1,570 +1,579 @@
-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;
-  }
-
-}
+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 {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 "../action-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,
+    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 = 1;
+  pageSize = 10;
+  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() {
+    this.fields.forEach(field => field.readonly = this.isPending);
+
+    this.dataElements = [];
+    this.totalElements = 0;
+    this.pagesCount = 1;
+    this.pageIndex = 1;
+    this.noDataFound = true;
+    this.isLoaded = true;
+
+    this.filterRequest.pendingPage = this.isPending;
+
+    if (!this.pageInfo.lazyLoadData) {
+      this.backendService.getItemsByFilter(this.filterRequest, this.pageInfo.apiUri)
+        .subscribe(resp => {
+          this.dataElements = resp.body || [];
+          this.totalElements = resp.totalSize || 0;
+          this.pagesCount = Math.max(Math.ceil(this.totalElements / this.pageSize), 1);
+          this.pageIndex = (this.filterRequest.pageIndex || 0) + 1;
+          this.noDataFound = this.dataElements.length === 0;
+          this.isLoaded = true;
+        });
+    }
+
+    this.buildForm();
+  }
+
+  private buildForm() {
+    this.formParam = this.fb.group({
+      dataFormArray: this.fb.array(this.dataElements.map(item => this.fb.group(buildFormFields(this.fields, item)))),
+    });
+    this.formUpdated.next(this.formParam);
+  }
+
+  onPageChange(event: number) {
+    this.pageIndex = event;
+    this.getNext(this.pageIndex - 1);
+  }
+  getNext(pageIndex: number) {
+    this.filterRequest.pageIndex = pageIndex;
+    this.filterRequest.pageSize = this.pageSize;
+    this.loadData();
+  }
+
+  onPageSizeChange(event: number) {
+    this.pageSize = event;
+    this.pageIndex = 1;
+    this.filterRequest.pageSize = this.pageSize;
+    this.getNext(0);
+  }
+
+
+  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
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        request.comment = result.comment;
+        this.backendService.doActionWithAttachments(request, [], this.pageInfo!).subscribe(resp => {
+          if (resp.valid) {
+            this.loadData();
+            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;
+  }
+
+}