demo app improvements (#1796)

- fix navigation within process details
- fix ‘create task’ button name (was ‘start task’ previously)
- put ‘create task’ and ‘start process’ buttons to proper places in
layout

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

@@ -10,7 +10,6 @@
 .task-column {
     background-color: #f5f5f5;
     padding: 10px 10px 10px 10px;
-    border-right: solid 2px rgb(144, 143, 143);
 }
 
 .list-column {
@@ -20,3 +19,8 @@
 .mdl-layout__header {
     z-index: 1;
 }
+
+.list-buttons {
+    text-align: right;
+    margin-bottom: 5px;
+}

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

@@ -19,29 +19,34 @@
             <div class="page-content">
                 <div class="mdl-grid">
                     <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
-                        <span><h5>Task Filters</h5></span>
-                        <hr>
-                        <activiti-start-task [appId]="appId" (onSuccess)="onStartTaskSuccess($event)"></activiti-start-task>
-                        <activiti-filters [appId]="appId" (filterClick)="onTaskFilterClick($event)"
-                                          (onSuccess)="onSuccessTaskFilterList($event)"
-                                          #activitifilter></activiti-filters>
+                        <activiti-filters
+                            [appId]="appId"
+                            (filterClick)="onTaskFilterClick($event)"
+                            (onSuccess)="onSuccessTaskFilterList($event)"
+                            #activitifilter>
+                        </activiti-filters>
                     </div>
                     <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column">
-                        <span><h5>Task List</h5></span>
-                        <hr>
-                        <activiti-tasklist *ngIf="taskFilter?.hasFilter()" [appId]="taskFilter.appId"
-                                           [processDefinitionKey]="taskFilter.filter.processDefinitionKey"
-                                           [name]="taskFilter.filter.name"
-                                           [assignment]="taskFilter.filter.assignment"
-                                           [state]="taskFilter.filter.state"
-                                           [sort]="taskFilter.filter.sort"
-                                           [data]="dataTasks"
-                                           [landingTaskId]="currentTaskId"
-                                           (rowClick)="onTaskRowClick($event)"
-                                           (onSuccess)="onSuccessTaskList($event)"
-                                           (row-click)="onRowClick($event)"
-                                           (row-dblclick)="onRowDblClick($event)"
-                                           #activititasklist>
+                        <div class="list-buttons">
+                            <activiti-start-task
+                                [appId]="appId"
+                                (onSuccess)="onStartTaskSuccess($event)">
+                            </activiti-start-task>
+                        </div>
+                        <activiti-tasklist
+                            [appId]="taskFilter?.appId"
+                            [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
+                            [name]="taskFilter?.filter?.name"
+                            [assignment]="taskFilter?.filter?.assignment"
+                            [state]="taskFilter?.filter?.state"
+                            [sort]="taskFilter?.filter?.sort"
+                            [data]="dataTasks"
+                            [landingTaskId]="currentTaskId"
+                            (rowClick)="onTaskRowClick($event)"
+                            (onSuccess)="onSuccessTaskList($event)"
+                            (row-click)="onRowClick($event)"
+                            (row-dblclick)="onRowDblClick($event)"
+                            #activititasklist>
                             <!-- Custom column definition demo -->
                             <!--
                             <data-columns>
@@ -71,18 +76,22 @@
                 <div class="page-content">
                     <div class="mdl-grid">
                         <div class="mdl-cell mdl-cell--2-col task-column  mdl-shadow--2dp">
-                            <span><h5>Process Filters</h5></span>
-                            <hr>
-                            <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)"></activiti-process-instance-filters>
+                            <activiti-process-instance-filters
+                                [appId]="appId"
+                                (filterClick)="onProcessFilterClick($event)"
+                                (onSuccess)="onSuccessProcessFilterList($event)">
+                            </activiti-process-instance-filters>
                         </div>
                         <div class="mdl-cell mdl-cell--3-col task-column list-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
-                            <span><h5>Process List</h5></span>
-                            <hr>
+                            <div class="list-buttons">
+                                <button
+                                    md-raised-button
+                                    data-automation-id="btn-start-process"
+                                    (click)="navigateStartProcess()">
+                                    <md-icon>add</md-icon>
+                                    <span>START PROCESS</span>
+                                </button>
+                            </div>
                             <activiti-process-instance-list
                                 *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
                                 [processDefinitionKey]="processFilter.filter.processDefinitionKey"
@@ -104,8 +113,6 @@
                         <div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
                             [class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"
                             [class.mdl-cell--10-col]="!processFilter || isStartProcessMode()">
-                            <span><h5>Process Details</h5></span>
-                            <hr>
                             <activiti-process-instance-details
                                 [processInstanceId]="currentProcessInstanceId"
                                 (processCancelled)="processCancelled()"
@@ -113,8 +120,6 @@
                             </activiti-process-instance-details>
                         </div>
                         <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
-                            <span><h5>Start Process</h5></span>
-                            <hr>
                             <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>
                         </div>
                     </div>
@@ -138,13 +143,14 @@
                         </analytics-report-list>
                     </div>
                     <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
-                        <activiti-analytics *ngIf="report"
-                                            [appId]="appId"
-                                            [reportId]="report.id"
-                                            [hideParameters]="false"
-                                            (editReport)="onEditReport($event)"
-                                            (reportSaved)="onReportSaved()"
-                                            (reportDeleted)="onReportDeleted()">
+                        <activiti-analytics
+                            *ngIf="report"
+                            [appId]="appId"
+                            [reportId]="report.id"
+                            [hideParameters]="false"
+                            (editReport)="onEditReport($event)"
+                            (reportSaved)="onReportSaved()"
+                            (reportDeleted)="onReportDeleted()">
                         </activiti-analytics>
                     </div>
                 </div>
@@ -155,9 +161,10 @@
 </div>
 
 <div *ngIf="fileShowed">
-    <alfresco-viewer [(showViewer)]="fileShowed"
-                     [blobFile]="content"
-                     [displayName]="contentName"
-                     [overlayMode]="true">
+    <alfresco-viewer
+        [(showViewer)]="fileShowed"
+        [blobFile]="content"
+        [displayName]="contentName"
+        [overlayMode]="true">
     </alfresco-viewer>
 </div>

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

@@ -58,13 +58,13 @@ export class ActivitiDemoComponent implements AfterViewInit {
     activitifilter: ActivitiFilters;
 
     @ViewChild(ActivitiTaskList)
-    activititasklist: ActivitiTaskList;
+    taskList: ActivitiTaskList;
 
     @ViewChild(ActivitiProcessFilters)
     activitiprocessfilter: ActivitiProcessFilters;
 
     @ViewChild(ActivitiProcessInstanceListComponent)
-    activitiprocesslist: ActivitiProcessInstanceListComponent;
+    processList: ActivitiProcessInstanceListComponent;
 
     @ViewChild(ActivitiProcessInstanceDetails)
     activitiprocessdetails: ActivitiProcessInstanceDetails;
@@ -155,10 +155,8 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.sub.unsubscribe();
     }
 
-    onTaskFilterClick(event: FilterRepresentationModel) {
-        if (event) {
-            this.taskFilter = event;
-        }
+    onTaskFilterClick(filter: FilterRepresentationModel) {
+        this.applyTaskFilter(filter);
     }
 
     onReportClick(event: any) {
@@ -166,7 +164,14 @@ export class ActivitiDemoComponent implements AfterViewInit {
     }
 
     onSuccessTaskFilterList(event: any) {
-        this.taskFilter = this.activitifilter.getCurrentFilter();
+        this.applyTaskFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    applyTaskFilter(filter: FilterRepresentationModel) {
+        this.taskFilter = filter;
+        if (filter && this.taskList) {
+            this.taskList.hasCustomDataSource = false;
+        }
     }
 
     onStartTaskSuccess(event: any) {
@@ -175,7 +180,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
     }
 
     onSuccessTaskList(event: FilterRepresentationModel) {
-        this.currentTaskId = this.activititasklist.getCurrentId();
+        this.currentTaskId = this.taskList.getCurrentId();
     }
 
     onProcessFilterClick(event: FilterProcessRepresentationModel) {
@@ -188,7 +193,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
     }
 
     onSuccessProcessList(event: any) {
-        this.currentProcessInstanceId = this.activitiprocesslist.getCurrentId();
+        this.currentProcessInstanceId = this.processList.getCurrentId();
     }
 
     onTaskRowClick(taskId) {
@@ -236,15 +241,15 @@ export class ActivitiDemoComponent implements AfterViewInit {
 
     processCancelled(data: any) {
         this.currentProcessInstanceId = null;
-        this.activitiprocesslist.reload();
+        this.processList.reload();
     }
 
     onSuccessNewProcess(data: any) {
-        this.activitiprocesslist.reload();
+        this.processList.reload();
     }
 
     onFormCompleted(form) {
-        this.activititasklist.reload();
+        this.taskList.reload();
         this.currentTaskId = null;
     }
 
@@ -256,7 +261,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
 
     onTaskCreated(data: any) {
         this.currentTaskId = data.parentTaskId;
-        this.activititasklist.reload();
+        this.taskList.reload();
     }
 
     ngAfterViewInit() {
@@ -282,15 +287,17 @@ export class ActivitiDemoComponent implements AfterViewInit {
     onProcessDetailsTaskClick(event: TaskDetailsEvent) {
         event.preventDefault();
         this.activeTab = 'tasks';
-        let processTaskDataRow = new ObjectDataRow({
-            id: event.value.id,
+
+        const taskId = event.value.id;
+        const processTaskDataRow = new ObjectDataRow({
+            id: taskId,
             name: event.value.name || 'No name',
             created: event.value.created
         });
         this.activitifilter.selectFilter(null);
-        this.dataTasks.setRows([processTaskDataRow]);
-        this.activititasklist.selectTask(event.value.id);
-        this.currentTaskId = event.value.id;
+        this.taskList.setCustomDataSource([processTaskDataRow]);
+        this.taskList.selectTask(taskId);
+        this.currentTaskId = taskId;
     }
 
     private resetProcessFilters() {