From ecd0ed616687e2c650d11d4c4755b76659482e9d Mon Sep 17 00:00:00 2001
From: bbcodrin <bobucodrin@gmail.com>
Date: Fri, 10 Aug 2018 15:05:59 +0300
Subject: [PATCH] [ADF-3424] Start task - Object display instead of value for
 assignee (#3679)

* object input fix

* tests focus fix
---
 .../widgets/people/people.widget.html         |  2 +-
 .../widgets/people/people.widget.spec.ts      | 20 ++++++--
 .../widgets/people/people.widget.ts           | 49 ++++++++-----------
 3 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/lib/core/form/components/widgets/people/people.widget.html b/lib/core/form/components/widgets/people/people.widget.html
index 6f8b14846c..bdd903e8f2 100644
--- a/lib/core/form/components/widgets/people/people.widget.html
+++ b/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">
diff --git a/lib/core/form/components/widgets/people/people.widget.spec.ts b/lib/core/form/components/widgets/people/people.widget.spec.ts
index 1f5660f91d..4f5872b302 100644
--- a/lib/core/form/components/widgets/people/people.widget.spec.ts
+++ b/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(() => {
-            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);
+            });
+        });
     });
 
 });
diff --git a/lib/core/form/components/widgets/people/people.widget.ts b/lib/core/form/components/widgets/people/people.widget.ts
index 0d3c092cd0..70b48f1706 100644
--- a/lib/core/form/components/widgets/people/people.widget.ts
+++ b/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();
-
-            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;
         }
     }
 }