[ADF-1532] Assignee typeahead in start task form (#2839)

* people module directory restructuring

* Extract PeopleSearchFieldComponent to reuse most part of it

* Transform PeopleSearchFieldComponent to the form we want to reuse

* People selector component, first try

* Remove material grid from start-task.component, first part

* Styling and i18n

* clear button for deleting the selected assignee

* Remove people preloading, remove combobox and update assigneeId

* Fix existing tests

* Add new tests

* Final css fixes

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

@@ -5,67 +5,70 @@
         </mat-grid-tile>
     </mat-grid-list>
     <mat-card-content>
-        <mat-grid-list cols="1" rowHeight="80px">
-            <mat-grid-tile>
-                <mat-form-field class="adf-new-task-text-width">
-                    <input matInput placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NAME'|translate}}"
-                           [(ngModel)]="startTaskmodel.name" required id="name_id">
-                </mat-form-field>
-            </mat-grid-tile>
-        </mat-grid-list>
-        <mat-grid-list cols="1" rowHeight="80px">
-            <mat-grid-tile>
-                <mat-form-field class="adf-new-task-text-width">
-                    <textarea matInput placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DESCRIPTION'|translate}}"
-                              [(ngModel)]="startTaskmodel.description" id="description_id"></textarea>
-                </mat-form-field>
-            </mat-grid-tile>
-        </mat-grid-list>
-        <mat-grid-list cols="2" rowHeight="80px">
-            <mat-grid-tile>
-                <mat-form-field class="adf-start-task-input-container">
+        <div class="adf-new-task-layout-card-content">
+            <div class="adf-grid-full-width adf-grid-row">
+                <mat-form-field class="adf-grid-full-width adf-grid-column">
                     <input matInput
-                           [matDatepicker]="taskDatePicker"
-                           (keydown)="true"
-                           (focusout)="onDateChanged($event.srcElement.value)"
-                           placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DATE'|translate}}"
-                           [(ngModel)]="startTaskmodel.dueDate" id="date_id">
-                    <mat-datepicker-toggle matSuffix [for]="taskDatePicker"></mat-datepicker-toggle>
+                        class="adf-grid-full-width"
+                        placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NAME'|translate}}"
+                        [(ngModel)]="startTaskmodel.name"
+                        required
+                        id="name_id">
                 </mat-form-field>
-                <mat-datepicker #taskDatePicker [touchUi]="true"
-                               (dateChanged)="onDateChanged($event)"></mat-datepicker>
-                <div class="adf-error-text-container">
-                    <div *ngIf="dateError">
-                        <div class="adf-error-text">{{'ADF_TASK_LIST.START_TASK.FORM.DATE.ERROR'|translate}}</div>
-                        <mat-icon class="adf-error-icon">warning</mat-icon>
+            </div>
+
+            <div class="adf-grid-full-width adf-grid-row">
+                <mat-form-field class="adf-grid-full-width adf-grid-column">
+                    <textarea
+                        matInput
+                        class="adf-grid-full-width"
+                        placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DESCRIPTION'|translate}}"
+                        [(ngModel)]="startTaskmodel.description"
+                        rows="1"
+                        id="description_id">
+                    </textarea>
+                </mat-form-field>
+            </div>
+
+            <div class="adf-grid-full-width adf-grid-row">
+                <div class="adf-grid-column adf-grid-half-width">
+                    <div class="adf-grid-full-width adf-grid-row">
+                        <mat-form-field class="adf-grid-full-width">
+                            <input matInput
+                                [matDatepicker]="taskDatePicker"
+                                (keydown)="true"
+                                (focusout)="onDateChanged($event.srcElement.value)"
+                                placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DATE'|translate}}"
+                                [(ngModel)]="startTaskmodel.dueDate"
+                                id="date_id">
+                            <mat-datepicker-toggle matSuffix [for]="taskDatePicker"></mat-datepicker-toggle>
+                            <mat-datepicker #taskDatePicker
+                                [touchUi]="true"
+                                (dateChanged)="onDateChanged($event)">
+                            </mat-datepicker>
+                            <div class="adf-error-text-container">
+                                <div *ngIf="dateError">
+                                    <div class="adf-error-text">{{'ADF_TASK_LIST.START_TASK.FORM.DATE.ERROR'|translate}}</div>
+                                    <mat-icon class="adf-error-icon">warning</mat-icon>
+                                </div>
+                            </div>
+                        </mat-form-field>
+                    </div>
+                    <div class="adf-grid-full-width adf-grid-row">
+                        <mat-form-field class="adf-grid-full-width">
+                            <mat-select placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.FORM'|translate}}" id="form_id" [(ngModel)]="formKey">
+                                <mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
+                                <mat-option *ngFor="let form of forms" [value]="form.id">{{ form.name }}</mat-option>
+                            </mat-select>
+                        </mat-form-field>
                     </div>
                 </div>
-            </mat-grid-tile>
-            <mat-grid-tile>
-              <mat-form-field class="adf-start-task-input-container">
-                <mat-select placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.ASSIGNEE'|translate}}" id="assignee_id"
-                           class="adf-mat-select" [(ngModel)]="assigneeId">
-                    <mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
-                    <span *ngFor="let user of people">
-                        <mat-option [value]="user.id" *ngIf="!isUserNameEmpty(user)">{{ getDisplayUser(user.firstName,
-                            user.lastName, ' ')}}
-                        </mat-option>
-                    </span>
-                </mat-select>
-              </mat-form-field>
-            </mat-grid-tile>
-        </mat-grid-list>
-        <mat-grid-list cols="2" rowHeight="80px">
-            <mat-grid-tile>
-                <mat-form-field class="adf-start-task-input-container">
-                    <mat-select placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.FORM'|translate}}" id="form_id" [(ngModel)]="formKey">
-                        <mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
-                        <mat-option *ngFor="let form of forms" [value]="form.id">{{ form.name }}</mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </mat-grid-tile>
-            <mat-grid-tile></mat-grid-tile>
-        </mat-grid-list>
+
+                <div class="adf-grid-column adf-grid-half-width">
+                    <adf-people-selector [(peopleId)]="assigneeId" id="assignee_id"></adf-people-selector>
+                </div>
+            </div>
+        </div>
     </mat-card-content>
     <mat-card-actions>
         <mat-grid-list cols="1" rowHeight="60px">

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

@@ -20,6 +20,34 @@
         margin-top: 10px;
         margin-bottom: 10px;
         padding: 0px;
+
+        &-content {
+            display: flex;
+            flex-flow: row;
+            flex-wrap: wrap;
+            justify-content: space-between;
+
+            .adf-grid-row {
+                display: flex;
+                flex-flow: row;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                margin-bottom: 8px;
+            }
+
+            .adf-grid-column {
+                display: flex;
+                flex-flow: column;
+            }
+
+            .adf-grid-full-width {
+                width: 100%;
+            }
+
+            .adf-grid-half-width {
+                width: 49%;
+            }
+        }
     }
 
     .adf-new-task-footer {
@@ -31,14 +59,6 @@
         text-align: right;
     }
 
