argos/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.ts

import { Field } from '../../../models/Field';
import { Component, OnInit, Input, Output, EventEmitter, forwardRef, ViewEncapsulation } from '@angular/core';
import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { DatasetProfileService } from '@app/services/dataset-profile.service';
import { ActivatedRoute } from '@angular/router';

declare var $: any;


@Component({
  selector: 'df-autocomplete',
  templateUrl: './autocomplete-remote.component.html',
  styleUrls: ['./autocomplete-remote.component.css'],
  encapsulation: ViewEncapsulation.None,
})



export class AutocompleteRemoteComponent implements OnInit/* , ControlValueAccessor */ {


  @Input() field: Field;
  @Input() disabled = false
  @Input() form: FormGroup;

  private loading: boolean;
  private datasetId;
  values: any[] = new Array();
  typeaheadMS: number = 1400;

  constructor(private datasetProfileService: DatasetProfileService, route: ActivatedRoute) {
    this.datasetId = route.snapshot.params['id'];
  }


  ngOnInit() {
    let valueChanges = this.form.controls['value'].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.updateByQuery(searchTerm)
        }
      });


  }


  resetFormGroupValue() {
    this.form.patchValue({ value: null }, { emitEvent: false });
  }


  updateByQuery(query: string) {
    this.datasetProfileService.queryAutocomplete({ profileID: this.datasetId, fieldID: this.field.id, searchTerm: query })
      .subscribe(
        response => {
          this.values.length = 0;
          response.payload.forEach(element => {
            this.values.push(element.attributes.name);
          });
        },
        error => {
        }
      );
  }


  onChange: any = () => { };
  onTouched: any = () => { };


  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

  /* writeValue(value) {
    if (value) {
      this.value = value;
    }
  } */

}