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

* custom tooltip formatter for data columns

* readme updates

* unit tests

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

@@ -102,9 +102,10 @@
                     class="image-table-cell">
                 </data-column>
                 <data-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                    title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
-                        key="name"
+                    key="name"
-                        class="full-width ellipsis-cell">
+                    [formatTooltip]="getNodeNameTooltip"
+                    class="full-width ellipsis-cell">
                 </data-column>
                 <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
                 <!--

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

@@ -24,6 +24,7 @@ import {
     DownloadZipDialogComponent, FileUploadCompleteEvent, FolderCreatedEvent, NotificationService,
     SiteModel, UploadService
 } from 'ng2-alfresco-core';
+import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
 import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
 
 import { ViewerService } from 'ng2-alfresco-viewer';
@@ -283,4 +284,11 @@ export class FilesComponent implements OnInit {
             document.body.removeChild(link);
         }
     }
+
+    getNodeNameTooltip(row: DataRow, col: DataColumn): string {
+        if (row) {
+            return row.getValue('name');
+        }
+        return null;
+    }
 }

ng2-components/ng2-alfresco-core/src/components/data-column/data-column.component.ts

@@ -43,6 +43,9 @@ export class DataColumnComponent implements OnInit {
     @ContentChild(TemplateRef)
     template: any;
 
+    @Input()
+    formatTooltip: Function;
+
     /**
      * Title to be used for screen readers.
      */
@@ -57,5 +60,4 @@ export class DataColumnComponent implements OnInit {
             this.srTitle = 'Thumbnail';
         }
     }
-
 }

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

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

@@ -309,7 +309,7 @@ Note the `#documentList` ID we've just added to be able referencing this compone
 import { ViewChild, AfterViewInit } from '@angular/core';
 import { DocumentListComponent } from 'ng2-alfresco-documentlist';
 
-@Component(...)
+@Component({...})
 export class MyAppComponent implements AfterViewInit {
 
     myStartFolder: string = '-my-';
@@ -366,7 +366,7 @@ DocumentList provides simple breadcrumb element to indicate the current position
 
 | Name | Returned Type | Description |
 | --- | --- | --- |
-| navigate | [PathElementEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PathElementEntity.md) |emitted when user clicks on a breadcrumb  |
+| navigate | [PathElementEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PathElementEntity.md) | emitted when user clicks on a breadcrumb  |
 
 ## Dropdown Site Component
 
@@ -410,29 +410,29 @@ A custom set of columns can look like the following:
 
 ```html
 <adf-document-list ...>
-    <content-columns>
+    <data-columns>
-        <content-column key="$thumbnail" type="image"></content-column>
+        <data-column key="$thumbnail" type="image"></data-column>
-        <content-column 
+        <data-column
             title="Name" 
             key="name" 
             sortable="true"
             class="full-width ellipsis-cell">
-        </content-column>
+        </data-column>
-        <content-column 
+        <data-column
             title="Created By" 
             key="createdByUser.displayName"
             sortable="true"
             class="desktop-only">
-        </content-column>
+        </data-column>
-        <content-column 
+        <data-column
             title="Created On" 
             key="createdAt" 
             type="date" 
             format="medium"
             sortable="true"
             class="desktop-only">
-        </content-column>
+        </data-column>
-    </content-columns>
+    </data-columns>
 </adf-document-list>
 ```
 
@@ -466,6 +466,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. |
 
 DocumentList component assigns an instance of `MinimalNode` type (`alfresco-js-api`) as a data context of each row.
 
@@ -499,14 +500,14 @@ Here's a short example:
 
 ```html
 <adf-document-list ...>
-    <content-columns>
+    <data-columns>
-        <content-column key="$thumbnail" type="image"></content-column>
+        <data-column key="$thumbnail" type="image"></data-column>
-        <content-column title="Name" key="name" class="full-width ellipsis-cell"></content-column>
+        <data-column title="Name" key="name" class="full-width ellipsis-cell"></data-column>
-        <content-column 
+        <data-column
             title="Created By" 
             key="createdByUser.displayName">
-        </content-column>
+        </data-column>
-    </content-columns>
+    </data-columns>
 </adf-document-list>
 ```
 
@@ -544,9 +545,9 @@ You can use all three properties to gain full access to underlying data from wit
 In order to wire HTML templates with the data context you will need defining a variable that is bound to `$implicit` like shown below:
 
 ```html
-<template let-context="$implicit">
+<ng-template let-context="$implicit">
     <!-- template body -->
-</template>
+</ng-template>
 ```
 
 The format of naming is `let-VARIABLE_NAME="$implicit"` where `VARIABLE_NAME` is the name of the variable you want to bind template data context to.
@@ -567,12 +568,12 @@ context.row.getValue('createdByUser.displayName')
 You may want using **row** api to get raw value access.
 
 ```html
-<content-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
+<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
-    <template let-context="$implicit">
+    <ng-template let-context="$implicit">
         <span>Hi! {{context.row.getValue('createdByUser.displayName')}}</span>
         <span>Hi! {{context.row.getValue('name')}}</span>
-    </template>
+    </ng-template>
-</content-column>
+</data-column>
 ```
 
 Use **data** api to get values with post-processing, like datetime/icon conversion._
@@ -580,25 +581,25 @@ Use **data** api to get values with post-processing, like datetime/icon conversi
 In the Example below we will prepend `Hi!` to each file and folder name in the list: 
 
 ```html
-<content-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
+<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
-    <template let-entry="$implicit">
+    <ng-template let-entry="$implicit">
         <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
-    </template>
+    </ng-template>
-</content-column>
+</data-column>
 ```
 
 In the Example below we will add the [ng2-alfresco-tag](https://www.npmjs.com/package/ng2-alfresco-tag) component is integrate in the document list.
 
 ```html
-<content-column
+<data-column
     title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
     key="id"
     sortable="true"
     class="full-width ellipsis-cell">
-    <template let-entry="$implicit">
+    <ng-template let-entry="$implicit">
         <adf-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></adf-tag-node-list>
-    </template>
+    </ng-template>
-</content-column>
+</data-column>
 ```
 
 ![Tag component in document List](docs/assets/document-list-tag-template.png)
@@ -938,6 +939,39 @@ DocumentList emits the following events:
 
 ## Advanced usage and customization
 
+### 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 row filter
 
 You can create a custom row filter implementation that returns `true` if row should be displayed or `false` to hide it.