Initial implementation of listing and setting process vars

Refs #775

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

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

@@ -0,0 +1,31 @@
+<div id="setVariableBtn" (click)="showDialog()" 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>
+</div>
+<div *ngIf="isListEmpty()" data-automation-id="variables-none">
+    {{ 'DETAILS.VARIABLES.NONE' | translate }}
+</div>
+
+
+<dialog class="mdl-dialog" #dialog>
+    <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" />
+        </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" />
+        </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>
+    </div>
+</dialog>

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<any> = new EventEmitter<any>();
+
+    @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 = '';
+    }
+}

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": {

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.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<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);
+    }
+
     private callApiGetUserProcessInstanceFilters(filterOpts) {
         return this.apiService.getInstance().activiti.userFiltersApi.getUserProcessInstanceFilters(filterOpts);
     }