[ADF-3424] Start task - Object display instead of value for assignee (#3679)

* object input fix

* tests focus fix
This commit is contained in:
bbcodrin
2018-08-10 15:05:59 +03:00
committed by Eugenio Romano
parent 6f313b7c37
commit ecd0ed6166
3 changed files with 38 additions and 33 deletions

View File

@@ -15,7 +15,7 @@
placeholder="{{field.placeholder}}"
[matAutocomplete]="auto">
<mat-autocomplete class="adf-people-widget-list" #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
<mat-option *ngFor="let user of users$ | async; let i = index" [value]="user">
<mat-option *ngFor="let user of users$ | async; let i = index" [value]="getDisplayName(user)">
<div class="adf-people-widget-row" id="adf-people-widget-user-{{i}}">
<div [outerHTML]="user | usernameInitials:'adf-people-widget-pic'"></div>
<div *ngIf="user.pictureId" class="adf-people-widget-image-row">

View File

@@ -207,8 +207,7 @@ describe('PeopleWidgetComponent', () => {
});
});
it('should emit peopleSelected if option is selected', async(() => {
let selectEmitSpy = spyOn(widget.peopleSelected, 'emit');
it('should display two options if we tap one letter', async(() => {
let peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
peopleHTMLElement.focus();
peopleHTMLElement.value = 'T';
@@ -218,10 +217,23 @@ describe('PeopleWidgetComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('#adf-people-widget-user-0'))).not.toBeNull();
widget.onItemSelect(fakeUserResult[0]);
expect(selectEmitSpy).toHaveBeenCalledWith(1001);
expect(fixture.debugElement.query(By.css('#adf-people-widget-user-1'))).not.toBeNull();
});
}));
it('should emit peopleSelected if option is valid', async() => {
let selectEmitSpy = spyOn(widget.peopleSelected, 'emit');
let peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
peopleHTMLElement.focus();
peopleHTMLElement.value = 'Test01 Test01';
peopleHTMLElement.dispatchEvent(new Event('keyup'));
peopleHTMLElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(selectEmitSpy).toHaveBeenCalledWith(1001);
});
});
});
});

View File

@@ -24,7 +24,7 @@ import { FormService } from '../../../services/form.service';
import { GroupModel } from '../core/group.model';
import { baseHost, WidgetComponent } from './../widget.component';
import { FormControl } from '@angular/forms';
import { Observable, empty } from 'rxjs';
import { Observable } from 'rxjs';
import {
catchError,
distinctUntilChanged,
@@ -32,6 +32,7 @@ import {
switchMap,
tap
} from 'rxjs/operators';
import 'rxjs/add/observable/empty';
@Component({
selector: 'people-widget',
@@ -61,30 +62,17 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
}),
distinctUntilChanged(),
switchMap((searchTerm) => {
let userResponse: any = empty();
if (typeof searchTerm === 'string') {
userResponse = this.formService.getWorkflowUsers(searchTerm, this.groupId)
.pipe(
catchError(err => {
this.errorMsg = err.message;
return userResponse;
})
);
}
return userResponse;
return this.formService.getWorkflowUsers(searchTerm, this.groupId)
.pipe(
catchError(err => {
this.errorMsg = err.message;
return Observable.empty();
})
);
}),
map((list: UserProcessModel[]) => {
let value = (this.input.nativeElement as HTMLInputElement).value;
if (value) {
this.checkUserAndValidateForm(list, value);
} else {
this.field.value = null;
list = [];
}
this.checkUserAndValidateForm(list, value);
return list;
})
);
@@ -122,9 +110,15 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
}
isValidUser(users: UserProcessModel[], name: string) {
return users.find((user) => {
return this.getDisplayName(user).toLocaleLowerCase() === name.toLocaleLowerCase();
});
if (users) {
return users.find((user) => {
const selectedUser = this.getDisplayName(user).toLocaleLowerCase() === name.toLocaleLowerCase();
if (selectedUser) {
this.peopleSelected.emit(user && user.id || undefined);
}
return selectedUser;
});
}
}
getDisplayName(model: UserProcessModel) {
@@ -135,11 +129,10 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
return '';
}
onItemSelect(item: UserProcessModel) {
onItemSelect(item) {
if (item) {
this.field.value = item;
this.peopleSelected.emit(item && item.id || undefined);
this.value = this.getDisplayName(item);
this.value = item;
}
}
}