Merge pull request #1201 from Alfresco/dev-wabson-775

Process variables component

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -56,8 +56,8 @@
                             <span>Process Filters</span>
                             <button type="button" (click)="navigateStartProcess()" class="mdl-button" data-automation-id="btn-start-process">Start Process</button>
                             <activiti-process-instance-filters [appId]="appId"
-                                    (filterClick)="onProcessFilterClick($event)" (onSuccess)="onSuccessProcessFilterList($event)"
+                                    (filterClick)="onProcessFilterClick($event)"
-                                    #activitiprocessfilter></activiti-process-instance-filters>
+                                    (onSuccess)="onSuccessProcessFilterList($event)"></activiti-process-instance-filters>
                         </div>
                         <div class="mdl-cell mdl-cell--3-col task-column">
                             <span>Process List</span>
@@ -67,12 +67,14 @@
                                     [state]="processFilter.filter.state"
                                     [sort]="processFilter.filter.sort"
                                     [data]="dataProcesses"
-                                               (rowClick)="onProcessRowClick($event)" (onSuccess)="onSuccessProcessList($event)"
+                                    (rowClick)="onProcessRowClick($event)"
-                                                            #activitiprocesslist></activiti-process-instance-list>
+                                    (onSuccess)="onSuccessProcessList($event)"></activiti-process-instance-list>
                         </div>
                         <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="!isStartProcessMode()">
                             <span>Process Details</span>
-                            <activiti-process-instance-details [processInstanceId]="currentProcessInstanceId" (activitiprocesslist)="taskFormCompleted()" (processCancelled)="processCancelled()" #activitiprocessdetails></activiti-process-instance-details>
+                            <activiti-process-instance-details [processInstanceId]="currentProcessInstanceId"
+                                    (activitiprocesslist)="taskFormCompleted()"
+                                    (processCancelled)="processCancelled()"></activiti-process-instance-details>
                         </div>
                         <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="isStartProcessMode()">
                             <span>Start Process</span>

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -15,9 +15,17 @@
  * limitations under the License.
  */
 
-import { Component, AfterViewInit, ViewChild, Input, ElementRef } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { FilterRepresentationModel, ActivitiApps, ActivitiTaskList } from 'ng2-activiti-tasklist';
 import {
+    ActivitiApps,
+    ActivitiFilters,
+    ActivitiTaskDetails,
+    ActivitiTaskList,
+    FilterRepresentationModel
+} from 'ng2-activiti-tasklist';
+import {
+    ActivitiProcessFilters,
+    ActivitiProcessInstanceDetails,
     ActivitiProcessInstanceListComponent,
     ActivitiStartProcessInstance,
     ProcessInstance
@@ -45,26 +53,26 @@ const currentProcessIdNew = '__NEW__';
 })
 export class ActivitiDemoComponent implements AfterViewInit {
 
-    @ViewChild('activitiapps')
+    @ViewChild(ActivitiApps)
     activitiapps: ActivitiApps;
 
-    @ViewChild('activitifilter')
+    @ViewChild(ActivitiFilters)
-    activitifilter: any;
+    activitifilter: ActivitiFilters;
-
-    @ViewChild('activitidetails')
-    activitidetails: any;
 
     @ViewChild(ActivitiTaskList)
     activititasklist: ActivitiTaskList;
 
-    @ViewChild('activitiprocessfilter')
+    @ViewChild(ActivitiTaskDetails)
-    activitiprocessfilter: any;
+    activitidetails: ActivitiTaskDetails;
+
+    @ViewChild(ActivitiProcessFilters)
+    activitiprocessfilter: ActivitiProcessFilters;
 
     @ViewChild(ActivitiProcessInstanceListComponent)
     activitiprocesslist: ActivitiProcessInstanceListComponent;
 
-    @ViewChild('activitiprocessdetails')
+    @ViewChild(ActivitiProcessInstanceDetails)
-    activitiprocessdetails: any;
+    activitiprocessdetails: ActivitiProcessInstanceDetails;
 
     @ViewChild(ActivitiStartProcessInstance)
     activitiStartProcess: ActivitiStartProcessInstance;

ng2-components/ng2-activiti-processlist/demo/src/main.ts

@@ -15,15 +15,24 @@
  * limitations under the License.
  */
 
-import { Input, NgModule, Component, OnInit, ViewChild } from '@angular/core';
+import { DebugElement, Input, NgModule, Component, OnInit, ViewChild } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppDefinitionRepresentationModel, ActivitiTaskListModule } from 'ng2-activiti-tasklist';
 import { CoreModule } from 'ng2-alfresco-core';
-import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
+import {
+    ActivitiProcessListModule,
+    ActivitiProcessFilters,
+    ActivitiProcessInstanceDetails,
+    ActivitiProcessInstanceListComponent,
+    ActivitiStartProcessInstance,
+    ProcessInstance
+} from 'ng2-activiti-processlist';
 import { AlfrescoAuthenticationService, AlfrescoSettingsService, StorageService } from 'ng2-alfresco-core';
 import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
 
