Bind tasks to table, datatable bug fixes

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

@@ -17,22 +17,28 @@
 
 import { Component, OnInit } from 'angular2/core';
 import { ActivitiService } from './activiti.service';
+import {
+    ALFRESCO_DATATABLE_DIRECTIVES,
+    ObjectDataTableAdapter,
+    DataSorting,
+    ObjectDataRow,
+    ObjectDataColumn
+} from 'ng2-alfresco-datatable/dist/ng2-alfresco-datatable';
 
 @Component({
     selector: 'tasks-demo',
     template: `
-        <h2>Tasks</h2>
-        <ul>
-            <li *ngFor="#task of tasks">
-                {{task.name}}
-            </li>
-        </ul>
+        <div class="container">
+            <alfresco-datatable [data]="tasks"></alfresco-datatable>
+        </div>
     `,
-    providers: [ActivitiService]
+    directives: [ALFRESCO_DATATABLE_DIRECTIVES],
+    providers: [ActivitiService],
+    styles: [':host > .container { padding: 10px; }']
 })
 export class TasksDemoComponent implements OnInit {
 
-    tasks: any[];
+    tasks: ObjectDataTableAdapter;
 
     constructor(
         private activitiService: ActivitiService) {}
@@ -43,11 +49,29 @@ export class TasksDemoComponent implements OnInit {
             .then(() => {
                 this.activitiService
                     .getTasks()
-                    .then((tasks) => {
-                        this.tasks = tasks || []
-                        console.log(this.tasks);
+                    .then((data) => {
+                        let tasks = data || [];
+                        console.log(tasks);
+                        this.loadTasks(tasks)
                     });
             });
     }
 
+    private loadTasks(tasks: any[]) {
+        tasks = tasks.map(t => {
+            t.name = t.name || 'Nameless task';
+            if (t.name.length > 50) {
+                t.name = t.name.substring(0, 50) + '...';
+            }
+            return t;
+        });
+
+        this.tasks = new ObjectDataTableAdapter(tasks, [
+            { 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 }
+        ]);
+    }
+
 }