Add edit and delete actions for process variables

Refs #775

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

@@ -1,31 +1,66 @@
-<div id="setVariableBtn" (click)="showDialog()" class="icon material-icons">add</div>
+<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"></alfresco-datatable>
+    <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" #dialog>
+<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="variableName">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.NAME' |translate }}</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="variableName" />
+            <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="variableValue">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.VALUE' |translate }}</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="variableValue" />
+            <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.ADD_DIALOG.BUTTON.SET' |translate }}</button>
+        <button type="button" (click)="add()" class="mdl-button">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.SET' |translate }}</button>
-        <button type="button" (click)="cancel()" class="mdl-button close">{{ 'DETAILS.VARIABLES.ADD_DIALOG.BUTTON.CANCEL' |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

@@ -21,7 +21,7 @@ import { By } from '@angular/platform-browser';
 import { Observable } from 'rxjs/Rx';
 
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
-import { DataTableModule, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
+import { DataTableModule, ObjectDataTableAdapter, ObjectDataRow } from 'ng2-alfresco-datatable';
 
 import { ActivitiProcessInstanceVariables } from './activiti-process-instance-variables.component';
 import { ActivitiProcessService } from './../services/activiti-process.service';
@@ -35,6 +35,7 @@ describe('ActivitiProcessInstanceVariables', () => {
     let fixture: ComponentFixture<ActivitiProcessInstanceVariables>;
     let getVariablesSpy: jasmine.Spy;
     let createOrUpdateProcessInstanceVariablesSpy: jasmine.Spy;
+    let deleteProcessInstanceVariableSpy: jasmine.Spy;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -69,6 +70,7 @@ describe('ActivitiProcessInstanceVariables', () => {
             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',
@@ -176,7 +178,7 @@ describe('ActivitiProcessInstanceVariables', () => {
         });
     });
 
-    describe('Add comment', () => {
+    describe('Add variable', () => {
 
         beforeEach(async(() => {
             component.processInstanceId = '123';
@@ -185,14 +187,14 @@ describe('ActivitiProcessInstanceVariables', () => {
         }));
 
         it('should display a dialog to the user when the Add button clicked', () => {
-            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog')).nativeElement;
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.add-dialog')).nativeElement;
             let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
-            component.showDialog();
+            component.showAddDialog();
             expect(showSpy).toHaveBeenCalled();
         });
 
-        it('should call service to add a comment', () => {
+        it('should call service to add a variable', () => {
-            component.showDialog();
+            component.showAddDialog();
             component.variableName = 'Test var';
             component.variableValue = 'Test 222';
             component.add();
@@ -210,7 +212,7 @@ describe('ActivitiProcessInstanceVariables', () => {
         it('should emit an error when an error occurs adding the variable', () => {
             let emitSpy = spyOn(component.error, 'emit');
             createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Observable.throw({}));
-            component.showDialog();
+            component.showAddDialog();
             component.variableName = 'Test var';
             component.variableValue = 'Test 222';
             component.add();
@@ -218,10 +220,142 @@ describe('ActivitiProcessInstanceVariables', () => {
         });
 
         it('should close add dialog when close button clicked', () => {
-            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog')).nativeElement;
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.add-dialog')).nativeElement;
             let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
-            component.showDialog();
+            component.showAddDialog();
-            component.cancel();
+            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

@@ -43,8 +43,14 @@ export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
-    @ViewChild('dialog')
+    @ViewChild('addDialog')
-    dialog: DebugElement;
+    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},
@@ -54,6 +60,7 @@ export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
 
     variableName: string;
     variableValue: string;
+    variableScope: string;
 
     /**
      * Constructor
@@ -158,40 +165,113 @@ export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
         }
     }
 
-    public showDialog() {
+    private polyfillDialog(dialog: DebugElement) {
-        if (!this.dialog.nativeElement.showModal) {
+        if (!dialog.nativeElement.showModal) {
-            dialogPolyfill.registerDialog(this.dialog.nativeElement);
+            dialogPolyfill.registerDialog(dialog.nativeElement);
-        }
-        if (this.dialog) {
-            this.dialog.nativeElement.showModal();
         }
     }
 
+    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: 'global'
+            scope: this.variableScope
         })]).subscribe(
             (res: ProcessInstanceVariable[]) => {
                 this.getProcessInstanceVariables(this.processInstanceId);
                 this.resetForm();
             },
             (err) => {
+                this.showErrorDialog();
                 this.error.emit(err);
             }
         );
-        this.cancel();
+        this.closeAddDialog();
     }
 
-    public cancel() {
+    public edit() {
-        if (this.dialog) {
+        this.activitiProcess.createOrUpdateProcessInstanceVariables(this.processInstanceId, [new ProcessInstanceVariable({
-            this.dialog.nativeElement.close();
+            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/i18n/en.json

@@ -56,16 +56,28 @@
             "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"
+                    "VALUE": "Value",
-                },
+                    "SCOPE": "Scope"
-                "BUTTON": {
-                    "SET": "Set",
-                    "CANCEL": "Cancel"
                 }
+            },
+            "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."
             }
         }
     },

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

@@ -267,6 +267,13 @@ export class ActivitiProcessService {
             .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);
     }