From 88bbb07f4fb752711597780268251ec4e6223006 Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Wed, 8 Nov 2017 19:08:07 +0200
Subject: [PATCH] Finalized autocomplete fields component

---
 dmp-frontend/src/app/app.component.html       | 11 ++-----
 dmp-frontend/src/app/app.component.ts         |  3 ++
 dmp-frontend/src/app/app.module.ts            |  3 +-
 .../autocomplete-remote.component.html        |  9 ++----
 .../autocomplete-remote.component.ts          | 12 +++++---
 .../app/sample-form/sample-form.component.css |  0
 .../sample-form/sample-form.component.html    | 10 +++++++
 .../sample-form/sample-form.component.spec.ts | 25 ++++++++++++++++
 .../app/sample-form/sample-form.component.ts  | 30 +++++++++++++++++++
 9 files changed, 83 insertions(+), 20 deletions(-)
 create mode 100644 dmp-frontend/src/app/sample-form/sample-form.component.css
 create mode 100644 dmp-frontend/src/app/sample-form/sample-form.component.html
 create mode 100644 dmp-frontend/src/app/sample-form/sample-form.component.spec.ts
 create mode 100644 dmp-frontend/src/app/sample-form/sample-form.component.ts

diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index 8a3950d2a..baebd067f 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -63,16 +63,11 @@
         
         <!--this should be invisible -->
         <app-main-sign-in [ngClass]="'invisible'"></app-main-sign-in>
-          <!--
-        -->
-<!--
-        <autocomplete-remote [formControlName]="a1" [label]="'Please select a datarepo'" [url]="'https://eestore.paas2.uninett.no/api/datarepo/'" ></autocomplete-remote>
-        <autocomplete-remote [formControlName]="a2" [label]="'Please select a projectrepo'" [url]="'https://eestore.paas2.uninett.no/api/projectrepo/'" ></autocomplete-remote>
-        <autocomplete-remote [formControlName]="a3" [label]="'Please select an organizationrepo'" [url]="'https://eestore.paas2.uninett.no/api/organizationrepo/'" ></autocomplete-remote>
-        <autocomplete-remote [formControlName]="a4" [label]="'Please select a personrepo'" [url]="'https://eestore.paas2.uninett.no/api/personrepo/'" ></autocomplete-remote>
+        
+<!--    
+        <sample-form></sample-form>
 -->
 
-
   </div>
 
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts
index 15305a32d..2d93acd27 100644
--- a/dmp-frontend/src/app/app.component.ts
+++ b/dmp-frontend/src/app/app.component.ts
@@ -9,6 +9,9 @@ import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component
 import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
 
 
+import { SampleFormComponent } from './sample-form/sample-form.component';
+
+
 declare var $ :any;
 @Component({
   selector: 'app-root',
diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 6b238a40c..6e05b28fc 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -70,6 +70,7 @@ import { UserWorkspaceComponent } from './user-workspace/user-workspace.componen
 import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
 
 import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
+import { SampleFormComponent } from './sample-form/sample-form.component';
 
 
 
@@ -100,7 +101,7 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
     DmpTableFilterPipe,
     DatasetTableFilterPipe, 
     DatasetStatusFilterPipe, 
-    StatusToString
+    StatusToString, SampleFormComponent
   ],
   imports: [
     BrowserModule,
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 70daaa24e..febe4d700 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,9 +1,4 @@
-<label *ngIf="label" for="{{id}}">{{label}}</label>
-<input auto-complete class="form-control" formControlName="{{formControlName}}" id="{{id}}" [ngModel]="selectedValue" (ngModelChange)="updateByQuery($event)" [source]="values" />
-
-<!--
-<div class="form-group">
+<div [formGroup]="form">
   <label *ngIf="label" for="{{id}}">{{label}}</label>
-  <input auto-complete class="form-control" formControlName="{{formControlName}}" id="{{id}}" [ngModel]="selectedValue" (ngModelChange)="updateByQuery($event)" [source]="values" />
+  <input auto-complete class="form-control" formControlName="{{formCtrlName}}" id="{{id}}" [ngModel]="selectedValue" (ngModelChange)="updateByQuery($event)" [source]="values" />
 </div>
--->
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 926da2d3a..872a32b13 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,4 +1,6 @@
 import { Component, OnInit,Input, Output, EventEmitter} from '@angular/core';
+import { FormGroup, Validators } from '@angular/forms';
+
 import { ServerService } from '../../../services/server.service';
 import { UUID } from 'angular2-uuid';
 import { NguiAutoCompleteModule } from '@ngui/auto-complete';
@@ -18,10 +20,14 @@ export class AutocompleteRemoteComponent implements OnInit {
 
   }
 
-  @Input() id : string;
+
+
+  @Input() id : string = UUID.UUID();
   @Input() label : string;
   @Input() url : string;
-  @Input() formControlName : string;
+  @Input() formCtrlName : string;
+  @Input() form: FormGroup;
+
 
   selectedValue : string;
   //@Output() selectedValueEmitter: EventEmitter<string> = new EventEmitter<string>();
@@ -31,8 +37,6 @@ export class AutocompleteRemoteComponent implements OnInit {
   query : string = "";
 
   ngOnInit() {
-    if(this.id == null)
-      this.id = UUID.UUID();
     this.updateByQuery(this.query); //just to trigger the first call
   }
 
diff --git a/dmp-frontend/src/app/sample-form/sample-form.component.css b/dmp-frontend/src/app/sample-form/sample-form.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/dmp-frontend/src/app/sample-form/sample-form.component.html b/dmp-frontend/src/app/sample-form/sample-form.component.html
new file mode 100644
index 000000000..4bd3e8dcb
--- /dev/null
+++ b/dmp-frontend/src/app/sample-form/sample-form.component.html
@@ -0,0 +1,10 @@
+
+<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
diff --git a/dmp-frontend/src/app/sample-form/sample-form.component.spec.ts b/dmp-frontend/src/app/sample-form/sample-form.component.spec.ts
new file mode 100644
index 000000000..37668ad9b
--- /dev/null
+++ b/dmp-frontend/src/app/sample-form/sample-form.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SampleFormComponent } from './sample-form.component';
+
+describe('SampleFormComponent', () => {
+  let component: SampleFormComponent;
+  let fixture: ComponentFixture<SampleFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SampleFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SampleFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/dmp-frontend/src/app/sample-form/sample-form.component.ts b/dmp-frontend/src/app/sample-form/sample-form.component.ts
new file mode 100644
index 000000000..257f62940
--- /dev/null
+++ b/dmp-frontend/src/app/sample-form/sample-form.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+import { AutocompleteRemoteComponent } from '../form/fields/autocomplete-remote/autocomplete-remote.component';
+
+@Component({
+  selector: 'sample-form',
+  templateUrl: './sample-form.component.html',
+  styleUrls: ['./sample-form.component.css']
+})
+export class SampleFormComponent implements OnInit {
+
+
+  sampleForm : any;
+
+
+  constructor() { }
+
+  ngOnInit() {
+
+    this.sampleForm = new FormGroup ({
+      a1: new FormControl(),
+      a2: new FormControl(),
+      a3: new FormControl(),
+      a4: new FormControl()
+    });
+
+  }
+
+}