121 lines
4.0 KiB
TypeScript
121 lines
4.0 KiB
TypeScript
import { Input, OnInit, Component, AfterViewInit, Output, EventEmitter, OnChanges } from '@angular/core';
|
|
import { FormGroup, FormControl, FormGroupDirective, NgForm } from '@angular/forms';
|
|
import { ErrorStateMatcher } from '@angular/material';
|
|
import { AutoCompleteConfiguration } from '../autocomplete/AutoCompleteConfiguration';
|
|
|
|
@Component({
|
|
selector: 'app-auto-complete',
|
|
templateUrl: './auto-complete.component.html',
|
|
styleUrls: ['./auto-complete.component.scss']
|
|
})
|
|
export class AutoCompleteComponent implements OnInit, ErrorStateMatcher {
|
|
|
|
@Input() placeholder: String;
|
|
@Input() disabled: boolean;
|
|
|
|
@Input() typeaheadMS: number;
|
|
@Input() formCtrl: FormControl;
|
|
@Input() required = false;
|
|
@Input() displayFunction: Function;
|
|
@Input() _subtitleFn: Function;
|
|
|
|
@Input() assignValueFunction: Function;
|
|
@Input() transformFunction: Function;
|
|
@Input() inputData: AutoCompleteConfiguration;
|
|
@Input() validationErrorString: String;
|
|
@Input() clear = false;
|
|
|
|
@Output() onItemChange = new EventEmitter<any>();
|
|
|
|
public textFormCtrl: FormControl;
|
|
public options: any[];
|
|
|
|
loading = false;
|
|
hasSelectedItem = false;
|
|
isUnchanged = true;
|
|
|
|
constructor() {
|
|
|
|
}
|
|
|
|
ngOnInit() {
|
|
|
|
this.textFormCtrl = new FormControl();
|
|
if (this.disabled) this.textFormCtrl.disable();
|
|
this.formCtrl.registerOnDisabledChange(isDisabled => {
|
|
if (isDisabled) this.textFormCtrl.disable({ onlySelf: true, emitEvent: false });
|
|
else this.textFormCtrl.enable({ onlySelf: true, emitEvent: false });
|
|
})
|
|
if (this.formCtrl && this.formCtrl.value) {
|
|
this.textFormCtrl.patchValue(this.formCtrl.value, { emitEvent: false });
|
|
this.hasSelectedItem = true;
|
|
}
|
|
|
|
const valueChanges = this.textFormCtrl.valueChanges.share();
|
|
|
|
valueChanges.subscribe(searchTerm => { // reset value of input control every time the user starts typing
|
|
if (this.hasSelectedItem) {
|
|
this.hasSelectedItem = false;
|
|
this.onItemChange.emit(null);
|
|
if (this.formCtrl && this.formCtrl.value) {
|
|
this.formCtrl.patchValue(null, { emitEvent: false });
|
|
}
|
|
}
|
|
this.isUnchanged = false;
|
|
});
|
|
|
|
valueChanges.debounceTime(this.typeaheadMS)
|
|
.do(value => {
|
|
if (this.hasSelectedItem) { this.loading = false; }
|
|
if (typeof value === 'string') {
|
|
this.loading = true;
|
|
this.inputData.requestItem.criteria["like"] = value;
|
|
this.inputData.callback(this.inputData.requestItem).map(res => {
|
|
this.options = res;
|
|
this.loading = false;
|
|
}).subscribe();
|
|
} else {
|
|
this.loading = false;
|
|
}
|
|
})
|
|
.subscribe();
|
|
}
|
|
|
|
printText(item: any): string {
|
|
if (this.displayFunction) {
|
|
return this.displayFunction(item)
|
|
}
|
|
else return item;
|
|
}
|
|
|
|
subtitleFn(item) {
|
|
return this._subtitleFn(item);
|
|
}
|
|
|
|
getValue(item: any): string {
|
|
if (this.assignValueFunction) {
|
|
if (this.transformFunction) return this.assignValueFunction(this.transformFunction(item))
|
|
else return this.assignValueFunction(item)
|
|
}
|
|
else return item;
|
|
}
|
|
|
|
optionSelected(event: any) {
|
|
if (this.formCtrl) { this.formCtrl.patchValue(this.assignValueFunction ? this.assignValueFunction(event.option.value) : event.option.value, { emitEvent: false }); }
|
|
this.hasSelectedItem = true;
|
|
this.onItemChange.emit(this.assignValueFunction ? this.assignValueFunction(event.option.value) : event.option.value);
|
|
if (this.clear) {
|
|
this.options = [];
|
|
this.loading = false;
|
|
this.textFormCtrl.patchValue(null)
|
|
};
|
|
}
|
|
|
|
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
|
|
const isFormSubmitted = form && form.submitted;
|
|
const isControlInvalid = (control && control.invalid && (control.dirty || control.touched || isFormSubmitted)) || (!this.hasSelectedItem && !this.isUnchanged);
|
|
const isFormInvalid = form && form.enabled && form.invalid && (form.dirty || form.touched || isFormSubmitted);
|
|
return !!((isControlInvalid || isFormInvalid) && this.required);
|
|
}
|
|
}
|