-    .adf-start-task-input-container {
-        width: 80%;
-    }
-
-    .adf-new-task-text-width {
-        width: 90%;
-    }
-
     .adf-mat-select {
         padding-top: 0px;
     }
@@ -58,22 +78,27 @@
 
             &-error-text-container {
                 position: absolute;
-                width: 81%;
                 height: 20px;
-                margin-top: 30px;
+                margin-top: 12px;
+                width: 100%;
+
+                & > div {
+                    display: flex;
+                    flex-flow: row;
+                    justify-content: flex-start;
+                }
             }
 
             &-error-text {
-                padding: 1px;
+                padding-right: 8px;
                 height: 16px;
                 font-size: 12px;
                 line-height: 1.33;
-                float: left;
                 color: mat-color($warn);
+                width: auto;
             }
 
             &-error-icon {
-                float: right;
                 font-size: 17px;
                 color: mat-color($warn);
             }

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

@@ -17,7 +17,8 @@
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MaterialModule } from '../../material.module';
-import { PeopleProcessService } from '@alfresco/adf-core';
+import { TranslationService, TranslationMock } from '@alfresco/adf-core';
+import { PeopleSelectorComponent, PeopleSearchFieldComponent, PeopleListComponent } from '../../people';
 import { Observable } from 'rxjs/Observable';
 import { startTaskMock } from '../../mock';
 import { StartTaskModel } from '../models/start-task.model';
