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

* custom tooltip formatter for data columns

* readme updates

* unit tests

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

@@ -178,6 +178,7 @@ Here's the list of available properties you can define for a Data Column definit
 | 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) |
+| formatTooltip | Function | | Custom tooltip formatter function. |
 
 ### DataTable Events
 
@@ -233,6 +234,39 @@ The component will automatically check the corresponding i18n resources and fetc
 
 This feature is optional. Regular text either plain or converted via the `translate` pipe will still be working as it was before.
 
+### Custom tooltips
+
+You can create custom tooltips for the table cells by providing a `formatTooltip` property with a tooltip formatter function when declaring a data column.
+
+```html
+<data-column
+    title="Name"
+    key="name"
+    [formatTooltip]="getNodeNameTooltip"
+    class="full-width ellipsis-cell">
+</data-column>
+```
+
+And the code in this case will be similar to the following:
+
+```ts
+import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
+
+@Component({...})
+export class MyComponent {
+    ...
+
+    getNodeNameTooltip(row: DataRow, col: DataColumn): string {
+        if (row) {
+            return row.getValue('name');
+        }
+        return null;
+    }
+}
+```
+
+To disable the tooltip your function can return `null` or an empty string.
+
 ### Custom Empty content template
 
 You can add a template that will be shown when there are no results in your datatable:

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
     ];
 }