[ADF-1021] custom tooltip formatter for data columns (#2206)

* custom tooltip formatter for data columns

* readme updates

* unit tests

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

@@ -80,11 +80,13 @@
                                  (error)="onImageLoadingError($event)">
                         </div>
                         <div *ngSwitchCase="'date'" class="cell-value"
-                             [attr.data-automation-id]="'date_' + data.getValue(row, col)">
+                            [mdTooltip]="getCellTooltip(row, col)"
+                            [attr.data-automation-id]="'date_' + data.getValue(row, col)">
                             <adf-datatable-cell [data]="data" [column]="col" [row]="row"></adf-datatable-cell>
                         </div>
                         <div *ngSwitchCase="'text'" class="cell-value"
-                             [attr.data-automation-id]="'text_' + data.getValue(row, col)">
+                            [mdTooltip]="getCellTooltip(row, col)"
+                            [attr.data-automation-id]="'text_' + data.getValue(row, col)">
                             <adf-datatable-cell [data]="data" [column]="col" [row]="row"></adf-datatable-cell>
                         </div>
                     <span *ngSwitchDefault class="cell-value">

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

@@ -586,4 +586,41 @@ describe('DataTable', () => {
         expect(event.target.src).toBe(originalSrc);
     });
 
+    it('should not get cell tooltip when row is not provided', () => {
+        const col = <DataColumn> { key: 'name', type: 'text' };
+        expect(dataTable.getCellTooltip(null, col)).toBeNull();
+    });
+
+    it('should not get cell tooltip when column is not provided', () => {
+        const row = <DataRow> {};
+        expect(dataTable.getCellTooltip(row, null)).toBeNull();
+    });
+
+    it('should not get cell tooltip when formatter is not provided', () => {
+        const col = <DataColumn> { key: 'name', type: 'text' };
+        const row = <DataRow> {};
+        expect(dataTable.getCellTooltip(row, col)).toBeNull();
+    });
+
+    it('should use formatter function to generate tooltip', () => {
+        const tooltip = 'tooltip value';
+        const col = <DataColumn> {
+            key: 'name',
+            type: 'text',
+            formatTooltip: () =>  tooltip
+        };
+        const row = <DataRow> {};
+        expect(dataTable.getCellTooltip(row, col)).toBe(tooltip);
+    });
+
+    it('should return null value from the tooltip formatter', () => {
+        const col = <DataColumn> {
+            key: 'name',
+            type: 'text',
+            formatTooltip: () =>  null
+        };
+        const row = <DataRow> {};
+        expect(dataTable.getCellTooltip(row, col)).toBeNull();
+    });
+
 });

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

@@ -412,6 +412,16 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         }
     }
 
+    getCellTooltip(row: DataRow, col: DataColumn): string {
+        if (row && col && col.formatTooltip) {
+            const result: string = col.formatTooltip(row, col);
+            if (result) {
+                return result;
+            }
+        }
+        return null;
+    }
+
     private emitRowSelectionEvent(name: string, row: DataRow) {
         const domEvent = new CustomEvent(name, {
             detail: {

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

@@ -47,6 +47,7 @@ export interface DataColumn {
     srTitle?: string;
     cssClass?: string;
     template?: TemplateRef<any>;
+    formatTooltip?: Function;
 }
 
 export class DataSorting {

ng2-components/ng2-alfresco-datatable/src/material.module.ts

@@ -16,14 +16,21 @@
  */
 
 import { NgModule } from '@angular/core';
-import { MdButtonModule, MdCheckboxModule, MdIconModule, MdMenuModule } from '@angular/material';
+import {
+    MdButtonModule,
+    MdCheckboxModule,
+    MdIconModule,
+    MdMenuModule,
+    MdTooltipModule
+} from '@angular/material';
 
 export function modules() {
     return [
         MdCheckboxModule,
         MdMenuModule,
         MdIconModule,
-        MdButtonModule
+        MdButtonModule,
+        MdTooltipModule
     ];
 }