+const currentProcessIdNew = '__NEW__';
+
 @Component({
     selector: 'alfresco-app-demo',
     template: `
@@ -65,16 +74,16 @@ import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
                 <div class="page-content">
                     <div class="mdl-grid">
                         <div class="mdl-cell mdl-cell--2-col task-column">
-                            <span>Process Filters</span>
+                            <h2>Process Filters</h2>
-                            <activiti-start-process-instance [appId]="appId"></activiti-start-process-instance>
+                            <button type="button" (click)="navigateStartProcess()"
+                                    class="mdl-button" data-automation-id="btn-start-process">Start Process</button>
                             <activiti-process-instance-filters
                                         [appId]="appId"
                                         (filterClick)="onProcessFilterClick($event)"
-                                        (onSuccess)="onSuccessProcessFilterList($event)"
+                                        (onSuccess)="onSuccessProcessFilterList($event)"></activiti-process-instance-filters>
-                                        #activitiprocessfilter></activiti-process-instance-filters>
                         </div>
                         <div class="mdl-cell mdl-cell--3-col task-column">
-                            <span>Process List</span>
+                            <h2>Process List</h2>
                             <activiti-process-instance-list *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
                                        [processDefinitionKey]="processFilter.filter.processDefinitionKey"
                                        [name]="processFilter.filter.name"
@@ -82,16 +91,21 @@ import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
                                        [sort]="processFilter.filter.sort"
                                        [data]="dataProcesses"
                                         (rowClick)="onProcessRowClick($event)"
-                                        (onSuccess)="onSuccessProcessList($event)"
+                                        (onSuccess)="onSuccessProcessList($event)"></activiti-process-instance-list>
-                                        #activitiprocesslist></activiti-process-instance-list>
                         </div>
-                        <div class="mdl-cell mdl-cell--7-col task-column">
+                        <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="!isStartProcessMode()">
-                            <span>Process Details</span>
+                            <h2>Process Details</h2>
                             <activiti-process-instance-details
                                         [processInstanceId]="currentProcessInstanceId"
                                         (taskFormCompleted)="taskFormCompleted()"
-                                        (processCancelled)="processCancelled()"
+                                        (processCancelled)="processCancelled()"></activiti-process-instance-details>
-                                        #activitiprocessdetails></activiti-process-instance-details>
+                            <h2>Process Variables</h2>
+                            <activiti-process-instance-variables
+                                        [processInstanceId]="currentProcessInstanceId"></activiti-process-instance-variables>
+                        </div>
+                        <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="isStartProcessMode()">
+                            <h2>Start Process</h2>
+                            <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>
                         </div>
                     </div>
                 </div>
@@ -99,7 +113,17 @@ import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
 
         </main>
     </div>
-`
+`,
+    styles: [`
+        header {
+            min-height: 48px;
+        }
+        h2 {
+            font-size: 14px;
+            line-height: 20px;
+            margin: 10px 0;
+        }
+        `]
 })
 class MyDemoApp implements OnInit {
 
@@ -110,19 +134,22 @@ class MyDemoApp implements OnInit {
     ticket: string;
 
     @ViewChild('tabmain')
-    tabMain: any;
+    tabMain: DebugElement;
 
     @ViewChild('tabheader')
-    tabHeader: any;
+    tabHeader: DebugElement;
 
-    @ViewChild('activitiprocessfilter')
+    @ViewChild(ActivitiProcessFilters)
-    activitiprocessfilter: any;
+    activitiprocessfilter: ActivitiProcessFilters;
 
-    @ViewChild('activitiprocesslist')
+    @ViewChild(ActivitiProcessInstanceListComponent)
-    activitiprocesslist: any;
+    activitiprocesslist: ActivitiProcessInstanceListComponent;
 
-    @ViewChild('activitiprocessdetails')
+    @ViewChild(ActivitiProcessInstanceDetails)
-    activitiprocessdetails: any;
+    activitiprocessdetails: ActivitiProcessInstanceDetails;
+
+    @ViewChild(ActivitiStartProcessInstance)
+    activitiStartProcess: ActivitiStartProcessInstance;
 
     @Input()
     appId: number;
@@ -146,10 +173,8 @@ class MyDemoApp implements OnInit {
         this.dataProcesses = new ObjectDataTableAdapter(
             [],
             [
-                {type: 'text', key: 'id', title: 'Id'},
                 {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-                {type: 'text', key: 'started', title: 'Started', sortable: true},
+                {type: 'text', key: 'started', title: 'Started', sortable: true, cssClass: 'hidden'}
-                {type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true}
             ]
         );
     }
@@ -189,6 +214,19 @@ class MyDemoApp implements OnInit {
         this.changeTab('apps', 'processes');
     }
 
+    navigateStartProcess() {
+        this.currentProcessInstanceId = currentProcessIdNew;
+    }
+
+    onStartProcessInstance(instance: ProcessInstance) {
+        this.currentProcessInstanceId = instance.id;
+        this.activitiStartProcess.reset();
+    }
+
+    isStartProcessMode() {
+        return this.currentProcessInstanceId === currentProcessIdNew;
+    }
+
     onProcessFilterClick(event: any) {
         this.processFilter = event;
     }

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

@@ -25,6 +25,7 @@ import { ActivitiProcessInstanceListComponent } from './src/components/activiti-
 import { ActivitiProcessFilters } from './src/components/activiti-filters.component';
 import { ActivitiProcessInstanceHeader } from './src/components/activiti-process-instance-header.component';
 import { ActivitiProcessInstanceTasks } from './src/components/activiti-process-instance-tasks.component';
+import { ActivitiProcessInstanceVariables } from './src/components/activiti-process-instance-variables.component';
 import { ActivitiComments } from './src/components/activiti-comments.component';
 import { ActivitiProcessInstanceDetails } from './src/components/activiti-process-instance-details.component';
 import { ActivitiStartProcessInstance } from './src/components/activiti-start-process.component';
@@ -33,6 +34,7 @@ import { ActivitiProcessService } from './src/services/activiti-process.service'
 
 // components
 export * from './src/components/activiti-processlist.component';
+export * from './src/components/activiti-filters.component';
 export * from './src/components/activiti-process-instance-details.component';
 export * from './src/components/activiti-start-process.component';
 export * from './src/components/activiti-start-process-dialog.component';
@@ -49,6 +51,7 @@ export const ACTIVITI_PROCESSLIST_DIRECTIVES: [any] = [
     ActivitiProcessInstanceDetails,
     ActivitiProcessInstanceHeader,
     ActivitiProcessInstanceTasks,
+    ActivitiProcessInstanceVariables,
     ActivitiComments,
     ActivitiStartProcessInstance,
     ActivitiStartProcessInstanceDialog

ng2-components/ng2-activiti-processlist/src/components/activiti-comments.component.html

@@ -2,7 +2,7 @@
       [attr.data-badge]="comments?.length">{{ 'DETAILS.LABELS.COMMENTS' |translate }}</span>
 <div id="addComment" (click)="showDialog()" class="icon material-icons">add</div>
 <div class="mdl-tooltip" for="addComment">
-    Add a comment
+    {{ 'DETAILS.COMMENTS.BUTTON.ADD' |translate }}
 </div>
 
 <div class="menu-container" *ngIf="comments?.length > 0">
@@ -21,15 +21,15 @@
 
 
 <dialog class="mdl-dialog" #dialog>
-    <h4 class="mdl-dialog__title">New comment</h4>
+<h4 class="mdl-dialog__title">{{ 'DETAILS.COMMENTS.ADD_DIALOG.TITLE' |translate }}</h4>
     <div class="mdl-dialog__content">
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
             <textarea class="mdl-textfield__input" type="text" [(ngModel)]="message" rows="1" id="commentText"></textarea>
-            <label class="mdl-textfield__label" for="commentText">Message</label>
+            <label class="mdl-textfield__label" for="commentText">{{ 'DETAILS.COMMENTS.ADD_DIALOG.LABEL.MESSAGE' |translate }}</label>
         </div>
     </div>
     <div class="mdl-dialog__actions">
-        <button type="button" (click)="add()" class="mdl-button">Add Comment</button>
+        <button type="button" (click)="add()" class="mdl-button">{{ 'DETAILS.COMMENTS.ADD_DIALOG.BUTTON.ADD' |translate }}</button>
-        <button type="button" (click)="cancel()" class="mdl-button close">Cancel</button>
+        <button type="button" (click)="cancel()" class="mdl-button close">{{ 'DETAILS.COMMENTS.ADD_DIALOG.BUTTON.CANCEL' |translate }}</button>
     </div>
 </dialog>

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html

@@ -1,13 +1,13 @@
 <div *ngIf="!processInstanceDetails">{{ 'DETAILS.MESSAGES.NONE'|translate }}</div>
 <div *ngIf="processInstanceDetails">
     <h2 class="mdl-card__title-text">{{processInstanceDetails.name}}</h2>
-    <activiti-process-instance-header [processInstance]="processInstanceDetails" (processCancelled)="bubbleProcessCancelled()" #activitiprocessheader></activiti-process-instance-header>
+    <activiti-process-instance-header [processInstance]="processInstanceDetails" (processCancelled)="bubbleProcessCancelled()"></activiti-process-instance-header>
     <div class="mdl-grid">
         <div class="mdl-cell mdl-cell--8-col">
-            <activiti-process-instance-tasks [processInstanceDetails]="processInstanceDetails" (taskFormCompleted)="bubbleTaskFormCompleted()" #activitiprocesstasks></activiti-process-instance-tasks>
+            <activiti-process-instance-tasks [processInstanceDetails]="processInstanceDetails" (taskFormCompleted)="bubbleTaskFormCompleted()"></activiti-process-instance-tasks>
         </div>
         <div class="mdl-cell mdl-cell--4-col">
-            <activiti-process-instance-comments [processInstanceId]="processInstanceDetails.id" #activitiprocesscomments></activiti-process-instance-comments>
+            <activiti-process-instance-comments [processInstanceId]="processInstanceDetails.id"></activiti-process-instance-comments>
         </div>
     </div>
 </div>

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.ts

@@ -36,13 +36,13 @@ export class ActivitiProcessInstanceDetails implements OnChanges {
     @Input()
     processInstanceId: string;
 
-    @ViewChild('activitiprocessheader')
+    @ViewChild(ActivitiProcessInstanceHeader)
     processInstanceHeader: ActivitiProcessInstanceHeader;
 
-    @ViewChild('activitiprocesstasks')
+    @ViewChild(ActivitiProcessInstanceTasks)
     tasksList: ActivitiProcessInstanceTasks;
 
-    @ViewChild('activitiprocesscomments')
+    @ViewChild(ActivitiComments)
     commentsList: ActivitiComments;
 
     @Input()

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html

@@ -0,0 +1,66 @@
+<div id="setVariableBtn" (click)="showAddDialog()" class="icon material-icons">add</div>
+<div class="mdl-tooltip" for="setVariableBtn">
+    {{ 'DETAILS.VARIABLES.BUTTON.ADD' |translate }}
+</div>
+
+
+<div *ngIf="!isListEmpty()">
+    <alfresco-datatable [data]="data" [actions]="true" (showRowActionsMenu)="onShowRowActionsMenu($event)"
+                        (executeRowAction)="onExecuteRowAction($event)"></alfresco-datatable>
+</div>
+<div *ngIf="isListEmpty()" data-automation-id="variables-none">
+    {{ 'DETAILS.VARIABLES.NONE' | translate }}
+</div>
+
+
+<dialog class="mdl-dialog add-dialog" #addDialog>
+    <h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.ADD_DIALOG.TITLE' |translate }}</h4>
+    <div class="mdl-dialog__content">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label class="mdl-textfield__label" for="addVariableName">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.NAME' |translate }}</label>
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="addVariableName" [readonly]="editMode" />
+        </div>
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label class="mdl-textfield__label" for="addVariableValue">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.VALUE' |translate }}</label>
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableValue" id="addVariableValue" />
+        </div>
+    </div>
+    <div class="mdl-dialog__actions">
+        <button type="button" (click)="add()" class="mdl-button">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.SET' |translate }}</button>
+        <button type="button" (click)="closeAddDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.CANCEL' |translate }}</button>
+    </div>
+</dialog>
+
+
+<dialog class="mdl-dialog edit-dialog" #editDialog>
+    <h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.EDIT_DIALOG.TITLE' |translate }}</h4>
+    <div class="mdl-dialog__content">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label class="mdl-textfield__label" for="editVariableName">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.NAME' |translate }}</label>
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="editVariableName" [readonly]="true" />
+        </div>
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label class="mdl-textfield__label" for="editVariableValue">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.VALUE' |translate }}</label>
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableValue" id="editVariableValue" />
+        </div>
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label class="mdl-textfield__label" for="editVariableScope">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.SCOPE' |translate }}</label>
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="editVariableScope" [readonly]="true" />
+        </div>
+    </div>
+    <div class="mdl-dialog__actions">
+        <button type="button" (click)="edit()" class="mdl-button">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.SET' |translate }}</button>
+        <button type="button" (click)="closeEditDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.CANCEL' |translate }}</button>
+    </div>
+</dialog>
+
+
+<dialog class="mdl-dialog error-dialog" #errorDialog>
+    <h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.ERROR_DIALOG.TITLE' |translate }}</h4>
+    <div class="mdl-dialog__content">
+        <p>{{ 'DETAILS.VARIABLES.ERROR_DIALOG.DESCRIPTION' |translate }}</p>
+    </div>
+    <div class="mdl-dialog__actions">
+        <button type="button" (click)="closeErrorDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.OK' |translate }}</button>
+    </div>
+</dialog>

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts

@@ -0,0 +1,364 @@
+/*!
+ * @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.
+ */
+
+import { DebugElement, SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, async, fakeAsync, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Observable } from 'rxjs/Rx';
+
+import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
+import { DataTableModule, ObjectDataTableAdapter, ObjectDataRow } from 'ng2-alfresco-datatable';
+
+import { ActivitiProcessInstanceVariables } from './activiti-process-instance-variables.component';
+import { ActivitiProcessService } from './../services/activiti-process.service';
+import { TranslationMock } from './../assets/translation.service.mock';
+
+describe('ActivitiProcessInstanceVariables', () => {
+
+    let componentHandler: any;
+    let service: ActivitiProcessService;
+    let component: ActivitiProcessInstanceVariables;
+    let fixture: ComponentFixture<ActivitiProcessInstanceVariables>;
+    let getVariablesSpy: jasmine.Spy;
+    let createOrUpdateProcessInstanceVariablesSpy: jasmine.Spy;
+    let deleteProcessInstanceVariableSpy: jasmine.Spy;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule,
+                DataTableModule
+            ],
+            declarations: [
+                ActivitiProcessInstanceVariables
+            ],
+            providers: [
+                { provide: AlfrescoTranslationService, useClass: TranslationMock },
+                ActivitiProcessService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+
+        fixture = TestBed.createComponent(ActivitiProcessInstanceVariables);
+        component = fixture.componentInstance;
+        service = fixture.debugElement.injector.get(ActivitiProcessService);
+
+        getVariablesSpy = spyOn(service, 'getProcessInstanceVariables').and.returnValue(Observable.of([{
+            name: 'var1',
+            value: 'Test1'
+        }, {
+            name: 'var2',
+            value: 'Test2'
+        }, {
+            name: 'var3',
+            value: 'Test3'
+        }]));
+        createOrUpdateProcessInstanceVariablesSpy = spyOn(service, 'createOrUpdateProcessInstanceVariables').and.returnValue(Observable.of({id: 123, message: 'Test'}));
+        deleteProcessInstanceVariableSpy = spyOn(service, 'deleteProcessInstanceVariable').and.returnValue(Observable.of());
+
+        componentHandler = jasmine.createSpyObj('componentHandler', [
+            'upgradeAllRegistered',
+            'upgradeElement'
+        ]);
+        window['componentHandler'] = componentHandler;
+    });
+
+    it('should load variables when processInstanceId specified', () => {
+        component.processInstanceId = '123';
+        fixture.detectChanges();
+        expect(getVariablesSpy).toHaveBeenCalled();
+    });
+
+    it('should emit an error when an error occurs loading variables', () => {
+        let emitSpy = spyOn(component.error, 'emit');
+        getVariablesSpy.and.returnValue(Observable.throw({}));
+        component.processInstanceId = '123';
+        fixture.detectChanges();
+        expect(emitSpy).toHaveBeenCalled();
+    });
+
+    it('should not fetch variables when no processInstanceId is specified', () => {
+        fixture.detectChanges();
+        expect(getVariablesSpy).not.toHaveBeenCalled();
+    });
+
+    it('should not display list when no processInstanceId is specified', fakeAsync(() => {
+        fixture.detectChanges();
+        fixture.whenStable();
+        tick();
+        let datatable: DebugElement = fixture.debugElement.query(By.css('alfresco-datatable'));
+        expect(datatable).toBeNull();
+    }));
+
+    it('should use the default schemaColumn as default', () => {
+        fixture.detectChanges();
+        expect(component.data.getColumns()).toBeDefined();
+        expect(component.data.getColumns().length).toEqual(3);
+    });
+
+    it('should use the schemaColumn passed in input', () => {
+        component.data = new ObjectDataTableAdapter(
+            [],
+            [
+                {type: 'text', key: 'fake-id', title: 'Name'}
+            ]
+        );
+
+        fixture.detectChanges();
+        expect(component.data.getColumns()).toBeDefined();
+        expect(component.data.getColumns().length).toEqual(1);
+    });
+
+    it('should display list when the process has variables', fakeAsync(() => {
+        component.processInstanceId = '123';
+        fixture.detectChanges();
+        fixture.whenStable();
+        tick();
+        let datatable: DebugElement = fixture.debugElement.query(By.css('alfresco-datatable'));
+        expect(datatable).not.toBeNull();
+    }));
+
+    it('should display correct number of data table rows when the process has variables', fakeAsync(() => {
+        component.processInstanceId = '123';
+        fixture.detectChanges();
+        fixture.whenStable();
+        tick();
+        fixture.detectChanges();
+        expect(fixture.debugElement.queryAll(By.css('tbody tr')).length).toBe(3);
+    }));
+
+    describe('change detection', () => {
+
+        let change = new SimpleChange('123', '456');
+        let nullChange = new SimpleChange('123', null);
+
+        beforeEach(async(() => {
+            component.processInstanceId = '123';
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                getVariablesSpy.calls.reset();
+            });
+        }));
+
+        it('should fetch new variables when processInstanceId changed', () => {
+            component.ngOnChanges({ 'processInstanceId': change });
+            expect(getVariablesSpy).toHaveBeenCalledWith('456');
+        });
+
+        it('should NOT fetch new variables when empty changeset made', () => {
+            component.ngOnChanges({});
+            expect(getVariablesSpy).not.toHaveBeenCalled();
+        });
+
+        it('should NOT fetch new variables when processInstanceId changed to null', () => {
+            component.ngOnChanges({ 'processInstanceId': nullChange });
+            expect(getVariablesSpy).not.toHaveBeenCalled();
+        });
+
+        it('should set a placeholder message when processInstanceId changed to null', () => {
+            component.ngOnChanges({ 'processInstanceId': nullChange });
+            fixture.detectChanges();
+            expect(fixture.debugElement.query(By.css('[data-automation-id="variables-none"]'))).not.toBeNull();
+        });
+    });
+
+    describe('Add variable', () => {
+
+        beforeEach(async(() => {
+            component.processInstanceId = '123';
+            fixture.detectChanges();
+            fixture.whenStable();
+        }));
+
+        it('should display a dialog to the user when the Add button clicked', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.add-dialog')).nativeElement;
+            let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
+            component.showAddDialog();
+            expect(showSpy).toHaveBeenCalled();
+        });
+
+        it('should call service to add a variable', () => {
+            component.showAddDialog();
+            component.variableName = 'Test var';
+            component.variableValue = 'Test 222';
+            component.add();
+            let serviceArgs = createOrUpdateProcessInstanceVariablesSpy.calls.mostRecent().args;
+            let sentProcessId = serviceArgs[0];
+            let sentProcesses = serviceArgs[1];
+            expect(serviceArgs.length).toBe(2);
+            expect(sentProcessId).toBe('123');
+            expect(sentProcesses.length).toBe(1);
+            expect(sentProcesses[0].name).toBe('Test var');
+            expect(sentProcesses[0].value).toBe('Test 222');
+            expect(sentProcesses[0].scope).toBe('global');
+        });
+
+        it('should emit an error when an error occurs adding the variable', () => {
+            let emitSpy = spyOn(component.error, 'emit');
+            createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Observable.throw({}));
+            component.showAddDialog();
+            component.variableName = 'Test var';
+            component.variableValue = 'Test 222';
+            component.add();
+            expect(emitSpy).toHaveBeenCalled();
+        });
+
+        it('should close add dialog when close button clicked', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.add-dialog')).nativeElement;
+            let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
+            component.showAddDialog();
+            component.closeAddDialog();
+            expect(closeSpy).toHaveBeenCalled();
+        });
+
+    });
+
+    describe('Edit variable', () => {
+
+        let fakeVariable = {
+            name: 'fakeVar',
+            value: 'my value 4',
+            scope: 'global'
+        };
+
+        beforeEach(async(() => {
+            component.processInstanceId = '123';
+            fixture.detectChanges();
+            fixture.whenStable();
+        }));
+
+        it('should display a dialog to the user when the Edit action clicked', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.edit-dialog')).nativeElement;
+            let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
+            component.onExecuteRowAction({
+                args: {
+                    row: new ObjectDataRow(fakeVariable),
+                    action: {
+                        id: 'edit'
+                    }
+                }
+            });
+            expect(showSpy).toHaveBeenCalled();
+        });
+
+        it('should call service to edit a variable', () => {
+            component.showEditDialog(new ObjectDataRow(fakeVariable));
+            component.variableValue = 'Test 222';
+            component.edit();
+            let serviceArgs = createOrUpdateProcessInstanceVariablesSpy.calls.mostRecent().args;
+            let sentProcessId = serviceArgs[0];
+            let sentProcesses = serviceArgs[1];
+            expect(serviceArgs.length).toBe(2);
+            expect(sentProcessId).toBe('123');
+            expect(sentProcesses.length).toBe(1);
+            expect(sentProcesses[0].name).toBe(fakeVariable.name);
+            expect(sentProcesses[0].value).toBe('Test 222');
+            expect(sentProcesses[0].scope).toBe(fakeVariable.scope);
+        });
+
+        it('should emit an error when an error occurs editing the variable', () => {
+            let emitSpy = spyOn(component.error, 'emit');
+            createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Observable.throw({}));
+            component.showEditDialog(new ObjectDataRow(fakeVariable));
+            component.variableName = 'Test var';
+            component.variableValue = 'Test 222';
+            component.edit();
+            expect(emitSpy).toHaveBeenCalled();
+        });
+
+        it('should close edit dialog when close button clicked', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.edit-dialog')).nativeElement;
+            let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
+            component.showEditDialog(new ObjectDataRow(fakeVariable));
+            component.closeEditDialog();
+            expect(closeSpy).toHaveBeenCalled();
+        });
+
+    });
+
+    describe('Delete variable', () => {
+
+        let fakeVariable = {
+            name: 'fakeVar',
+            value: 'my value 4',
+            scope: 'global'
+        };
+
+        let deleteAction = {
+            id: 'delete'
+        };
+
+        beforeEach(async(() => {
+            component.processInstanceId = '123';
+            fixture.detectChanges();
+            fixture.whenStable();
+        }));
+
+        it('should call service to delete the variable', () => {
+            component.variableValue = 'Test 222';
+            component.onExecuteRowAction({
+                args: {
+                    row: new ObjectDataRow(fakeVariable),
+                    action: deleteAction
+                }
+            });
+            let serviceArgs = deleteProcessInstanceVariableSpy.calls.mostRecent().args;
+            let sentProcessId = serviceArgs[0];
+            let sentVariableName = serviceArgs[1];
+            expect(serviceArgs.length).toBe(2);
+            expect(sentProcessId).toBe('123');
+            expect(sentVariableName).toBe(fakeVariable.name);
+        });
+
+        it('should emit an error when an error occurs deleting the variable', () => {
+            let emitSpy = spyOn(component.error, 'emit');
+            deleteProcessInstanceVariableSpy.and.returnValue(Observable.throw({}));
+            component.onExecuteRowAction({
+                args: {
+                    row: new ObjectDataRow(fakeVariable),
+                    action: deleteAction
+                }
+            });
+            expect(emitSpy).toHaveBeenCalled();
+        });
+
+        it('should display error dialog when an error is triggered', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.error-dialog')).nativeElement;
+            let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
+            deleteProcessInstanceVariableSpy.and.returnValue(Observable.throw({}));
+            component.onExecuteRowAction({
+                args: {
+                    row: new ObjectDataRow(fakeVariable),
+                    action: deleteAction
+                }
+            });
+            expect(showSpy).toHaveBeenCalled();
+        });
+
+        it('should close error dialog when close button clicked', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.error-dialog')).nativeElement;
+            let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
+            component.showErrorDialog();
+            component.closeErrorDialog();
+            expect(closeSpy).toHaveBeenCalled();
+        });
+
+    });
+
+});

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts

@@ -0,0 +1,277 @@
+/*!
+ * @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.
+ */
+
+import { Component, DebugElement, EventEmitter, Input, Output, OnInit, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
+
+import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { ObjectDataTableAdapter, DataTableAdapter, ObjectDataRow } from 'ng2-alfresco-datatable';
+import { ProcessInstanceVariable } from './../models/process-instance-variable.model';
+import { ActivitiProcessService } from './../services/activiti-process.service';
+
+declare let componentHandler: any;
+declare let dialogPolyfill: any;
+
+@Component({
+    selector: 'activiti-process-instance-variables',
+    moduleId: module.id,
+    templateUrl: './activiti-process-instance-variables.component.html',
+    styleUrls: [],
+    providers: [ActivitiProcessService]
+})
+export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
+
+    @Input()
+    processInstanceId: string;
+
+    @Input()
+    data: DataTableAdapter;
+
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
+    @ViewChild('addDialog')
+    addDialog: DebugElement;
+
+    @ViewChild('editDialog')
+    editDialog: DebugElement;
+
+    @ViewChild('errorDialog')
+    errorDialog: DebugElement;
+
+    private defaultSchemaColumn: any[] = [
+        {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
+        {type: 'text', key: 'value', title: 'Value', sortable: true},
+        {type: 'text', key: 'scope', title: 'Scope', sortable: true}
+    ];
+
+    variableName: string;
+    variableValue: string;
+    variableScope: string;
+
+    /**
+     * Constructor
+     * @param translate Translation service
+     * @param activitiProcess Process service
+     */
+    constructor(private translate: AlfrescoTranslationService,
+                private activitiProcess: ActivitiProcessService) {
+
+        if (translate) {
+            translate.addTranslationFolder('ng2-activiti-processlist', 'node_modules/ng2-activiti-processlist/dist/src');
+        }
+
+    }
+
+    ngOnInit() {
+        if (!this.data) {
+            this.data = this.initDefaultSchemaColumns();
+        }
+        if (this.processInstanceId) {
+            this.getProcessInstanceVariables(this.processInstanceId);
+            return;
+        }
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        let processInstanceId = changes['processInstanceId'];
+        if (processInstanceId) {
+            if (processInstanceId.currentValue) {
+                this.getProcessInstanceVariables(processInstanceId.currentValue);
+            } else {
+                this.resetVariables();
+            }
+        }
+    }
+
+    /**
+     * Check if the list is empty
+     * @returns {ObjectDataTableAdapter|boolean}
+     */
+    isListEmpty(): boolean {
+        return this.data === undefined ||
+            (this.data && this.data.getRows() && this.data.getRows().length === 0);
+    }
+
+    /**
+     * Return an initDefaultSchemaColumns instance with the default Schema Column
+     * @returns {ObjectDataTableAdapter}
+     */
+    private initDefaultSchemaColumns(): ObjectDataTableAdapter {
+        return new ObjectDataTableAdapter(
+            [],
+            this.defaultSchemaColumn
+        );
+    }
+
+    /**
+     * Create an array of ObjectDataRow
+     * @param instances
+     * @returns {ObjectDataRow[]}
+     */
+    private createDataRow(instances: ProcessInstanceVariable[]): ObjectDataRow[] {
+        let instancesRows: ObjectDataRow[] = [];
+        instances.forEach((row) => {
+            instancesRows.push(new ObjectDataRow({
+                name: row.name,
+                value: row.value,
+                scope: row.scope
+            }));
+        });
+        return instancesRows;
+    }
+
+    /**
+     * Render the instances list
+     *
+     * @param instances
+     */
+    private renderInstances(instances: any[]) {
+        this.data.setRows(instances);
+    }
+
+    private getProcessInstanceVariables(processInstanceId: string) {
+        if (processInstanceId) {
+            this.activitiProcess.getProcessInstanceVariables(processInstanceId).subscribe(
+                (res: ProcessInstanceVariable[]) => {
+                    let instancesRow = this.createDataRow(res);
+                    this.renderInstances(instancesRow);
+                },
+                (err) => {
+                    this.error.emit(err);
+                }
+            );
+        } else {
+            this.resetVariables();
+        }
+    }
+
+    private resetVariables() {
+        if (this.data) {
+            this.data.setRows([]);
+        }
+    }
+
+    private polyfillDialog(dialog: DebugElement) {
+        if (!dialog.nativeElement.showModal) {
+            dialogPolyfill.registerDialog(dialog.nativeElement);
+        }
+    }
+
+    public showAddDialog() {
+        this.resetForm();
+        this.polyfillDialog(this.addDialog);
+        this.addDialog.nativeElement.showModal();
+    }
+
+    public showEditDialog(row: ObjectDataRow) {
+        this.variableName = row.getValue('name');
+        this.variableValue = row.getValue('value');
+        this.variableScope = row.getValue('scope');
+        this.polyfillDialog(this.editDialog);
+        this.editDialog.nativeElement.showModal();
+    }
+
+    public showErrorDialog() {
+        this.polyfillDialog(this.errorDialog);
+        this.errorDialog.nativeElement.showModal();
+    }
+
+    public add() {
+        this.activitiProcess.createOrUpdateProcessInstanceVariables(this.processInstanceId, [new ProcessInstanceVariable({
+            name: this.variableName,
+            value: this.variableValue,
+            scope: this.variableScope
+        })]).subscribe(
+            (res: ProcessInstanceVariable[]) => {
+                this.getProcessInstanceVariables(this.processInstanceId);
+                this.resetForm();
+            },
+            (err) => {
+                this.showErrorDialog();
+                this.error.emit(err);
+            }
+        );
+        this.closeAddDialog();
+    }
+
+    public edit() {
+        this.activitiProcess.createOrUpdateProcessInstanceVariables(this.processInstanceId, [new ProcessInstanceVariable({
+            name: this.variableName,
+            value: this.variableValue,
+            scope: this.variableScope
+        })]).subscribe(
+            (res: ProcessInstanceVariable[]) => {
+                this.getProcessInstanceVariables(this.processInstanceId);
+                this.resetForm();
+            },
+            (err) => {
+                this.showErrorDialog();
+                this.error.emit(err);
+            }
+        );
+        this.closeEditDialog();
+    }
+
+    public closeAddDialog() {
+        this.addDialog.nativeElement.close();
+    }
+
+    public closeEditDialog() {
+        this.editDialog.nativeElement.close();
+    }
+
+    public closeErrorDialog() {
+        this.errorDialog.nativeElement.close();
+    }
+
+    private resetForm() {
+        this.variableName = '';
+        this.variableValue = '';
+        this.variableScope = 'global';
+    }
+
+    private onDeleteVariable(row: ObjectDataRow) {
+        this.activitiProcess.deleteProcessInstanceVariable(this.processInstanceId, row.getValue('name')).subscribe(() => {
+            this.getProcessInstanceVariables(this.processInstanceId);
+        },
+        (err) => {
+            this.showErrorDialog();
+            this.error.emit(err);
+        });
+    }
+
+    onExecuteRowAction(event) {
+        let row: ObjectDataRow = event.args.row;
+        let action = event.args.action;
+        if (action && action.id === 'delete') {
+            this.onDeleteVariable(row);
+        }
+        if (action && action.id === 'edit') {
+            this.showEditDialog(row);
+        }
+    }
+
+    onShowRowActionsMenu(event) {
+        event.args.actions = [{
+            id: 'delete',
+            title: 'Delete'
+        }, {
+            id: 'edit',
+            title: 'Edit'
+        }];
+    }
+}

ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts

@@ -54,6 +54,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
     let fixture: ComponentFixture<ActivitiProcessInstanceListComponent>;
     let component: ActivitiProcessInstanceListComponent;
     let service: ActivitiProcessService;
+    let getProcessInstancesSpy: jasmine.Spy;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -71,6 +72,8 @@ describe('ActivitiProcessInstanceListComponent', () => {
             component = fixture.componentInstance;
             service = fixture.debugElement.injector.get(ActivitiProcessService);
 
+            getProcessInstancesSpy = spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
+
             componentHandler = jasmine.createSpyObj('componentHandler', [
                 'upgradeAllRegistered',
                 'upgradeElement'
@@ -106,7 +109,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
 
     it('should emit onSuccess event when process instances loaded', fakeAsync(() => {
         let emitSpy = spyOn(component.onSuccess, 'emit');
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
         component.appId = '1';
         component.state = 'open';
         component.processDefinitionKey = null;
@@ -116,7 +118,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
     }));
 
     it('should return the process instances list', (done) => {
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
         component.appId = '1';
         component.state = 'open';
         component.processDefinitionKey = null;
@@ -133,7 +134,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
     });
 
     it('should return the process instances list filtered by processDefinitionKey', (done) => {
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
         component.appId = '1';
         component.state = 'open';
         component.processDefinitionKey = 'fakeprocess';
@@ -157,7 +157,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
     it('should throw an exception when the response is wrong', fakeAsync(() => {
         let emitSpy: jasmine.Spy = spyOn(component.onError, 'emit');
         let fakeError = 'Fake server error';
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.throw(fakeError));
+        getProcessInstancesSpy.and.returnValue(Observable.throw(fakeError));
         component.appId = '1';
         component.state = 'open';
         fixture.detectChanges();
@@ -166,7 +166,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
     }));
 
     it('should emit onSuccess event when reload() called', fakeAsync(() => {
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
         component.appId = '1';
         component.state = 'open';
         component.processDefinitionKey = null;
@@ -179,7 +178,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
     }));
 
     it('should reload processes when reload() is called', (done) => {
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
         component.data = new ObjectDataTableAdapter(
             [],
             [
@@ -217,7 +215,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
     describe('component changes', () => {
 
         beforeEach(() => {
-            spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
             component.data = new ObjectDataTableAdapter(
                 [],
                 [

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

@@ -36,7 +36,49 @@
             "TASK_CLOSE": "Close"
         },
         "COMMENTS": {
-            "NONE": "No comments."
+            "NONE": "No comments.",
+            "BUTTON": {
+                "ADD": "Add a comment"
+            },
+            "ADD_DIALOG": {
+                "TITLE": "New comment",
+                "LABEL": {
+                    "MESSAGE": "Message"
+                },
+                "BUTTON": {
+                    "ADD": "Add Comment",
+                    "CANCEL": "Cancel"
+                }
+            }
+        },
+        "VARIABLES": {
+            "NONE": "No variables set.",
+            "BUTTON": {
+                "ADD": "Set a variable"
+            },
+            "DIALOG": {
+                "BUTTON": {
+                    "SET": "Set",
+                    "OK": "OK",
+                    "CANCEL": "Cancel",
+                    "CLOSE": "Close"
+                }
+            },
+            "ADD_DIALOG": {
+                "TITLE": "Set process variable",
+                "LABEL": {
+                    "NAME": "Name",
+                    "VALUE": "Value",
+                    "SCOPE": "Scope"
+                }
+            },
+            "EDIT_DIALOG": {
+                "TITLE": "Edit process variable"
+            },
+            "ERROR_DIALOG": {
+                "TITLE": "Sorry, an error occurred",
+                "DESCRIPTION": "Could not perform the requested operation, please check that you have permission."
+            }
         }
     },
     "START_PROCESS": {

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

@@ -18,3 +18,4 @@
 export * from './process-definition.model';
 export * from './process-instance.model';
 export * from './process-instance-filter.model';
+export * from './process-instance-variable.model';

ng2-components/ng2-activiti-processlist/src/models/process-instance-variable.model.ts

@@ -0,0 +1,28 @@
+/*!
+ * @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 class ProcessInstanceVariable {
+    name: string;
+    scope: string;
+    value: any;
+
+    constructor(obj?: any) {
+        this.name = obj && obj.name !== undefined ? obj.name : null;
+        this.scope = obj && obj.scope !== undefined ? obj.scope : null;
+        this.value = obj && obj.value !== undefined ? obj.value : null;
+    }
+}

ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts

@@ -37,6 +37,7 @@ import {
 } from '../assets/activiti-process.service.mock';
 import { exampleProcess } from '../assets/activiti-process.model.mock';
 import { ProcessFilterRequestRepresentation } from '../models/process-instance-filter.model';
+import { ProcessInstanceVariable } from '../models/process-instance-variable.model';
 import { ActivitiProcessService } from './activiti-process.service';
 
 describe('ActivitiProcessService', () => {
@@ -681,4 +682,123 @@ describe('ActivitiProcessService', () => {
 
         });
     });
+
+    describe('process variables', () => {
+
+        let getVariablesSpy: jasmine.Spy;
+        let createOrUpdateProcessInstanceVariablesSpy: jasmine.Spy;
+        let deleteProcessInstanceVariableSpy: jasmine.Spy;
+
+        beforeEach(() => {
+            getVariablesSpy = spyOn(alfrescoApi.activiti.processInstanceVariablesApi, 'getProcessInstanceVariables').and.returnValue(Promise.resolve([{
+                name: 'var1',
+                value: 'Test1'
+            }, {
+                name: 'var3',
+                value: 'Test3'
+            }]));
+
+            createOrUpdateProcessInstanceVariablesSpy = spyOn(alfrescoApi.activiti.processInstanceVariablesApi,
+                'createOrUpdateProcessInstanceVariables').and.returnValue(Promise.resolve({}));
+
+            deleteProcessInstanceVariableSpy = spyOn(alfrescoApi.activiti.processInstanceVariablesApi,
+                'deleteProcessInstanceVariable').and.returnValue(Promise.resolve());
+        });
+
+        describe('get variables', () => {
+
+            it('should call service to fetch variables', () => {
+                service.getProcessInstanceVariables(null);
+                expect(getVariablesSpy).toHaveBeenCalled();
+            });
+
+            it('should pass on any error that is returned by the API', async(() => {
+                getVariablesSpy = getVariablesSpy.and.returnValue(Promise.reject(fakeError));
+                service.getProcessInstanceVariables(null).subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe(fakeError);
+                    }
+                );
+            }));
+
+            it('should return a default error if no data is returned by the API', async(() => {
+                getVariablesSpy = getVariablesSpy.and.returnValue(Promise.reject(null));
+                service.getProcessInstanceVariables(null).subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe('Server error');
+                    }
+                );
+            }));
+
+        });
+
+        describe('create or update variables', () => {
+
+            let updatedVariables = [new ProcessInstanceVariable({
+                name: 'var1',
+                value: 'Test1'
+            }), new ProcessInstanceVariable({
+                name: 'var3',
+                value: 'Test3'
+            })];
+
+            it('should call service to create or update variables', () => {
+                service.createOrUpdateProcessInstanceVariables('123', updatedVariables);
+                expect(createOrUpdateProcessInstanceVariablesSpy).toHaveBeenCalled();
+            });
+
+            it('should pass on any error that is returned by the API', async(() => {
+                createOrUpdateProcessInstanceVariablesSpy = createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Promise.reject(fakeError));
+                service.createOrUpdateProcessInstanceVariables('123', updatedVariables).subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe(fakeError);
+                    }
+                );
+            }));
+
+            it('should return a default error if no data is returned by the API', async(() => {
+                createOrUpdateProcessInstanceVariablesSpy = createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Promise.reject(null));
+                service.createOrUpdateProcessInstanceVariables('123', updatedVariables).subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe('Server error');
+                    }
+                );
+            }));
+
+        });
+
+        describe('delete variables', () => {
+
+            it('should call service to delete variables', () => {
+                service.deleteProcessInstanceVariable('123', 'myVar');
+                expect(deleteProcessInstanceVariableSpy).toHaveBeenCalled();
+            });
+
+            it('should pass on any error that is returned by the API', async(() => {
+                deleteProcessInstanceVariableSpy = deleteProcessInstanceVariableSpy.and.returnValue(Promise.reject(fakeError));
+                service.deleteProcessInstanceVariable('123', 'myVar').subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe(fakeError);
+                    }
+                );
+            }));
+
+            it('should return a default error if no data is returned by the API', async(() => {
+                deleteProcessInstanceVariableSpy = deleteProcessInstanceVariableSpy.and.returnValue(Promise.reject(null));
+                service.deleteProcessInstanceVariable('123', 'myVar').subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe('Server error');
+                    }
+                );
+            }));
+
+        });
+
+    });
 });

ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts

@@ -18,6 +18,7 @@
 import { AlfrescoApiService } from 'ng2-alfresco-core';
 import { ProcessInstance, ProcessDefinitionRepresentation } from '../models/index';
 import { ProcessFilterRequestRepresentation } from '../models/process-instance-filter.model';
+import { ProcessInstanceVariable } from './../models/process-instance-variable.model';
 import {
     AppDefinitionRepresentationModel,
     Comment,
@@ -251,6 +252,28 @@ export class ActivitiProcessService {
             .catch(this.handleError);
     }
 
+    getProcessInstanceVariables(processDefinitionId: string): Observable<ProcessInstanceVariable[]> {
+        return Observable.fromPromise(
+            this.apiService.getInstance().activiti.processInstanceVariablesApi.getProcessInstanceVariables(processDefinitionId)
+            )
+            .map((processVars: any[]) => processVars.map((pd) => new ProcessInstanceVariable(pd)))
+            .catch(this.handleError);
+    }
+
+    createOrUpdateProcessInstanceVariables(processDefinitionId: string, variables: ProcessInstanceVariable[]): Observable<ProcessInstanceVariable[]> {
+        return Observable.fromPromise(
+            this.apiService.getInstance().activiti.processInstanceVariablesApi.createOrUpdateProcessInstanceVariables(processDefinitionId, variables)
+            )
+            .catch(this.handleError);
+    }
+
+    deleteProcessInstanceVariable(processDefinitionId: string, variableName: string): Observable<void> {
+        return Observable.fromPromise(
+            this.apiService.getInstance().activiti.processInstanceVariablesApi.deleteProcessInstanceVariable(processDefinitionId, variableName)
+            )
+            .catch(this.handleError);
+    }
+
     private callApiGetUserProcessInstanceFilters(filterOpts) {
         return this.apiService.getInstance().activiti.userFiltersApi.getUserProcessInstanceFilters(filterOpts);
     }