Fix readonly Fix add remove (#5324)

* Fix readonly Fix add remove

* Remove useless unit test

* Remove useless code

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

@@ -4,10 +4,15 @@
         *ngIf="isRequired()">*</span></label>
         <adf-cloud-group [mode]="mode"
                          [title]="title"
+                         [readOnly]="field.readOnly"
                          [roles]="roles"
+                         [searchGroupsControl]="search"
                          (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

@@ -17,6 +17,9 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { baseHost, WidgetComponent, IdentityGroupModel } from '@alfresco/adf-core';
+import { FormControl } from '@angular/forms';
+import { filter, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 /* tslint:disable:component-selector  */
 
@@ -28,10 +31,13 @@ import { baseHost, WidgetComponent, IdentityGroupModel } from '@alfresco/adf-cor
 })
 export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit {
 
+    private onDestroy$ = new Subject<boolean>();
+
     roles: string[];
     mode: string;
     title: string;
     preSelectGroup: IdentityGroupModel[];
+    search: FormControl;
 
     ngOnInit() {
         if (this.field) {
@@ -40,17 +46,57 @@ export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit
             this.title = this.field.placeholder;
             this.preSelectGroup = this.field.value ? this.field.value : [];
         }
+        this.search =  new FormControl({value: '', disabled: this.field.readOnly}, []),
+
+        this.search.statusChanges
+            .pipe(
+                filter((value: string) => {
+                    return value === 'INVALID';
+                }),
+                takeUntil(this.onDestroy$)
+            )
+            .subscribe(() => {
+                this.field.markAsInvalid();
+                this.field.form.markAsInvalid();
+            });
+
+        this.search.statusChanges
+            .pipe(
+                filter((value: string) => {
+                    return value === 'VALID';
+                }),
+                takeUntil(this.onDestroy$)
+            )
+            .subscribe(() => {
+                this.field.validate();
+                this.field.form.validateForm();
+            });
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     onSelectGroup(group: IdentityGroupModel) {
-        this.field.value = [...this.field.value, group];
+        this.field.value = [...this.preSelectGroup, group];
         this.onFieldChanged(this.field);
     }
 
     onRemoveGroup(group: IdentityGroupModel) {
-        const indexToRemove = this.field.value.findIndex((selected) => { return selected.id === group.id; });
+        if (this.isMultipleMode()) {
-        this.field.value.splice(indexToRemove, 1);
+            const indexToRemove = this.preSelectGroup.findIndex((selectedUser) => { return selectedUser.id === group.id; });
-        this.field.value = [...this.field.value];
+            if (indexToRemove > -1) {
+                this.preSelectGroup.splice(indexToRemove, 1);
+            }
+        } else {
+            this.preSelectGroup = [];
+        }
+        this.field.value = [...this.preSelectGroup];
         this.onFieldChanged(this.field);
     }
+
+    isMultipleMode(): boolean {
+        return this.mode === 'multiple';
+    }
 }

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

@@ -6,13 +6,13 @@
             [validate]="true"
             [appName]="appName"
             [title]="title"
+            [readOnly]="field.readOnly"
+            [searchUserCtrl]="search"
             (selectUser)="onSelectUser($event)"
             (removeUser)="onRemoveUser($event)"
             [roles]="roles"
             [mode]="mode">
         </adf-cloud-people>
     <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/people/people-cloud.widget.ts

@@ -17,6 +17,9 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { baseHost, WidgetComponent, IdentityUserModel } from '@alfresco/adf-core';
+import { FormControl } from '@angular/forms';
+import { filter, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 /* tslint:disable:component-selector  */
 
@@ -28,11 +31,14 @@ import { baseHost, WidgetComponent, IdentityUserModel } from '@alfresco/adf-core
 })
 export class PeopleCloudWidgetComponent extends WidgetComponent implements OnInit {
 
+    private onDestroy$ = new Subject<boolean>();
+
     appName: string;
     roles: string[];
     mode: string;
     title: string;
     preSelectUsers: IdentityUserModel[];
+    search: FormControl;
 
     ngOnInit() {
         if (this.field) {
@@ -41,17 +47,57 @@ export class PeopleCloudWidgetComponent extends WidgetComponent implements OnIni
             this.title = this.field.placeholder;
             this.preSelectUsers = this.field.value ? this.field.value : [];
         }
+        this.search =  new FormControl({value: '', disabled: this.field.readOnly}, []),
+
+        this.search.statusChanges
+            .pipe(
+                filter((value: string) => {
+                    return value === 'INVALID';
+                }),
+                takeUntil(this.onDestroy$)
+            )
+            .subscribe(() => {
+                this.field.markAsInvalid();
+                this.field.form.markAsInvalid();
+            });
+
+        this.search.statusChanges
+            .pipe(
+                filter((value: string) => {
+                    return value === 'VALID';
+                }),
+                takeUntil(this.onDestroy$)
+            )
+            .subscribe(() => {
+                this.field.validate();
+                this.field.form.validateForm();
+            });
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     onSelectUser(user: IdentityUserModel) {
-        this.field.value = [...this.field.value, user];
+        this.field.value = [...this.preSelectUsers, user];
         this.onFieldChanged(this.field);
     }
 
     onRemoveUser(user: IdentityUserModel) {
-        const indexToRemove = this.field.value.findIndex((selectedUser) => { return selectedUser.id === user.id; });
+        if (this.isMultipleMode()) {
-        this.field.value.splice(indexToRemove, 1);
+            const indexToRemove = this.preSelectUsers.findIndex((selectedUser) => { return selectedUser.id === user.id; });
-        this.field.value = [...this.field.value];
+            if (indexToRemove > -1) {
+                this.preSelectUsers.splice(indexToRemove, 1);
+            }
+        } else {
+            this.preSelectUsers = [];
+        }
+        this.field.value = [...this.preSelectUsers];
         this.onFieldChanged(this.field);
     }
+
+    isMultipleMode(): boolean {
+        return this.mode === 'multiple';
+    }
 }

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

@@ -10,7 +10,7 @@
         [attr.data-automation-id]="'adf-cloud-group-chip-' + group.name">
         {{group.name}}
         <mat-icon
-            *ngIf=!(group.readonly)
+            *ngIf="!(group.readonly || readOnly)"
             matChipRemove [attr.data-automation-id]="'adf-cloud-group-chip-remove-icon-' + group.name">
             cancel
         </mat-icon>

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

@@ -71,6 +71,11 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     preSelectGroups: IdentityGroupModel[] = [];
 
+    /** Show the info in readonly mode
+     */
+    @Input()
+    readOnly: boolean = false;
+
     /** FormControl to search the group */
     @Input()
     searchGroupsControl: FormControl = new FormControl();

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

@@ -11,7 +11,7 @@
             {{user | fullName}}
             <mat-icon
                 matChipRemove
-                *ngIf=!(user.readonly)
+                *ngIf="!(user.readonly || readOnly)"
                 [attr.data-automation-id]="'adf-people-cloud-chip-remove-icon-' + user.username">
                 cancel
             </mat-icon>

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

@@ -16,7 +16,7 @@
  */
 
 import { PeopleCloudComponent } from './people-cloud.component';
-import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { IdentityUserService, AlfrescoApiService, CoreModule, setupTestBed } from '@alfresco/adf-core';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
 import { of } from 'rxjs';
@@ -392,8 +392,6 @@ describe('PeopleCloudComponent', () => {
 
     describe('Single Mode and Pre-selected users with validate flag', () => {
 
-        const change = new SimpleChange(null, mockPreselectedUsers, false);
-
         beforeEach(async(() => {
             component.mode = 'single';
             component.validate = true;
@@ -410,17 +408,6 @@ describe('PeopleCloudComponent', () => {
                 done();
             });
         });
-
-        it('should pre-select preSelectUsers[0] when mode=single', fakeAsync(() => {
-            component.mode = 'single';
-            fixture.detectChanges();
-            spyOn(component, 'filterPreselectUsers').and.returnValue(Promise.resolve(mockPreselectedUsers));
-            component.ngOnChanges({ 'preSelectUsers': change });
-            fixture.detectChanges();
-            tick();
-            const selectedUser = component.searchUserCtrl.value;
-            expect(selectedUser.id).toBe(mockUsers[1].id);
-        }));
     });
 
     describe('Multiple Mode and Pre-selected users with no validate flag', () => {

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

@@ -63,6 +63,11 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     validate: Boolean = false;
 
+    /** Show the info in readonly mode
+     */
+    @Input()
+    readOnly: boolean = false;
+
     /** Array of users to be pre-selected. All users in the
      * array are pre-selected in multi selection mode, but only the first user
      * is pre-selected in single selection mode.
@@ -73,7 +78,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
 
     /** FormControl to search the user */
     @Input()
-    searchUserCtrl = new FormControl();
+    searchUserCtrl: FormControl = new FormControl();
 
     /** Placeholder translation key
      */
@@ -256,6 +261,8 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
 
     private initSearch() {
         this.searchUserCtrl.valueChanges.pipe(
+            debounceTime(500),
+            distinctUntilChanged(),
             filter((value) => {
                 return typeof value === 'string';
             }),
@@ -268,8 +275,6 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
                     }
                 }
             }),
-            debounceTime(500),
-            distinctUntilChanged(),
             tap(() => {
                 this.resetSearchUsers();
             }),
@@ -418,10 +423,10 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     onRemove(user: IdentityUserModel) {
-        this.removeUser.emit(user);
         const indexToRemove = this.preSelectUsers.findIndex((selectedUser) => { return selectedUser.id === user.id; });
         this.preSelectUsers.splice(indexToRemove, 1);
         this.selectedUsersSubject.next(this.preSelectUsers);
+        this.removeUser.emit(user);
     }
 
     getDisplayName(user): string {