From f42c08fe10efe30402df9d8acff5ad9d84e4e236 Mon Sep 17 00:00:00 2001 From: Will Abson Date: Wed, 30 Nov 2016 22:54:20 +0000 Subject: [PATCH 01/10] Initial implementation of listing and setting process vars Refs #775 --- .../ng2-activiti-processlist/index.ts | 2 + ...-process-instance-variables.component.html | 31 +++ ...ti-process-instance-variables.component.ts | 195 ++++++++++++++++++ .../ng2-activiti-processlist/src/i18n/en.json | 17 ++ .../src/models/index.ts | 1 + .../models/process-instance-variable.model.ts | 28 +++ .../src/services/activiti-process.service.ts | 16 ++ 7 files changed, 290 insertions(+) create mode 100644 ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html create mode 100644 ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts create mode 100644 ng2-components/ng2-activiti-processlist/src/models/process-instance-variable.model.ts diff --git a/ng2-components/ng2-activiti-processlist/index.ts b/ng2-components/ng2-activiti-processlist/index.ts index 8cb4397556..b5d57829e4 100644 --- a/ng2-components/ng2-activiti-processlist/index.ts +++ b/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'; @@ -49,6 +50,7 @@ export const ACTIVITI_PROCESSLIST_DIRECTIVES: [any] = [ ActivitiProcessInstanceDetails, ActivitiProcessInstanceHeader, ActivitiProcessInstanceTasks, + ActivitiProcessInstanceVariables, ActivitiComments, ActivitiStartProcessInstance, ActivitiStartProcessInstanceDialog diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html new file mode 100644 index 0000000000..7e022b25a9 --- /dev/null +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html @@ -0,0 +1,31 @@ +
add
+
+ {{ 'DETAILS.VARIABLES.BUTTON.ADD' |translate }} +
+ + +
+ +
+
+ {{ 'DETAILS.VARIABLES.NONE' | translate }} +
+ + + +

{{ 'DETAILS.VARIABLES.ADD_DIALOG.TITLE' |translate }}

