#636 functional-group (aka group picker) widget

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts

@@ -17,6 +17,8 @@
 
 import { Component, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
+import { FormService } from '../../../services/form.service';
+import { GroupModel } from './../core/group.model';
 
 declare let __moduleName: string;
 declare var componentHandler;
@@ -30,15 +32,66 @@ declare var componentHandler;
 export class FunctionalGroupWidget extends WidgetComponent implements OnInit {
 
     value: string;
+    popupVisible: boolean = false;
+    groups: GroupModel[] = [];
+    minTermLength: number = 1;
 
-    constructor() {
+    constructor(private formService: FormService) {
         super();
     }
 
+    // TODO: investigate, called 2 times
+    // https://github.com/angular/angular/issues/6782
     ngOnInit() {
         let group = this.field.value;
         if (group) {
             this.value = group.name;
         }
     }
+
+    onKeyUp(event: KeyboardEvent) {
+        if (this.value && this.value.length >= this.minTermLength) {
+            this.formService.getWorkflowGroups(this.value)
+                .subscribe((result: GroupModel[]) => {
+                    this.groups = result || [];
+                    this.popupVisible = this.groups.length > 0;
+                });
+        } else {
+            this.popupVisible = false;
+        }
+
+    }
+
+    onBlur() {
+        setTimeout(() => {
+            this.flushValue();
+        }, 200);
+    }
+
+    flushValue() {
+        this.popupVisible = false;
+
+        let option = this.groups.find(item => item.name.toLocaleLowerCase() === this.value.toLocaleLowerCase());
+
+        if (option) {
+            this.field.value = option;
+            this.value = option.name;
+        } else {
+            this.field.value = null;
+            this.value = null;
+        }
+
+        this.field.updateForm();
+    }
+
+    // TODO: still causes onBlur execution
+    onItemClick(item: GroupModel, event: Event) {
+        if (item) {
+            this.field.value = item;
+            this.value = item.name;
+        }
+        if (event) {
+            event.preventDefault();
+        }
+    }
 }