[ADF-3274] people widget instead of the people list (#3582)

* people list added

* tests added

* style fix

* Update start-task.component.ts

Use correct import

* Update people.widget.spec.ts

add the async

* peopleSelected test fixed

lib/process-services/task-list/components/start-task.component.html

@@ -65,7 +65,7 @@
                 </div>
 
                 <div class="adf-grid-column adf-grid-half-width">
-                    <adf-people-selector [(peopleId)]="assigneeId" id="assignee_id"></adf-people-selector>
+                    <people-widget (peopleSelected)="getAssigneeId($event)" [field]="field"></people-widget>
                 </div>
             </div>
         </div>

lib/process-services/task-list/components/start-task.component.scss

@@ -17,10 +17,7 @@
 
     .adf-new-task-layout-card {
         width: 66%;
-        margin-right: auto;
-        margin-left: auto;
-        margin-top: 10px;
-        margin-bottom: 10px;
+        margin: 10px auto;
 
         &-content {
             display: flex;
@@ -61,7 +58,19 @@
     }
 
     .adf-mat-select {
-        padding-top: 0px;
+        padding-top: 0;
+    }
+
+    #people-widget-content {
+        .mat-form-field {
+            width: 100%;
+        }
+        .adf-label {
+            line-height: 0;
+        }
+        .adf-error-text-container {
+            margin-top: -10px;
+        }
     }
 
     adf-start-task {

lib/process-services/task-list/components/start-task.component.spec.ts

@@ -245,6 +245,23 @@ describe('StartTaskComponent', () => {
                 assignee: null
             });
         });
+
+        it('should assign task with id of selected user assigned', () => {
+            let successSpy = spyOn(component.success, 'emit');
+            component.appId = 42;
+            component.startTaskmodel = new StartTaskModel(startTaskMock);
+            component.formKey = 1204;
+            component.getAssigneeId(testUser.id);
+            fixture.detectChanges();
+            let createTaskButton = <HTMLElement> element.querySelector('#button-start');
+            createTaskButton.click();
+            expect(successSpy).toHaveBeenCalledWith({
+                id: 91,
+                name: 'fakeName',
+                formKey: 1204,
+                assignee: testUser
+            });
+        });
     });
 
     it('should not attach a form when a form id is not slected', () => {

lib/process-services/task-list/components/start-task.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { LogService, UserPreferencesService, UserProcessModel } from '@alfresco/adf-core';
+import { LogService, UserPreferencesService, UserProcessModel, FormFieldModel, FormModel } from '@alfresco/adf-core';
 import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { MOMENT_DATE_FORMATS, MomentDateAdapter } from '@alfresco/adf-core';
@@ -68,6 +68,8 @@ export class StartTaskComponent implements OnInit {
 
     dateError: boolean;
 
+    field: FormFieldModel;
+
     /**
      * Constructor
      * @param auth
@@ -81,6 +83,7 @@ export class StartTaskComponent implements OnInit {
     }
 
     ngOnInit() {
+        this.field = new FormFieldModel(new FormModel(), {id: this.assigneeId, value: this.assigneeId, placeholder: 'Assignee'});
         this.preferences.locale$.subscribe((locale) => {
             this.dateAdapter.setLocale(locale);
         });
@@ -110,6 +113,10 @@ export class StartTaskComponent implements OnInit {
         }
     }
 
+    getAssigneeId(userId) {
+        this.assigneeId = userId;
+    }
+
     private attachForm(taskId: string, formKey: number): Observable<any> {
         let response = Observable.of();
         if (taskId && formKey) {