[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

docs/process-services/start-task.component.md

@@ -31,4 +31,4 @@ Creates/Starts new task for the specified app
 | -- | -- | -- |
 | cancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<void>` | Emitted when the cancel button is clicked by the user. |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
-| success | `EventEmitter<any>` | Emitted when the task is successfully created. |
+| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the task is successfully created. |

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

@@ -206,6 +206,22 @@ describe('PeopleWidgetComponent', () => {
                 expect(fixture.debugElement.query(By.css('#adf-people-widget-user-0'))).toBeNull();
             });
         });
+
+        it('should emit peopleSelected if option is selected', async(() => {
+            let selectEmitSpy = spyOn(widget.peopleSelected, 'emit');
+            let peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
+            peopleHTMLElement.focus();
+            peopleHTMLElement.value = 'T';
+            peopleHTMLElement.dispatchEvent(new Event('keyup'));
+            peopleHTMLElement.dispatchEvent(new Event('input'));
+            fixture.detectChanges();
+            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);
+            });
+        }));
     });
 
 });

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

@@ -19,7 +19,7 @@
 
 import { PeopleProcessService } from '../../../../services/people-process.service';
 import { UserProcessModel } from '../../../../models';
-import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormService } from '../../../services/form.service';
 import { GroupModel } from '../core/group.model';
 import { baseHost, WidgetComponent } from './../widget.component';
@@ -46,6 +46,9 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
     @ViewChild('inputValue')
     input: ElementRef;
 
+    @Output()
+    peopleSelected: EventEmitter<number>;
+
     groupId: string;
     value: any;
 
@@ -89,6 +92,7 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
 
     constructor(public formService: FormService, public peopleProcessService: PeopleProcessService) {
         super(formService);
+        this.peopleSelected = new EventEmitter();
     }
 
     ngOnInit() {
@@ -135,6 +139,7 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
     onItemSelect(item: UserProcessModel) {
         if (item) {
             this.field.value = item;
+            this.peopleSelected.emit(item && item.id || undefined);
             this.value = this.getDisplayName(item);
         }
     }

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) {