@unifylib/ui-lib 1.0.3 → 1.1.4

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

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

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

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

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