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

import { any } from 'codelyzer/util/function';
import { FormControl, FormGroupDirective, NgForm, FormGroup, FormBuilder } from '@angular/forms';
import { Observable } from 'rxjs/Rx';
import { setTimeout } from 'timers';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ElementRef } from '@angular/core';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/map';
import { AutoCompleteConfiguration } from './AutoCompleteConfiguration';
import { ErrorStateMatcher, MatInput } from '@angular/material';

@Component({
	selector: 'auto-complete',
	templateUrl: './autocomplete.component.html',
	styleUrls: ['./autocomplete.component.scss']
})
export class AutocompleteComponent implements OnInit {
	@Input()
	configuration: AutoCompleteConfiguration;

	@Input()
	titleKey: String;

	@Input()
	subtitleKey: String;

	@Input()
	delay: number = 700;

	@Input()
	placeholder: String;

	filteredItems: any[];

	// @Input()
	// validationErrorString: String;

	// public errorStateMatcher: AutoCompleteErrorStateMatcher = new AutoCompleteErrorStateMatcher();

	@Input()
	required: boolean;

	@Input()
	disabled: boolean = false;

	// @Input() selectedDropdownItem: AutoCompleteItem;
	// @Output() selectedDropdownItemChange = new EventEmitter<AutoCompleteItem>();

	// @Output()
	// output: EventEmitter<AutoCompleteItem> = new EventEmitter<AutoCompleteItem>();

	@Input() control: FormControl;

	// @Input() createNew = false;
	// //term = new FormControl();
	// @Input()
	// ClickFunctionCall: Function;

	loading = false;
	hasSelectedItem = false;


	constructor() {

	}

	ngOnInit() {

		const valueChanges = this.control.valueChanges.share();
		valueChanges.subscribe(searchTerm => {
			if (this.hasSelectedItem) {
				this.resetFormControlValue();
			}else{
				this.loading = true;				
			}
		});
		valueChanges
			.debounceTime(this.delay)
			.distinctUntilChanged()
			.switchMap(val => {
				if (this.hasSelectedItem) {
					this.loading = false;
					return [];
				}

				this.configuration.requestItem.criteria.like = this.control.value;
				return this.configuration.callback(this.configuration.requestItem).map(result => {
					this.filteredItems = (<any[]>result)
					this.loading = false;
				})
			}).subscribe()

		// this.filteredItems = this.inputField.nativeElement.valueChanges.startWith(null)
		// 	.debounceTime(this.delay)
		// 	.finally(() => this.loading = false)
		// 	.distinctUntilChanged()
		// 	.switchMap(val => {
		// 		this.configuration.requestItem.criteria.like = val;
		// 		return this.configuration.callback(this.configuration.requestItem)
		// 	})
		// const valueChanges = this.form.controls['text'].valueChanges.share();
		// valueChanges.subscribe(searchTerm => {
		// 	this.loading = true;
		// 	if (this.form.controls['value'].value) {
		// 		this.resetFormGroupValue();
		// 	}
		// });

		// valueChanges
		// 	.debounceTime(this.typeaheadMS)
		// 	.subscribe(searchTerm => {
		// 		if (typeof searchTerm === 'string') {
		// 			this.inputOnChange(searchTerm)
		// 		}
		// 	});
	}

	resetFormControlValue() {
		this.hasSelectedItem = false;
		//this.control.setValue(null, { emitEvent: false });
	}

	// // listingItemToDropDown(item: DropdownListingItem): AutoCompleteItem {
	// // 	return (item as DropdownListingItem).toDropdownList();
	// // }

	optionSelected(event: any) {
		this.hasSelectedItem = true;
		this.control.setValue(event.option.value, { emitEvent: false });
		this.filteredItems = [event.option.value];

		//this.selectedDropdownItemChange.emit(event.option.value);
		//this.form.updateValueAndValidity();
		//this.options = [event.option.value];
		//this.loading = false;
	}

	// inputOnChange(term: string) {
	// 	//this.form.patchValue({ value: null, description: '', text: '' });
	// 	//this.form.updateValueAndValidity();
	// 	this.configuration.criteria.like = term;
	// 	this.configuration.callback(this.configuration.criteria)
	// 		.map((res: any) => this.mapper(res))
	// 		.subscribe(
	// 		(res: AutoCompleteItem[]) => {
	// 			this.options = res;
	// 		},
	// 		null,
	// 		() => { this.loading = false });
	// }

	displayWith(value: any): String {
		if (!value) return '';
		return value['' + this.titleKey];
	}
	// displayFn(item: AutoCompleteItem): string {
	// 	return item.text ? item.text : '';
	// }

	//fieldHasErrors(control: FormControl, form: FormGroupDirective | NgForm): boolean {
	//    return this.errorStateMatcher(control, form);
	// }
}

export class AutoCompleteErrorStateMatcher implements ErrorStateMatcher {
	isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
		const isFormSubmitted = form && form.submitted;
		const isControlInvalid = control && control.invalid && (control.dirty || control.touched || isFormSubmitted);
		const isFormInvalid = form && form.enabled && form.invalid && (form.dirty || form.touched || isFormSubmitted)
		return !!(isControlInvalid || isFormInvalid);
	}
}