[ADF-773] Fix datatable custom template render (#1947)

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts

@@ -184,7 +184,7 @@ describe('DataTable', () => {
     it('should initialize default adapter', () => {
         let table = new DataTableComponent(null);
         expect(table.data).toBeUndefined();
-        table.ngAfterContentInit();
+        table.ngOnChanges({'data': new SimpleChange('123', {}, true)});
         expect(table.data).toEqual(jasmine.any(ObjectDataTableAdapter));
     });
 
@@ -263,7 +263,7 @@ describe('DataTable', () => {
     });
 
     it('should not sort if column is missing', () => {
-        dataTable.ngAfterContentInit();
+        dataTable.ngOnChanges({'data': new SimpleChange('123', {}, true)});
         let adapter = dataTable.data;
         spyOn(adapter, 'setSorting').and.callThrough();
         dataTable.onColumnHeaderClick(null);
@@ -271,7 +271,7 @@ describe('DataTable', () => {
     });
 
     it('should not sort upon clicking non-sortable column header', () => {
-        dataTable.ngAfterContentInit();
+        dataTable.ngOnChanges({'data': new SimpleChange('123', {}, true)});
         let adapter = dataTable.data;
         spyOn(adapter, 'setSorting').and.callThrough();
 
@@ -284,7 +284,7 @@ describe('DataTable', () => {
     });
 
     it('should set sorting upon column header clicked', () => {
-        dataTable.ngAfterContentInit();
+        dataTable.ngOnChanges({'data': new SimpleChange('123', {}, true)});
         let adapter = dataTable.data;
         spyOn(adapter, 'setSorting').and.callThrough();
 
@@ -303,7 +303,7 @@ describe('DataTable', () => {
     });
 
     it('should invert sorting upon column header clicked', () => {
-        dataTable.ngAfterContentInit();
+        dataTable.ngOnChanges({'data': new SimpleChange('123', {}, true)});
 
         let adapter = dataTable.data;
         let sorting = new DataSorting('column_1', 'asc');
@@ -380,7 +380,7 @@ describe('DataTable', () => {
 
     it('should allow "select all" calls with no rows', () => {
         dataTable.multiselect = true;
-        dataTable.ngAfterContentInit();
+        dataTable.ngOnChanges({'data': new SimpleChange('123', {}, true)});
 
         dataTable.onSelectAllClick(<MdCheckboxChange> { checked: true });
         expect(dataTable.isSelectAllChecked).toBe(true);
@@ -468,13 +468,13 @@ describe('DataTable', () => {
     });
 
     it('should require adapter sorting to evaluate sorting state', () => {
-        dataTable.ngAfterContentInit();
+        dataTable.ngOnChanges({'data': new SimpleChange('123', {}, true)});
         spyOn(dataTable.data, 'getSorting').and.returnValue(null);
         expect(dataTable.isColumnSorted(<DataColumn> {}, 'asc')).toBeFalsy();
     });
 
     it('should evaluate column sorting state', () => {
-        dataTable.ngAfterContentInit();
+        dataTable.ngOnChanges({'data': new SimpleChange('123', {}, true)});
         spyOn(dataTable.data, 'getSorting').and.returnValue(new DataSorting('column_1', 'asc'));
         expect(dataTable.isColumnSorted(<DataColumn> {key: 'column_1'}, 'asc')).toBeTruthy();
         expect(dataTable.isColumnSorted(<DataColumn> {key: 'column_2'}, 'desc')).toBeFalsy();

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

@@ -101,18 +101,36 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
     }
 
     ngAfterContentInit() {
-        this.loadTable();
+        this.setTableSchema();
+        this.setupMaterialComponents();
+    }
+
+    ngAfterViewInit() {
+        this.setupMaterialComponents();
+    }
+
+    private setupMaterialComponents(): boolean {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+            return true;
+        }
+        return false;
     }
 
     ngOnChanges(changes: SimpleChanges) {
         if (this.isPropertyChanged(changes['data'])) {
-            this.loadTable();
+            if (this.isTableEmpty()) {
+                this.initTable();
+            }
             return;
         }
 
         if (this.isPropertyChanged(changes['rows'])) {
-            if (this.data) {
+            if (this.isTableEmpty()) {
-                this.data.setRows(this.convertToRowsData(changes['rows'].currentValue));
+                this.initTable();
+            } else {
+                this.setTableRows(changes['rows'].currentValue);
             }
             return;
         }
@@ -130,27 +148,28 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
         return rows.map(row => new ObjectDataRow(row));
     }
 
-    loadTable() {
+    private initTable() {
+        this.data = new ObjectDataTableAdapter(this.rows, []);
+    }
+
+    isTableEmpty() {
+        return this.data === undefined || this.data === null;
+    }
+
+    private setTableRows(rows) {
+        if (this.data) {
+            this.data.setRows(this.convertToRowsData(rows));
+        }
+    }
+
+    private setTableSchema() {
         let schema: DataColumn[] = [];
 
         if (this.columnList && this.columnList.columns) {
             schema = this.columnList.columns.map(c => <DataColumn> c);
         }
 
-        if (!this.data) {
+        if (this.data && schema && schema.length > 0) {
-            this.data = new ObjectDataTableAdapter(this.rows, schema);
-        } else {
-            this.setHtmlColumnConfigurationOnObjectAdapter(schema);
-        }
-
-        // workaround for MDL issues with dynamic components
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-    }
-
-    private setHtmlColumnConfigurationOnObjectAdapter(schema: DataColumn[]) {
-        if (schema && schema.length > 0) {
             this.data.setColumns(schema);
         }
     }

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

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import { TemplateRef } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import { ObjectUtils } from 'ng2-alfresco-core';
 import { DataTableAdapter, DataRow, DataColumn, DataSorting } from './datatable-adapter';
@@ -221,6 +222,7 @@ export class ObjectDataColumn implements DataColumn {
     title: string;
     srTitle: string;
     cssClass: string;
+    template?: TemplateRef<any>;
 
     constructor(obj: any) {
         this.key = obj.key;
@@ -229,5 +231,6 @@ export class ObjectDataColumn implements DataColumn {
         this.title = obj.title;
         this.srTitle = obj.srTitle;
         this.cssClass = obj.cssClass;
+        this.template = obj.template;
     }
 }