Add process variables component to demo app

Refs #775

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

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

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

@@ -15,9 +15,17 @@
  * limitations under the License.
  */
 
-import { Component, AfterViewInit, ViewChild, Input, ElementRef } from '@angular/core';
-import { 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;

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__';
                             <activiti-process-instance-filters
                                         [appId]="appId"
                                         (filterClick)="onProcessFilterClick($event)"
-                                        (onSuccess)="onSuccessProcessFilterList($event)"
-                                        #activitiprocessfilter></activiti-process-instance-filters>
+                                        (onSuccess)="onSuccessProcessFilterList($event)"></activiti-process-instance-filters>
                         </div>
                         <div class="mdl-cell mdl-cell--3-col task-column">
                             <span>Process List</span>
@@ -85,16 +91,17 @@ const currentProcessIdNew = '__NEW__';
                                        [sort]="processFilter.filter.sort"
                                        [data]="dataProcesses"
                                         (rowClick)="onProcessRowClick($event)"
-                                        (onSuccess)="onSuccessProcessList($event)"
-                                        #activitiprocesslist></activiti-process-instance-list>
+                                        (onSuccess)="onSuccessProcessList($event)"></activiti-process-instance-list>
                         </div>
                         <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="!isStartProcessMode()">
                             <span>Process Details</span>
                             <activiti-process-instance-details
                                         [processInstanceId]="currentProcessInstanceId"
                                         (taskFormCompleted)="taskFormCompleted()"
-                                        (processCancelled)="processCancelled()"
-                                        #activitiprocessdetails></activiti-process-instance-details>
+                                        (processCancelled)="processCancelled()"></activiti-process-instance-details>
+                            <h2>Process Variables</h2>
+                            <activiti-process-instance-variables
+                                        [processInstanceId]="currentProcessInstanceId"></activiti-process-instance-variables>
                         </div>
                         <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="isStartProcessMode()">
                             <span>Start Process</span>
@@ -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;

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';

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

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

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

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

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

@@ -153,7 +153,9 @@ export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
     }
 
     private resetVariables() {
-        this.data.setRows([]);
+        if (this.data) {
+            this.data.setRows([]);
+        }
     }
 
     public showDialog() {