From 8272b08f6afea214aa2e019eda3cdb175b5a145d Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 31 Mar 2017 15:44:54 +0100
Subject: [PATCH] demo app improvements (#1796)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../activiti/activiti-demo.component.css      |  6 +-
 .../activiti/activiti-demo.component.html     | 99 ++++++++++---------
 .../activiti/activiti-demo.component.ts       | 43 ++++----
 .../activiti-start-task.component.html        |  5 +-
 .../activiti-start-task.component.ts          |  1 -
 .../components/activiti-tasklist.component.ts | 35 +++++--
 .../ng2-activiti-tasklist/src/i18n/en.json    |  2 +-
 7 files changed, 113 insertions(+), 78 deletions(-)

diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.css b/demo-shell-ng2/app/components/activiti/activiti-demo.component.css
index 483a152276..4eeff07a01 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index 7c613ace62..46e3349d22 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/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>
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 0ace4bbb8e..147ef8ee6a 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
+++ b/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() {
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.html
index 549a40cd18..1bcae17ba6 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.html
+++ b/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>
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
index 91d57f4941..d380a14b4a 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
+++ b/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({
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
index d5ba4f34f1..14368caeba 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
+++ b/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,9 +173,11 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
         return changed;
     }
 
-    public reload() {
-        this.requestNode = this.createRequestNode();
-        this.load(this.requestNode);
+    reload(): void {
+        if (!this.hasCustomDataSource) {
+            this.requestNode = this.createRequestNode();
+            this.load(this.requestNode);
+        }
     }
 
     private load(requestNode: TaskQueryRequestRepresentationModel) {
@@ -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) {
diff --git a/ng2-components/ng2-activiti-tasklist/src/i18n/en.json b/ng2-components/ng2-activiti-tasklist/src/i18n/en.json
index 7268426c3e..7c79ccb57a 100644
--- a/ng2-components/ng2-activiti-tasklist/src/i18n/en.json
+++ b/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": {