@unifylib/ui-lib 1.0.3

package/src/lib/components/base-form-canvas/base-form-canvas.component.spec.ts

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

package/src/lib/components/base-form-canvas/base-form-canvas.component.ts

@@ -0,0 +1,573 @@
+import {
+  Component,
+  computed,
+  ElementRef,
+  EventEmitter,
+  Input,
+  model,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  signal,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {
+  MatChip,
+  MatChipGrid,
+  MatChipInput,
+  MatChipInputEvent,
+  MatChipListbox,
+  MatChipOption,
+  MatChipRemove,
+  MatChipRow
+} from "@angular/material/chips";
+import {FieldInfo} from "../../base-model/field-info";
+import {ActivatedRoute} from "@angular/router";
+import {BackendService} from "../../services/backend-service";
+import {TranslateModule, TranslateService} from "@ngx-translate/core";
+import {PageInfo} from "../../base-model/page-info";
+import {COMMA, ENTER, SEMICOLON} from "@angular/cdk/keycodes";
+import {LookupItem} from "../../base-model/lookupItem";
+import {FieldMessage} from "../../base-model/api-response";
+import {
+  CurrencyPipe,
+  DatePipe,
+  KeyValuePipe,
+  NgForOf,
+  NgIf,
+  NgSwitch,
+  NgSwitchCase,
+  NgTemplateOutlet
+} from "@angular/common";
+import {FlexLayoutModule} from "@angular/flex-layout";
+import {MatError, MatFormFieldModule, MatLabel} from "@angular/material/form-field";
+import {MatInputModule} from "@angular/material/input";
+import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from "@angular/material/datepicker";
+import {MatIcon} from "@angular/material/icon";
+import {CdkTextareaAutosize} from "@angular/cdk/text-field";
+import {MatRadioButton, MatRadioGroup} from "@angular/material/radio";
+import {MatCheckbox} from "@angular/material/checkbox";
+import {MatOption, MatSelect} from "@angular/material/select";
+import {MatDivider} from "@angular/material/divider";
+import {NgxJsonViewerModule} from "ngx-json-viewer";
+import {NgxMatIntlTelInputComponent} from "ngx-mat-intl-tel-input";
+import {MultiAutoCompleteComponent} from "../multi-auto-complete/multi-auto-complete.component";
+import {AutoCompleteComponent} from "../auto-complete/auto-complete.component";
+import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
+import {BehaviorSubject, map} from "rxjs";
+import {LiveAnnouncer} from "@angular/cdk/a11y";
+import {buildFormFields} from "../../utils/base-utils";
+import moment, {Moment} from "moment/moment";
+
+@Component({
+  selector: 'app-base-form-canvas',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    NgSwitch,
+    FormsModule,
+    FlexLayoutModule,
+    NgForOf,
+    NgTemplateOutlet,
+    KeyValuePipe,
+    NgIf,
+    MatLabel,
+    MatFormFieldModule,
+    TranslateModule,
+    MatInputModule,
+    MatDatepickerInput,
+    MatDatepicker,
+    MatDatepickerToggle,
+    MatError,
+    NgSwitchCase,
+    MatIcon,
+    MatChip,
+    CdkTextareaAutosize,
+    MatRadioGroup,
+    MatCheckbox,
+    MatRadioButton,
+    MatSelect,
+    MatOption,
+    MatDivider,
+    DatePipe,
+    NgxJsonViewerModule,
+    CurrencyPipe,
+    NgxMatIntlTelInputComponent,
+    MatChipGrid,
+    MatChipInput,
+    MatChipRow,
+    MatChipListbox,
+    MatChipOption,
+    MultiAutoCompleteComponent,
+    AutoCompleteComponent,
+    MatChipRemove
+  ],
+  templateUrl: './base-form-canvas.component.html',
+  styleUrl: './base-form-canvas.component.css'
+})
+export class BaseFormCanvasComponent implements OnInit, OnChanges, OnDestroy {
+  public hide: boolean = true;
+  dateViewMode: 'month' | 'year' | 'multi-year' = 'month';
+  @Input()
+  pageInfo!: PageInfo;
+
+  @Input()// @ts-ignore
+  fields: FieldInfo[] = [];
+
+  @Input()// @ts-ignore
+  errors: FieldMessage[] = [];
+
+  @Input()
+  workflowEditableFields: string[]=[];
+  @Input()
+  isWorkflowEditableManaged: boolean = false;
+
+  @Input()
+  supportingAttributes: any;
+
+  @Input()
+  editable: boolean = false;
+
+  @Input()
+  item: any = {};
+
+  _defaults: any = {};
+
+  @Output() attachmentEmitter: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output() actionEmitter: EventEmitter<any> = new EventEmitter<any>();
+
+
+  @Output()
+  formUpdated: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  hyperTextEvent: EventEmitter<boolean> = new EventEmitter();
+
+
+  formParam!: FormGroup;
+  screenFields = new Map<number, FieldInfo[]>();
+  removable = true;
+  selectable = true;
+  addOnBlur = true;
+
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON];
+
+
+  public isPending: boolean = false;
+  public isNew: boolean = false;
+  itemId: number | undefined;
+
+  equationOperators : string[] = ['+','-','(' ];
+  @Input() equationSuggestedFields: { name: string, id: string }[] = [];
+  allEquationFields: BehaviorSubject<string[]>;
+  readonly equationValues = signal<string[]>([]);
+  currentEquationValue = model<string>('');
+
+  readonly equationFilteredFields = computed(() => {
+    const currentEquationValue = this.currentEquationValue().toLowerCase();
+    return this.allEquationFields.pipe(
+      map(fields =>
+        currentEquationValue ? fields?.filter(field => field.toLowerCase().includes(currentEquationValue)) : fields?.slice()
+      )
+    );
+  });
+  @ViewChild('EquationValueInput') fieldsInput: ElementRef<HTMLInputElement>;
+
+  set defaults(value: any | undefined) {
+    // this.backendService._defaults = value;
+    this._defaults = value;
+    this.buildForm();
+    // this.myCallback = value;
+  }
+
+  get defaults(): any | undefined {
+    // this.myCallback;
+    return this._defaults;
+    // return this.backendService._defaults;
+  }
+
+  constructor(protected translateService: TranslateService,
+              protected activatedRoute: ActivatedRoute,
+              protected backendService: BackendService,
+              private fb: FormBuilder,
+              private announcer: LiveAnnouncer) {
+
+  }
+
+  ngOnInit(): void {
+    if(this.item && this.item.fieldValue){
+      this.equationValues.update(value => this.item.fieldValue)
+    }
+    this.defaults = this.item;
+    this.extractLables();
+    this.buildForm();
+    this.activatedRoute.data.subscribe(data => {
+      this.isPending = data['mode'] === 'pending';
+      this.isNew = data['mode'] === 'new';
+    });
+    // this.authService.summaryPanelState$.next(Constants.SUMMARY_PANEL_CLOSED);
+    // this.defaults = {};
+    // this.invoiceQInit();
+    this.allEquationFields = new BehaviorSubject<string[]>([]);
+
+    this.updateEquationOptions();
+  }
+
+  formatTimeToDate(v: any){
+    const fromTime: Date = new Date();
+    if (v) {
+      let split = v.split(":");
+      fromTime.setHours(split[0], split[1]);
+    }
+    return new Date(fromTime.getTime());
+  }
+
+  patchLookupValue($event: LookupItem, fieldName: string) {
+    if ($event?.id !== -1 && this.defaults) {
+      // @ts-ignore
+      this.defaults[fieldName] = this.formParam.get(fieldName).value;
+    }
+  }
+  getBankName(fieldName: string) {
+    //TODO Batool do we need this here ?
+    if (this.formParam.get(fieldName).value?.length > 10 && !isNaN(this.formParam.get(fieldName).value) ) {
+      return ' / ' + this.translateService.instant('BANK.' + this.formParam.get(fieldName).value?.substr(4, 4));
+    } else {
+      return '';
+    }
+  }
+
+  patchMultiSelectValue($event: LookupItem[], fieldName: string) {
+    if ($event?.length >= 0 && this.defaults) {
+      this.defaults[fieldName] = this.formParam.get(fieldName).value;
+    }
+  }
+
+  ngOnChanges({item, errors, fields}: SimpleChanges): void {
+    errors?.currentValue?.forEach((msg: FieldMessage) => {
+      this.formParam.get(msg.fieldName)?.setErrors({serverError: msg.message});
+    });
+
+    if (item?.currentValue && !item.isFirstChange()){
+      this.defaults = item.currentValue;
+    }
+
+    if (fields?.currentValue && !fields.isFirstChange()){
+      this.buildForm();
+    }
+  }
+
+  showField(item: any, field: any) {
+    return (item.id || (!item.id && !field.updateOnly)) && field.visible
+  }
+
+  workflowEditableField(field: { property: string; }) {
+    const x = this.isWorkflowEditableManaged ? this.workflowEditableFields?.findIndex(d => d === field.property) > -1 : true;
+    return x;
+  }
+
+  showMultiSelectValuesAsReadonly(field: FieldInfo) {
+    const viewProp = this.translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName';
+    return this.extractFieldName(this.defaults,field.property)?.map((a: { [x: string]: any; }) => a[viewProp]);
+  }
+
+  splitReadonly(values: any) {
+    return !values || values === '' ? []: values.split(';');
+  }
+
+
+  referenceAttributeTrue(fieldName: string, attribute: any) {
+    // return this.authService.referenceAttributeTrue(fieldName, this.pageInfo.processId, attribute);
+  }
+
+  translateLable(itemElement: any) {
+    return this.translateService.instant(itemElement)
+  }
+
+  buildForm() {
+    if (this.fields && this.fields.length > 0 && this.defaults) {
+      this.formParam = this.fb.group(buildFormFields(this.fields, this.defaults));
+      this.formUpdated.next(this.formParam);
+    }}
+
+  labelKey(column: any) {
+    const configuredKey = column.label ? column.label : column.property
+    return configuredKey.startsWith(this.pageInfo.labelsSection) ? `${configuredKey}` : `${this.pageInfo.labelsSection}.${configuredKey}`;
+  }
+
+  getErrors(prop: string) {
+
+    if (this.formParam.get(prop).value && this.formParam.get(prop).status !== 'VALID'  && !this.formParam.get(prop).disabled) {
+      return this.getFirstErrorKey(prop);
+      // if (this.formParam.get(prop).errors?.['invalidMathExpression']) {
+      //   return 'invalidMathExpression'
+      // }  else {
+      //   return this.formParam.get(prop).errors?.['serverError'] || 'INVALID_FORMAT';
+      // }
+
+      // return this.formParam.get(prop).errors?.find(e => typeof e !== 'undefined')?.serverError || 'INVALID_FORMAT';
+    }
+    return '';
+  }
+
+  getFirstErrorKey(prop: string): string {
+    const errors = this.formParam.get(prop)?.errors;
+
+    if (!errors || Object.keys(errors).length === 0) {
+      return errors?.['serverError'] || 'INVALID_FORMAT';
+    }
+
+    return Object.keys(errors)[0];
+  }
+
+  getCountryCodeList() {
+    return ["jo"]
+  }
+
+
+  friendlyName(fullPath: string , subPath: string , item: string){
+    return  fullPath.substring(0, fullPath.indexOf(subPath)) + item ;
+  }
+
+  showValue(defaults, field){
+    return  this.friendlyName(field.label , field.property , defaults[field.property]);
+  }
+
+  showError(prop: string) {
+    return this.formParam?.get(prop)?.value && this.formParam.get(prop).status  === 'INVALID';
+  }
+
+  ngOnDestroy(): void {
+    this.defaults = null;
+  }
+
+  private extractLables() {
+    this.fields.forEach(f => {
+      if (f.visible) {
+        f.label = this.labelKey(f);
+
+        if (!this.screenFields.has(f.row)) {
+          this.screenFields.set(f.row, []);
+        }
+        this.screenFields.get(f.row)!.push(f);
+
+        if (f.cascadedBy) {
+          this.formParam?.get(f.cascadedBy)?.valueChanges.subscribe(() => {
+            this.formParam?.get(f.property)?.patchValue(null);
+          })
+        }
+      }
+    });
+
+    for (let i = 1; i < this.screenFields.size; i++) {
+      this.calcFlexSize(i);
+    }
+    // console.log(this.screenFields)
+  }
+
+  private calcFlexSize(i: number){
+    if (this.screenFields.get(i)) {
+      const autoSizeFields = this.screenFields.get(i).filter(f => !f.fieldSize);
+      const configLength = this.screenFields.get(i).filter(f => f.fieldSize > 0)
+        .reduce((sum, obj) => {
+          return sum + obj.fieldSize;
+        }, 0);
+      if (autoSizeFields.length > 0) {
+        const x = (100 - configLength) / autoSizeFields.length;
+        autoSizeFields.forEach(f => f.fieldSize = x);
+      }
+    }
+  }
+
+  getCurrencyPattern(field: FieldInfo) {
+    // const decimalPlaces  = this.authService?.myCurrencies?.find(c => c.key === this.formParam.get(field.currency)?.value)?.currencyNumOfDecimalPattern || 3;
+    const decimalPlaces  = 3;
+    return '^\\d*(?:[.,]\\d{1,' + decimalPlaces + '})?$';
+  }
+
+  splittedChips(form: FormGroup, fieldName: string):string[] {
+    return form.get(fieldName).value === '' ? []: form.get(fieldName).value.trim().split(';');
+  }
+
+
+  fixArabicNumbers(str: any) {
+    // if(typeof str === 'string') {
+    //     str = str.replace(/([٠١٢٣٤٥٦٧٨٩])|([۰۱۲۳۴۵۶۷۸۹])/g, (m, $1, $2) => m.charCodeAt(0) - ($1 ? 1632 : 1776));
+    // }
+    // console.log(str);
+  }
+
+  listShowValue(defaults: any, field: FieldInfo) {
+    return defaults[field.property] ? this.showValue(defaults, field) : '';
+  }
+
+  removeChipsItem(form: FormGroup, fieldName: string, idx: number) {
+    const emails = this.splittedChips(form, fieldName);
+    if (emails.length >= 1){
+      emails.splice(idx,1);
+    }
+    let cleanedEmails = emails.join(";");
+    form.get(fieldName).setValue(cleanedEmails);
+  }
+
+  extractFieldName(element: any, property: string) {
+    if (property?.includes('.')) {
+      return property.split('.').reduce((acc, part) => acc && acc[part], element);
+    } else {
+      return element[property];
+    }
+  }
+
+  getMultiValue(field: FieldInfo) {
+    return this.formParam.get(field.property)?.value;
+  }
+
+  private validateEmail(email) {
+    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(String(email).toLowerCase());
+  }
+
+  addEmailToChips(event: MatChipInputEvent, form: FormGroup, fieldName: string) {
+
+    const input = event.input;
+    const value = event.value;
+    const items = value.split(';');
+    // value.split(' ');
+    items.forEach(itm => {
+      if (this.validateEmail((itm || '').trim())) {
+        const x = this.splittedChips(form, fieldName);
+        x.push(itm);
+        form.get(fieldName).patchValue(x.join(';'));
+        if (input) {
+          input.value = '';
+        }
+      }
+    });
+
+  }
+
+  extractJsonFieldName(defaults: any, property: string) {
+    const x= this.extractFieldName(defaults, property);
+    if (x?.length > 0)
+      return JSON.parse(x);
+    else return '{}';
+  }
+
+  getOptionValue(item: any) {
+    const value = typeof item === 'object' ?
+      this.translateService.getDefaultLang() === 'en' ? item.englishName : item.arabicName
+      : item;
+    return value;
+  }
+
+  getHyperTextEvent() {
+    this.hyperTextEvent.emit(true);
+  }
+
+  add(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+    if (value) {
+      if (this.equationOperators.includes(value) || !this.equationValues().includes(value)) {
+        this.equationValues.update(equationValues => [...equationValues, value]);
+      }
+    }
+
+    this.fieldsInput.nativeElement.value = '';
+    this.currentEquationValue.set('');
+    this.updateEquationOptions();
+
+  }
+
+  remove(item: string, index: number): void {
+    this.equationValues.update(equationValues => {
+      if (index < 0) {
+        return equationValues;
+      }
+
+      equationValues.splice(index, 1);
+      this.announcer.announce(`Removed ${item}`);
+      return [...equationValues];
+    });
+    this.updateEquationOptions();
+  }
+
+  selected(event: MatAutocompleteSelectedEvent): void{
+    const selectedValue = event.option.viewValue.trim();
+
+    if (!this.equationOperators.includes(selectedValue) && !this.equationValues().includes(selectedValue)) {
+      this.equationValues.update(equationValues => [...equationValues, selectedValue]);
+    } else if (this.equationOperators.includes(selectedValue)) {
+      this.equationValues.update(equationValues => [...equationValues, selectedValue]);
+    }
+
+    this.currentEquationValue.set('');
+    event.option.deselect();
+    this.fieldsInput.nativeElement.value = '';
+    this.updateEquationOptions();
+  }
+
+  updateEquationOptions(){
+    this.reflectEquationValueOnForm();
+
+    let updatedFields: string[];
+    if (this.equationValues().length === 0) {
+      updatedFields = this.getNamesFromSuggestedEquationFields();
+    } else {
+      let lastElement = this.equationValues()[this.equationValues().length - 1];
+      if (this.equationOperators.includes(lastElement)) {
+        updatedFields = this.getNamesFromSuggestedEquationFields();
+      } else {
+        updatedFields = this.equationOperators;
+      }
+    }
+    // console.log('*****', updatedFields);
+    this.allEquationFields.next(updatedFields);
+  }
+
+  getNamesFromSuggestedEquationFields(): string[] {
+    return this.equationSuggestedFields?.map(field => field.name);
+  }
+
+  reflectEquationValueOnForm() {
+    if (this.formParam && this.formParam.get('fieldValue')) {
+      this.formParam.get('fieldValue').setValue(this.equationValues());
+    } else {
+      // console.log('Form or fieldValue is not available.');
+    }
+  }
+
+  checkEquation(field: FieldInfo, $event: Event) {
+    // console.log('$event', $event);
+    // try {
+    //   evaluate(equation.replace(/[a-zA-Z0-9]+/g, '1')); // Replace variables with dummy values
+    //   this.formGroups[index].get('xyz').setErrors(null);
+    //   console.log('valid ', equation)
+    // } catch (e) {
+    //   this.formGroups[index].get('xyz').setErrors({serverError: 'incomplete '});
+    //   console.log('bad ', equation)
+    // }
+  }
+
+  getView(field): 'month' | 'year' | 'multi-year' {
+    return field.pattern || 'month';
+  }
+
+  setMonthAndYear(normalizedMonthAndYear: Moment, picker: MatDatepicker<Moment>, field) {
+    console.log('field.pattern', field.pattern)
+    if (field.pattern === 'multi-year') {
+      console.log('hi')
+      const date = new FormControl(moment());
+      const ctrlValue = date.value;
+      ctrlValue.year(normalizedMonthAndYear.year());
+      ctrlValue.month(1);
+      ctrlValue.dayOfYear(1);
+      this.formParam.get(field.property).setValue(ctrlValue)
+      picker.close();
+    }
+  }
+}
+

