From 7623ec88edbd58e96c239682eef6016fe352bc08 Mon Sep 17 00:00:00 2001
From: satyr <laskarisn@gmail.com>
Date: Fri, 10 Nov 2017 11:53:01 +0200
Subject: [PATCH] fixed autocomplete field rendering

---
 dmp-frontend/src/app/app.module.ts            |  4 +-
 .../src/app/form/dynamic-form.component.ts    |  5 +-
 .../autocomplete-remote.component.html        |  8 +-
 .../autocomplete-remote.component.ts          | 96 +++++++++++++------
 .../fields/dynamic-form-field.component.html  |  2 +-
 .../sample-form/sample-form.component.html    |  3 +-
 6 files changed, 79 insertions(+), 39 deletions(-)

diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 6e05b28fc..8f51a52d5 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgModule, forwardRef } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { HttpModule } from '@angular/http';
 import { RouterModule, Routes, Router } from '@angular/router';
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 1a4e3ea29..09dfad201 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -1,5 +1,5 @@
-import { Component, Input, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
-import { FormGroup, Validators } from '@angular/forms';
+import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef } from '@angular/core';
+import { FormGroup, Validators, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
 import 'rxjs/add/operator/switchMap';
@@ -13,6 +13,7 @@ import { GroupBase } from './dynamic-form-group/group-base';
 import { PaginationService } from '../../app/services/pagination.service';
 import { TokenService, TokenProvider } from '../services/login/token.service';
 import { ModalComponent } from '../modal/modal.component';
+import { AutocompleteRemoteComponent } from './fields/autocomplete-remote/autocomplete-remote.component';
 
 import { AngularDraggableModule } from 'angular2-draggable';
 
diff --git a/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html b/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html
index febe4d700..898c068e6 100644
--- a/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html
+++ b/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html
@@ -1,4 +1,4 @@
-<div [formGroup]="form">
-  <label *ngIf="label" for="{{id}}">{{label}}</label>
-  <input auto-complete class="form-control" formControlName="{{formCtrlName}}" id="{{id}}" [ngModel]="selectedValue" (ngModelChange)="updateByQuery($event)" [source]="values" />
-</div>
+
+<label *ngIf="label" for="{{id}}">{{label}}</label>
+<input auto-complete class="form-control" [value]="selectedValue" id="{{id}}" [(ngModel)]="selectedValue" (ngModelChange)="updateByQuery($event)" [source]="values" >
+
diff --git a/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.ts b/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.ts
index 872a32b13..b994cbb72 100644
--- a/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.ts
+++ b/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit,Input, Output, EventEmitter} from '@angular/core';
-import { FormGroup, Validators } from '@angular/forms';
+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';
@@ -11,51 +11,89 @@ declare var $: any;
 @Component({
   selector: 'autocomplete-remote',
   templateUrl: './autocomplete-remote.component.html',
-  styleUrls: ['./autocomplete-remote.component.css']
-})
-
-export class AutocompleteRemoteComponent implements OnInit {
-
-  constructor(private serverService :ServerService) {
-
-  }
+  styleUrls: ['./autocomplete-remote.component.css'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AutocompleteRemoteComponent),
+      multi: true
+    }
+  ]
+  })
 
 
 
-  @Input() id : string = UUID.UUID();
+export class AutocompleteRemoteComponent implements OnInit, ControlValueAccessor {
+
+
+  id : string = UUID.UUID();
   @Input() label : string;
   @Input() url : string;
-  @Input() formCtrlName : string;
-  @Input() form: FormGroup;
+  @Input() selectedValue : string;
 
 
-  selectedValue : string;
-  //@Output() selectedValueEmitter: EventEmitter<string> = new EventEmitter<string>();
-
   values : any[] = new Array();
 
   query : string = "";
 
+
+  constructor(private serverService :ServerService) {
+    
+  }
+
+
   ngOnInit() {
-    this.updateByQuery(this.query); //just to trigger the first call
+    //this.updateByQuery(this.query); //just to trigger the first call
   }
 
 
 
   updateByQuery(query : string){
-    //this.selectedValueEmitter.next(this.selectedValue);
-    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);
-      }
-    );
+    if(query){
+      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;
+    }
+  }
+
 }
+
diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
index 5201d4cf8..270116abf 100644
--- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
+++ b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
@@ -37,7 +37,7 @@
       on change event the listener is triggered on blur -->
 
       <div *ngSwitchCase="'dropdown'">     
-        <autocomplete-remote *ngIf="field.url" [form]="form" [formCtrlName]="field.key" [url]="field.url" ></autocomplete-remote>
+        <autocomplete-remote *ngIf="field.url" [formControlName]="field.key" [label]="field.label" [url]="field.url" ></autocomplete-remote>
         <select *ngIf="!field.url"  class="form-control" [id]="field.key" [formControlName]="field.key"  [required]="field.required" (change)="toggleVisibility($event, field, false)">
           <option *ngFor="let opt of field.options" [value]="opt._value"  >{{opt._label}}</option>
         </select>
diff --git a/dmp-frontend/src/app/sample-form/sample-form.component.html b/dmp-frontend/src/app/sample-form/sample-form.component.html
index 4bd3e8dcb..b7e67f845 100644
--- a/dmp-frontend/src/app/sample-form/sample-form.component.html
+++ b/dmp-frontend/src/app/sample-form/sample-form.component.html
@@ -1,10 +1,11 @@
 
 <form [formGroup]="sampleForm" novalidate>
   
+  <!--
   <autocomplete-remote [form]="sampleForm" [formCtrlName]="'a1'" [label]="'Please select a datarepo'" [url]="'https://eestore.paas2.uninett.no/api/datarepo/'" ></autocomplete-remote>
   <autocomplete-remote [form]="sampleForm" [formCtrlName]="'a2'" [label]="'Please select a projectrepo'" [url]="'https://eestore.paas2.uninett.no/api/projectrepo/'" ></autocomplete-remote>
   <autocomplete-remote [form]="sampleForm" [formCtrlName]="'a3'" [label]="'Please select an organizationrepo'" [url]="'https://eestore.paas2.uninett.no/api/organizationrepo/'" ></autocomplete-remote>
   <autocomplete-remote [form]="sampleForm" [formCtrlName]="'a4'" [label]="'Please select a personrepo'" [url]="'https://eestore.paas2.uninett.no/api/personrepo/'" ></autocomplete-remote>
-  
+  -->
 {{sampleForm.value | json }}
 </form>
\ No newline at end of file