From bab490663216664f7d5f4cc0bff7726fca7f9950 Mon Sep 17 00:00:00 2001 From: Maurizio Vitale Date: Tue, 4 Feb 2020 16:53:37 +0000 Subject: [PATCH] [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 --- .../components/group-cloud.component.html | 2 +- .../group/components/group-cloud.component.ts | 30 ++++++++++++++++--- .../components/people-cloud.component.html | 2 +- .../components/people-cloud.component.ts | 30 ++++++++++++++++--- 4 files changed, 54 insertions(+), 10 deletions(-) diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html index a4c5920e51..39f2f7e033 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html @@ -62,7 +62,7 @@ warning {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }} - + warning {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts index 25b444feae..26bf695b0e 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts +++ b/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; diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html index 63c6bc64ec..2ebe6ec788 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html @@ -56,7 +56,7 @@ warning {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }} - + warning {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts index 8912830194..98dd906ce7 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts +++ b/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