[AAE-1539] People/Group - Add a formControl for the chip field (#5445)

* Add a formControl for the chip component

* on search reset the error and trim later on

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

@@ -62,7 +62,7 @@
     <mat-error *ngIf="searchGroupsControl.hasError('minlength')">
         <mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
         {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</mat-error>
-    <mat-error *ngIf="searchGroupsControl.hasError('required')">
+    <mat-error *ngIf="searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')">
         <mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
         {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </mat-error>
     <mat-error *ngIf="searchGroupsControl.hasError('searchTypingError') && !this.isFocused" data-automation-id="invalid-groups-typing-error">

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

@@ -84,6 +84,10 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     readOnly: boolean = false;
 
+    /** FormControl to list of group */
+    @Input()
+    groupChipsCtrl: FormControl = new FormControl({ value: '', disabled: false });
+
     /** FormControl to search the group */
     @Input()
     searchGroupsControl: FormControl = new FormControl({ value: '', disabled: false });
@@ -173,15 +177,19 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy {
 
     initSearch(): void {
         this.searchGroupsControl.valueChanges.pipe(
-            debounceTime(500),
-            distinctUntilChanged(),
             filter((value) => {
                 return typeof value === 'string';
             }),
+            tap((value: string) => {
+                if (value) {
+                    this.setTypingError();
+                }
+            }),
+            debounceTime(500),
+            distinctUntilChanged(),
             tap((value) => {
                 if (value.trim()) {
                     this.searchedValue = value;
-                    this.setTypingError();
                 } else {
                     this.searchGroupsControl.markAsPristine();
                     this.searchGroupsControl.markAsUntouched();
@@ -298,7 +306,7 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy {
         } else {
             this.selectedGroups = this.removeDuplicatedGroups(this.preSelectGroups);
         }
-
+        this.groupChipsCtrl.setValue(this.selectedGroups[0].name);
         if (this.isValidationEnabled()) {
             this.isLoading = true;
             await this.validatePreselectGroups();
@@ -327,6 +335,7 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy {
 
         this.groupInput.nativeElement.value = '';
         this.searchGroupsControl.setValue('');
+        this.groupChipsCtrlValue(this.selectedGroups[0].name);
 
         this.changedGroups.emit(this.selectedGroups);
         this.resetSearchGroups();
@@ -336,7 +345,14 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy {
         this.removeGroup.emit(groupToRemove);
         this.removeGroupFromSelected(groupToRemove);
         this.changedGroups.emit(this.selectedGroups);
+        if (this.selectedGroups.length === 0) {
+            this.groupChipsCtrlValue('');
+
+        } else {
+            this.groupChipsCtrlValue(this.selectedGroups[0].name);
+        }
         this.searchGroupsControl.markAsDirty();
+        this.searchGroupsControl.markAsTouched();
 
         if (this.isValidationEnabled()) {
             this.removeGroupFromValidation(groupToRemove);
@@ -344,6 +360,12 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
+    private groupChipsCtrlValue(value: string) {
+        this.groupChipsCtrl.setValue(value);
+        this.groupChipsCtrl.markAsDirty();
+        this.groupChipsCtrl.markAsTouched();
+    }
+
     private removeGroupFromSelected({ id, name }: IdentityGroupModel): void {
         const indexToRemove = this.selectedGroups.findIndex(group => {
             return group.id === id && group.name === name;

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

@@ -56,7 +56,7 @@
     <mat-error *ngIf="searchUserCtrl.hasError('minlength')">
         <mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
         {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</mat-error>
-    <mat-error *ngIf="searchUserCtrl.hasError('required')">
+    <mat-error *ngIf="searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')">
         <mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
         {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </mat-error>
     <mat-error *ngIf="searchUserCtrl.hasError('searchTypingError') && !this.isFocused" data-automation-id="invalid-users-typing-error">

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

@@ -92,6 +92,10 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     preSelectUsers: IdentityUserModel[] = [];
 
+    /** FormControl to list of users */
+    @Input()
+    userChipsCtrl: FormControl = new FormControl({ value: '', disabled: false });
+
     /** FormControl to search the user */
     @Input()
     searchUserCtrl = new FormControl({ value: '', disabled: false });
@@ -178,15 +182,19 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
 
     private initSearch(): void {
         this.searchUserCtrl.valueChanges.pipe(
-            debounceTime(500),
-            distinctUntilChanged(),
             filter((value) => {
                 return typeof value === 'string';
             }),
+            tap((value: string) => {
+                if (value) {
+                    this.setTypingError();
+                }
+            }),
+            debounceTime(500),
+            distinctUntilChanged(),
             tap((value: string) => {
                 if (value.trim()) {
                     this.searchedValue = value;
-                    this.setTypingError();
                 } else {
                     this.searchUserCtrl.markAsPristine();
                     this.searchUserCtrl.markAsUntouched();
@@ -273,7 +281,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
         } else {
             this.selectedUsers = this.removeDuplicatedUsers(this.preSelectUsers);
         }
-
+        this.userChipsCtrl.setValue(this.selectedUsers[0].username);
         if (this.isValidationEnabled()) {
             this.isLoading = true;
             await this.validatePreselectUsers();
@@ -386,6 +394,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
 
         this.userInput.nativeElement.value = '';
         this.searchUserCtrl.setValue('');
+        this.userChipsCtrlValue(this.selectedUsers[0].username);
 
         this.changedUsers.emit(this.selectedUsers);
         this.resetSearchUsers();
@@ -395,7 +404,14 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
         this.removeUser.emit(userToRemove);
         this.removeUserFromSelected(userToRemove);
         this.changedUsers.emit(this.selectedUsers);
+        if (this.selectedUsers.length === 0) {
+            this.userChipsCtrlValue('');
+
+        } else {
+            this.userChipsCtrlValue(this.selectedUsers[0].username);
+        }
         this.searchUserCtrl.markAsDirty();
+        this.searchUserCtrl.markAsTouched();
 
         if (this.isValidationEnabled()) {
             this.removeUserFromValidation(userToRemove);
@@ -403,6 +419,12 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
+    private userChipsCtrlValue(value: string) {
+        this.userChipsCtrl.setValue(value);
+        this.userChipsCtrl.markAsDirty();
+        this.userChipsCtrl.markAsTouched();
+    }
+
     private removeUserFromSelected({ id, username, email }: IdentityUserModel): void {
         const indexToRemove = this.selectedUsers.findIndex(user => {
             return user.id === id