argos/dmp-frontend/src/app/shared/components/auto-complete/auto-complete.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../../core/common/base/base.component';
import { AutoCompleteConfiguration } from './AutoCompleteConfiguration';

@Component({
	selector: 'app-auto-complete',
	templateUrl: './auto-complete.component.html',
	styleUrls: ['./auto-complete.component.scss']
})
export class AutoCompleteComponent extends BaseComponent implements OnInit, ErrorStateMatcher {

	@Input() placeholder: String;
	@Input() disabled: boolean;

	@Input() typeaheadMS = 300;
	@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() {
		super();
	}

	ngOnInit() {
		if (this.inputData.refreshEvent) {
			this.inputData.refreshEvent
				.pipe(takeUntil(this._destroyed))
				.subscribe(x => {
					if (x) {
						this.formCtrl.patchValue(null);
						this.textFormCtrl.patchValue(null);
						this.options = [];
					}
				});
		}
		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;
					})
						.pipe(takeUntil(this._destroyed))
						.subscribe();
				} else {
					this.loading = false;
				}
			})
			.pipe(takeUntil(this._destroyed))
			.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);
	}
}