Changing the layout of the single-select.

Author: renemadsen

eform-client/src/app/modules/cases/components/case-elements/element-singleselect/element-singleselect.component.html

@@ -1,5 +1,3 @@
-<select class="form-control" [(ngModel)]="fieldValueObj.value" name="value">
-  <option *ngFor="let item of fieldValueObj.keyValuePairList"
-          [value]="item.key">{{item.value}}
-  </option>
-</select>
+<ngx-select [items]="items"
+            [formControl]="selectControl"
+            [placeholder]="fieldValueObj.valueReadable">

eform-client/src/app/modules/cases/components/case-elements/element-singleselect/element-singleselect.component.ts

@@ -1,13 +1,18 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {CaseFieldValue} from 'app/models';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {CaseFieldValue, CommonDictionaryTextModel} from 'app/models';
+import {FormControl} from '@angular/forms';
+import {ISubscription} from 'rxjs/Subscription';
 
 @Component({
   selector: 'element-singleselect',
   templateUrl: './element-singleselect.component.html',
   styleUrls: ['./element-singleselect.component.css']
 })
-export class ElementSingleselectComponent implements OnInit {
+export class ElementSingleselectComponent implements OnInit, OnDestroy {
+  sub:  ISubscription;
   fieldValueObj: CaseFieldValue = new CaseFieldValue();
+  selectControl = new FormControl();
+  items: Array<CommonDictionaryTextModel> = [];
 
   @Input()
   get fieldValue() {
@@ -22,6 +27,23 @@ export class ElementSingleselectComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.sub = this.selectControl.valueChanges.subscribe(value => this.onSelectedChanged(value));
+
+    this.fieldValueObj.keyValuePairList.forEach(function(key, value) {
+      let kvp = new CommonDictionaryTextModel();
+      kvp.id = key.key;
+      kvp.text = key.value;
+      this.push(kvp);
+    }, this.items);
+  }
+
+
+  ngOnDestroy(): void {
+    this.sub.unsubscribe();
+  }
+
+  onSelectedChanged(value: string) {
+    this.fieldValue.value = value;
   }
 
 }