inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add edit and delete actions for process variables

Browse Source 
Refs #775
This commit is contained in:
Will Abson 2016-12-04 12:29:08 +00:00
parent 676180517e
commit a49f7dd7f7
6 changed files with 426 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
<input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="variableName" />
<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="variableValue">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.VALUE' |translate }}</label>
<input class="mdl-textfield__input" type="text" [(ngModel)]="variableValue" id="variableValue" />
<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.ADD_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)="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>

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

@ -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', () => {
component.showDialog();
it('should call service to add a variable', () => {
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.cancel();
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();
});

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

@ -43,8 +43,14 @@ export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
@Output()
error: EventEmitter<any> = new EventEmitter<any>();
@ViewChild('dialog')
dialog: DebugElement;
@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},
@ -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() {
if (!this.dialog.nativeElement.showModal) {
dialogPolyfill.registerDialog(this.dialog.nativeElement);
}
if (this.dialog) {
this.dialog.nativeElement.showModal();
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: '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() {
if (this.dialog) {
this.dialog.nativeElement.close();
}
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'
}];
}
}

22
ng2-components/ng2-activiti-processlist/src/i18n/en.json
View File

@ -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"
},
"BUTTON": {
"SET": "Set",
"CANCEL": "Cancel"
"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."
}
}
},

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

@ -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');
}
);
}));
});
});
});

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

@ -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);
}