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

* object input fix

* tests focus fix

lib/core/form/components/widgets/people/people.widget.html

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

lib/core/form/components/widgets/people/people.widget.spec.ts

@@ -207,8 +207,7 @@ describe('PeopleWidgetComponent', () => {
             });
         });
 
-        it('should emit peopleSelected if option is selected', async(() => {
+        it('should display two options if we tap one letter', async(() => {
-            let selectEmitSpy = spyOn(widget.peopleSelected, 'emit');
             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(fixture.debugElement.query(By.css('#adf-people-widget-user-1'))).not.toBeNull();
-                expect(selectEmitSpy).toHaveBeenCalledWith(1001);
             });
         }));
+
+        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);
+            });
+        });
     });
 
 });

lib/core/form/components/widgets/people/people.widget.ts

@@ -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();
+            return this.formService.getWorkflowUsers(searchTerm, this.groupId)
-
-            if (typeof searchTerm === 'string') {
-                userResponse = this.formService.getWorkflowUsers(searchTerm, this.groupId)
                 .pipe(
                     catchError(err => {
                         this.errorMsg = err.message;
-                            return userResponse;
+                        return Observable.empty();
                     })
                 );
-            }
-
-            return userResponse;
         }),
         map((list: UserProcessModel[]) => {
             let value = (this.input.nativeElement as HTMLInputElement).value;
-
-            if (value) {
             this.checkUserAndValidateForm(list, value);
-            } else {
-                this.field.value = null;
-                list = [];
-            }
-
             return list;
         })
     );
@@ -122,10 +110,16 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
     }
 
     isValidUser(users: UserProcessModel[], name: string) {
+        if (users) {
             return users.find((user) => {
-            return this.getDisplayName(user).toLocaleLowerCase() === name.toLocaleLowerCase();
+                const selectedUser = this.getDisplayName(user).toLocaleLowerCase() === name.toLocaleLowerCase();
+                if (selectedUser) {
+                    this.peopleSelected.emit(user && user.id || undefined);
+                }
+                return selectedUser;
             });
         }
+    }
 
     getDisplayName(model: UserProcessModel) {
         if (model) {
@@ -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 = item;
-            this.value = this.getDisplayName(item);
         }
     }
 }