inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* custom tooltip formatter for data columns

* readme updates

* unit tests
This commit is contained in:
Denys Vuika
2017-08-14 11:26:36 +01:00
committed by Mario Romano
parent 09b213dd04
commit fc46830f7d
10 changed files with 175 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
demo-shell-ng2/app/components/files/files.component.html
View File

@@ -104,6 +104,7 @@
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
key="name"
[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 -->

8
demo-shell-ng2/app/components/files/files.component.ts
View File

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

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

@@ -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';
}
}
}

34
ng2-components/ng2-alfresco-datatable/README.md
View File

@@ -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:

2
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
View File

@@ -80,10 +80,12 @@
(error)="onImageLoadingError($event)">
</div>
<div *ngSwitchCase="'date'" class="cell-value"
[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"
[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>

37
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
View File

@@ -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();
});
});

10
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
View File

@@ -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: {

1
ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts
View File

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

11
ng2-components/ng2-alfresco-datatable/src/material.module.ts
View File

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

94
ng2-components/ng2-alfresco-documentlist/README.md
View File

@@ -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-';
@@ -410,29 +410,29 @@ A custom set of columns can look like the following:
```html
<adf-document-list ...>
<content-columns>
<content-column key="$thumbnail" type="image"></content-column>
<content-column
<data-columns>
<data-column key="$thumbnail" type="image"></data-column>
<data-column
title="Name"
key="name"
sortable="true"
class="full-width ellipsis-cell">
</content-column>
<content-column
</data-column>
<data-column
title="Created By"
key="createdByUser.displayName"
sortable="true"
class="desktop-only">
</content-column>
<content-column
</data-column>
<data-column
title="Created On"
key="createdAt"
type="date"
format="medium"
sortable="true"
class="desktop-only">
</content-column>
</content-columns>
</data-column>
</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>
<content-column key="$thumbnail" type="image"></content-column>
<content-column title="Name" key="name" class="full-width ellipsis-cell"></content-column>
<content-column
<data-columns>
<data-column key="$thumbnail" type="image"></data-column>
<data-column title="Name" key="name" class="full-width ellipsis-cell"></data-column>
<data-column
title="Created By"
key="createdByUser.displayName">
</content-column>
</content-columns>
</data-column>
</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">
<template let-context="$implicit">
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
<ng-template let-context="$implicit">
<span>Hi! {{context.row.getValue('createdByUser.displayName')}}</span>
<span>Hi! {{context.row.getValue('name')}}</span>
</template>
</content-column>
</ng-template>
</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">
<template let-entry="$implicit">
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
<ng-template let-entry="$implicit">
<span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
</template>
</content-column>
</ng-template>
</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>
</content-column>
</ng-template>
</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.