@@ -30,10 +31,8 @@ describe('StartTaskComponent', () => {
     let component: StartTaskComponent;
     let fixture: ComponentFixture<StartTaskComponent>;
     let service: TaskListService;
-    let peopleService: PeopleProcessService;
     let element: HTMLElement;
     let getFormlistSpy: jasmine.Spy;
-    let getWorkflowUsersSpy: jasmine.Spy;
     let createNewTaskSpy: jasmine.Spy;
     let fakeForms =    [
         {
@@ -52,11 +51,14 @@ describe('StartTaskComponent', () => {
                 MaterialModule
             ],
             declarations: [
-                StartTaskComponent
+                StartTaskComponent,
+                PeopleSearchFieldComponent,
+                PeopleListComponent,
+                PeopleSelectorComponent
             ],
             providers: [
                 TaskListService,
-                PeopleProcessService
+                { provide: TranslationService, useClass: TranslationMock }
             ]
         }).compileComponents().then(() => {
 
@@ -65,25 +67,7 @@ describe('StartTaskComponent', () => {
             element = fixture.nativeElement;
 
             service = fixture.debugElement.injector.get(TaskListService);
-            peopleService = fixture.debugElement.injector.get(PeopleProcessService);
             getFormlistSpy = spyOn(service, 'getFormList').and.returnValue(Observable.of(fakeForms));
-            getWorkflowUsersSpy = spyOn(peopleService, 'getWorkflowUsers').and.returnValue(Observable.of([
-                {
-                    id: 1,
-                    firstName: 'fakeName',
-                    lastName: 'fakeName',
-                    email: 'fake@app.activiti.com',
-                    company: 'Alfresco.com',
-                    pictureId: 3003
-                },
-                {
-                    id: 1001,
-                    firstName: 'fake-name',
-                    lastName: 'fake-name',
-                    email: 'fake-@app.com',
-                    company: 'app'
-                }
-            ]));
 
             fixture.detectChanges();
         });
@@ -299,16 +283,6 @@ describe('StartTaskComponent', () => {
         expect(element.querySelector('#button-start').textContent).toContain('ADF_TASK_LIST.START_TASK.FORM.ACTION.START');
     });
 
-    it('should fetch all users on ngonint', () => {
-        component.ngOnInit();
-        expect(component.people).toBeDefined();
-        expect(component.people[0].firstName).toEqual('fakeName');
-        expect(component.people[1].firstName).toEqual('fake-name');
-        expect(component.people[0].id).toEqual(1);
-        expect(component.people[1].id).toEqual(1001);
-        expect(getWorkflowUsersSpy).toHaveBeenCalled();
-    });
-
     it('should not emit TaskDetails OnCancel', () => {
         let emitSpy = spyOn(component.cancel, 'emit');
         component.onCancel();
@@ -340,15 +314,6 @@ describe('StartTaskComponent', () => {
         expect(createTaskButton.disabled).toBeFalsy();
     });
 
-    it('should define the select option for Assignee', async(() => {
-        fixture.whenStable().then(() => {
-            let selectElement = fixture.nativeElement.querySelector('#assignee_id');
-            expect(selectElement).not.toBeNull();
-            expect(selectElement).toBeDefined();
-            expect(selectElement.attributes['aria-label'].value).toContain('ADF_TASK_LIST.START_TASK.FORM.LABEL.ASSIGNEE');
-        });
-    }));
-
     it('should define the select option for Forms', () => {
         component.forms = fakeForms;
         fixture.detectChanges();

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { LogService, PeopleProcessService, UserPreferencesService, UserProcessModel } from '@alfresco/adf-core';
+import { LogService, UserPreferencesService, UserProcessModel } 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';
@@ -52,8 +52,6 @@ export class StartTaskComponent implements OnInit {
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
-    people: UserProcessModel[] = [];
-
     startTaskmodel: StartTaskModel = new StartTaskModel();
 
     forms: Form[];
@@ -73,7 +71,6 @@ export class StartTaskComponent implements OnInit {
      * @param taskService
      */
     constructor(private taskService: TaskListService,
-                private peopleService: PeopleProcessService,
                 private dateAdapter: DateAdapter<Moment>,
                 private preferences: UserPreferencesService,
                 private logService: LogService) {
@@ -84,7 +81,6 @@ export class StartTaskComponent implements OnInit {
             this.dateAdapter.setLocale(locale);
         });
         this.loadFormsTask();
-        this.getUsers();
     }
 
     public start(): void {
@@ -140,15 +136,6 @@ export class StartTaskComponent implements OnInit {
             });
     }
 
-    private getUsers(): void {
-        this.peopleService.getWorkflowUsers().subscribe((users) => {
-            this.people = users;
-        }, (err) => {
-            this.error.emit(err);
-            this.logService.error('Could not load users');
-        });
-    }
-
     public isUserNameEmpty(user: UserProcessModel): boolean {
         return !user || (this.isEmpty(user.firstName) && this.isEmpty(user.lastName));
     }