support for column definitions in html (#1705)

* support for column definitions in html

- provides generic support for html-based column definitions for
datatable-like controls

* html column definitions for Task List component

* html column definitions for Document List component

* update code and documentation

ng2-components/ng2-alfresco-datatable/README.md

@@ -96,9 +96,7 @@ Follow the 3 steps below:
     Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
 
 
-## Basic usage example
-
-Usage example of this component :
+## Basic usage
 
 **my.component.ts**
 
@@ -107,18 +105,14 @@ import { NgModule, Component } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { CoreModule } from 'ng2-alfresco-core';
-import { DataTableModule }  from 'ng2-alfresco-datatable';
-import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
-import { Component } from '@angular/core';
-import { CONTEXT_MENU_DIRECTIVES, CONTEXT_MENU_PROVIDERS } from 'ng2-alfresco-core';
-import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
+import { DataTableModule, ObjectDataTableAdapter }  from 'ng2-alfresco-datatable';
 
 @Component({
     selector: 'alfresco-app-demo',
-    template: `<alfresco-datatable [data]="data">
-        </alfresco-datatable>`,
-    directives: [ALFRESCO_DATATABLE_DIRECTIVES, CONTEXT_MENU_DIRECTIVES],
-    providers: [CONTEXT_MENU_PROVIDERS]
+    template: `
+        <alfresco-datatable [data]="data">
+        </alfresco-datatable>
+    `
 })
 export class DataTableDemo {
     data: ObjectDataTableAdapter;
@@ -166,9 +160,23 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 
 ![DataTable demo](docs/assets/datatable-demo.png)
 
-### Properties
+You can also use HTML-based schema declaration like shown below:
 
-| Name | Type | Default | Description
+```html
+<alfresco-datatable [data]="data" [multiselect]="multiselect">
+    <data-columns>
+        <data-column type="image" key="icon" [sortable]="false"></data-column>
+        <data-column key="id" title="Id"></data-column>
+        <data-column key="createdOn" title="Created"></data-column>
+        <data-column key="name" title="Name" class="full-width name-column"></data-column>
+        <data-column key="createdBy.name" title="Created By"></data-column>
+    </data-columns>
+</alfresco-datatable>
+```
+
+### DataTable Properties
+
+| Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
 | `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
@@ -177,7 +185,22 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | `fallbackThumbnail` | string |  | Fallback image for row ehre thubnail is missing|
 | `contextMenu` | boolean | false | Toggles custom context menu for the component |
 
-### Events
+### DataColumn Properties
+
+Here's the list of available properties you can define for a Data Column definition.
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
+| type | string (text\|image\|date) | text | Value type |
+| format | string | | Value format (if supported by components), for example format of the date |
+| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header |
+| title | string | | Display title of the column, typically used for column headers |
+| template | `TemplateRef` | | Custom column template |
+| sr-title | string | | Screen reader title, used for accessibility purposes |
+| class | string | | Additional CSS class to be applied to column (header and cells) |
+
+### DataTable Events
 
 | Name | Description
 | --- | --- |
@@ -221,11 +244,13 @@ event: Event  // original HTML DOM event
 Handler example:
 
 ```ts
-onRowClicked(event) {
+onRowClicked(event: DataRowEvent) {
     console.log(event.row);
 }
 ```
 
+_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
+
 #### rowDblClick event
 
 _This event is emitted when user double-clicks the row._
@@ -240,11 +265,13 @@ event: Event  // original HTML DOM event
 Handler example:
 
 ```ts
-onRowDblClicked(event) {
+onRowDblClicked(event: DataRowEvent) {
     console.log(event.row);
 }
 ```
 
+_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
+
 #### showRowContextMenu event
 
 _Emitted before context menu is displayed for a row._ 
@@ -255,7 +282,7 @@ you can provide all necessary content via handler.
 Event properties:
 
 ```ts
-args: {
+value: {
     row: DataRow,
     col: DataColumn,
     actions: []
@@ -265,14 +292,16 @@ args: {
 Handler example:
 
 ```ts
-onShowRowContextMenu(event) {
-    event.args.actions = [
+onShowRowContextMenu(event: DataCellEvent) {
+    event.value.actions = [
         { ... },
         { ... }
     ]
 }
 ```
 
+_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
+
 DataTable will automatically render provided menu items.
 
 _Please refer to [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core) 
@@ -283,9 +312,20 @@ documentation for more details on context actions format and behavior._
 _Emitted before actions menu is displayed for a row.
 Requires `actions` property to be set to `true`._
 
+Event properties:
+
+```ts
+value: {
+    row: DataRow,
+    action: any
+}
+```
+
 Note that DataTable itself does not populate action menu items,
 you can provide all necessary content via handler.
 
+_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
+
 #### executeRowAction event
 
 _Emitted when row action is executed by user._
@@ -346,7 +386,7 @@ a custom `DataTableAdapter` using the following interfaces:
 
 ```ts
 interface DataTableAdapter {
-    generateSchema(row: DataRow): col: DataColumn;
+    selectedRow: DataRow;
     getRows(): Array<DataRow>;
     setRows(rows: Array<DataRow>): void;
     getColumns(): Array<DataColumn>;

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

@@ -95,14 +95,14 @@ describe('DataTable', () => {
     it('should initialize default adapter', () => {
         let table = new DataTableComponent();
         expect(table.data).toBeUndefined();
-        table.ngOnInit();
+        table.ngAfterContentInit();
         expect(table.data).toEqual(jasmine.any(ObjectDataTableAdapter));
     });
 
     it('should initialize with custom data', () => {
         let data = new ObjectDataTableAdapter([], []);
         dataTable.data = data;
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
         expect(dataTable.data).toBe(data);
     });
 
@@ -130,14 +130,14 @@ describe('DataTable', () => {
 
     it('should prevent default behaviour on row click event', () => {
         let e = jasmine.createSpyObj('event', ['preventDefault']);
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
         dataTable.onRowClick(null, e);
         expect(e.preventDefault).toHaveBeenCalled();
     });
 
     it('should prevent default behaviour on row double-click event', () => {
         let e = jasmine.createSpyObj('event', ['preventDefault']);
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
         dataTable.onRowDblClick(null, e);
         expect(e.preventDefault).toHaveBeenCalled();
     });
@@ -149,7 +149,7 @@ describe('DataTable', () => {
     });
 
     it('should not sort if column is missing', () => {
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
         let adapter = dataTable.data;
         spyOn(adapter, 'setSorting').and.callThrough();
         dataTable.onColumnHeaderClick(null);
@@ -157,7 +157,7 @@ describe('DataTable', () => {
     });
 
     it('should not sort upon clicking non-sortable column header', () => {
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
         let adapter = dataTable.data;
         spyOn(adapter, 'setSorting').and.callThrough();
 
@@ -170,7 +170,7 @@ describe('DataTable', () => {
     });
 
     it('should set sorting upon column header clicked', () => {
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
         let adapter = dataTable.data;
         spyOn(adapter, 'setSorting').and.callThrough();
 
@@ -189,7 +189,7 @@ describe('DataTable', () => {
     });
 
     it('should invert sorting upon column header clicked', () => {
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
 
         let adapter = dataTable.data;
         let sorting = new DataSorting('column_1', 'asc');
@@ -226,13 +226,13 @@ describe('DataTable', () => {
         let handler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered']);
         window['componentHandler'] = handler;
 
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
         expect(handler.upgradeAllRegistered).toHaveBeenCalled();
     });
 
     it('should upgrade MDL components only when component handler present', () => {
         expect(window['componentHandler']).toBeNull();
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
     });
 
     it('should invert "select all" status', () => {
@@ -249,7 +249,7 @@ describe('DataTable', () => {
 
         dataTable.data = data;
         dataTable.multiselect = true;
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
 
         dataTable.onSelectAllClick(null);
         expect(dataTable.isSelectAllChecked).toBe(true);
@@ -266,7 +266,7 @@ describe('DataTable', () => {
 
     it('should allow "select all" calls with no rows', () => {
         dataTable.multiselect = true;
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
 
         dataTable.onSelectAllClick(null);
         expect(dataTable.isSelectAllChecked).toBe(true);
@@ -278,7 +278,7 @@ describe('DataTable', () => {
 
         dataTable.data = data;
         dataTable.multiselect = false;
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
 
         dataTable.onSelectAllClick(null);
         expect(dataTable.isSelectAllChecked).toBe(true);
@@ -354,13 +354,13 @@ describe('DataTable', () => {
     });
 
     it('should require adapter sorting to evaluate sorting state', () => {
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
         spyOn(dataTable.data, 'getSorting').and.returnValue(null);
         expect(dataTable.isColumnSorted(<DataColumn> {}, 'asc')).toBeFalsy();
     });
 
     it('should evaluate column sorting state', () => {
-        dataTable.ngOnInit();
+        dataTable.ngAfterContentInit();
         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

@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, TemplateRef, AfterContentInit, ContentChild } from '@angular/core';
 import { DataTableAdapter, DataRow, DataColumn, DataSorting, DataRowEvent, ObjectDataTableAdapter } from '../../data/index';
 import { DataCellEvent } from './data-cell.event';
 import { DataRowActionEvent } from './data-row-action.event';
+import { DataColumnListComponent } from 'ng2-alfresco-core';
 
 declare var componentHandler;
 
@@ -28,7 +29,9 @@ declare var componentHandler;
     styleUrls: ['./datatable.component.css'],
     templateUrl: './datatable.component.html'
 })
-export class DataTableComponent implements OnInit {
+export class DataTableComponent implements AfterContentInit {
+
+    @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
     @Input()
     data: DataTableAdapter;
@@ -70,12 +73,20 @@ export class DataTableComponent implements OnInit {
         return this.data.selectedRow;
     }
 
-    ngOnInit() {
-        if (!this.data) {
-            this.data = new ObjectDataTableAdapter([], []);
+    ngAfterContentInit() {
+        let schema: DataColumn[] = [];
+
+        if (this.columnList && this.columnList.columns) {
+            schema = this.columnList.columns.map(c => <DataColumn> c);
         }
 
-        // workaround for MDL issues with dynamic components
+        if (!this.data) {
+            this.data = new ObjectDataTableAdapter([], schema);
+        } else if (schema && schema.length > 0) {
+            this.data.setColumns(schema);
+        }
+
+         // workaround for MDL issues with dynamic components
         if (componentHandler) {
             componentHandler.upgradeAllRegistered();
         }

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

@@ -51,7 +51,7 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
         return schema;
     }
 
-    constructor(data: any[], schema: DataColumn[]) {
+    constructor(data: any[] = [], schema: DataColumn[] = []) {
         this._rows = [];
         this._columns = [];