+
+
+ + +
+
+ + +
+
+
+ + +
+
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts new file mode 100644 index 0000000000..6e41251c33 --- /dev/null +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts @@ -0,0 +1,195 @@ +/*! + * @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 = new EventEmitter(); + + @ViewChild('dialog') + dialog: 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; + + /** + * 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() { + this.data.setRows([]); + } + + public showDialog() { + if (!this.dialog.nativeElement.showModal) { + dialogPolyfill.registerDialog(this.dialog.nativeElement); + } + if (this.dialog) { + this.dialog.nativeElement.showModal(); + } + } + + public add() { + this.activitiProcess.createOrUpdateProcessInstanceVariables(this.processInstanceId, [new ProcessInstanceVariable({ + name: this.variableName, + value: this.variableValue, + scope: 'global' + })]).subscribe( + (res: ProcessInstanceVariable[]) => { + this.getProcessInstanceVariables(this.processInstanceId); + this.resetForm(); + }, + (err) => { + this.error.emit(err); + } + ); + this.cancel(); + } + + public cancel() { + if (this.dialog) { + this.dialog.nativeElement.close(); + } + } + + private resetForm() { + this.variableName = ''; + this.variableValue = ''; + } +} diff --git a/ng2-components/ng2-activiti-processlist/src/i18n/en.json b/ng2-components/ng2-activiti-processlist/src/i18n/en.json index 6d713c06e6..33307d655b 100644 --- a/ng2-components/ng2-activiti-processlist/src/i18n/en.json +++ b/ng2-components/ng2-activiti-processlist/src/i18n/en.json @@ -37,6 +37,23 @@ }, "COMMENTS": { "NONE": "No comments." + }, + "VARIABLES": { + "NONE": "No variables set.", + "BUTTON": { + "ADD": "Set a variable" + }, + "ADD_DIALOG": { + "TITLE": "Set process variable", + "LABEL": { + "NAME": "Name", + "VALUE": "Value" + }, + "BUTTON": { + "SET": "Set", + "CANCEL": "Cancel" + } + } } }, "START_PROCESS": { diff --git a/ng2-components/ng2-activiti-processlist/src/models/index.ts b/ng2-components/ng2-activiti-processlist/src/models/index.ts index e1c4292453..7b879cbf50 100644 --- a/ng2-components/ng2-activiti-processlist/src/models/index.ts +++ b/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'; diff --git a/ng2-components/ng2-activiti-processlist/src/models/process-instance-variable.model.ts b/ng2-components/ng2-activiti-processlist/src/models/process-instance-variable.model.ts new file mode 100644 index 0000000000..b49e8de35f --- /dev/null +++ b/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; + } +} diff --git a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts b/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts index dca54432ac..ec6591f667 100644 --- a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts +++ b/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,21 @@ export class ActivitiProcessService { .catch(this.handleError); } + getProcessInstanceVariables(processDefinitionId: string): Observable { + 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 { + return Observable.fromPromise( + this.apiService.getInstance().activiti.processInstanceVariablesApi.createOrUpdateProcessInstanceVariables(processDefinitionId, variables) + ) + .catch(this.handleError); + } + private callApiGetUserProcessInstanceFilters(filterOpts) { return this.apiService.getInstance().activiti.userFiltersApi.getUserProcessInstanceFilters(filterOpts); } From d193b56b41ac1a4ec25e6ada9963ecc70b903244 Mon Sep 17 00:00:00 2001 From: Will Abson Date: Wed, 30 Nov 2016 22:56:34 +0000 Subject: [PATCH 02/10] Externalise process comments UI strings Refs #775 --- .../components/activiti-comments.component.html | 10 +++++----- .../ng2-activiti-processlist/src/i18n/en.json | 15 ++++++++++++++- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-comments.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-comments.component.html index c24ffd50ce..f1760200c3 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-comments.component.html +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-comments.component.html @@ -2,7 +2,7 @@ [attr.data-badge]="comments?.length">{{ 'DETAILS.LABELS.COMMENTS' |translate }}
add
- Add a comment + {{ 'DETAILS.COMMENTS.BUTTON.ADD' |translate }}
Process List @@ -67,12 +67,14 @@ [state]="processFilter.filter.state" [sort]="processFilter.filter.sort" [data]="dataProcesses" - (rowClick)="onProcessRowClick($event)" (onSuccess)="onSuccessProcessList($event)" - #activitiprocesslist> + (rowClick)="onProcessRowClick($event)" + (onSuccess)="onSuccessProcessList($event)">
Process Details - +
Start Process diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts index 0bfe181719..7b38348f19 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts +++ b/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 { FilterRepresentationModel, ActivitiApps, ActivitiTaskList } from 'ng2-activiti-tasklist'; +import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core'; 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') - activitifilter: any; - - @ViewChild('activitidetails') - activitidetails: any; + @ViewChild(ActivitiFilters) + activitifilter: ActivitiFilters; @ViewChild(ActivitiTaskList) activititasklist: ActivitiTaskList; - @ViewChild('activitiprocessfilter') - activitiprocessfilter: any; + @ViewChild(ActivitiTaskDetails) + activitidetails: ActivitiTaskDetails; + + @ViewChild(ActivitiProcessFilters) + activitiprocessfilter: ActivitiProcessFilters; @ViewChild(ActivitiProcessInstanceListComponent) activitiprocesslist: ActivitiProcessInstanceListComponent; - @ViewChild('activitiprocessdetails') - activitiprocessdetails: any; + @ViewChild(ActivitiProcessInstanceDetails) + activitiprocessdetails: ActivitiProcessInstanceDetails; @ViewChild(ActivitiStartProcessInstance) activitiStartProcess: ActivitiStartProcessInstance; diff --git a/ng2-components/ng2-activiti-processlist/demo/src/main.ts b/ng2-components/ng2-activiti-processlist/demo/src/main.ts index fb4fb9d666..38cc62c7b9 100644 --- a/ng2-components/ng2-activiti-processlist/demo/src/main.ts +++ b/ng2-components/ng2-activiti-processlist/demo/src/main.ts @@ -15,12 +15,19 @@ * 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'; @@ -73,8 +80,7 @@ const currentProcessIdNew = '__NEW__'; + (onSuccess)="onSuccessProcessFilterList($event)">
Process List @@ -85,16 +91,17 @@ const currentProcessIdNew = '__NEW__'; [sort]="processFilter.filter.sort" [data]="dataProcesses" (rowClick)="onProcessRowClick($event)" - (onSuccess)="onSuccessProcessList($event)" - #activitiprocesslist> + (onSuccess)="onSuccessProcessList($event)">
Process Details + (processCancelled)="processCancelled()"> +

Process Variables

+
Start Process @@ -117,19 +124,19 @@ class MyDemoApp implements OnInit { ticket: string; @ViewChild('tabmain') - tabMain: any; + tabMain: DebugElement; @ViewChild('tabheader') - tabHeader: any; + tabHeader: DebugElement; - @ViewChild('activitiprocessfilter') - activitiprocessfilter: any; + @ViewChild(ActivitiProcessFilters) + activitiprocessfilter: ActivitiProcessFilters; - @ViewChild('activitiprocesslist') - activitiprocesslist: any; + @ViewChild(ActivitiProcessInstanceListComponent) + activitiprocesslist: ActivitiProcessInstanceListComponent; - @ViewChild('activitiprocessdetails') - activitiprocessdetails: any; + @ViewChild(ActivitiProcessInstanceDetails) + activitiprocessdetails: ActivitiProcessInstanceDetails; @ViewChild(ActivitiStartProcessInstance) activitiStartProcess: ActivitiStartProcessInstance; diff --git a/ng2-components/ng2-activiti-processlist/index.ts b/ng2-components/ng2-activiti-processlist/index.ts index b5d57829e4..5f7bc642bc 100644 --- a/ng2-components/ng2-activiti-processlist/index.ts +++ b/ng2-components/ng2-activiti-processlist/index.ts @@ -34,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'; diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html index fa1ff3c8ca..135aa4eb0b 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html @@ -1,13 +1,13 @@
{{ 'DETAILS.MESSAGES.NONE'|translate }}

{{processInstanceDetails.name}}

- +
- +
- +
-
\ No newline at end of file +
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.ts index 264b334c31..c0a2c40145 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.ts +++ b/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() diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts index 6e41251c33..0e52b2be3b 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts @@ -153,7 +153,9 @@ export class ActivitiProcessInstanceVariables implements OnInit, OnChanges { } private resetVariables() { - this.data.setRows([]); + if (this.data) { + this.data.setRows([]); + } } public showDialog() { From 99298f70669229fcdb70117ea29b7cf39b638541 Mon Sep 17 00:00:00 2001 From: Will Abson Date: Thu, 1 Dec 2016 15:49:30 +0000 Subject: [PATCH 07/10] Change demo app processlist columns to match demo-shell Refs #775 --- ng2-components/ng2-activiti-processlist/demo/src/main.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/ng2-components/ng2-activiti-processlist/demo/src/main.ts b/ng2-components/ng2-activiti-processlist/demo/src/main.ts index 38cc62c7b9..b9dbdae227 100644 --- a/ng2-components/ng2-activiti-processlist/demo/src/main.ts +++ b/ng2-components/ng2-activiti-processlist/demo/src/main.ts @@ -163,10 +163,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: 'startedBy.email', title: 'Started By', sortable: true} + {type: 'text', key: 'started', title: 'Started', sortable: true, cssClass: 'hidden'} ] ); } From 9bc63c94731908360ad16d5fc69f61a29fa43eca Mon Sep 17 00:00:00 2001 From: Will Abson Date: Thu, 1 Dec 2016 15:50:09 +0000 Subject: [PATCH 08/10] Use h2 for headings in processlist demo Refs #775 --- .../ng2-activiti-processlist/demo/src/main.ts | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/ng2-components/ng2-activiti-processlist/demo/src/main.ts b/ng2-components/ng2-activiti-processlist/demo/src/main.ts index b9dbdae227..cee4a08875 100644 --- a/ng2-components/ng2-activiti-processlist/demo/src/main.ts +++ b/ng2-components/ng2-activiti-processlist/demo/src/main.ts @@ -74,7 +74,7 @@ const currentProcessIdNew = '__NEW__';
- Process Filters +

Process Filters

- Process List +

Process List

- Process Details +

Process Details

- Start Process +

Start Process

@@ -113,7 +113,14 @@ const currentProcessIdNew = '__NEW__';
-` +`, + styles: [` + h2 { + font-size: 14px; + line-height: 20px; + margin: 10px 0; + } + `] }) class MyDemoApp implements OnInit { From 676180517eb3d0edd3ee0c2992325bb62e368d79 Mon Sep 17 00:00:00 2001 From: Will Abson Date: Thu, 1 Dec 2016 15:50:41 +0000 Subject: [PATCH 09/10] Style fix for tabs header height Refs #775 --- ng2-components/ng2-activiti-processlist/demo/src/main.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ng2-components/ng2-activiti-processlist/demo/src/main.ts b/ng2-components/ng2-activiti-processlist/demo/src/main.ts index cee4a08875..07aa099838 100644 --- a/ng2-components/ng2-activiti-processlist/demo/src/main.ts +++ b/ng2-components/ng2-activiti-processlist/demo/src/main.ts @@ -115,6 +115,9 @@ const currentProcessIdNew = '__NEW__'; `, styles: [` + header { + min-height: 48px; + } h2 { font-size: 14px; line-height: 20px; From a49f7dd7f756ea567d40fb39edf8ee7c1e70bc85 Mon Sep 17 00:00:00 2001 From: Will Abson Date: Sun, 4 Dec 2016 12:29:08 +0000 Subject: [PATCH 10/10] Add edit and delete actions for process variables Refs #775 --- ...-process-instance-variables.component.html | 53 +++++- ...ocess-instance-variables.component.spec.ts | 154 ++++++++++++++++-- ...ti-process-instance-variables.component.ts | 108 ++++++++++-- .../ng2-activiti-processlist/src/i18n/en.json | 22 ++- .../services/activiti-process.service.spec.ts | 120 ++++++++++++++ .../src/services/activiti-process.service.ts | 7 + 6 files changed, 426 insertions(+), 38 deletions(-) diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html index 7e022b25a9..d3c7f3e362 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html @@ -1,31 +1,66 @@ -
add
+
add
{{ 'DETAILS.VARIABLES.BUTTON.ADD' |translate }}
- +
{{ 'DETAILS.VARIABLES.NONE' | translate }}
- +

{{ 'DETAILS.VARIABLES.ADD_DIALOG.TITLE' |translate }}

- - + +
- - + +
- - + + +
+
+ + + +

{{ 'DETAILS.VARIABLES.EDIT_DIALOG.TITLE' |translate }}

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + + +

{{ 'DETAILS.VARIABLES.ERROR_DIALOG.TITLE' |translate }}

+
+

{{ 'DETAILS.VARIABLES.ERROR_DIALOG.DESCRIPTION' |translate }}

+
+
+
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts index 5c9f4b1b49..94f997dac1 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts +++ b/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; 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(); }); diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts index 0e52b2be3b..427f6b00de 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts +++ b/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 = new EventEmitter(); - @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' + }]; } } diff --git a/ng2-components/ng2-activiti-processlist/src/i18n/en.json b/ng2-components/ng2-activiti-processlist/src/i18n/en.json index 0d9c850b22..dad6152f8e 100644 --- a/ng2-components/ng2-activiti-processlist/src/i18n/en.json +++ b/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" - }, - "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." } } }, diff --git a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts b/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts index 620e98e315..f07d926220 100644 --- a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.spec.ts +++ b/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'); + } + ); + })); + + }); + + }); }); diff --git a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts b/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts index ec6591f667..39400f4eda 100644 --- a/ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts +++ b/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 { + 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); }