From 02740881147aac733c407d8e38fac937024f2cf1 Mon Sep 17 00:00:00 2001 From: Maurizio Vitale Date: Mon, 23 Jul 2018 09:23:33 +0100 Subject: [PATCH] [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 | 2 +- .../widgets/people/people.widget.spec.ts | 16 ++++++++++++++++ .../widgets/people/people.widget.ts | 7 ++++++- .../components/start-task.component.html | 2 +- .../components/start-task.component.scss | 19 ++++++++++++++----- .../components/start-task.component.spec.ts | 17 +++++++++++++++++ .../components/start-task.component.ts | 9 ++++++++- 7 files changed, 63 insertions(+), 9 deletions(-) diff --git a/docs/process-services/start-task.component.md b/docs/process-services/start-task.component.md index b8d78b2291..88c9d5bc20 100644 --- a/docs/process-services/start-task.component.md +++ b/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)`` | Emitted when the cancel button is clicked by the user. | | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when an error occurs. | -| success | `EventEmitter` | Emitted when the task is successfully created. | +| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the task is successfully created. | 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 ea2cf1a728..dcd8035459 100644 --- a/lib/core/form/components/widgets/people/people.widget.spec.ts +++ b/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 = 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); + }); + })); }); }); diff --git a/lib/core/form/components/widgets/people/people.widget.ts b/lib/core/form/components/widgets/people/people.widget.ts index ce9a4b5787..170c08e376 100644 --- a/lib/core/form/components/widgets/people/people.widget.ts +++ b/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; + 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); } } diff --git a/lib/process-services/task-list/components/start-task.component.html b/lib/process-services/task-list/components/start-task.component.html index 82f78bb9e1..b8533d123b 100644 --- a/lib/process-services/task-list/components/start-task.component.html +++ b/lib/process-services/task-list/components/start-task.component.html @@ -65,7 +65,7 @@
- +
diff --git a/lib/process-services/task-list/components/start-task.component.scss b/lib/process-services/task-list/components/start-task.component.scss index 408bb80611..a46614bae2 100644 --- a/lib/process-services/task-list/components/start-task.component.scss +++ b/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 { diff --git a/lib/process-services/task-list/components/start-task.component.spec.ts b/lib/process-services/task-list/components/start-task.component.spec.ts index cdf2cb452a..318b77ac67 100644 --- a/lib/process-services/task-list/components/start-task.component.spec.ts +++ b/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 = 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', () => { diff --git a/lib/process-services/task-list/components/start-task.component.ts b/lib/process-services/task-list/components/start-task.component.ts index 85eea416ff..fb149e32f1 100644 --- a/lib/process-services/task-list/components/start-task.component.ts +++ b/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 { let response = Observable.of(); if (taskId && formKey) {