163 lines
4.6 KiB
TypeScript
163 lines
4.6 KiB
TypeScript
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 { AutoCompleteChipConfiguration } from './AutoCompleteChipConfiguration';
|
|
import { ErrorStateMatcher, MatInput } from '@angular/material';
|
|
|
|
@Component({
|
|
selector: 'auto-complete-chip',
|
|
templateUrl: './autocompleteChips.component.html',
|
|
styleUrls: ['./autocompleteChips.component.scss']
|
|
})
|
|
export class AutocompleteChipComponent implements OnInit {
|
|
@Input()
|
|
configuration: AutoCompleteChipConfiguration;
|
|
|
|
@Input()
|
|
titleKey: String;
|
|
|
|
@Input()
|
|
subtitleKey: String;
|
|
|
|
@Input()
|
|
delay: number = 700;
|
|
|
|
@Input()
|
|
placeholder: String;
|
|
|
|
filteredItems: any[];
|
|
|
|
@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;
|
|
|
|
selectedItems: any[] = [];
|
|
|
|
constructor() {
|
|
|
|
}
|
|
|
|
ngOnInit() {
|
|
|
|
const valueChanges = this.control.valueChanges.share();
|
|
valueChanges.subscribe(searchTerm => {
|
|
if (this.hasSelectedItem) { //proswrina epeidh ta projects den eixan ids...gia test!!!
|
|
this.resetFormControlValue();
|
|
} else {
|
|
this.loading = true;
|
|
}
|
|
});
|
|
valueChanges
|
|
.debounceTime(this.delay)
|
|
.distinctUntilChanged()
|
|
.switchMap(val => {
|
|
if (this.hasSelectedItem) {
|
|
this.loading = false;
|
|
return [];
|
|
} else if (typeof(val)== "string") {
|
|
this.configuration.requestItem.criteria.like = val;
|
|
return this.configuration.callback(this.configuration.requestItem).map(result => {
|
|
this.filteredItems = (<any[]>result)
|
|
this.loading = false;
|
|
})
|
|
}
|
|
|
|
}).subscribe()
|
|
}
|
|
|
|
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.selectedItems.push(event.option.value)
|
|
this.control.setValue(this.selectedItems, { emitEvent: false });
|
|
this.filteredItems = this.selectedItems;
|
|
|
|
//this.selectedDropdownItemChange.emit(event.option.value);
|
|
//this.form.updateValueAndValidity();
|
|
//this.options = [event.option.value];
|
|
//this.loading = false;
|
|
}
|
|
remove(item:any){
|
|
// this.selectedItems.filter(function(selitem){
|
|
// return selitem.id != item.id;
|
|
// });
|
|
const index: number = this.selectedItems.indexOf(item);
|
|
if (index !== -1) {
|
|
this.selectedItems.splice(index, 1);
|
|
}
|
|
this.control.setValue(this.selectedItems);
|
|
|
|
if(this.selectedItems.length == 0) this.hasSelectedItem = 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 '';
|
|
if (value.lenght) {
|
|
value.forEach(element => {
|
|
element['' + this.titleKey];
|
|
});
|
|
return value;
|
|
}
|
|
else 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);
|
|
}
|
|
} |