From 6c7e28a83f5608c6f48d069f631127020bf902c9 Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Tue, 13 Dec 2016 15:32:31 +0000
Subject: [PATCH] #1176 improve responsiveness task list and process list
 (#1235)

---
 .../activiti/activiti-demo.component.css      |  8 +++--
 .../activiti/activiti-demo.component.html     |  4 +--
 .../activiti/activiti-demo.component.ts       |  4 +--
 .../form-field/form-field.component.ts        |  1 -
 .../activiti-processlist.component.css        | 16 ++++++++--
 .../activiti-processlist.component.spec.ts    | 14 ++-------
 .../activiti-processlist.component.ts         |  8 ++---
 .../activiti-tasklist.component.css           | 16 ++++++++--
 .../activiti-tasklist.component.html          |  4 +--
 .../activiti-tasklist.component.spec.ts       | 29 +++++++------------
 .../components/activiti-tasklist.component.ts |  5 +---
 11 files changed, 57 insertions(+), 52 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 8fd0aed0b7..a3615db4f2 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.css
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.css
@@ -10,9 +10,13 @@
 .task-column {
     background-color: #f5f5f5;
     padding: 10px 10px 10px 10px;
-    border: solid 2px rgb(31,188,210);
+    border: solid 2px rgb(31, 188, 210);
+}
+
+.list-column {
+    width: 320px;
 }
 
 .mdl-layout__header {
     z-index: 1;
-}
\ 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 7c12ca15f6..8469fd7fb2 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -24,7 +24,7 @@
                         <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">
+                    <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column">
                         <span>Task List</span>
                         <activiti-tasklist *ngIf="taskFilter?.hasFilter()" [appId]="taskFilter.appId"
                                            [processDefinitionKey]="taskFilter.filter.processDefinitionKey"
@@ -59,7 +59,7 @@
                                     (filterClick)="onProcessFilterClick($event)"
                                     (onSuccess)="onSuccessProcessFilterList($event)"></activiti-process-instance-filters>
                         </div>
-                        <div class="mdl-cell mdl-cell--3-col task-column">
+                        <div class="mdl-cell mdl-cell--3-col task-column list-column">
                             <span>Process List</span>
                             <activiti-process-instance-list *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
                                     [processDefinitionKey]="processFilter.filter.processDefinitionKey"
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 ccac736244..307e4207bd 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
@@ -109,8 +109,8 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.dataProcesses = new ObjectDataTableAdapter(
             [],
             [
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column'},
-                {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden'}
+                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
+                {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
             ]
         );
 
diff --git a/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts b/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts
index 5657511464..3662f76944 100644
--- a/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts
+++ b/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts
@@ -81,7 +81,6 @@ export class FormFieldComponent implements OnInit, OnDestroy {
                     let instance = <WidgetComponent>this.componentRef.instance;
                     instance.field = this.field;
                     instance.fieldChanged.subscribe(field => {
-                        console.log('WidgetComponent.fieldChanged was used only to trigger visibility engine, components should do that internally if needed');
                         if (field && field.form) {
                             this.visibilityService.refreshVisibility(field.form);
                         }
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.css b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.css
index c2742d1471..ab203a54f0 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.css
@@ -1,3 +1,15 @@
-:host h1 {
-    font-size:22px
+alfresco-datatable >>> .column-header {
+    color: #232323;
+    font-size: 15px;
+}
+
+alfresco-datatable >>> .data-cell {
+    cursor: pointer !important;
+}
+
+alfresco-datatable >>> .cell-value{
+    width: 250px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
 }
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts
index 033643bcca..73582b1454 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts
@@ -31,7 +31,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
 
     let fakeGlobalProcesses = [
         new ProcessInstance({
-            id: 1, name: 'fake-long-name-fake-long-name-fake-long-name-fak50-long-name',
+            id: 1, name: 'process-name',
             processDefinitionId: 'fakeprocess:5:7507',
             processDefinitionKey: 'fakeprocess',
             processDefinitionName: 'Fake Process Name',
@@ -126,8 +126,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
             expect(component.data).toBeDefined();
             expect(component.isListEmpty()).not.toBeTruthy();
             expect(component.data.getRows().length).toEqual(2);
-            expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-            expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
+            expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
             done();
         });
         fixture.detectChanges();
@@ -142,8 +141,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
             expect(component.data).toBeDefined();
             expect(component.isListEmpty()).not.toBeTruthy();
             expect(component.data.getRows().length).toEqual(2);
-            expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-            expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
+            expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
             done();
         });
         fixture.detectChanges();
@@ -190,7 +188,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
             expect(component.data).toBeDefined();
             expect(component.isListEmpty()).not.toBeTruthy();
             expect(component.data.getRows().length).toEqual(2);
-            expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
             expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
             done();
         });
@@ -238,7 +235,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
                 expect(component.data).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
                 expect(component.data.getRows().length).toEqual(2);
-                expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
                 expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
                 done();
             });
@@ -255,7 +251,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
                 expect(component.data).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
                 expect(component.data.getRows().length).toEqual(2);
-                expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
                 expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
                 done();
             });
@@ -272,7 +267,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
                 expect(component.data).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
                 expect(component.data.getRows().length).toEqual(2);
-                expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
                 expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
                 done();
             });
@@ -289,7 +283,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
                 expect(component.data).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
                 expect(component.data.getRows().length).toEqual(2);
-                expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
                 expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
                 done();
             });
@@ -306,7 +299,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
                 expect(component.data).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
                 expect(component.data.getRows().length).toEqual(2);