package/src/lib/components/base-input-dialog/base-input-dialog.component.html

@@ -0,0 +1,42 @@
+<div fxLayout="column" fxFlex="98">
+  <div fxLayout="row" fxLayoutAlign="start start" style="margin-top: 2vh;margin-bottom: 2vh; width: 100%">
+    <div fxLayout="column" fxFlex="100">
+      <app-title-bar [pageTitle]="getTitle()"></app-title-bar>
+    </div>
+  </div>
+
+  <ng-container *ngIf="isLoaded">
+    <app-base-form-canvas
+      [pageInfo]="pageInfo"
+      [fields]="fieldsInfo"
+      [editable]="true"
+      [item]="default"
+      (formUpdated)="captureForm($event)"></app-base-form-canvas>
+
+    <div fxLayout="row" fxLayoutAlign="start start" style="width: 100%">
+      <div fxLayout="column" fxFlex="49">
+      </div>
+      <div fxLayout="column" fxFlex="49">
+        <div align="right" style="margin: 1% 2%;">
+          <ng-container>
+            <button
+              mat-stroked-button class="btn-none-background-primary"
+              type="button"
+              (click)="doCancel('cancel')"
+              style="margin: 20px 10px;">Cancel
+            </button>
+          </ng-container>
+          <ng-container>
+            <button
+              [ngClass]="saveDisabled() ? 'btn-none-background-primary' : 'btn-background-primary'"
+              [disabled]="saveDisabled()"
+              mat-stroked-button
+              type="button"
+              (click)="doSave('save')">Save
+            </button>
+          </ng-container>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</div>

package/src/lib/components/base-input-dialog/base-input-dialog.component.spec.ts

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