[AAE-1152] Making sure the people and group widget is working fine as part of form (#5322)

* Making sure the people and group widget is working fine as part of the form

* Be able to save a form with people and group

* Fix tslint

* Fix html error

* Fix unit test

lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts

@@ -202,6 +202,7 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
             .subscribe(
                 (data) => {
                     this.formCloudRepresentationJSON = data[0];
+
                     this.formCloudRepresentationJSON.processVariables = data[1];
                     this.data = data[1];
 

lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html

@@ -3,12 +3,11 @@
     <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span
         *ngIf="isRequired()">*</span></label>
         <adf-cloud-group [mode]="mode"
+                         [title]="title"
                          [roles]="roles"
-                         [appName]="appName"
+                         (selectGroup)="onSelectGroup($event)"
+                         (removeGroup)="onRemoveGroup($event)"
                          [preSelectGroups]="preSelectGroup">
         </adf-cloud-group>
-    <error-widget [error]="field.validationSummary"></error-widget>
-    <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()"
-                  required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>
 

lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { baseHost, WidgetComponent, IdentityGroupCountModel } from '@alfresco/adf-core';
+import { baseHost, WidgetComponent, IdentityGroupModel } from '@alfresco/adf-core';
 
 /* tslint:disable:component-selector  */
 
@@ -28,17 +28,29 @@ import { baseHost, WidgetComponent, IdentityGroupCountModel } from '@alfresco/ad
 })
 export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit {
 
-    appName: string;
     roles: string[];
     mode: string;
-    preSelectGroup: IdentityGroupCountModel[];
+    title: string;
+    preSelectGroup: IdentityGroupModel[];
 
     ngOnInit() {
         if (this.field) {
-            this.appName = this.field.appName;
             this.roles = this.field.roles;
-            this.mode = this.field.mode;
-            this.preSelectGroup = this.field.value;
+            this.mode = this.field.optionType;
+            this.title = this.field.placeholder;
+            this.preSelectGroup = this.field.value ? this.field.value : [];
         }
     }
+
+    onSelectGroup(group: IdentityGroupModel) {
+        this.field.value = [...this.field.value, group];
+        this.onFieldChanged(this.field);
+    }
+
+    onRemoveGroup(group: IdentityGroupModel) {
+        const indexToRemove = this.field.value.findIndex((selected) => { return selected.id === group.id; });
+        this.field.value.splice(indexToRemove, 1);
+        this.field.value = [...this.field.value];
+        this.onFieldChanged(this.field);
+    }
 }

lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html

@@ -5,6 +5,9 @@
             [preSelectUsers]="preSelectUsers"
             [validate]="true"
             [appName]="appName"
+            [title]="title"
+            (selectUser)="onSelectUser($event)"
+            (removeUser)="onRemoveUser($event)"
             [roles]="roles"
             [mode]="mode">
         </adf-cloud-people>

lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts

@@ -31,14 +31,27 @@ export class PeopleCloudWidgetComponent extends WidgetComponent implements OnIni
     appName: string;
     roles: string[];
     mode: string;
+    title: string;
     preSelectUsers: IdentityUserModel[];
 
     ngOnInit() {
         if (this.field) {
-            this.appName = this.field.appName;
             this.roles = this.field.roles;
-            this.mode = this.field.mode;
-            this.preSelectUsers = this.field.value;
+            this.mode = this.field.optionType;
+            this.title = this.field.placeholder;
+            this.preSelectUsers = this.field.value ? this.field.value : [];
         }
     }
+
+    onSelectUser(user: IdentityUserModel) {
+        this.field.value = [...this.field.value, user];
+        this.onFieldChanged(this.field);
+    }
+
+    onRemoveUser(user: IdentityUserModel) {
+        const indexToRemove = this.field.value.findIndex((selectedUser) => { return selectedUser.id === user.id; });
+        this.field.value.splice(indexToRemove, 1);
+        this.field.value = [...this.field.value];
+        this.onFieldChanged(this.field);
+    }
 }

lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts

@@ -69,7 +69,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
      * Mandatory properties are: id, email, username
      */
     @Input()
-    preSelectUsers: IdentityUserModel[];
+    preSelectUsers: IdentityUserModel[] = [];
 
     /** FormControl to search the user */
     @Input()