[ADF-918] Activiti Start Task - Refactoring (#2065)

* [#DW-60] Task-create Task

* Updated en.json with new form fields
* Refactored start Button(Disable/Enable)
* Migrated from mdl to md
* Added documentation

* #DW-60 Task- create task

* Changed component name ActivitiStarttaskButton to ActivitiStartTaskComponent
* activiti-start-task to adf-start-task

* [ADF-918]  Activiti Start Task - Refactoring

* Removed unwanted  activiti-start-task.png
* Renamed component name in test
* Refactored CSS

* [ADF-918] Activiti Start Task - Refactoring

* Added condtional parameter passing and added a test case

* [ADF-918] Activiti Start Task - Refactoring

* Removed trailing space.
* Refactored Spec file.

* [ADF-918] Activiti Start Task - Refactoring

* Created  startTaskModel with form feilds.
* Modified testcases  after adding startTaskModel.
* Removed @input property.

* [ADF-918] Activiti Start Task - Refactoring

* Fixed tslint issuse (Exceeds maximum line length)
* Refactored date field.

* [ADF-918] Activiti Start Task - Refactoring

* Changed property name date to dueDate.

ng2-components/ng2-activiti-tasklist/README.md

@@ -40,6 +40,7 @@
   * [Properties](#properties-8)
     + [Events](#events-7)
 - [ADF Comments Component](#adf-comments-component)
+- [Start Task Component](#start-task-component)
   * [Properties](#properties-9)
     + [Events](#events-8)
 - [Build from sources](#build-from-sources)
@@ -489,12 +490,38 @@ This component displays comments entered by involved users to a specified task.
 | --- | --- |
 | error | Raised when an error occurs while displaying/adding a comment |
 
+## Start Task Component
+
+This component Creates/Starts new task for the specified app
+
+```html
+<adf-start-task
+    [appId]="YOUR_APP_ID">
+</adf-start-task>
+```
+
+![adf-start-task](docs/assets/adf-start-task.png)
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| appId | string | (**required**): The id of the app. |
+
+#### Events
+
+| Name | Description |
+| --- | --- |
+| onSuccess | Raised when the task is successfully created |
+| cancel | Raised when the cancel button is pressed by the user |
+| error | Raised if there is an error during task creation |
+
 ## Build from sources
 
 You can build component from sources with the following commands:
-
 ```sh
 npm install
+
 npm run build
 ```
 

ng2-components/ng2-activiti-tasklist/index.ts

@@ -17,7 +17,17 @@
 
 import { DatePipe } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { MdButtonModule, MdIconModule, MdInputModule, MdProgressSpinnerModule } from '@angular/material';
+import { 
+    MdButtonModule, 
+    MdIconModule, 
+    MdInputModule, 
+    MdProgressSpinnerModule, 
+    MdDatepickerModule, 
+    MdGridListModule, 
+    MdAutocompleteModule, 
+    MdNativeDateModule, 
+    MdSelectModule 
+} from '@angular/material';
 import { ActivitiFormModule } from 'ng2-activiti-form';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
@@ -32,12 +42,12 @@ import {
     ActivitiCreateTaskAttachmentComponent,
     ActivitiFilters,
     ActivitiPeople,
-    ActivitiPeopleSearch,
-    ActivitiStartTaskButton,
-    ActivitiTaskDetails,
     ActivitiTaskHeader,
-    ActivitiTaskList,
     AdfCommentListComponent,
+    ActivitiPeopleSearch,
+    ActivitiStartTaskComponent,
+    ActivitiTaskDetails,
+    ActivitiTaskList,
     NoTaskDetailsTemplateComponent,
     PeopleList,
     TaskAttachmentListComponent
@@ -59,7 +69,7 @@ export const ACTIVITI_TASKLIST_DIRECTIVES: any[] = [
     ActivitiComments,
     ActivitiPeople,
     ActivitiTaskHeader,
-    ActivitiStartTaskButton,
+    ActivitiStartTaskComponent,
     ActivitiPeopleSearch,
     TaskAttachmentListComponent,
     ActivitiCreateTaskAttachmentComponent,
@@ -81,7 +91,12 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [
         MdIconModule,
         MdButtonModule,
         MdInputModule,
-        MdProgressSpinnerModule
+        MdProgressSpinnerModule,
+        MdDatepickerModule,
+        MdNativeDateModule,
+        MdSelectModule,
+        MdAutocompleteModule,
+        MdGridListModule
     ],
     declarations: [
         ...ACTIVITI_TASKLIST_DIRECTIVES

ng2-components/ng2-activiti-tasklist/src/assets/start-task.mock.ts

@@ -0,0 +1,34 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export let startTaskMock = {
+    'name': 'fakeName',
+    'description': 'fakeDescription',
+    'assignee': {'id': 2001, 'firstName': 'Jhon', 'lastName': 'Adams', 'email': 'jhon@app.activiti.com'},
+    'dueDate': '2017-11-03T15:25:42.749+0000',
+    'formKey': '11201',
+    'category': 'fakeAppId'
+};
+
+export let noDataMock = {
+    'name': '',
+    'description': '',
+    'assignee': {},
+    'dueDate': '',
+    'formKey': '',
+    'category': ';'
+};

ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.css

@@ -1,7 +1,37 @@
-:host {
+.adf-new-task-heading {
-    width: 100%;
+    padding: 12px 20px;
+    font-family: Muli;
+    font-weight: bold;
+    border-bottom: 1px solid #eee;
+    font-size: 18px;
+    float: left;
+    text-align: left;
+    width: calc(100% - 40px);
 }
 
-.activiti-label {
+.adf-new-task-layout-card {
-    font-weight: bolder;
+  width: 66.6667%;
+  margin-right:calc(33.3333%/2 - 24px);
+  margin-left: calc(33.3333%/2 - 24px);
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 0px
+}
+
+.adf-new-task-footer {
+    padding: 4px;
+    font-family: Muli;
+    font-size: 18px;
+    border-top: 1px solid #eee;
+    float: left;
+    width: calc(100% - 40px);
+    text-align: right;
+}
+
+.adf-start-task-input-container {
+  width: 80%;
+}
+
+.adf-new-task-text-width {
+  width: 90%;
 }

ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.html

@@ -1,39 +1,63 @@
-<button md-raised-button (click)="showDialog()" id="start-task-button">
+<md-card class="adf-new-task-layout-card">
-    <md-icon>add</md-icon>
+	<md-grid-list cols="1" rowHeight="60px">
-    <span>{{'START_TASK.BUTTON'|translate}}</span>
+		<md-grid-tile>
-</button>
+			<div class="adf-new-task-heading">{{'START_TASK.FORM.TITLE'|translate}}</div>
-
+		</md-grid-tile>
-<dialog class="mdl-dialog" id="start-task-dialog" #dialog>
+	</md-grid-list>
-    <h4 class="mdl-dialog__title" id="start-task-dialog-title">{{'START_TASK.DIALOG.TITLE'|translate}}</h4>
+	<md-card-content>
-    <div class="mdl-dialog__content">
+		<md-grid-list cols="1" rowHeight="80px">
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+			<md-grid-tile>
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="name" id="taskName"/>
+				<md-input-container class="adf-new-task-text-width">
-            <label class="mdl-textfield__label" for="taskName">{{'START_TASK.DIALOG.LABEL.NAME'|translate}}</label>
+					<input mdInput placeholder="{{'START_TASK.FORM.LABEL.NAME'|translate}}" [(ngModel)]="startTaskmodel.name" required id="name_id">
-        </div>
+				</md-input-container>
-        <div class="mdl-textfield mdl-js-textfield">
+			</md-grid-tile>
-            <textarea class="mdl-textfield__input" type="text" [(ngModel)]="description" rows="3"
+		</md-grid-list>
-                      id="taskDescription"></textarea>
+		<md-grid-list cols="1" rowHeight="80px">
-            <label class="mdl-textfield__label" id="task-description-label"
+			<md-grid-tile>
-                   for="taskDescription">{{'START_TASK.DIALOG.LABEL.DESCRIPTION'|translate}}</label>
+				<md-input-container class="adf-new-task-text-width">
-        </div>
+					<textarea mdInput placeholder="{{'START_TASK.FORM.LABEL.DESCRIPTION'|translate}}" [(ngModel)]="startTaskmodel.description" id="description_id"></textarea>
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+				</md-input-container>
-            <label class="mdl-textfield__label" >{{'START_TASK.DIALOG.LABEL.ATTACHFORM'|translate}}</label>
+			</md-grid-tile>
-        </div>
+		</md-grid-list>
-        <div class="mdl-textfield mdl-js-textfield alf-mdl-selectfield">
+		<md-grid-list cols="2" rowHeight="80px">
-            <select name="taskForm" [(ngModel)]="formId" >
+			<md-grid-tile>
-                <option value="null">{{'START_TASK.DIALOG.LABEL.NONE'|translate}}</option>
+				<md-input-container class="adf-start-task-input-container">
-                <option *ngFor="let form of forms" [value]="form.id">
+					<input mdInput 
-                    {{form.name}}
+					[mdDatepicker]="taskDatePicker" 
-                </option>
+					[value]="taskDatePicker" 
-            </select>
+					(click)="taskDatePicker.open()" 
-        </div>
+					(keydown)="true"
-    </div>
+					placeholder="{{'START_TASK.FORM.LABEL.DATE'|translate}}" 
-    <div class="mdl-dialog__actions">
+					[(ngModel)]="startTaskmodel.dueDate" id="date_id">
-        <button type="button" id="button-start" (click)="start()" class="mdl-button">
+					<button mdSuffix [mdDatepickerToggle]="taskDatePicker"></button>
-            {{'START_TASK.DIALOG.ACTION.START'|translate}}
+				</md-input-container>
-        </button>
+				<md-datepicker #taskDatePicker [touchUi]="true"></md-datepicker>
-        <button type="button" id="button-cancel" (click)="cancel()" class="mdl-button close">
+			</md-grid-tile>
-            {{'START_TASK.DIALOG.ACTION.CANCEL'|translate}}
+			<md-grid-tile>
-        </button>
+				<md-select placeholder="{{'START_TASK.FORM.LABEL.ASSIGNEE'|translate}}" id="assignee_id" class="adf-start-task-input-container" [(ngModel)]="startTaskmodel.assignee">
-    </div>
+					<md-option>{{'START_TASK.FORM.LABEL.NONE'|translate}}</md-option>
-</dialog>
+					<md-option *ngFor="let user of people" [value]="user">{{ user.firstName +' '+ user.lastName }}</md-option>
+				</md-select>
+			</md-grid-tile>
+		</md-grid-list>
+		<md-grid-list cols="2" rowHeight="80px">
+			<md-grid-tile>
+				<md-select placeholder="{{'START_TASK.FORM.LABEL.FORM'|translate}}" id="form_id" [(ngModel)]="startTaskmodel.formKey" class="adf-start-task-input-container">
+					<md-option>{{'START_TASK.FORM.LABEL.NONE'|translate}}</md-option>
+					<md-option *ngFor="let form of forms" [value]="form.id">{{ form.name }}</md-option>
+				</md-select>
+			</md-grid-tile>
+			<md-grid-tile></md-grid-tile>
+		</md-grid-list>
+	</md-card-content>
+	<md-card-actions>
+		<md-grid-list cols="1" rowHeight="60px">
+			<md-grid-tile>
+				<div class="adf-new-task-footer">
+					<button md-button (click)="onCancel()" id="button-cancle">{{'START_TASK.FORM.ACTION.CANCEL'|translate}}</button>
+					<button md-button [disabled]="!startTaskmodel.name" (click)="start()" id="button-start">{{'START_TASK.FORM.ACTION.START'|translate}}</button>
+				</div>
+			</md-grid-tile>
+		</md-grid-list>
+	</md-card-actions>
+</md-card>

ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.spec.ts

@@ -16,94 +16,199 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MdButtonModule, MdDatepickerModule, MdGridListModule, MdIconModule, MdInputModule, MdNativeDateModule, MdSelectModule } from '@angular/material';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
+import { StartTaskModel } from '../models/index';
+import { ActivitiPeopleService } from '../services/activiti-people.service';
 import { ActivitiTaskListService } from '../services/activiti-tasklist.service';
-import { ActivitiStartTaskButton } from './activiti-start-task.component';
+import { startTaskMock } from './../assets/start-task.mock';
+import { ActivitiStartTaskComponent } from './activiti-start-task.component';
 
 declare let jasmine: any;
 
-describe('ActivitiStartTaskButton', () => {
+describe('ActivitiStartTaskComponent', () => {
 
-    let activitiStartTaskButton: ActivitiStartTaskButton;
+    let activitiStartTaskComponent: ActivitiStartTaskComponent;
-    let fixture: ComponentFixture<ActivitiStartTaskButton>;
+    let fixture: ComponentFixture<ActivitiStartTaskComponent>;
     let service: ActivitiTaskListService;
+    let peopleService: ActivitiPeopleService;
     let element: HTMLElement;
-    let startTaskButton: HTMLElement;
+    let getformlistSpy: jasmine.Spy;
-
+    let getWorkflowUsersSpy: jasmine.Spy;
+    let getcreateNewTaskSpy: jasmine.Spy;
+    let fakeForms =    [
+        {
+            id: 123,
+           name: 'Display Data'
+        },
+       {
+            id: 1111,
+           name: 'Employee Info'
+        }
+    ];
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                CoreModule.forRoot()
+                CoreModule.forRoot(),
+                MdInputModule,
+                MdIconModule,
+                MdButtonModule,
+                MdDatepickerModule,
+                MdGridListModule,
+                MdNativeDateModule,
+                MdSelectModule
             ],
             declarations: [
-                ActivitiStartTaskButton
+                ActivitiStartTaskComponent
             ],
             providers: [
-                ActivitiTaskListService
+                ActivitiTaskListService,
+                ActivitiPeopleService
             ]
         }).compileComponents().then(() => {
             let translateService = TestBed.get(AlfrescoTranslationService);
             spyOn(translateService, 'addTranslationFolder').and.stub();
             spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
 
-            fixture = TestBed.createComponent(ActivitiStartTaskButton);
+            fixture = TestBed.createComponent(ActivitiStartTaskComponent);
-            activitiStartTaskButton = fixture.componentInstance;
+            activitiStartTaskComponent = fixture.componentInstance;
             element = fixture.nativeElement;
             fixture.detectChanges();
-            startTaskButton = <HTMLElement> element.querySelector('#start-task-button');
         });
     }));
 
     beforeEach(() => {
-        jasmine.Ajax.install();
         service = fixture.debugElement.injector.get(ActivitiTaskListService);
+        peopleService = fixture.debugElement.injector.get(ActivitiPeopleService);
+        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'
+            }
+        ]));
     });
 
-    afterEach(() => {
+    it('should create instance of ActivitiStartTaskComponent', () => {
-        jasmine.Ajax.uninstall();
+        expect(fixture.componentInstance instanceof ActivitiStartTaskComponent).toBe(true, 'should create ActivitiStartTaskComponent');
     });
 
-    it('should show start task button', () => {
+    it('should fetch fakeform on ngonint', () => {
-        expect(element.querySelector('#start-task-button')).toBeDefined();
+        activitiStartTaskComponent.ngOnInit();
-        expect(element.querySelector('#start-task-button')).not.toBeNull();
+        expect(activitiStartTaskComponent.forms).toEqual(fakeForms);
-        expect(element.querySelector('#start-task-button').textContent).toContain('START_TASK.BUTTON');
+        expect(activitiStartTaskComponent.forms[0].name).toEqual('Display Data');
+        expect(activitiStartTaskComponent.forms[1].name).toEqual('Employee Info');
+        expect(activitiStartTaskComponent.forms[1].id).toEqual(1111);
+        expect(getformlistSpy).toHaveBeenCalled();
     });
 
-    it('should show start dialog on press button', () => {
+    describe('create task', () => {
-        startTaskButton.click();
-        expect(element.querySelector('#start-task-dialog')).not.toBeNull();
-        expect(element.querySelector('#start-task-dialog').getAttribute('open')).not.toBeNull();
-        expect(element.querySelector('#start-task-dialog-title')).not.toBeNull();
-        expect(element.querySelector('#start-task-dialog-title').textContent).toContain('START_TASK.DIALOG.TITLE');
-    });
 
-    it('should close start dialog on cancel button', () => {
+        beforeEach(() => {
-        startTaskButton.click();
+            jasmine.Ajax.install();
-        expect(element.querySelector('#start-task-dialog')).not.toBeNull();
+            getcreateNewTaskSpy = spyOn(service, 'createNewTask').and.returnValue(Observable.of(
-        expect(element.querySelector('#start-task-dialog').getAttribute('open')).not.toBeNull();
+                {
-        let cancelButton = <HTMLElement> element.querySelector('#button-cancel');
+                    id: 91,
-        cancelButton.click();
+                    name: 'fakeName',
-        expect(element.querySelector('#start-task-dialog').getAttribute('open')).toBeNull();
+                    formKey: '4',
-    });
+                    assignee: {id: 1001, firstName: 'fakeName', email: 'fake@app.activiti.com'}
+                }
+            ));
+        });
 
-    it('should attach a task when a form id slected', () => {
+        afterEach(() => {
-        let attachFormToATask = spyOn(service, 'attachFormToATask').and.returnValue(Observable.of());
+            jasmine.Ajax.uninstall();
-        spyOn(service, 'createNewTask').and.callFake(
+        });
-            function() {
+
-                return Observable.create(observer => {
+        it('should create new task when start is clicked', async(() => {
-                    observer.next({ id: 'task-id'});
+            activitiStartTaskComponent.onSuccess.subscribe((res) => {
-                    observer.complete();
+                expect(res).toBeDefined();
-                });
             });
+            activitiStartTaskComponent.appId = 'fakeAppId';
+            activitiStartTaskComponent.startTaskmodel = new StartTaskModel(startTaskMock);
+            activitiStartTaskComponent.start();
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                'status': 200
+            });
+        }));
 
-        let createTaskButton = <HTMLElement> element.querySelector('#button-start');
+        it('should send on onSuccess event when the task is started', async(() => {
+            activitiStartTaskComponent.onSuccess.subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(res.id).toBe(91);
+                expect(res.name).toBe('fakeName');
+                expect(res.formKey).toBe('4');
+                expect(res.assignee.id).toBe(1001);
+            });
+            activitiStartTaskComponent.appId = 'fakeAppId';
+            activitiStartTaskComponent.startTaskmodel = new StartTaskModel(startTaskMock);
+            activitiStartTaskComponent.start();
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                'status': 200,
+                contentType: 'json',
+                responseText:
+                {
+                    id: '91',
+                    name: 'fakeName',
+                    description: 'fakeDescription',
+                    formKey: '4',
+                    assignee: {id: 1001, firstName: 'fakeName', email: 'fake@app.activiti.com'},
+                    dueDate: null,
+                    endDate: null,
+                    duration: null,
+                    priority: 50,
+                    parentTaskId: null,
+                    parentTaskName: null
+                }
+            });
+        }));
 
-        activitiStartTaskButton.name = 'fake-name';
+        it('should send on onSuccess event when only name is given', async(() => {
-        activitiStartTaskButton.formId = '123';
+            activitiStartTaskComponent.onSuccess.subscribe((res) => {
-        startTaskButton.click();
+                expect(res).toBeDefined();
-        createTaskButton.click();
+            });
-        expect(attachFormToATask).toHaveBeenCalled();
+            activitiStartTaskComponent.appId = 'fakeAppId';
+            activitiStartTaskComponent.startTaskmodel.name = 'fakeName';
+            activitiStartTaskComponent.startTaskmodel = new StartTaskModel(startTaskMock);
+            activitiStartTaskComponent.start();
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                'status': 200,
+                contentType: 'json',
+                responseText: {}
+            });
+        }));
+
+        it('should attach a task when a form id selected', () => {
+            activitiStartTaskComponent.onSuccess.subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(res.formKey).toBe('4');
+            });
+            activitiStartTaskComponent.appId = 'fakeAppId';
+            activitiStartTaskComponent.startTaskmodel = new StartTaskModel(startTaskMock);
+            activitiStartTaskComponent.start();
+            expect(getcreateNewTaskSpy).toHaveBeenCalled();
+        });
+
+        it('should not emit onSuccess event when data not present', async(() => {
+            let onSuccessSpy: jasmine.Spy = spyOn(activitiStartTaskComponent.onSuccess, 'emit');
+            activitiStartTaskComponent.startTaskmodel = new StartTaskModel(null);
+            activitiStartTaskComponent.start();
+            fixture.detectChanges();
+            expect(getcreateNewTaskSpy).not.toHaveBeenCalled();
+            expect(onSuccessSpy).not.toHaveBeenCalled();
+        }));
     });
 
     it('should not attach a task when a form id is not slected', () => {
@@ -115,60 +220,56 @@ describe('ActivitiStartTaskButton', () => {
                     observer.complete();
                 });
             });
-
         let createTaskButton = <HTMLElement> element.querySelector('#button-start');
-
+        activitiStartTaskComponent.startTaskmodel.name = 'fake-name';
-        activitiStartTaskButton.name = 'fake-name';
-        startTaskButton.click();
         createTaskButton.click();
         expect(attachFormToATask).not.toHaveBeenCalled();
     });
 
-    it('should load form when dialogs open', () => {
+    it('should show start task button', () => {
-        let loadForms = spyOn(service, 'getFormList').and.returnValue(Observable.of());
+        expect(element.querySelector('#button-start')).toBeDefined();
-        startTaskButton.click();
+        expect(element.querySelector('#button-start')).not.toBeNull();
-        expect(loadForms).toHaveBeenCalled();
+        expect(element.querySelector('#button-start').textContent).toContain('START_TASK.FORM.ACTION.START');
     });
 
-    it('should create new task when start is clicked', () => {
+    it('should fetch all users on ngonint', async(() => {
-        activitiStartTaskButton.onSuccess.subscribe(() => {
+        activitiStartTaskComponent.ngOnInit();
-            expect(element.querySelector('#start-task-dialog').getAttribute('open')).toBeNull();
+        expect(activitiStartTaskComponent.people).toBeDefined();
-        });
+        expect(activitiStartTaskComponent.people[0].firstName).toEqual('fakeName');
-        let createTaskButton = <HTMLElement> element.querySelector('#button-start');
+        expect(activitiStartTaskComponent.people[1].firstName).toEqual('fake-name');
-        startTaskButton.click();
+        expect(activitiStartTaskComponent.people[0].id).toEqual(1);
-        activitiStartTaskButton.name = 'fake-name';
+        expect(activitiStartTaskComponent.people[1].id).toEqual(1001);
-        createTaskButton.click();
+        expect(getWorkflowUsersSpy).toHaveBeenCalled();
-        jasmine.Ajax.requests.mostRecent().respondWith({
+    }));
-            'status': 200
+
-        });
+    it('should not emit TaskDetails OnCancle', () => {
+        let emitSpy = spyOn(activitiStartTaskComponent.cancel, 'emit');
+        activitiStartTaskComponent.onCancel();
+        expect(emitSpy).not.toBeNull();
+        expect(emitSpy).toHaveBeenCalled();
     });
 
-    it('alert message is showed on start error', () => {
+    it('should start button disable if name is empty', () => {
-        spyOn(window, 'alert');
+        let createTaskButton =  fixture.nativeElement.querySelector('#button-start');
-        activitiStartTaskButton.onSuccess.subscribe(() => {
+        activitiStartTaskComponent.startTaskmodel.name = '';
-            expect(window.alert).toHaveBeenCalledWith('An error occurred while trying to add the task');
+        fixture.detectChanges();
-        });
+        expect(createTaskButton.disabled).toBeTruthy();
-        let createTaskButton = <HTMLElement> element.querySelector('#button-start');
-        startTaskButton.click();
-        activitiStartTaskButton.name = 'fake-name';
-        createTaskButton.click();
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            'status': 403
-        });
     });
 
-    it('should send on success event when the task is started', () => {
+    it('should cancle start task on cancle button clicked', () => {
-        activitiStartTaskButton.onSuccess.subscribe((res) => {
+        let emitSpy = spyOn(activitiStartTaskComponent.cancel, 'emit');
-            expect(res).toBeDefined();
+        let cancleTaskButton =  fixture.nativeElement.querySelector('#button-cancle');
-        });
+        activitiStartTaskComponent.startTaskmodel.name = '';
-        let createTaskButton = <HTMLElement> element.querySelector('#button-start');
+        fixture.detectChanges();
-        startTaskButton.click();
+        cancleTaskButton.click();
-        activitiStartTaskButton.name = 'fake-name';
+        expect(emitSpy).not.toBeNull();
-        createTaskButton.click();
+        expect(emitSpy).toHaveBeenCalled();
-        jasmine.Ajax.requests.mostRecent().respondWith({
+    });
-            'status': 200,
+
-            contentType: 'json',
+    it('should enable button if name is not empty', () => {
-            responseText: {}
+        let createTaskButton = fixture.nativeElement.querySelector('#button-start');
-        });
+        activitiStartTaskComponent.startTaskmodel.name = 'fakeName';
+        fixture.detectChanges();
+        expect(createTaskButton.enable).toBeFalsy();
     });
 });

ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts

@@ -15,20 +15,20 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
 import { Form } from '../models/form.model';
+import { StartTaskModel, User } from '../models/index';
 import { TaskDetailsModel } from '../models/task-details.model';
+import { ActivitiPeopleService } from '../services/activiti-people.service';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 
-declare let dialogPolyfill: any;
-
 @Component({
     selector: 'adf-start-task, activiti-start-task',
     templateUrl: './activiti-start-task.component.html',
     styleUrls: ['./activiti-start-task.component.css']
 })
-export class ActivitiStartTaskButton {
+export class ActivitiStartTaskComponent implements OnInit {
 
     @Input()
     appId: string;
@@ -36,19 +36,18 @@ export class ActivitiStartTaskButton {
     @Output()
     onSuccess: EventEmitter<any> = new EventEmitter<any>();
 
+    @Output()
+    cancel: EventEmitter<void> = new EventEmitter<void>();
+
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
-    @ViewChild('dialog')
+    people: User [] = [];
-    dialog: any;
+
+    startTaskmodel: StartTaskModel = new StartTaskModel();
 
     forms: Form [];
 
-    formId: string = null;
-
-    name: string;
-    description: string;
-
     /**
      * Constructor
      * @param auth
@@ -57,6 +56,7 @@ export class ActivitiStartTaskButton {
      */
     constructor(private translateService: AlfrescoTranslationService,
                 private taskService: ActivitiTaskListService,
+                private peopleService: ActivitiPeopleService,
                 private logService: LogService) {
 
         if (translateService) {
@@ -64,20 +64,22 @@ export class ActivitiStartTaskButton {
         }
     }
 
+    ngOnInit() {
+        this.loadFormsTask();
+        this.getUsers();
+    }
+
     public start() {
-        if (this.name) {
+        if (this.startTaskmodel.name) {
-            this.taskService.createNewTask(new TaskDetailsModel({
+            this.startTaskmodel.category = this.appId;
-                name: this.name,
+            this.taskService.createNewTask(new TaskDetailsModel(this.startTaskmodel)).subscribe(
-                description: this.description,
-                category: this.appId ? '' + this.appId : null
-            })).subscribe(
                 (res: any) => {
                     this.onSuccess.emit(res);
-                    this.closeDialog();
-                    this.resetForm();
                     this.attachForm(res.id);
+                    this.resetForm();
                 },
                 (err) => {
+                    this.error.emit(err);
                     this.logService.error('An error occurred while trying to add the task');
                 }
             );
@@ -85,46 +87,35 @@ export class ActivitiStartTaskButton {
     }
 
     private attachForm(taskId: string) {
-        if (this.formId && taskId) {
+        if (this.startTaskmodel.formKey && taskId) {
-            this.taskService.attachFormToATask(taskId, Number(this.formId));
+            this.taskService.attachFormToATask(taskId, Number(this.startTaskmodel.formKey));
-            this.formId = null;
         }
     }
 
-    public cancel() {
+    public onCancel() {
-        this.closeDialog();
+        this.cancel.emit();
-    }
-
-    public showDialog() {
-        if (!this.dialog.nativeElement.showModal) {
-            dialogPolyfill.registerDialog(this.dialog.nativeElement);
-        }
-
-        this.loadFormsTask();
-
-        if (this.dialog) {
-            this.dialog.nativeElement.showModal();
-        }
     }
 
     private loadFormsTask() {
         this.taskService.getFormList().subscribe((res: Form[]) => {
                 this.forms = res;
             },
-                                                 (err) => {
+            (err) => {
                 this.error.emit(err);
                 this.logService.error('An error occurred while trying to get the forms');
             });
     }
 
-    private closeDialog() {
+    private resetForm() {
-        if (this.dialog) {
+        this.startTaskmodel = null;
-            this.dialog.nativeElement.close();
-        }
     }
 
-    private resetForm() {
+    private getUsers() {
-        this.name = '';
+        this.peopleService.getWorkflowUsers().subscribe((users) => {
-        this.description = '';
+            this.people = users;
+        }, (err) => {
+            this.error.emit(err);
+            this.logService.error('Could not load users');
+        });
     }
 }

ng2-components/ng2-activiti-tasklist/src/i18n/en.json

@@ -71,13 +71,16 @@
     },
     "START_TASK": {
         "BUTTON": "CREATE TASK",
-        "DIALOG": {
+        "FORM": {
             "TITLE": "Start Task",
             "LABEL": {
                 "NONE": "None",
                 "NAME": "Name",
                 "DESCRIPTION": "Description",
-                "ATTACHFORM" : "Attach a Form"
+                "ATTACHFORM" : "Attach a Form",
+                "ASSIGNEE"   : "Assignee",
+                "FORM"       : "Form",
+                "DATE"       : "Choose a Date"
             },
             "ACTION": {
                 "START": "Start",

ng2-components/ng2-activiti-tasklist/src/models/index.ts

@@ -22,3 +22,4 @@ export * from './user.model';
 export * from './task-details.model';
 export * from './task-details.event';
 export * from './user-event.model';
+export * from './start-task.model';

ng2-components/ng2-activiti-tasklist/src/models/start-task.model.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ *
+ * This object represent of the StartTaskModel.
+ *
+ *
+ * @returns {StartTaskModel} .
+ */
+import { User } from './user.model';
+
+export class StartTaskModel {
+
+    name: string;
+    description: string;
+    assignee: User;
+    dueDate: any;
+    formKey: any;
+    category: string;
+
+    constructor(obj?: any) {
+        this.name = obj && obj.name || null;
+        this.description = obj && obj.description || null;
+        this.assignee = obj && obj.assignee ? new User(obj.assignee) : null;
+        this.dueDate = obj && obj.dueDate || null;
+        this.formKey = obj && obj.formKey || null;
+        this.category = obj && obj.category || null;
+    }
+}

ng2-components/ng2-activiti-tasklist/src/services/activiti-people.service.ts

@@ -28,7 +28,7 @@ export class ActivitiPeopleService {
                 private logService: LogService) {
     }
 
-    getWorkflowUsers(taskId: string, searchWord: string): Observable<User[]> {
+    getWorkflowUsers(taskId?: string, searchWord?: string): Observable<User[]> {
         let option = {excludeTaskId: taskId, filter: searchWord};
         return Observable.fromPromise(this.getWorkflowUserApi(option))
             .map((response: any) => <User[]> response.data || [])