#82 data adapter api improvements

demo-shell-ng2/app/components/datatable/datatable-demo.component.html

@@ -1,3 +1,10 @@
 <div class="p-10">
     <alfresco-datatable [data]="data"></alfresco-datatable>
 </div>
+<div class="p-10">
+    <button
+            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
+            (click)="addRow()">
+        Add row
+    </button>
+</div>

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

@@ -19,7 +19,9 @@ import { Component } from 'angular2/core';
 import { AlfrescoPipeTranslate } from 'ng2-alfresco-core/services';
 import {
     ALFRESCO_DATATABLE_DIRECTIVES,
-    ObjectDataTableAdapter, DataSorting
+    ObjectDataTableAdapter, 
+    DataSorting,
+    ObjectDataRow
 } from 'ng2-alfresco-datatable/ng2-alfresco-datatable';
 
 declare let __moduleName: string;
@@ -34,20 +36,19 @@ declare let __moduleName: string;
 export class DataTableDemoComponent {
     data: ObjectDataTableAdapter;
 
+    private _imageUrl: string = 'http://placehold.it/140x100';
+    private _createdBy: any = {
+        name: 'Denys Vuika',
+        email: 'denys.vuika@alfresco.com'
+    };
+
     constructor() {
-
-        let imageUrl = 'http://placehold.it/140x100';
-        let createdBy = {
-            name: 'Denys Vuika',
-            email: 'denys.vuika@alfresco.com'
-        };
-
         this.data = new ObjectDataTableAdapter(
             [
-                {id: 1, name: 'Name 1', createdBy: createdBy, icon: 'material-icons://folder_open'},
+                {id: 1, name: 'Name 1', createdBy: this._createdBy, icon: 'material-icons://folder_open'},
-                {id: 2, name: 'Name 2', createdBy: createdBy, icon: 'material-icons://accessibility'},
+                {id: 2, name: 'Name 2', createdBy: this._createdBy, icon: 'material-icons://accessibility'},
-                {id: 3, name: 'Name 3', createdBy: createdBy, icon: 'material-icons://alarm'},
+                {id: 3, name: 'Name 3', createdBy: this._createdBy, icon: 'material-icons://alarm'},
-                {id: 4, name: 'Image 1', createdBy: createdBy, icon: imageUrl}
+                {id: 4, name: 'Image 1', createdBy: this._createdBy, icon: this._imageUrl}
             ],
             [
                 {type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail'},
@@ -59,4 +60,16 @@ export class DataTableDemoComponent {
 
         this.data.setSorting(new DataSorting('name', 'asc'));
     }
+
+    addRow() {
+        let id = this.data.getRows().length + 1;
+        let row = new ObjectDataRow({
+            id: id,
+            name: 'Name ' + id,
+            icon: 'material-icons://extension',
+            createdBy: this._createdBy
+        });
+        this.data.getRows().push(row);
+        this.data.sort();
+    }
 }

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

@@ -3,7 +3,7 @@
     <tr>
         <!-- Columns -->
         <th class="mdl-data-table__cell--non-numeric {{col.cssClass}}"
-            *ngFor="#col of data.columns"
+            *ngFor="#col of data.getColumns()"
             [class.column-header]="col.title"
             [class.mdl-data-table__header--sorted-ascending]="isColumnSorted(col, 'asc')"
             [class.mdl-data-table__header--sorted-descending]="isColumnSorted(col, 'desc')"
@@ -20,9 +20,9 @@
     <tbody>
     <!-- todo: special 'navigate parent row' support -->
 
-    <tr *ngFor="#row of data.rows; #idx = index">
+    <tr *ngFor="#row of data.getRows(); #idx = index">
 
-        <td *ngFor="#col of data.columns" [ngSwitch]="col.type"
+        <td *ngFor="#col of data.getColumns()" [ngSwitch]="col.type"
             class="mdl-data-table__cell--non-numeric data-cell {{col.cssClass}}"
             (click)="onRowClick(row, $event)" (dblclick)="onRowDblClick(row, $event)">
             <div *ngSwitchWhen="'image'">

ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts

@@ -17,12 +17,12 @@
 
 export interface DataTableAdapter {
 
-    rows: DataRow[];
+    getRows(): Array<DataRow>;
-    columns: DataColumn[];
+    getColumns(): Array<DataColumn>;
-
     getValue(row: DataRow, col: DataColumn): any;
     getSorting(): DataSorting;
     setSorting(sorting: DataSorting): void;
+    sort(key?: string, direction?: string): void;
 }
 
 export interface DataRow {
@@ -33,15 +33,15 @@ export interface DataRow {
 export interface DataColumn {
     key: string;
     type: string; // text|image
-    sortable: boolean;
+    sortable?: boolean;
-    title: string;
+    title?: string;
-    srTitle: string;
+    srTitle?: string;
-    cssClass: string;
+    cssClass?: string;
 }
 
 export class DataSorting {
     constructor(
-        public key: string,
+        public key?: string,
-        public direction: string) {
+        public direction?: string) {
     }
 }

ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts

@@ -26,25 +26,33 @@ import {
 export class ObjectDataTableAdapter implements DataTableAdapter {
 
     private _sorting;
-
+    private _rows: DataRow[];
-    rows: DataRow[];
+    private _columns: DataColumn[];
-    columns: DataColumn[];
 
     constructor(data: any[], schema: DataColumn[]) {
-        this.rows = [];
+        this._rows = [];
+        this._columns = [];
 
         if (data && data.length > 0) {
 
-            this.rows = data.map(item => {
+            this._rows = data.map(item => {
                 return new ObjectDataRow(item);
             });
 
-            this.columns = schema.map(item => {
+            this._columns = schema.map(item => {
                 return new ObjectDataColumn(item);
             });
         }
     }
 
+    getRows(): Array<DataRow> {
+        return this._rows;
+    }
+
+    getColumns(): Array<DataColumn> {
+        return this._columns;
+    }
+
     getValue(row: DataRow, col: DataColumn): any {
         return row.getValue(col.key);
     }
@@ -54,26 +62,37 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
     }
 
     getColumnByKey(key: string) {
-        let columns = this.columns.filter(col => col.key === key);
+        let columns = this._columns.filter(col => col.key === key);
         return columns.length > 0 ? columns[0] : null;
     }
 
     setSorting(sorting: DataSorting): void {
         this._sorting = sorting;
 
-        this.rows.sort((a: DataRow, b: DataRow) => {
+        if (sorting && sorting.key) {
-            let left = a.getValue(sorting.key).toString();
+            this._rows.sort((a: DataRow, b: DataRow) => {
-            let right = b.getValue(sorting.key).toString();
+                let left = a.getValue(sorting.key).toString();
+                let right = b.getValue(sorting.key).toString();
 
-            return sorting.direction === 'asc'
+                return sorting.direction === 'asc'
-                ? left.localeCompare(right)
+                    ? left.localeCompare(right)
-                : right.localeCompare(left);
+                    : right.localeCompare(left);
-        });
+            });
+        }
+    }
+
+    sort(key?: string, direction?: string): void {
+        let sorting = this._sorting || new DataSorting();
+        if (key) {
+            sorting.key = key;
+            sorting.direction = direction || 'asc';
+        }
+        this.setSorting(sorting);
     }
 }
 
 // Simple implementation of the DataRow interface.
-class ObjectDataRow implements DataRow {
+export class ObjectDataRow implements DataRow {
     constructor(
         private obj: any) {
     }
@@ -115,7 +134,7 @@ class ObjectDataRow implements DataRow {
 }
 
 // Simple implementation of the DataColumn interface.
-class ObjectDataColumn implements DataColumn {
+export class ObjectDataColumn implements DataColumn {
 
     key: string;
     type: string; // text|image
@@ -124,7 +143,7 @@ class ObjectDataColumn implements DataColumn {
     srTitle: string;
     cssClass: string;
 
-    constructor(private obj: any) {
+    constructor(obj: any) {
         this.key = obj.key;
         this.type = obj.type;
         this.sortable = obj.sortable;