From cfb3c9b8baba48c24f8a4cc7e0a441a38c777fa4 Mon Sep 17 00:00:00 2001 From: Maurizio Vitale Date: Thu, 8 Jun 2017 18:38:01 +0100 Subject: [PATCH] [ADF-773] Fix datatable custom template render (#1947) --- .../datatable/datatable.component.spec.ts | 16 +++--- .../datatable/datatable.component.ts | 57 ++++++++++++------- .../src/data/object-datatable-adapter.ts | 3 + 3 files changed, 49 insertions(+), 27 deletions(-) diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts index 426eb11f13..9c6d2bfe78 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts +++ b/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( { 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( {}, '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( {key: 'column_1'}, 'asc')).toBeTruthy(); expect(dataTable.isColumnSorted( {key: 'column_2'}, 'desc')).toBeFalsy(); diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts index 9e2b8b8f8e..ab5ec1e4be 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts +++ b/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) { - this.data.setRows(this.convertToRowsData(changes['rows'].currentValue)); + if (this.isTableEmpty()) { + 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 => c); } - if (!this.data) { - 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) { + if (this.data && schema && schema.length > 0) { this.data.setColumns(schema); } } diff --git a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts index 52f71497e8..0862abddd0 100644 --- a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts +++ b/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; 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; } }