[ADF-3997] - Add ngOnChange functionality for People/Group Demo Cloud… (#4244)

* [ADF-3997] - Add ngOnChange functionality for People/Group Demo Cloud Component

* [ADF-3997] - change radio label value

* [ADF-3997] - css fix

* rebase branch and fix issues

* [ADF-3997] - change labels and fix  preselected users issues

* [ADF-3997] fix package-lock.json

* [ADF-3997] - change people preselect placeholder

demo-shell/resources/i18n/en.json

@@ -290,10 +290,10 @@
     "CUSTOMIZE_FILTERS": "Customise your filter"
   },
   "PEOPLE_GROUPS_CLOUD": {
-    "SINGLE": "Single",
-    "MULTI": "Multi",
-    "PRESELECTED_VALUE": "Preselect value",
-    "ROLE": "Preselect roles"
+    "SINGLE": "Single Selection",
+    "MULTI": "Multiple Selection",
+    "PRESELECTED_VALUE": "Preselect: ",
+    "ROLE": "Roles: "
   },
   "ABOUT": {
     "TITLE": "Plugins",

demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html

@@ -4,19 +4,20 @@
     </mat-card-title>
 
     <mat-card-content>
+        <br>
+        <mat-radio-group (change)="onChangePeopleMode($event)">
+            <mat-radio-button checked="true" class="adf-people-single-mode" value="{{ peopleSingleMode }}">{{
+                'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
+            <mat-radio-button class="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
+                'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
+        </mat-radio-group>
         <div class="people-control-options">
-            <mat-radio-group (change)="onChangePeopleMode($event)">
-                <mat-radio-button class="adf-people-single-mode" value="{{ peopleSingleMode }}">{{
-                    'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
-                <mat-radio-button class="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
-                    'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
-            </mat-radio-group>
             <mat-form-field class="adf-preselect-value">
-                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }}</mat-label>
-                <input matInput (input)="setPeopleRoles($event)" placeholder="['ACTIVITI_ADMIN']" />
+                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"]</mat-label>
+                <input matInput (input)="setPeopleRoles($event)" />
             </mat-form-field>
-            <mat-form-field class="adf-preselect-value">
-                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}</mat-label>
+            <mat-form-field class="adf-preselect-value full">
+                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}: {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
                 <input matInput (input)="setPeoplePreselectValue($event)" />
             </mat-form-field>
         </div>
@@ -41,16 +42,21 @@
     </mat-card-title>
 
     <mat-card-content>
+        <br>
+        <mat-radio-group (change)="onChangeGroupsMode($event)">
+            <mat-radio-button checked="true" class="adf-people-single-mode" value="{{ groupSingleMode }}">{{
+                'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
+            <mat-radio-button class="adf-people-multiple-mode" value="{{ groupMultipleMode }}">{{
+                'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
+        </mat-radio-group>
         <div class="groups-control-options">
-            <mat-radio-group (change)="onChangeGroupsMode($event)">
-                <mat-radio-button class="adf-people-single-mode" value="{{ groupSingleMode }}">{{
-                    'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
-                <mat-radio-button class="adf-people-multiple-mode" value="{{ groupMultipleMode }}">{{
-                    'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
-            </mat-radio-group>
             <mat-form-field class="adf-preselect-value">
-                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }}</mat-label>
-                <input matInput (input)="setGroupRoles($event)" placeholder="['ACTIVITI_ADMIN']" />
+                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"]</mat-label>
+                <input matInput (input)="setGroupRoles($event)" />
+            </mat-form-field>
+            <mat-form-field class="adf-preselect-value full">
+                <mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
+                <input matInput (input)="setGroupsPreselectValue($event)" />
             </mat-form-field>
         </div>
         <div>
@@ -58,9 +64,9 @@
                 (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
         </div>
 
-        <div class="adf-group-list">
+        <div class="adf-group-list" *ngIf="canShowGroupList()">
             <mat-list role="list">
-                <mat-list-item *ngFor="let item of selectedGroupList" role="listitem">
+                <mat-list-item *ngFor="let item of preSelectGroup" role="listitem">
                     <mat-icon mat-list-icon>group</mat-icon>
                     {{ item.name }}
                 </mat-list-item>

demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss

@@ -16,6 +16,11 @@
 
             .adf-preselect-value {
                 margin-right: 15px;
+                min-width: 330px;
+
+                &-full {
+                    width:60%;
+                }
             }
         }
     }

demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts

@@ -27,12 +27,15 @@ import { MatRadioChange } from '@angular/material';
 })
 export class PeopleGroupCloudDemoComponent {
 
+    DEFAULT_GROUP_PLACEHOLDER: string = `[{"id": "1", "name":"activitiUserGroup"}]`;
+    DEFAULT_PEOPLE_PLACEHOLDER: string = `[{"email": "example@alfresco.com", "firstName":"Administrator", "lastName": "ADF"}]`;
+
     peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
     preSelectUsers: string[] = [];
     peopleRoles: string[] = [];
 
     groupMode: string = GroupCloudComponent.MODE_SINGLE;
-    preSelectGroup: string[] = [];
+    preSelectGroup: GroupModel[] = [];
     selectedGroupList: GroupModel[] = [];
     groupRoles: string[];
 
@@ -54,10 +57,12 @@ export class PeopleGroupCloudDemoComponent {
 
     onChangePeopleMode(event: MatRadioChange) {
        this.peopleMode = event.value;
+       this.preSelectUsers = [...this.preSelectUsers];
     }
 
     onChangeGroupsMode(event: MatRadioChange) {
         this.groupMode = event.value;
+        this.preSelectGroup = [...this.preSelectGroup];
     }
 
     isStringArray(str: string) {
@@ -82,13 +87,17 @@ export class PeopleGroupCloudDemoComponent {
         return this.peopleMode === GroupCloudComponent.MODE_MULTIPLE;
     }
 
+    canShowGroupList() {
+        return this.groupMode === GroupCloudComponent.MODE_MULTIPLE;
+    }
+
     onRemoveGroup(group: GroupModel) {
-        this.selectedGroupList = this.selectedGroupList.filter((value: any) => value.id !== group.id);
+        this.preSelectGroup = this.preSelectGroup.filter((value: any) => value.id !== group.id);
     }
 
     onSelectGroup(group: GroupModel) {
         if (this.groupMode === GroupCloudComponent.MODE_MULTIPLE) {
-            this.selectedGroupList.push(group);
+            this.preSelectGroup.push(group);
         }
     }
 

lib/process-services-cloud/src/lib/group/components/group-cloud.component.html

@@ -13,7 +13,7 @@
         [formControl]="searchGroupsControl"
         class="adf-group-input"
         id="group-name"
-        [disabled]="isDisabled"
+        [attr.disabled]="isDisabled"
         data-automation-id="adf-cloud-group-search-input"
         (focus)="setFocus(true)"
         (blur)="setFocus(false)"

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef, OnInit, Output, EventEmitter, ViewChild, ViewEncapsulation, Input } from '@angular/core';
+import { Component, ElementRef, OnInit, Output, EventEmitter, ViewChild, ViewEncapsulation, Input, SimpleChanges, OnChanges } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { Observable, of, BehaviorSubject } from 'rxjs';
@@ -39,7 +39,7 @@ import { distinctUntilChanged, switchMap, mergeMap, filter, tap } from 'rxjs/ope
     ],
     encapsulation: ViewEncapsulation.None
 })
-export class GroupCloudComponent implements OnInit {
+export class GroupCloudComponent implements OnInit, OnChanges {
 
     static MODE_SINGLE = 'single';
     static MODE_MULTIPLE = 'multiple';
@@ -107,9 +107,6 @@ export class GroupCloudComponent implements OnInit {
     }
 
     ngOnInit() {
-        if (this.hasPreSelectGroups()) {
-            this.loadPreSelectGroups();
-        }
 
         this.initSearch();
 
@@ -119,13 +116,18 @@ export class GroupCloudComponent implements OnInit {
         }
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.preSelectGroups && this.hasPreSelectGroups()) {
+            this.loadPreSelectGroups();
+        }
+    }
+
     private async loadClientId() {
         this.clientId = await this.groupService.getClientIdByApplicationName(this.appName).toPromise();
         if (this.clientId) {
             this.enableSearch();
         }
     }
-
     initSearch() {
         this.searchGroupsControl.valueChanges.pipe(
             filter((value) => {
@@ -191,9 +193,11 @@ export class GroupCloudComponent implements OnInit {
 
     private loadPreSelectGroups() {
         if (this.isMultipleMode()) {
+            this.selectedGroups = [];
             this.preSelectGroups.forEach((group: GroupModel) => {
                 this.selectedGroups.push(group);
             });
+            this.selectedGroupsSubject.next(this.selectedGroups);
         } else {
             this.searchGroupsControl.setValue(this.preSelectGroups[0]);
             this.onSelect(this.preSelectGroups[0]);
@@ -204,8 +208,7 @@ export class GroupCloudComponent implements OnInit {
         return this.groupService.checkGroupHasRole(group.id, this.roles).pipe(
             mergeMap((hasRole) => {
                 return hasRole ? of(group) : of();
-            })
-        );
+        }));
     }
 
     onSelect(selectedGroup: GroupModel) {

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

@@ -16,7 +16,7 @@
  */
 
 import { FormControl } from '@angular/forms';
-import { Component, OnInit, Output, EventEmitter, ViewEncapsulation, Input, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, ViewEncapsulation, Input, ViewChild, ElementRef, SimpleChanges, OnChanges } from '@angular/core';
 import { Observable, of, BehaviorSubject } from 'rxjs';
 import { switchMap, debounceTime, distinctUntilChanged, mergeMap, tap, filter } from 'rxjs/operators';
 import { FullNamePipe, IdentityUserModel, IdentityUserService } from '@alfresco/adf-core';
@@ -39,7 +39,7 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
     encapsulation: ViewEncapsulation.None
 })
 
-export class PeopleCloudComponent implements OnInit {
+export class PeopleCloudComponent implements OnInit, OnChanges {
 
     static MODE_SINGLE = 'single';
     static MODE_MULTIPLE = 'multiple';
@@ -101,11 +101,6 @@ export class PeopleCloudComponent implements OnInit {
     ngOnInit() {
         this.selectedUsersSubject = new BehaviorSubject<IdentityUserModel[]>(this.preSelectUsers);
         this.selectedUsers$ = this.selectedUsersSubject.asObservable();
-
-        if (this.hasPreSelectUsers()) {
-            this.loadPreSelectUsers();
-        }
-
         this.initSearch();
 
         if (this.appName) {
@@ -114,6 +109,12 @@ export class PeopleCloudComponent implements OnInit {
         }
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.preSelectUsers && this.hasPreSelectUsers()) {
+            this.loadPreSelectUsers();
+        }
+    }
+
     private initSearch() {
         this.searchUserCtrl.valueChanges.pipe(
             filter((value) => {
@@ -195,6 +196,8 @@ export class PeopleCloudComponent implements OnInit {
         if (!this.isMultipleMode()) {
             this.searchUserCtrl.setValue(this.preSelectUsers[0]);
             this.preSelectUsers = [];
+        } else {
+            this.selectedUsersSubject.next(this.preSelectUsers);
         }
     }