[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

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>

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;

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);
         }
     }
 }