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

import { Component, OnInit,Input, Output, EventEmitter, forwardRef} from '@angular/core';
import { Validators, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

import { ServerService } from '../../../services/server.service';
import { UUID } from 'angular2-uuid';
import { NguiAutoCompleteModule } from '@ngui/auto-complete';

declare var $: any;


@Component({
  selector: 'autocomplete-remote',
  templateUrl: './autocomplete-remote.component.html',
  styleUrls: ['./autocomplete-remote.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AutocompleteRemoteComponent),
      multi: true
    }
  ]
  })



export class AutocompleteRemoteComponent implements OnInit, ControlValueAccessor {


  id : string = UUID.UUID();
  @Input() label : string;
  @Input() url : string;
  selectedValue : string;


  values : any[] = new Array();

  query : string = "";


  constructor(private serverService :ServerService) {
    
  }


  ngOnInit() {
    this.updateByQuery(this.query); //just to trigger the first call
  }



  updateByQuery(query : string){
    this.serverService.getThroughProxy(this.url, query).subscribe(
      response => {
        this.values.length = 0; //clear array; -- this is quite a fast and memory efficient way
        response.data.forEach(element => {
          this.values.push(element.attributes.name);
        });
      },
      error => {
        console.log(error);
      }
    );
  }


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

  get value() {
    this.value = this.selectedValue;
    return this.selectedValue;
  }

  set value(val) {
    this.selectedValue = val;
    this.onChange(val);
    this.onTouched();
  }

  

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

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

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

}