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,22 +19,27 @@
             <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)"
+                        <activiti-filters
+                            [appId]="appId"
+                            (filterClick)="onTaskFilterClick($event)"
                             (onSuccess)="onSuccessTaskFilterList($event)"
-                                          #activitifilter></activiti-filters>
+                            #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"
+                        <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)"
@@ -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"
+                            <activiti-process-instance-filters
+                                [appId]="appId"
                                 (filterClick)="onProcessFilterClick($event)"
-                                                               (onSuccess)="onSuccessProcessFilterList($event)"></activiti-process-instance-filters>
+                                (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,7 +143,8 @@
                         </analytics-report-list>
                     </div>
                     <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
-                        <activiti-analytics *ngIf="report"
+                        <activiti-analytics
+                            *ngIf="report"
                             [appId]="appId"
                             [reportId]="report.id"
                             [hideParameters]="false"
@@ -155,7 +161,8 @@
 </div>
 
 <div *ngIf="fileShowed">
-    <alfresco-viewer [(showViewer)]="fileShowed"
+    <alfresco-viewer
+        [(showViewer)]="fileShowed"
         [blobFile]="content"
         [displayName]="contentName"
         [overlayMode]="true">

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() {

ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.html

@@ -1,5 +1,6 @@
-<button type="button" (click)="showDialog()" class="mdl-button" id="start-task-button">
-    {{'START_TASK.BUTTON'|translate}}
+<button md-raised-button (click)="showDialog()" id="start-task-button">
+    <md-icon>add</md-icon>
+    <span>{{'START_TASK.BUTTON'|translate}}</span>
 </button>
 
 <dialog class="mdl-dialog" id="start-task-dialog" #dialog>

ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts

@@ -21,7 +21,6 @@ import { TaskDetailsModel } from '../models/task-details.model';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 import { Form } from '../models/form.model';
 
-declare let componentHandler: any;
 declare let dialogPolyfill: any;
 
 @Component({

ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts

@@ -36,8 +36,6 @@ import {
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
 
-declare let componentHandler: any;
-
 @Component({
     selector: 'activiti-tasklist',
     moduleId: module.id,
@@ -46,6 +44,8 @@ declare let componentHandler: any;
 })
 export class ActivitiTaskList implements OnChanges, AfterContentInit {
 
+    private requestNode: TaskQueryRequestRepresentationModel;
+
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
     @Input()
@@ -69,8 +69,6 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
     @Input()
     landingTaskId: string;
 
-    requestNode: TaskQueryRequestRepresentationModel;
-
     @Input()
     data: DataTableAdapter;
 
@@ -85,6 +83,16 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
 
     currentInstanceId: string;
 
+    /**
+     * Toggles custom data source mode.
+     * When enabled the component reloads data from it's current source instead of the server side.
+     * This allows generating and displaying custom data sets (i.e. filtered out content).
+     *
+     * @type {boolean}
+     * @memberOf ActivitiTaskList
+     */
+    hasCustomDataSource: boolean = false;
+
     private defaultSchemaColumn: DataColumn[] = [
         { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
         { type: 'text', key: 'created', title: 'Created', cssClass: 'hidden', sortable: true }
@@ -106,7 +114,7 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
      * Setup html-based (html definitions) or code behind (data adapter) schema.
      * If component is assigned with an empty data adater the default schema settings applied.
      */
-    setupSchema() {
+    setupSchema(): void {
         let schema: DataColumn[] = [];
 
         if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) {
@@ -130,6 +138,13 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
         }
     }
 
+    setCustomDataSource(rows: ObjectDataRow[]): void {
+        if (this.data) {
+            this.data.setRows(rows);
+            this.hasCustomDataSource = true;
+        }
+    }
+
     private isPropertyChanged(changes: SimpleChanges): boolean {
         let changed: boolean = false;
 
@@ -158,10 +173,12 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
         return changed;
     }
 
-    public reload() {
+    reload(): void {
+        if (!this.hasCustomDataSource) {
             this.requestNode = this.createRequestNode();
             this.load(this.requestNode);
         }
+    }
 
     private load(requestNode: TaskQueryRequestRepresentationModel) {
         this.taskListService.getTotalTasks(requestNode).subscribe(
@@ -209,7 +226,7 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
     /**
      * Select the task given in input if present
      */
-    selectTask(taskIdToSelect: string) {
+    selectTask(taskIdToSelect: string): void {
         if (!this.isListEmpty()) {
             let rows = this.data.getRows();
             if (rows.length > 0) {

ng2-components/ng2-activiti-tasklist/src/i18n/en.json

@@ -62,7 +62,7 @@
         }
     },
     "START_TASK": {
-        "BUTTON": "Start Task",
+        "BUTTON": "CREATE TASK",
         "DIALOG": {
             "TITLE": "Start Task",
             "LABEL": {