@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/auto-complete/auto-complete.component.ts

@@ -1,330 +1,331 @@
-import {
-  Component,
-  EventEmitter,
-  Inject,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  SimpleChanges,
-  ViewChild
-} from '@angular/core';
-import {FieldInfo, Filter, LookupItem} from "../../base-model";
-import {MatAutocomplete, MatAutocompleteTrigger, MatOption} from "@angular/material/autocomplete";
-import {Observable, of} from "rxjs";
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {BackendService} from "../../services";
-import {GetItemsList} from "../../base-model/get-items-list";
-import {TranslateModule, TranslateService} from "@ngx-translate/core";
-import {MatFormFieldModule} from "@angular/material/form-field";
-import {MatInputModule} from "@angular/material/input";
-import {AsyncPipe, NgClass, NgForOf, NgIf} from "@angular/common";
-import {MatIcon} from "@angular/material/icon";
-import {FlexLayoutModule} from "@angular/flex-layout";
-import {buildItemsList} from "../../utils/base-utils";
-import {RequireMatch} from "../../validators";
-
-@Component({
-  selector: 'app-auto-complete',
-  standalone: true,
-  imports: [
-    TranslateModule,
-    MatFormFieldModule,
-    MatAutocompleteTrigger,
-    MatInputModule,
-    ReactiveFormsModule,
-    NgIf,
-    MatAutocomplete,
-    AsyncPipe,
-    MatOption,
-    NgClass,
-    MatIcon,
-    NgForOf,
-    FlexLayoutModule,
-
-  ],
-  templateUrl: './auto-complete.component.html',
-  styleUrl: './auto-complete.component.css'
-})
-export class AutoCompleteComponent implements OnInit, OnChanges {
-  @ViewChild('autocompleteTrigger') matACTrigger: MatAutocompleteTrigger;
-
-  lookupItems$: Observable<LookupItem[]> | undefined;
-  lookupItems: LookupItem[] = [];
-  items: LookupItem[] = [];
-
-  // @ts-ignore
-  // form: FormGroup;
-
-  @Input()// @ts-ignore
-  field: FieldInfo;
-
-  @Input()// @ts-ignore
-  form: FormGroup;
-  @Input()// @ts-ignore
-  defaultValue: any;
-
-  @Input()
-  readonly:boolean = false;
-
-  @Input()
-  supportingAttributes: any;
-
-  @Output()
-  selectedValue: EventEmitter<LookupItem> = new EventEmitter();
-
-  @ViewChild(MatAutocompleteTrigger) autocompleteTrigger!: MatAutocompleteTrigger;
-
-  question = 'Would you like to add ?"';
-  cascadedId: number = 0;
-  isRequired:boolean = false;
-
-  private timer: any;
-  myControl = new FormControl();
-
-  constructor(private backendService: BackendService,
-              protected translateService: TranslateService,
-              @Inject('secretsManager') private secretsManager: any) {
-  }
-
-  ngOnInit(): void {
-    this.buildControl();
-    this.extractWorkflowGuidedCascading();
-    this.getLookupData();
-    // this.myControl.valueChanges.subscribe(v => {
-    //     if (typeof v === 'string') this.filterLookupItems(v, null);
-    // });
-
-    this.form.get(this.field.property).valueChanges.subscribe(x => {
-      if (x?.id === -100) {
-        this.myControl.reset()
-      }
-    })
-    if (this.field.cascadedBy) {
-      this.form.get(this.field.cascadedByProperty)?.valueChanges.subscribe(v => {
-        this.cascadedId = this.form.get(this.field.cascadedByProperty).value?.id;
-        this.lookupItems = [];
-        this.myControl.setValue(undefined);
-        this.myControl.patchValue(undefined, {emitEvent: true});
-        this.form.get(this.field.property)?.setValue(undefined);
-        this.form.get(this.field.property)?.patchValue(undefined, {emitEvent: true});
-        this.getLookupData();
-      });
-    }
-
-  }
-
-  private extractWorkflowGuidedCascading() {
-    if (this.supportingAttributes && this.field.workflowCascadingField && this.supportingAttributes[this.field.workflowCascadingField]) {
-      this.cascadedId = this.supportingAttributes[this.field.workflowCascadingField];
-    }
-  }
-
-  private buildControl() {
-    this.myControl = new FormControl(this.form?.controls[this.field?.property]);
-    this.backendService.fieldAction$.subscribe( e => {
-      if (e.property === this.field?.property) {
-        this.field.readonly = e.fieldInfo.readonly;
-        this.updateAttributes();
-      }
-    });
-    this.updateAttributes();
-
-    this.myControl.valueChanges.subscribe( v => {
-        if (typeof v === 'string') {
-          clearTimeout(this.timer);
-          this.timer = setTimeout(() => {
-            this.filterLookupItems(v, null); }, 700);
-        }
-      }
-    );
-  }
-
-  private updateAttributes() {
-    this.myControl.enable();
-    if (this.field.readonly) {
-      this.myControl.disable();
-      this.isRequired = false;
-    } else if (this.field.required) {
-      this.form?.controls[this.field?.property].setValidators([Validators.required]);
-      this.myControl.setValidators([Validators.required]);
-      this.isRequired = true;
-    }
-
-    if (!this.field.acceptNewItem) {
-      // @ts-ignore
-      this.myControl.setValidators(RequireMatch);
-    }
-
-    this.myControl.setValue(this.form?.get(this.field?.property)?.value);
-  }
-
-  ngOnChanges({defaultValue}: SimpleChanges): void {
-    this.patchLookupValue(defaultValue?.currentValue);
-  }
-
-  private getLookupData() {
-    if (this.field.cascadedBy && !this.cascadedId) {
-    } else {
-      const listItems = buildItemsList('', this.field.lookupApiPath, this.field.cascadedBy);
-      listItems.columns = ['id','code','englishName','arabicName'];
-
-      this.backendService.getLookupItemsByFilter(listItems, this.cascadedId).subscribe((resp => {
-        if (resp.valid) {
-          this.lookupItems = resp.body;
-          this.lookupItems = [];
-          resp.body.forEach((r: LookupItem) => this.lookupItems.push(r));
-          if (!this.form?.get('id')?.value) {
-            this.patchLookupValue(this.lookupItems?.find(l => l.defaultValue));
-          }
-          this.patchLookupValue(this.myControl.value);
-        }
-
-      }));
-    }
-  }
-
-  itemSelected(value: any) {
-    if (value && value.id !== -1) {
-      if (value.englishName.indexOf(this.question) === 0) {
-        value.englishName = value.englishName.substring(this.question.length).split('"?')[0];
-      }
-      if (value.arabicName && value.arabicName.indexOf(this.question) === 0) {
-        value.arabicName = value.arabicName.substring(this.question.length).split('"?')[0];
-      }
-      this.form.get(this.field.property)?.setValue(value);
-      // @ts-ignore
-      this.selectedValue.emit(this.myControl.value);
-    }
-    setTimeout(() => {
-      this.autocompleteTrigger.closePanel();
-    });
-
-  }
-
-  displayFn(selected: any): string | undefined {
-    if (selected?.id < 0) {
-      return null;
-    }
-
-    if (Array.isArray(selected))
-      selected = this.defaultValue
-    return this.translateService.getDefaultLang() === 'en'
-      ? selected?.englishName
-      : selected?.arabicName;
-  }
-
-
-  _allowSelection(option: LookupItem): { [className: string]: boolean } {
-    return {
-      'prevent-selection': option.id === -1,
-    };
-  }
-
-  itemNameByLag(item: any): string {
-    return this.translateService.getDefaultLang() === 'en' ? item.englishName : item.arabicName
-
-  }
-
-  filterLookupItems(name: any, trigger: MatAutocompleteTrigger) {
-    if (this.myControl.enabled) {
-      if (trigger) {
-        trigger.openPanel();
-      }
-      if (name === undefined) {
-        name = '';
-      }
-
-      if (name === '' && !this.myControl.value) {
-        this.myControl.setValue(undefined);
-        this.myControl.updateValueAndValidity();
-      }
-
-      const listItems: GetItemsList = buildItemsList(name, this.field.lookupApiPath, this.field.cascadedBy);
-      listItems.filters = this.field.lookupFilterList;
-      this.addLookupFilterByAnotherProperties(listItems);
-      listItems.columns = ['id','code','englishName','arabicName'];
-      this.backendService.getLookupItemsByFilter(listItems);
-      if (this.field.cascadedBy) {
-        this.cascadedId = this.form.get(this.field.cascadedByProperty).value?.id;
-      } else {
-        this.extractWorkflowGuidedCascading();
-      }
-      listItems.columns = ['id','code','englishName','arabicName'];
-      this.backendService.getLookupItemsByFilter(listItems, this.cascadedId).subscribe(resp => {
-        if (resp.valid) {
-          this.items = resp.body.filter((item: { id: any; }) => this.myControl.value?.id !== item.id);
-          if (!this.items?.length) {
-            this.field.acceptNewItem ?
-              this.items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})) :
-              this.items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '}));
-          }
-        } else {
-          if (this.items?.length == 0)
-          this.field.acceptNewItem && this.backendService.parentForm.get(this.field.cascadedBy).value != null ?
-            this.items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})) :
-            this.items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '}));
-        }
-        this.lookupItems$ = of(this.items);
-      });
-      return;
-    }
-  }
-
-  addLookupFilterByAnotherProperties(listItems: GetItemsList) {
-    const properties = this.field.lookupFilterList;
-    if (!Array.isArray(properties)) return;
-
-    const newFilters: Filter[] = [];
-
-    for (const prop of properties) {
-      const fieldValue = this.form?.value?.[prop.fieldName];
-      const finalValue = typeof fieldValue === 'object' && fieldValue !== null ? fieldValue.code : fieldValue;
-      if (!finalValue) continue;
-
-      const fieldName =typeof fieldValue === 'object' && fieldValue !== null ? prop.fieldName + "." + this.field.flattenBySubAttribute : prop.fieldName;
-      const filter = new Filter({
-        fieldType: 'FILED_FILTER',
-        filterType: undefined,
-        operator: prop.operator,
-        valueObject: finalValue,
-        fieldName: fieldName
-      });
-
-      newFilters.push(filter);
-    }
-
-    if (newFilters.length) {
-      listItems.filters = [...(listItems.filters || []), ...newFilters];
-    }
-    listItems.filters = listItems.filters.filter(f => f.valueObject);
-  }
-
-  private patchLookupValue(defaultValue: any) {
-    if (defaultValue) {
-
-      // this.form?.get(this.field.property)?.patchValue(defaultValue);
-      this.myControl.setValue(defaultValue);
-      this.myControl.patchValue(defaultValue, {emitEvent: true});
-    }
-  }
-  getId() {
-    return this.field.property;
-  }
-  onKeydown(event: KeyboardEvent, autocompleteTrigger: MatAutocompleteTrigger) {
-    if (event.key === 'Enter') {
-      this.filterLookupItems('', autocompleteTrigger);
-      autocompleteTrigger.openPanel();
-      event.preventDefault();
-    }
-  }
-
-  closed() {
-    if (!this.myControl.value){
-      this.form.get(this.field.property)?.setValue(this.myControl.value);
-      this.selectedValue.emit(this.myControl.value);
-    } else if (typeof this.myControl.value === 'string') {
-      this.myControl.setValue(null);
-    }
-  }
-}
+import {
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
+import {FieldInfo, Filter, LookupItem} from "../../base-model";
+import {MatAutocomplete, MatAutocompleteTrigger, MatOption} from "@angular/material/autocomplete";
+import {Observable, of} from "rxjs";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {BackendService} from "../../services";
+import {GetItemsList} from "../../base-model/get-items-list";
+import {TranslateModule, TranslateService} from "@ngx-translate/core";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatInputModule} from "@angular/material/input";
+import {AsyncPipe, NgClass, NgForOf, NgIf} from "@angular/common";
+import {MatIcon} from "@angular/material/icon";
+import {buildItemsList} from "../../utils/base-utils";
+import {RequireMatch} from "../../validators";
+import {MatButton, MatIconButton} from "@angular/material/button";
+
+@Component({
+  selector: 'app-auto-complete',
+  standalone: true,
+  imports: [
+    TranslateModule,
+    MatFormFieldModule,
+    MatAutocompleteTrigger,
+    MatInputModule,
+    ReactiveFormsModule,
+    NgIf,
+    MatAutocomplete,
+    AsyncPipe,
+    MatOption,
+    NgClass,
+    MatIcon,
+    NgForOf,
+    MatIconButton,
+    MatButton,
+
+  ],
+  templateUrl: './auto-complete.component.html',
+  styleUrl: './auto-complete.component.css'
+})
+export class AutoCompleteComponent implements OnInit, OnChanges {
+  @ViewChild('autocompleteTrigger') matACTrigger: MatAutocompleteTrigger;
+
+  lookupItems$: Observable<LookupItem[]> | undefined;
+  lookupItems: LookupItem[] = [];
+  items: LookupItem[] = [];
+
+  // @ts-ignore
+  // form: FormGroup;
+
+  @Input()// @ts-ignore
+  field: FieldInfo;
+
+  @Input()// @ts-ignore
+  form: FormGroup;
+  @Input()// @ts-ignore
+  defaultValue: any;
+
+  @Input()
+  readonly:boolean = false;
+
+  @Input()
+  supportingAttributes: any;
+
+  @Output()
+  selectedValue: EventEmitter<LookupItem> = new EventEmitter();
+
+  @ViewChild(MatAutocompleteTrigger) autocompleteTrigger!: MatAutocompleteTrigger;
+
+  question = 'Would you like to add ?"';
+  cascadedId: number = 0;
+  isRequired:boolean = false;
+
+  private timer: any;
+  myControl = new FormControl();
+
+  constructor(private backendService: BackendService,
+              protected translateService: TranslateService,
+              @Inject('secretsManager') private secretsManager: any) {
+  }
+
+  ngOnInit(): void {
+    this.buildControl();
+    this.extractWorkflowGuidedCascading();
+    this.getLookupData();
+    // this.myControl.valueChanges.subscribe(v => {
+    //     if (typeof v === 'string') this.filterLookupItems(v, null);
+    // });
+
+    this.form.get(this.field.property).valueChanges.subscribe(x => {
+      if (x?.id === -100) {
+        this.myControl.reset()
+      }
+    })
+    if (this.field.cascadedBy) {
+      this.form.get(this.field.cascadedByProperty)?.valueChanges.subscribe(v => {
+        this.cascadedId = this.form.get(this.field.cascadedByProperty).value?.id;
+        this.lookupItems = [];
+        this.myControl.setValue(undefined);
+        this.myControl.patchValue(undefined, {emitEvent: true});
+        this.form.get(this.field.property)?.setValue(undefined);
+        this.form.get(this.field.property)?.patchValue(undefined, {emitEvent: true});
+        this.getLookupData();
+      });
+    }
+
+  }
+
+  private extractWorkflowGuidedCascading() {
+    if (this.supportingAttributes && this.field.workflowCascadingField && this.supportingAttributes[this.field.workflowCascadingField]) {
+      this.cascadedId = this.supportingAttributes[this.field.workflowCascadingField];
+    }
+  }
+
+  private buildControl() {
+    this.myControl = new FormControl(this.form?.controls[this.field?.property]);
+    this.backendService.fieldAction$.subscribe( e => {
+      if (e.property === this.field?.property) {
+        this.field.readonly = e.fieldInfo.readonly;
+        this.updateAttributes();
+      }
+    });
+    this.updateAttributes();
+
+    this.myControl.valueChanges.subscribe( v => {
+        if (typeof v === 'string') {
+          clearTimeout(this.timer);
+          this.timer = setTimeout(() => {
+            this.filterLookupItems(v, null); }, 700);
+        }
+      }
+    );
+  }
+
+  private updateAttributes() {
+    this.myControl.enable();
+    if (this.field.readonly) {
+      this.myControl.disable();
+      this.isRequired = false;
+    } else if (this.field.required) {
+      this.form?.controls[this.field?.property].setValidators([Validators.required]);
+      this.myControl.setValidators([Validators.required]);
+      this.isRequired = true;
+    }
+
+    if (!this.field.acceptNewItem) {
+      // @ts-ignore
+      this.myControl.setValidators(RequireMatch);
+    }
+
+    this.myControl.setValue(this.form?.get(this.field?.property)?.value);
+  }
+
+  ngOnChanges({defaultValue}: SimpleChanges): void {
+    this.patchLookupValue(defaultValue?.currentValue);
+  }
+
+  private getLookupData() {
+    if (this.field.cascadedBy && !this.cascadedId) {
+    } else {
+      const listItems = buildItemsList('', this.field.lookupApiPath, this.field.cascadedBy);
+      listItems.columns = ['id','code','englishName','arabicName'];
+
+      this.backendService.getLookupItemsByFilter(listItems, this.cascadedId).subscribe((resp => {
+        if (resp.valid) {
+          this.lookupItems = resp.body;
+          this.lookupItems = [];
+          resp.body.forEach((r: LookupItem) => this.lookupItems.push(r));
+          if (!this.form?.get('id')?.value) {
+            this.patchLookupValue(this.lookupItems?.find(l => l.defaultValue));
+          }
+          this.patchLookupValue(this.myControl.value);
+        }
+
+      }));
+    }
+  }
+
+  itemSelected(value: any) {
+    if (value && value.id !== -1) {
+      if (value.englishName.indexOf(this.question) === 0) {
+        value.englishName = value.englishName.substring(this.question.length).split('"?')[0];
+      }
+      if (value.arabicName && value.arabicName.indexOf(this.question) === 0) {
+        value.arabicName = value.arabicName.substring(this.question.length).split('"?')[0];
+      }
+      this.form.get(this.field.property)?.setValue(value);
+      // @ts-ignore
+      this.selectedValue.emit(this.myControl.value);
+    }
+    setTimeout(() => {
+      this.autocompleteTrigger.closePanel();
+    });
+
+  }
+
+  displayFn(selected: any): string | undefined {
+    if (selected?.id < 0) {
+      return null;
+    }
+
+    if (Array.isArray(selected))
+      selected = this.defaultValue
+    return this.translateService.getDefaultLang() === 'en'
+      ? selected?.englishName
+      : selected?.arabicName;
+  }
+
+
+  _allowSelection(option: LookupItem): { [className: string]: boolean } {
+    return {
+      'prevent-selection': option.id === -1,
+    };
+  }
+
+  itemNameByLag(item: any): string {
+    return this.translateService.getDefaultLang() === 'en' ? item.englishName : item.arabicName
+
+  }
+
+  filterLookupItems(name: any, trigger: MatAutocompleteTrigger) {
+    if (this.myControl.enabled) {
+      if (trigger) {
+        trigger.openPanel();
+      }
+      if (name === undefined) {
+        name = '';
+      }
+
+      if (name === '' && !this.myControl.value) {
+        this.myControl.setValue(undefined);
+        this.myControl.updateValueAndValidity();
+      }
+
+      const listItems: GetItemsList = buildItemsList(name, this.field.lookupApiPath, this.field.cascadedBy);
+      listItems.filters = this.field.lookupFilterList;
+      this.addLookupFilterByAnotherProperties(listItems);
+      listItems.columns = ['id','code','englishName','arabicName'];
+      this.backendService.getLookupItemsByFilter(listItems);
+      if (this.field.cascadedBy) {
+        this.cascadedId = this.form.get(this.field.cascadedByProperty).value?.id;
+      } else {
+        this.extractWorkflowGuidedCascading();
+      }
+      listItems.columns = ['id','code','englishName','arabicName'];
+      this.backendService.getLookupItemsByFilter(listItems, this.cascadedId).subscribe(resp => {
+        if (resp.valid) {
+          this.items = resp.body.filter((item: { id: any; }) => this.myControl.value?.id !== item.id);
+          if (!this.items?.length) {
+            this.field.acceptNewItem ?
+              this.items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})) :
+              this.items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '}));
+          }
+        } else {
+          if (this.items?.length == 0)
+          this.field.acceptNewItem && this.backendService.parentForm.get(this.field.cascadedBy).value != null ?
+            this.items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})) :
+            this.items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '}));
+        }
+        this.lookupItems$ = of(this.items);
+      });
+      return;
+    }
+  }
+
+  addLookupFilterByAnotherProperties(listItems: GetItemsList) {
+    const properties = this.field.lookupFilterList;
+    if (!Array.isArray(properties)) return;
+
+    const newFilters: Filter[] = [];
+
+    for (const prop of properties) {
+      const fieldValue = this.form?.value?.[prop.fieldName];
+      const finalValue = typeof fieldValue === 'object' && fieldValue !== null ? fieldValue.code : fieldValue;
+      if (!finalValue) continue;
+
+      const fieldName =typeof fieldValue === 'object' && fieldValue !== null ? prop.fieldName + "." + this.field.flattenBySubAttribute : prop.fieldName;
+      const filter = new Filter({
+        fieldType: 'FILED_FILTER',
+        filterType: undefined,
+        operator: prop.operator,
+        valueObject: finalValue,
+        fieldName: fieldName
+      });
+
+      newFilters.push(filter);
+    }
+
+    if (newFilters.length) {
+      listItems.filters = [...(listItems.filters || []), ...newFilters];
+    }
+    listItems.filters = listItems.filters.filter(f => f.valueObject);
+  }
+
+  private patchLookupValue(defaultValue: any) {
+    if (defaultValue) {
+
+      // this.form?.get(this.field.property)?.patchValue(defaultValue);
+      this.myControl.setValue(defaultValue);
+      this.myControl.patchValue(defaultValue, {emitEvent: true});
+    }
+  }
+  getId() {
+    return this.field.property;
+  }
+  onKeydown(event: KeyboardEvent, autocompleteTrigger: MatAutocompleteTrigger) {
+    if (event.key === 'Enter') {
+      this.filterLookupItems('', autocompleteTrigger);
+      autocompleteTrigger.openPanel();
+      event.preventDefault();
+    }
+  }
+
+  closed() {
+    if (!this.myControl.value){
+      this.form.get(this.field.property)?.setValue(this.myControl.value);
+      this.selectedValue.emit(this.myControl.value);
+    } else if (typeof this.myControl.value === 'string') {
+      this.myControl.setValue(null);
+    }
+  }
+}