2017-11-27 14:40:16 +01:00
|
|
|
import { Field } from '../../../models/Field';
|
2017-12-06 12:39:49 +01:00
|
|
|
import { Component, OnInit, Input, Output, EventEmitter, forwardRef, ViewEncapsulation } from '@angular/core';
|
2017-11-27 14:40:16 +01:00
|
|
|
import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
|
|
|
|
|
|
|
|
declare var $: any;
|
|
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'df-autocomplete',
|
|
|
|
templateUrl: './autocomplete-remote.component.html',
|
2017-12-06 12:39:49 +01:00
|
|
|
styleUrls: ['./autocomplete-remote.component.css'],
|
|
|
|
encapsulation: ViewEncapsulation.None
|
2017-11-27 14:40:16 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export class AutocompleteRemoteComponent implements OnInit/* , ControlValueAccessor */ {
|
|
|
|
|
|
|
|
|
|
|
|
@Input() field: Field;
|
|
|
|
@Input() form: FormGroup;
|
|
|
|
|
2017-12-06 12:39:49 +01:00
|
|
|
private textFormGroup = new FormGroup({ text: new FormControl("") });
|
2017-11-27 14:40:16 +01:00
|
|
|
private loading: boolean;
|
|
|
|
values: any[] = new Array();
|
|
|
|
typeaheadMS: number = 1400;
|
2017-12-06 12:39:49 +01:00
|
|
|
|
2017-12-19 18:34:00 +01:00
|
|
|
constructor() {
|
2017-11-27 14:40:16 +01:00
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
ngOnInit() {
|
|
|
|
let valueChanges = this.textFormGroup.controls['text'].valueChanges.share();
|
|
|
|
valueChanges.subscribe(searchTerm => {
|
|
|
|
this.loading = true;
|
|
|
|
if (this.form.controls['text'].value)
|
|
|
|
this.resetFormGroupValue();
|
|
|
|
});
|
|
|
|
|
|
|
|
valueChanges
|
|
|
|
.debounceTime(this.typeaheadMS)
|
|
|
|
.subscribe(searchTerm => {
|
|
|
|
if (typeof searchTerm === 'string') {
|
|
|
|
this.updateByQuery(searchTerm)
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
resetFormGroupValue() {
|
|
|
|
this.form.patchValue({ value: null }, { emitEvent: false });
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
updateByQuery(query: string) {
|
2017-12-19 18:34:00 +01:00
|
|
|
// this.serverService.getThroughProxy(this.field.data.url, query).subscribe(
|
|
|
|
// response => {
|
|
|
|
// this.values.length = 0;
|
|
|
|
// /* response.data.forEach(element => {
|
|
|
|
// this.values.push(element.attributes.name);
|
|
|
|
// }); */
|
|
|
|
// },
|
|
|
|
// error => {
|
|
|
|
// }
|
|
|
|
// );
|
2017-11-27 14:40:16 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onChange: any = () => { };
|
|
|
|
onTouched: any = () => { };
|
|
|
|
|
|
|
|
|
|
|
|
registerOnChange(fn) {
|
|
|
|
this.onChange = fn;
|
|
|
|
}
|
|
|
|
|
|
|
|
registerOnTouched(fn) {
|
|
|
|
this.onTouched = fn;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* writeValue(value) {
|
|
|
|
if (value) {
|
|
|
|
this.value = value;
|
|
|
|
}
|
|
|
|
} */
|
|
|
|
|
|
|
|
}
|
|
|
|
|