[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
This commit is contained in:
Maurizio Vitale
2020-02-04 16:53:37 +00:00
committed by GitHub
parent bd3957dcee
commit bab4906632
4 changed files with 54 additions and 10 deletions

View File

@@ -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