-                expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
                 expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
                 done();
             });
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
index cbac8318d3..b69accfc2b 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
@@ -26,7 +26,7 @@ import { ActivitiProcessService } from '../services/activiti-process.service';
 @Component({
     selector: 'activiti-process-instance-list',
     moduleId: module.id,
-    styleUrls: [ './activiti-processlist.component.css' ],
+    styleUrls: ['./activiti-processlist.component.css'],
     templateUrl: './activiti-processlist.component.html'
 })
 export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
@@ -69,7 +69,8 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
         {type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true}
     ];
 
-    constructor(private processService: ActivitiProcessService, private translate: AlfrescoTranslationService) {
+    constructor(private processService: ActivitiProcessService,
+                private translate: AlfrescoTranslationService) {
         if (translate !== null) {
             translate.addTranslationFolder('ng2-activiti-processlist', 'node_modules/ng2-activiti-processlist/dist/src');
         }
@@ -216,9 +217,6 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
     private optimizeNames(instances: any[]) {
         instances = instances.map(t => {
             t.obj.name = t.obj.name || 'No name';
-            if (t.obj.name.length > 50) {
-                t.obj.name = t.obj.name.substring(0, 50) + '...';
-            }
             return t;
         });
         return instances;
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.css
index 58224391d9..ab203a54f0 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.css
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.css
@@ -1,3 +1,15 @@
-alfresco-datatable >>> .data-cell {
-    cursor: pointer;
+alfresco-datatable >>> .column-header {
+    color: #232323;
+    font-size: 15px;
+}
+
+alfresco-datatable >>> .data-cell {
+    cursor: pointer !important;
+}
+
+alfresco-datatable >>> .cell-value{
+    width: 250px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
 }
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html
index 1e9455f133..7f95c193d8 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html
@@ -2,8 +2,8 @@
 <div *ngIf="requestNode">
     <div *ngIf="!isListEmpty()">
         <alfresco-datatable
-                [data]="data"
-                (rowClick)="onRowClick($event)">
+            [data]="data"
+            (rowClick)="onRowClick($event)">
         </alfresco-datatable>
     </div>
     <div *ngIf="isListEmpty()">
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
index 750f0bc85a..fe40ed2ee3 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
@@ -29,7 +29,7 @@ describe('ActivitiTaskList', () => {
 
     let fakeGlobalTask = [
         {
-            id: 14, name: 'fake-long-name-fake-long-name-fake-long-name-fak50-long-name',
+            id: 14, name: 'task-name',
             processDefinitionId: 'fakeprocess:5:7507',
             processDefinitionKey: 'fakeprocess',
             processDefinitionName: 'Fake Process Name',
@@ -123,8 +123,7 @@ describe('ActivitiTaskList', () => {
             expect(component.data).toBeDefined();
             expect(component.isListEmpty()).not.toBeTruthy();
             expect(component.data.getRows().length).toEqual(2);
-            expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-            expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
+            expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
             done();
         });
         component.ngOnInit();
@@ -141,8 +140,7 @@ describe('ActivitiTaskList', () => {
             expect(component.data).toBeDefined();
             expect(component.isListEmpty()).not.toBeTruthy();
             expect(component.data.getRows().length).toEqual(2);
-            expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-            expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
+            expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
             done();
         });
         component.ngOnInit();
@@ -177,8 +175,7 @@ describe('ActivitiTaskList', () => {
             expect(component.data).toBeDefined();
             expect(component.isListEmpty()).not.toBeTruthy();
             expect(component.data.getRows().length).toEqual(2);
-            expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-            expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
+            expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
             done();
         });
         component.reload();
@@ -228,8 +225,7 @@ describe('ActivitiTaskList', () => {
                 expect(component.data).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
                 expect(component.data.getRows().length).toEqual(2);
-                expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-                expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
+                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
                 done();
             });
 
@@ -245,8 +241,7 @@ describe('ActivitiTaskList', () => {
                 expect(component.data).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
                 expect(component.data.getRows().length).toEqual(2);
-                expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-                expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
+                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
                 done();
             });
 
@@ -262,8 +257,7 @@ describe('ActivitiTaskList', () => {
                 expect(component.data).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
                 expect(component.data.getRows().length).toEqual(2);
-                expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-                expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
+                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
                 done();
             });
 
@@ -279,8 +273,7 @@ describe('ActivitiTaskList', () => {
                 expect(component.data).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
                 expect(component.data.getRows().length).toEqual(2);
-                expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-                expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
+                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
                 done();
             });
 
@@ -296,8 +289,7 @@ describe('ActivitiTaskList', () => {
                 expect(component.data).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
                 expect(component.data.getRows().length).toEqual(2);
-                expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-                expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
+                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
                 done();
             });
 
@@ -313,8 +305,7 @@ describe('ActivitiTaskList', () => {
                 expect(component.data).toBeDefined();
                 expect(component.isListEmpty()).not.toBeTruthy();
                 expect(component.data.getRows().length).toEqual(2);
-                expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-                expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
+                expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
                 done();
             });
 
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 72c4d75a38..1174c3cdc5 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
@@ -226,10 +226,7 @@ export class ActivitiTaskList implements OnInit, OnChanges {
      */
     private optimizeNames(istances: any[]) {
         istances = istances.map(t => {
-            t.obj.name = t.obj.name || 'Nameless task';
-            if (t.obj.name.length > 50) {
-                t.obj.name = t.obj.name.substring(0, 50) + '...';
-            }
+            t.obj.name = t.obj.name || 'No name';
             return t;
         });
         return istances;