From 3e0e2609f791b400901e0ef9f5546f5fb94fa151 Mon Sep 17 00:00:00 2001
From: Vito <vito.albano@alfresco.com>
Date: Thu, 21 Jun 2018 18:36:47 +0100
Subject: [PATCH] [ADF-3248] fixed readonly status for people widget (#3512)

* [ADF-3248] fixed readonly status for people widget

* [ADF-3248] fixed test people widget

* [ADF-3248] added readonly test
---
 .../widgets/people/people.widget.html         |  5 ++-
 .../widgets/people/people.widget.spec.ts      | 31 +++++++++++++++++--
 .../widgets/people/people.widget.ts           |  7 ++++-
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/lib/core/form/components/widgets/people/people.widget.html b/lib/core/form/components/widgets/people/people.widget.html
index 54a0e7fbfa..e0d9dbebdc 100644
--- a/lib/core/form/components/widgets/people/people.widget.html
+++ b/lib/core/form/components/widgets/people/people.widget.html
@@ -9,12 +9,11 @@
                class="adf-input"
                type="text"
                [id]="field.id"
+               [(ngModel)]="value"
                [formControl] ="searchTerm"
-               [value]="getDisplayName(field.value)"
-               [attr.disabled]="field.readOnly"
                placeholder="{{field.placeholder}}"
                [matAutocomplete]="auto">
-        <mat-autocomplete class="adf-people-widget-list" #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)" [displayWith]="getDisplayName">
+        <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">
                 <div class="adf-people-widget-row" id="adf-people-widget-user-{{i}}">
                     <div [outerHTML]="user | usernameInitials:'adf-people-widget-pic'"></div>
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 70298d1c01..ea2cf1a728 100644
--- a/lib/core/form/components/widgets/people/people.widget.spec.ts
+++ b/lib/core/form/components/widgets/people/people.widget.spec.ts
@@ -74,7 +74,7 @@ describe('PeopleWidgetComponent', () => {
         expect(widget.getDisplayName(model)).toBe('John');
     });
 
-    it('should init value from the field', () => {
+    it('should init value from the field', async(() => {
         widget.field.value = new UserProcessModel({
             id: 'people-id',
             firstName: 'John',
@@ -90,9 +90,34 @@ describe('PeopleWidgetComponent', () => {
 
         widget.ngOnInit();
         fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect((element.querySelector('input') as HTMLInputElement).value).toBe('John Doe');
+        });
+    }));
 
-        expect((element.querySelector('input') as HTMLInputElement).value).toBe('John Doe');
-    });
+    it('should show the readonly value when the form is readonly', async(() => {
+        widget.field.value = new UserProcessModel({
+            id: 'people-id',
+            firstName: 'John',
+            lastName: 'Doe'
+        });
+        widget.field.readOnly = true;
+        widget.field.form.readOnly = true;
+
+        spyOn(formService, 'getWorkflowUsers').and.returnValue(
+            Observable.create(observer => {
+                observer.next(null);
+                observer.complete();
+            })
+        );
+
+        widget.ngOnInit();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect((element.querySelector('input') as HTMLInputElement).value).toBe('John Doe');
+            expect((element.querySelector('input') as HTMLInputElement).disabled).toBeTruthy();
+        });
+    }));
 
     it('should require form field to setup values on init', () => {
         widget.field.value = null;
diff --git a/lib/core/form/components/widgets/people/people.widget.ts b/lib/core/form/components/widgets/people/people.widget.ts
index bc8117c6c2..ce9a4b5787 100644
--- a/lib/core/form/components/widgets/people/people.widget.ts
+++ b/lib/core/form/components/widgets/people/people.widget.ts
@@ -93,6 +93,10 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
 
     ngOnInit() {
         if (this.field) {
+            this.value = this.getDisplayName(this.field.value);
+            if (this.field.readOnly) {
+                this.searchTerm.disable();
+            }
             let params = this.field.params;
             if (params && params.restrictWithGroup) {
                 let restrictWithGroup = <GroupModel> params.restrictWithGroup;
@@ -130,7 +134,8 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
 
     onItemSelect(item: UserProcessModel) {
         if (item) {
-            this.field.value = `${item.firstName || ''} ${item.lastName || ''}`;
+            this.field.value = item;
+            this.value = this.getDisplayName(item);
         }
     }
 }