[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

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);
         }
     }