From 16eb825a51fd395697c7706f3d9d7f78ac1e1b76 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 14 Sep 2016 18:49:59 +0100
Subject: [PATCH] #726 required validator for group picker widget

---
 .../widgets/core/form-field-validator.ts      |  3 ++-
 .../functional-group.widget.css               | 20 +++++++++++++++++++
 .../functional-group.widget.html              |  5 +++--
 .../functional-group.widget.ts                |  7 +++++++
 .../widgets/people/people.widget.ts           |  7 +++----
 5 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts
index 21192fa3b5..6dfe487705 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts
@@ -33,7 +33,8 @@ export class RequiredFieldValidator implements FormFieldValidator {
         FormFieldTypes.NUMBER,
         FormFieldTypes.TYPEAHEAD,
         FormFieldTypes.DROPDOWN,
-        FormFieldTypes.PEOPLE
+        FormFieldTypes.PEOPLE,
+        FormFieldTypes.FUNCTIONAL_GROUP
     ];
 
     isSupported(field: FormFieldModel): boolean {
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.css b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.css
index 6533c16189..8c9426d570 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.css
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.css
@@ -27,3 +27,23 @@
 .functional-group-widget--autocomplete > ul > li {
     opacity: 1;
 }
+
+.people-widget--autocomplete > ul > li {
+    opacity: 1;
+}
+
+.functional-group-widget__invalid .mdl-textfield__input {
+    border-color: #d50000;
+}
+
+.functional-group-widget__invalid .mdl-textfield__label {
+    color: #d50000;
+}
+
+.functional-group-widget__invalid .mdl-textfield__label:after {
+    background-color: #d50000;
+}
+
+.functional-group-widget__invalid .mdl-textfield__error {
+    visibility: visible !important;
+}
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html
index 5562b58d6e..90090bfe4f 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html
@@ -1,4 +1,5 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label functional-group-widget">
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label functional-group-widget"
+     [class.functional-group-widget__invalid]="!field.isValid">
     <input class="mdl-textfield__input"
            type="text"
            [attr.id]="field.id"
@@ -8,8 +9,8 @@
            (blur)="onBlur()"
            [disabled]="field.readOnly">
     <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+    <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
 </div>
-
 <div class="functional-group-widget--autocomplete mdl-shadow--2dp" *ngIf="popupVisible && groups.length > 0">
     <ul>
         <li *ngFor="let item of groups"
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts
index 233f8deadb..1220de01ef 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts
@@ -54,6 +54,13 @@ export class FunctionalGroupWidget extends WidgetComponent implements OnInit {
                 let restrictWithGroup = <GroupModel> params['restrictWithGroup'];
                 this.groupId = restrictWithGroup.id;
             }
+
+            // Load auto-completion for previously saved value
+            if (this.value) {
+                this.formService
+                    .getWorkflowGroups(this.value, this.groupId)
+                    .subscribe((result: GroupModel[]) => this.groups = result || []);
+            }
         }
     }
 
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts
index 7912ade856..4a0c4cbe52 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts
@@ -58,10 +58,9 @@ export class PeopleWidget extends WidgetComponent implements OnInit {
 
             // Load auto-completion for previously saved value
             if (this.value) {
-                this.formService.getWorkflowUsers(this.value, this.groupId)
-                    .subscribe((result: GroupUserModel[]) => {
-                        this.users = result || [];
-                    });
+                this.formService
+                    .getWorkflowUsers(this.value, this.groupId)
+                    .subscribe((result: GroupUserModel[]) => this.users = result || []);
             }
         }
     }