@unifylib/ui-lib 1.0.3 → 1.1.3

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

@@ -1,317 +1,315 @@
-import {Component, ElementRef, EventEmitter, Input, Output, SimpleChanges, ViewChild} from '@angular/core';
-import {ALL_ITEM, LookupItem} from "../../base-model";
-import {MatAutocomplete, MatAutocompleteTrigger, MatOption} from "@angular/material/autocomplete";
-import {Observable, of} from "rxjs";
-import {FieldInfo} from "../../base-model";
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {BackendService} from "../../services";
-import {TranslateService} from "@ngx-translate/core";
-import {GetItemsList} from "../../base-model/get-items-list";
-import {MatFormField} from "@angular/material/form-field";
-import {FlexLayoutModule} from "@angular/flex-layout";
-import {MatChip, MatChipGrid, MatChipInput, MatChipListbox} from "@angular/material/chips";
-import {AsyncPipe, NgForOf, NgIf} from "@angular/common";
-import {MatIcon} from "@angular/material/icon";
-import {MatInput} from "@angular/material/input";
-import { MatLabel } from '@angular/material/form-field';
-import {buildItemsList} from "../../utils/base-utils";
-import {FilterRequest} from "../../base-model";
-import {Filter} from "../../base-model";
-import {RequireMatch} from "../../validators";
-import { MatChipsModule } from '@angular/material/chips';
-import { MatIconModule } from '@angular/material/icon';
-
-
-@Component({
-  selector: 'app-multi-auto-complete',
-  standalone: true,
-  imports: [
-    MatFormField,
-    FlexLayoutModule,
-    MatChip,
-    MatIconModule,
-    MatChipsModule,
-    NgForOf,
-    MatIcon,
-    ReactiveFormsModule,
-    MatAutocompleteTrigger,
-    MatChipInput,
-    MatInput,
-    MatAutocomplete,
-    MatOption,
-    AsyncPipe,
-    NgIf,
-    MatChipGrid,
-    MatChipListbox,
-    MatLabel
-  ],
-  templateUrl: './multi-auto-complete.component.html',
-  styleUrl: './multi-auto-complete.component.css'
-})
-export class MultiAutoCompleteComponent {
-// @ts-ignore
-  @ViewChild('itemInput') itemInput: ElementRef<HTMLInputElement>;
-  @ViewChild('autocompleteTrigger') matACTrigger: MatAutocompleteTrigger;
-
-  lookupItems$: Observable<LookupItem[]> | undefined;
-  private lookupItems: LookupItem[] = [];
-
-  selectedItems: LookupItem[] = [];
-  cascadedIdz: number[] = [];
-  isRequired: boolean= false;
-  private timer: any;
-
-  @Input()// @ts-ignore
-  field: FieldInfo;
-  //
-  @Input()// @ts-ignore
-  form: FormGroup;
-
-  @Input()// @ts-ignore
-  defaultValue: any;
-
-  @Input()
-  pathParam: any;
-
-  @Input()
-  readonly : boolean=false;
-
-  @Output()
-  selectedValue: EventEmitter<LookupItem[]> = new EventEmitter();
-
-  question = 'Would you like to add ?"';
-
-  multiControl = new FormControl();
-
-  constructor(private backendService: BackendService, private  translateService: TranslateService) {
-  }
-
-  ngOnInit(): void {
-    // this.form = this.rootFormGroup.control;
-    this.selectedItems = [];
-    this.multiControl = new FormControl(this.form?.controls[this.field?.property]);
-
-    this.multiControl.enable();
-    this.updateFieldAttributes();
-
-    if (!this.field.acceptNewItem){
-      // @ts-ignore
-      this.multiControl.setValidators([RequireMatch]);
-    }
-
-    this.multiControl.setValue(this.form?.controls[this.field?.property]?.value);
-
-    this.multiControl.valueChanges.subscribe( v => {
-        if (typeof v === 'string') {
-          clearTimeout(this.timer);
-          this.timer = setTimeout(() => {
-            this.filterLookupItems(v, null);}, 700);
-        }
-      }
-    );
-
-    // this.multiControl.valueChanges.subscribe(v => {
-    //     if (typeof v === 'string') this.filterLookupItems(v, null);
-    // })
-    // this.filterAutoCompleteData(this.field.property);
-
-    this.getLookupData();
-    if (this.field.cascadedBy) {
-      this.form?.get(this.field.cascadedBy)?.valueChanges.subscribe(v => {
-        this.removeChildItemsIfCascadedByRemoved(v);
-      });
-    }
-
-  }
-
-  private updateFieldAttributes() {
-    if (this.field.readonly) {
-      this.multiControl.disable();
-      this.isRequired = false;
-    } else if (this.field.required) {
-      this.form?.controls[this.field?.property].setValidators([Validators.required]);
-      this.form?.controls[this.field?.property].updateValueAndValidity();
-      this.multiControl.setValidators([Validators.required]);
-      this.isRequired = true;
-    }
-    this.multiControl.updateValueAndValidity();
-  }
-
-  private removeChildItemsIfCascadedByRemoved(v) {
-    this.cascadedIdz = [];
-    v.forEach(a => {
-      this.cascadedIdz.push(a.id);
-    });
-    let toDeleteIdz = [];
-    this.selectedItems?.forEach(x => {
-      const del = this.cascadedIdz.findIndex(y => y === x[this.field.cascadedBy]?.id);
-      if (del < 0) {
-        toDeleteIdz.push(x['id']);
-      }
-    });
-
-    if (toDeleteIdz) {
-      this.selectedItems = this.selectedItems.filter(s => !toDeleteIdz.includes(s.id));
-      this.form.get(this.field.property).patchValue(this.selectedItems, {emitEvent: true});
-    }
-  }
-
-  ngOnChanges({defaultValue, field}: SimpleChanges): void {
-    this.patchLookupValue(defaultValue?.currentValue);
-    if (field?.currentValue) {
-      this.field = field.currentValue;
-      this.updateFieldAttributes();
-    }
-  }
-
-  private getLookupData() {
-    const listItems: GetItemsList = buildItemsList('', this.field.lookupApiPath);
-
-    const filterRequest: FilterRequest = new FilterRequest();
-    filterRequest.filters = [];
-    this.cascadedIdz = [];
-    if (this.field.cascadedBy) {
-      this.form.get(this.field.cascadedBy)?.value?.forEach(a => {
-        this.cascadedIdz.push(a.id);
-      })
-    }
-    if (this.field.cascadedBy && this.cascadedIdz?.length > 0) {
-      filterRequest.filters.push(new Filter({
-        key: 'id', fieldName: this.field.cascadedBy, label: '',
-        filterType: 'FILED_FILTER', operator: 'IN',
-        valueObject: this.cascadedIdz
-      }));
-    }
-
-    filterRequest.columns = ['id','code','englishName','arabicName'];
-    this.backendService.getLookupItemsByMultiFilter(listItems, filterRequest).subscribe((resp => {
-      if (resp.valid) {
-        this.lookupItems = this.field.includeAllOption ? [ALL_ITEM].concat(resp.body) : resp.body;
-        if (!this.form.get('id')?.value) {
-          this.patchLookupValue(this.lookupItems?.find(l => l.defaultValue));
-        }
-        this.patchLookupValue(this.multiControl.value);
-
-      }
-
-    }));
-  }
-
-
-  selected(value: any): void {
-    if (value.id !== -1 && this.selectedItems.findIndex(i => i.id === value.id) === -1) {
-      this.selectedItems?.push(value);
-      this.itemInput.nativeElement.value = '';
-      this.form.get(this.field.property)?.setValue(this.selectedItems);
-      // @ts-ignore
-      this.selectedValue.emit(this.selectedItems);
-      this.multiControl.setValue(null);
-    }
-  }
-
-  displayFn(selected: any): string {
-    return selected ? selected.englishName : undefined;
-
-  }
-  isSelected(item: any): boolean {
-    return this.selectedItems?.some(selected => selected.id === item.id); // Use your unique identifier
-  }
-
-  _allowSelection(option: LookupItem): { [className: string]: boolean } {
-    return {
-      'prevent-selection': option.id === -1,
-    }
-  }
-
-  itemNameByLag(item: any): string {
-    // return item.arabicName;
-    return this.translateService.getDefaultLang() === 'en' ? item.englishName : item.arabicName
-  }
-
-  private readonly _columns = ['id','code','englishName','arabicName'];
-
-  filterLookupItems(name: any, trigger: MatAutocompleteTrigger) {
-    if (trigger) {
-      trigger.openPanel();
-    }
-    if (name === undefined) {
-      name = '';
-    }
-
-    const listItems: GetItemsList = buildItemsList(name, this.field.lookupApiPath);
-
-    const filterRequest: FilterRequest = new FilterRequest();
-    filterRequest.filters = this.field.lookupFilterList || [];
-    filterRequest.searchStr = name;
-    this.cascadedIdz = [];
-    if (this.field.cascadedBy) {
-      this.form.get(this.field.cascadedBy)?.value?.forEach(a => {
-        this.cascadedIdz.push(a.id);
-      })
-    }
-    if (this.field.cascadedBy && this.cascadedIdz?.length > 0) {
-      filterRequest.filters.push(new Filter({
-        key: 'id',joinObjectName: this.field.cascadedBy, fieldName: this.field.cascadedBy, label: '',
-        filterType: 'FILED_FILTER', operator: 'IN',
-        valueObject: this.cascadedIdz
-      }));
-    }
-
-    filterRequest.columns = [...this._columns, ...(this.field.extraLookupsColumns ?? [])];
-
-    this.backendService.getLookupItemsByMultiFilter(listItems, filterRequest).subscribe(resp => {
-      // console.log('result -->', resp);
-      let items: LookupItem[] = [];
-      if (resp.valid) {
-        // resp.body.forEach(r => items.push(r));
-        items = resp.body.filter(item =>
-          // (item.englishName.toLowerCase().includes(name.toLowerCase()) ||
-          // item.arabicName.toLowerCase().includes(name.toLowerCase())) &&
-          this.selectedItems?.findIndex( i=> i.id ===item.id ) ===-1 );
-        if (!items?.length) {
-          this.field.acceptNewItem ?
-            items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})):
-            items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '})) ;
-
-        }
-      } else {
-        this.field.acceptNewItem ?
-          items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})):
-          items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '})) ;
-      }
-      this.lookupItems$ = of(items);
-    });
-    return;
-  }
-
-  private patchLookupValue(defaultValue: any) {
-    if (defaultValue) {
-      // this.form?.get(this.field.property)?.patchValue(defaultValue);
-      this.selectedItems = defaultValue;
-      this.multiControl.setValue(defaultValue);
-      this.multiControl.patchValue(defaultValue, {emitEvent: true});
-    }
-  }
-
-  remove(item: LookupItem) {
-    const index = this.selectedItems.indexOf(item);
-    if (index >= 0) {
-      this.selectedItems.splice(index, 1);
-      this.form.get(this.field.property).patchValue(this.selectedItems, {emitEvent: true});
-    }
-  }
-
-  getLabel() {
-    return this.translateService.instant(this.field.label);
-  }
-  onKeydown(event: KeyboardEvent, autocompleteTrigger: MatAutocompleteTrigger) {
-    if (event.key === 'Enter') {
-      this.filterLookupItems('', autocompleteTrigger);
-      autocompleteTrigger.openPanel();
-      event.preventDefault();
-    }
-  }
-  getId() {
-    return this.field.property;
-  }
-}
+import {Component, ElementRef, EventEmitter, Input, Output, SimpleChanges, ViewChild} from '@angular/core';
+import {ALL_ITEM, LookupItem} from "../../base-model";
+import {MatAutocomplete, MatAutocompleteTrigger, MatOption} from "@angular/material/autocomplete";
+import {Observable, of} from "rxjs";
+import {FieldInfo} from "../../base-model";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {BackendService} from "../../services";
+import {TranslateService} from "@ngx-translate/core";
+import {GetItemsList} from "../../base-model/get-items-list";
+import {MatFormField} from "@angular/material/form-field";
+import {MatChip, MatChipGrid, MatChipInput, MatChipListbox} from "@angular/material/chips";
+import {AsyncPipe, NgForOf, NgIf} from "@angular/common";
+import {MatIcon} from "@angular/material/icon";
+import {MatInput} from "@angular/material/input";
+import { MatLabel } from '@angular/material/form-field';
+import {buildItemsList} from "../../utils/base-utils";
+import {FilterRequest} from "../../base-model";
+import {Filter} from "../../base-model";
+import {RequireMatch} from "../../validators";
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+
+
+@Component({
+  selector: 'app-multi-auto-complete',
+  standalone: true,
+  imports: [
+    MatFormField,
+    MatChip,
+    MatIconModule,
+    MatChipsModule,
+    NgForOf,
+    MatIcon,
+    ReactiveFormsModule,
+    MatAutocompleteTrigger,
+    MatChipInput,
+    MatInput,
+    MatAutocomplete,
+    MatOption,
+    AsyncPipe,
+    NgIf,
+    MatChipGrid,
+    MatChipListbox,
+    MatLabel
+  ],
+  templateUrl: './multi-auto-complete.component.html',
+  styleUrl: './multi-auto-complete.component.css'
+})
+export class MultiAutoCompleteComponent {
+// @ts-ignore
+  @ViewChild('itemInput') itemInput: ElementRef<HTMLInputElement>;
+  @ViewChild('autocompleteTrigger') matACTrigger: MatAutocompleteTrigger;
+
+  lookupItems$: Observable<LookupItem[]> | undefined;
+  private lookupItems: LookupItem[] = [];
+
+  selectedItems: LookupItem[] = [];
+  cascadedIdz: number[] = [];
+  isRequired: boolean= false;
+  private timer: any;
+
+  @Input()// @ts-ignore
+  field: FieldInfo;
+  //
+  @Input()// @ts-ignore
+  form: FormGroup;
+
+  @Input()// @ts-ignore
+  defaultValue: any;
+
+  @Input()
+  pathParam: any;
+
+  @Input()
+  readonly : boolean=false;
+
+  @Output()
+  selectedValue: EventEmitter<LookupItem[]> = new EventEmitter();
+
+  question = 'Would you like to add ?"';
+
+  multiControl = new FormControl();
+
+  constructor(private backendService: BackendService, private  translateService: TranslateService) {
+  }
+
+  ngOnInit(): void {
+    // this.form = this.rootFormGroup.control;
+    this.selectedItems = [];
+    this.multiControl = new FormControl(this.form?.controls[this.field?.property]);
+
+    this.multiControl.enable();
+    this.updateFieldAttributes();
+
+    if (!this.field.acceptNewItem){
+      // @ts-ignore
+      this.multiControl.setValidators([RequireMatch]);
+    }
+
+    this.multiControl.setValue(this.form?.controls[this.field?.property]?.value);
+
+    this.multiControl.valueChanges.subscribe( v => {
+        if (typeof v === 'string') {
+          clearTimeout(this.timer);
+          this.timer = setTimeout(() => {
+            this.filterLookupItems(v, null);}, 700);
+        }
+      }
+    );
+
+    // this.multiControl.valueChanges.subscribe(v => {
+    //     if (typeof v === 'string') this.filterLookupItems(v, null);
+    // })
+    // this.filterAutoCompleteData(this.field.property);
+
+    this.getLookupData();
+    if (this.field.cascadedBy) {
+      this.form?.get(this.field.cascadedBy)?.valueChanges.subscribe(v => {
+        this.removeChildItemsIfCascadedByRemoved(v);
+      });
+    }
+
+  }
+
+  private updateFieldAttributes() {
+    if (this.field.readonly) {
+      this.multiControl.disable();
+      this.isRequired = false;
+    } else if (this.field.required) {
+      this.form?.controls[this.field?.property].setValidators([Validators.required]);
+      this.form?.controls[this.field?.property].updateValueAndValidity();
+      this.multiControl.setValidators([Validators.required]);
+      this.isRequired = true;
+    }
+    this.multiControl.updateValueAndValidity();
+  }
+
+  private removeChildItemsIfCascadedByRemoved(v) {
+    this.cascadedIdz = [];
+    v.forEach(a => {
+      this.cascadedIdz.push(a.id);
+    });
+    let toDeleteIdz = [];
+    this.selectedItems?.forEach(x => {
+      const del = this.cascadedIdz.findIndex(y => y === x[this.field.cascadedBy]?.id);
+      if (del < 0) {
+        toDeleteIdz.push(x['id']);
+      }
+    });
+
+    if (toDeleteIdz) {
+      this.selectedItems = this.selectedItems.filter(s => !toDeleteIdz.includes(s.id));
+      this.form.get(this.field.property).patchValue(this.selectedItems, {emitEvent: true});
+    }
+  }
+
+  ngOnChanges({defaultValue, field}: SimpleChanges): void {
+    this.patchLookupValue(defaultValue?.currentValue);
+    if (field?.currentValue) {
+      this.field = field.currentValue;
+      this.updateFieldAttributes();
+    }
+  }
+
+  private getLookupData() {
+    const listItems: GetItemsList = buildItemsList('', this.field.lookupApiPath);
+
+    const filterRequest: FilterRequest = new FilterRequest();
+    filterRequest.filters = [];
+    this.cascadedIdz = [];
+    if (this.field.cascadedBy) {
+      this.form.get(this.field.cascadedBy)?.value?.forEach(a => {
+        this.cascadedIdz.push(a.id);
+      })
+    }
+    if (this.field.cascadedBy && this.cascadedIdz?.length > 0) {
+      filterRequest.filters.push(new Filter({
+        key: 'id', fieldName: this.field.cascadedBy, label: '',
+        filterType: 'FILED_FILTER', operator: 'IN',
+        valueObject: this.cascadedIdz
+      }));
+    }
+
+    filterRequest.columns = ['id','code','englishName','arabicName'];
+    this.backendService.getLookupItemsByMultiFilter(listItems, filterRequest).subscribe((resp => {
+      if (resp.valid) {
+        this.lookupItems = this.field.includeAllOption ? [ALL_ITEM].concat(resp.body) : resp.body;
+        if (!this.form.get('id')?.value) {
+          this.patchLookupValue(this.lookupItems?.find(l => l.defaultValue));
+        }
+        this.patchLookupValue(this.multiControl.value);
+
+      }
+
+    }));
+  }
+
+
+  selected(value: any): void {
+    if (value.id !== -1 && this.selectedItems.findIndex(i => i.id === value.id) === -1) {
+      this.selectedItems?.push(value);
+      this.itemInput.nativeElement.value = '';
+      this.form.get(this.field.property)?.setValue(this.selectedItems);
+      // @ts-ignore
+      this.selectedValue.emit(this.selectedItems);
+      this.multiControl.setValue(null);
+    }
+  }
+
+  displayFn(selected: any): string {
+    return selected ? selected.englishName : undefined;
+
+  }
+  isSelected(item: any): boolean {
+    return this.selectedItems?.some(selected => selected.id === item.id); // Use your unique identifier
+  }
+
+  _allowSelection(option: LookupItem): { [className: string]: boolean } {
+    return {
+      'prevent-selection': option.id === -1,
+    }
+  }
+
+  itemNameByLag(item: any): string {
+    // return item.arabicName;
+    return this.translateService.getDefaultLang() === 'en' ? item.englishName : item.arabicName
+  }
+
+  private readonly _columns = ['id','code','englishName','arabicName'];
+
+  filterLookupItems(name: any, trigger: MatAutocompleteTrigger) {
+    if (trigger) {
+      trigger.openPanel();
+    }
+    if (name === undefined) {
+      name = '';
+    }
+
+    const listItems: GetItemsList = buildItemsList(name, this.field.lookupApiPath);
+
+    const filterRequest: FilterRequest = new FilterRequest();
+    filterRequest.filters = this.field.lookupFilterList || [];
+    filterRequest.searchStr = name;
+    this.cascadedIdz = [];
+    if (this.field.cascadedBy) {
+      this.form.get(this.field.cascadedBy)?.value?.forEach(a => {
+        this.cascadedIdz.push(a.id);
+      })
+    }
+    if (this.field.cascadedBy && this.cascadedIdz?.length > 0) {
+      filterRequest.filters.push(new Filter({
+        key: 'id',joinObjectName: this.field.cascadedBy, fieldName: this.field.cascadedBy, label: '',
+        filterType: 'FILED_FILTER', operator: 'IN',
+        valueObject: this.cascadedIdz
+      }));
+    }
+
+    filterRequest.columns = [...this._columns, ...(this.field.extraLookupsColumns ?? [])];
+
+    this.backendService.getLookupItemsByMultiFilter(listItems, filterRequest).subscribe(resp => {
+      // console.log('result -->', resp);
+      let items: LookupItem[] = [];
+      if (resp.valid) {
+        // resp.body.forEach(r => items.push(r));
+        items = resp.body.filter(item =>
+          // (item.englishName.toLowerCase().includes(name.toLowerCase()) ||
+          // item.arabicName.toLowerCase().includes(name.toLowerCase())) &&
+          this.selectedItems?.findIndex( i=> i.id ===item.id ) ===-1 );
+        if (!items?.length) {
+          this.field.acceptNewItem ?
+            items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})):
+            items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '})) ;
+
+        }
+      } else {
+        this.field.acceptNewItem ?
+          items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})):
+          items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '})) ;
+      }
+      this.lookupItems$ = of(items);
+    });
+    return;
+  }
+
+  private patchLookupValue(defaultValue: any) {
+    if (defaultValue) {
+      // this.form?.get(this.field.property)?.patchValue(defaultValue);
+      this.selectedItems = defaultValue;
+      this.multiControl.setValue(defaultValue);
+      this.multiControl.patchValue(defaultValue, {emitEvent: true});
+    }
+  }
+
+  remove(item: LookupItem) {
+    const index = this.selectedItems.indexOf(item);
+    if (index >= 0) {
+      this.selectedItems.splice(index, 1);
+      this.form.get(this.field.property).patchValue(this.selectedItems, {emitEvent: true});
+    }
+  }
+
+  getLabel() {
+    return this.translateService.instant(this.field.label);
+  }
+  onKeydown(event: KeyboardEvent, autocompleteTrigger: MatAutocompleteTrigger) {
+    if (event.key === 'Enter') {
+      this.filterLookupItems('', autocompleteTrigger);
+      autocompleteTrigger.openPanel();
+      event.preventDefault();
+    }
+  }
+  getId() {
+    return this.field.property;
+  }
+}