Support for column (cell) templates (#1513)

support for column (cell) templates readme updates and test fixes

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

@@ -28,6 +28,12 @@
                         key="name"
                         sortable="true"
                         class="full-width ellipsis-cell">
+                    <!-- Example of using custom column template -->
+                    <!--
+                    <template let-entry="$implicit">
+                        <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
+                    </template>
+                    -->
                 </content-column>
                 <content-column
                         title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"

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

@@ -47,24 +47,28 @@
             (click)="onRowClick(row, $event)"
             (dblclick)="onRowDblClick(row, $event)"
             [context-menu]="getContextMenuActions(row, col)">
-            <div *ngSwitchCase="'image'" class="cell-value">
-                <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
-                <img *ngIf="!isIconValue(row, col)"
-                     class="image-cell"
-                     alt="{{iconAltTextKey(data.getValue(row, col))|translate}}"
-                     src="{{data.getValue(row, col)}}"
-                     (error)="onImageLoadingError($event)">
+            <div *ngIf="!col.template">
+                <div *ngSwitchCase="'image'" class="cell-value">
+                    <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
+                    <img *ngIf="!isIconValue(row, col)"
+                        class="image-cell"
+                        alt="{{iconAltTextKey(data.getValue(row, col))|translate}}"
+                        src="{{data.getValue(row, col)}}"
+                        (error)="onImageLoadingError($event)">
+                </div>
+                <div *ngSwitchCase="'date'" class="cell-value" [attr.data-automation-id]="'date_' + data.getValue(row, col)">
+                    {{data.getValue(row, col)}}
+                </div>
+                <div *ngSwitchCase="'text'" class="cell-value" [attr.data-automation-id]="'text_' + data.getValue(row, col)">
+                    {{data.getValue(row, col)}}
+                </div>
+                <span *ngSwitchDefault class="cell-value">
+                <!-- empty cell for unknown column type -->
+                </span>
             </div>
-            <div *ngSwitchCase="'date'" class="cell-value" [attr.data-automation-id]="'date_' + data.getValue(row, col)">
-                {{data.getValue(row, col)}}
+            <div *ngIf="col.template">
+                <template ngFor [ngForOf]="[{ data: data, row: row, col: col }]" [ngForTemplate]="col.template"></template>
             </div>
-            <div *ngSwitchCase="'text'" class="cell-value" [attr.data-automation-id]="'text_' + data.getValue(row, col)">
-                {{data.getValue(row, col)}}
-            </div>
-            <span *ngSwitchDefault class="cell-value">
-               <!-- empty cell for unknown column type -->
-            </span>
-
         </td>
 
         <td *ngIf="actions">

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

@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import { TemplateRef } from '@angular/core';
+
 export interface DataTableAdapter {
     selectedRow: DataRow;
     getRows(): Array<DataRow>;
@@ -41,6 +43,7 @@ export interface DataColumn {
     title?: string;
     srTitle?: string;
     cssClass?: string;
+    template?: TemplateRef<any>;
 }
 
 export class DataSorting {

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

@@ -414,7 +414,7 @@ the binding value for the Site column to display location site will be `location
 
 ### Column definition
 
-HTML attributes:
+Properties:
 
 | Name | Type | Default | Description
 | --- | --- | --- | --- |
@@ -425,10 +425,27 @@ HTML attributes:
 | `class` | string | | CSS class list, example: `full-width ellipsis-cell` |
 | `type` | string | text | Column type, text\|date\|number |
 | `format` | string | | Value format pattern |
+| `template` | `TemplateRef<any>` | | Column template |
 
 For `date` column type the [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) formatting is used.
 For a full list of available `format` values please refer to [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) documentation.
 
+#### Column Template
+
+It is possible providing custom column/cell template that may contain other Angular components or HTML elmements:
+
+```html
+<content-column
+        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+        key="name"
+        sortable="true"
+        class="full-width ellipsis-cell">
+    <template let-entry="$implicit">
+        <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
+    </template>
+</content-column>
+```
+
 ### Actions
 
 DocumentList supports declarative actions for Documents and Folders.

ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts

@@ -35,7 +35,7 @@ describe('ContentColumn', () => {
         spyOn(columnList, 'registerColumn').and.callThrough();
 
         let column = new ContentColumnComponent(columnList);
-        column.ngOnInit();
+        column.ngAfterContentInit();
 
         expect(columnList.registerColumn).toHaveBeenCalled();
 
@@ -56,7 +56,7 @@ describe('ContentColumn', () => {
         let column = new ContentColumnComponent(columnList);
         spyOn(column, 'register').and.callThrough();
 
-        column.ngOnInit();
+        column.ngAfterContentInit();
         expect(column.register).toHaveBeenCalled();
     });
 

ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ContentChild, TemplateRef, AfterContentInit } from '@angular/core';
 import { DataColumn } from 'ng2-alfresco-datatable';
 
 import { ContentColumnListComponent } from './content-column-list.component';
@@ -24,7 +24,7 @@ import { ContentColumnListComponent } from './content-column-list.component';
     selector: 'content-column',
     template: ''
 })
-export class ContentColumnComponent implements OnInit, DataColumn {
+export class ContentColumnComponent implements OnInit, AfterContentInit, DataColumn {
 
     @Input()
     key: string;
@@ -41,6 +41,9 @@ export class ContentColumnComponent implements OnInit, DataColumn {
     @Input()
     title: string = '';
 
+    @ContentChild(TemplateRef)
+    template: any;
+
     /**
      * Title to be used for screen readers.
      */
@@ -56,7 +59,9 @@ export class ContentColumnComponent implements OnInit, DataColumn {
         if (!this.srTitle && this.key === '$thumbnail') {
             this.srTitle = 'Thumbnail';
         }
+    }
 
+    ngAfterContentInit() {
         this.register();
     }