add sort feature

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

@@ -2,7 +2,7 @@
 <div *ngIf="taskFilter">
     <div *ngIf="!isTaskListEmpty()">
         <alfresco-datatable
-                [data]="tasks"
+                [data]="data"
                 (rowClick)="onRowClick($event)">
         </alfresco-datatable>
     </div>

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

@@ -26,7 +26,7 @@ import { ActivitiTaskList } from './activiti-tasklist.component';
 import { ActivitiTaskListService } from '../services/activiti-tasklist.service';
 import { UserTaskFilterRepresentationModel } from '../models/filter.model';
 import { Observable } from 'rxjs/Rx';
-import { ObjectDataRow, DataRowEvent } from 'ng2-alfresco-datatable';
+import { ObjectDataRow, DataRowEvent, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
 
 
 describe('ActivitiTaskList', () => {
@@ -79,23 +79,26 @@ describe('ActivitiTaskList', () => {
 
     it('should use the default schemaColumn as default', () => {
         taskList.ngOnInit();
-        expect(taskList.schemaColumn).toBeDefined();
+        expect(taskList.data.getColumns()).toBeDefined();
-        expect(taskList.schemaColumn.length).toEqual(4);
+        expect(taskList.data.getColumns().length).toEqual(4);
     });
 
     it('should use the schemaColumn passed in input', () => {
-        taskList.schemaColumn = [
+        taskList.data = new ObjectDataTableAdapter(
+            [],
+            [
                 {type: 'text', key: 'fake-id', title: 'Name'}
-        ];
+            ]
+        );
 
         taskList.ngOnInit();
-        expect(taskList.schemaColumn).toBeDefined();
+        expect(taskList.data.getColumns()).toBeDefined();
-        expect(taskList.schemaColumn.length).toEqual(1);
+        expect(taskList.data.getColumns().length).toEqual(1);
     });
 
     it('should return an empty task list when the taskFilter is not passed', () => {
         taskList.ngOnInit();
-        expect(taskList.tasks).toBeUndefined();
+        expect(taskList.data).toBeDefined();
         expect(taskList.isTaskListEmpty()).toBeTruthy();
     });
 
@@ -106,11 +109,11 @@ describe('ActivitiTaskList', () => {
 
         taskList.onSuccess.subscribe( (res) => {
             expect(res).toBeDefined();
-            expect(taskList.tasks).toBeDefined();
+            expect(taskList.data).toBeDefined();
             expect(taskList.isTaskListEmpty()).not.toBeTruthy();
-            expect(taskList.tasks.getRows().length).toEqual(2);
+            expect(taskList.data.getRows().length).toEqual(2);
-            expect(taskList.tasks.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
+            expect(taskList.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
-            expect(taskList.tasks.getRows()[1].getValue('name')).toEqual('Nameless task');
+            expect(taskList.data.getRows()[1].getValue('name')).toEqual('Nameless task');
             done();
         });
 

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

@@ -17,7 +17,7 @@
 
 import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
-import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter, DataTableAdapter, DataRowEvent } from 'ng2-alfresco-datatable';
+import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter, DataTableAdapter, DataRowEvent, ObjectDataRow } from 'ng2-alfresco-datatable';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 import { UserTaskFilterRepresentationModel, TaskQueryRequestRepresentationModel } from '../models/filter.model';
 
@@ -38,12 +38,7 @@ export class ActivitiTaskList implements OnInit, OnChanges {
     taskFilter: UserTaskFilterRepresentationModel;
 
     @Input()
-    schemaColumn: any[] = [
+    data: DataTableAdapter;
-        {type: 'text', key: 'id', title: 'Id'},
-        {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-        {type: 'text', key: 'formKey', title: 'Form Key', sortable: true},
-        {type: 'text', key: 'created', title: 'Created', sortable: true}
-    ];
 
     @Output()
     rowClick: EventEmitter<string> = new EventEmitter<string>();
@@ -54,12 +49,15 @@ export class ActivitiTaskList implements OnInit, OnChanges {
     @Output()
     onError: EventEmitter<any> = new EventEmitter<any>();
 
-    data: DataTableAdapter;
-
-    tasks: ObjectDataTableAdapter;
-
     currentTaskId: string;
 
+    private defaultSchemaColumn: any[] = [
+        {type: 'text', key: 'id', title: 'Id'},
+        {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
+        {type: 'text', key: 'formKey', title: 'Form Key', sortable: true},
+        {type: 'text', key: 'created', title: 'Created', sortable: true}
+    ];
+
     /**
      * Constructor
      * @param auth
@@ -76,10 +74,12 @@ export class ActivitiTaskList implements OnInit, OnChanges {
     }
 
     ngOnInit() {
+        if (!this.data) {
             this.data = new ObjectDataTableAdapter(
                 [],
-            this.schemaColumn
+                this.defaultSchemaColumn
             );
+        }
 
         if (this.taskFilter) {
             let requestNode = this.convertTaskUserToTaskQuery(this.taskFilter);
@@ -102,7 +102,8 @@ export class ActivitiTaskList implements OnInit, OnChanges {
                 requestNode.size = res.total;
                 this.activiti.getTasks(requestNode).subscribe(
                     (response) => {
-                        this.renderTasks(response.data);
+                        let taskRow = this.createDataRow(response.data);
+                        this.renderTasks(taskRow);
                         this.selectFirstTask();
                         this.onSuccess.emit(response);
                     }, (error) => {
@@ -115,13 +116,31 @@ export class ActivitiTaskList implements OnInit, OnChanges {
             });
     }
 
+    /**
+     * Create an array of ObjectDataRow
+     * @param tasks
+     * @returns {ObjectDataRow[]}
+     */
+    private createDataRow(tasks: any[]): ObjectDataRow[] {
+        let taskRows: ObjectDataRow[] = [];
+        tasks.forEach((row) => {
+            taskRows.push(new ObjectDataRow({
+                id: row.id,
+                name: row.name,
+                created: row.created
+            }));
+        });
+        return taskRows;
+    }
+
+
     /**
      * The method call the adapter data table component for render the task list
      * @param tasks
      */
     private renderTasks(tasks: any[]) {
         tasks = this.optimizeTaskName(tasks);
-        this.tasks = new ObjectDataTableAdapter(tasks, this.data.getColumns());
+        this.data.setRows(tasks);
     }
 
     /**
@@ -129,7 +148,7 @@ export class ActivitiTaskList implements OnInit, OnChanges {
      */
     private selectFirstTask() {
         if (!this.isTaskListEmpty()) {
-            this.currentTaskId = this.tasks.getRows()[0].getValue('id');
+            this.currentTaskId = this.data.getRows()[0].getValue('id');
         } else {
             this.currentTaskId = null;
         }
@@ -148,7 +167,7 @@ export class ActivitiTaskList implements OnInit, OnChanges {
      * @returns {ObjectDataTableAdapter|boolean}
      */
     isTaskListEmpty(): boolean {
-        return this.tasks === undefined || (this.tasks && this.tasks.getRows() && this.tasks.getRows().length === 0);
+        return this.data === undefined || (this.data && this.data.getRows() && this.data.getRows().length === 0);
     }
 
     /**
@@ -168,9 +187,9 @@ export class ActivitiTaskList implements OnInit, OnChanges {
      */
     private optimizeTaskName(tasks: any[]) {
         tasks = tasks.map(t => {
-            t.name = t.name || 'Nameless task';
+            t.obj.name = t.obj.name || 'Nameless task';
-            if (t.name.length > 50) {
+            if (t.obj.name.length > 50) {
-                t.name = t.name.substring(0, 50) + '...';
+                t.obj.name = t.obj.name.substring(0, 50) + '...';
             }
             return t;
         });

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css

@@ -87,6 +87,10 @@
     border: 0;
 }
 
+.hidden {
+    display: none;
+}
+
 /* small desktop */
 @media all and (max-width: 1200px) {}