[ADF-1746] node name tooltip pipe (#2480)

* node name tooltip pipe

* update docs
This commit is contained in:
Denys Vuika
2017-10-17 11:41:53 +01:00
committed by Eugenio Romano
parent 0e80f0ab8a
commit 3dfb67313a
4 changed files with 261 additions and 0 deletions

View File

@@ -323,6 +323,7 @@ for more information about installing and using the source code.
- [Node permission directive](node-permission.directive.md) - [Node permission directive](node-permission.directive.md)
- [Node restore directive](node-restore.directive.md) - [Node restore directive](node-restore.directive.md)
- [Upload directive](upload.directive.md) - [Upload directive](upload.directive.md)
- [Node Name Tooltip directive](node-name-tooltip.pipe.md)
- [*Card view content proxy directive](../ng2-components/ng2-alfresco-core/src/components/view/card-view-content-proxy.directive.ts) - [*Card view content proxy directive](../ng2-components/ng2-alfresco-core/src/components/view/card-view-content-proxy.directive.ts)
- [*Highlight directive](../ng2-components/ng2-alfresco-core/src/directives/highlight.directive.ts) - [*Highlight directive](../ng2-components/ng2-alfresco-core/src/directives/highlight.directive.ts)

View File

@@ -0,0 +1,37 @@
# Node Name Tooltip directive
Formats the tooltip of the underlying Node based on the following rules:
* if the *title* and *description* are missing, then the tooltip shows the *name*;
* if the *title* is missing, then the tooltip shows the *name* and *description*;
* if the *description* is missing, then the tooltip shows the *name* and *title*;
* if *name* and *title*, *name* and *description*, or *title* and *description* are the same, then only a single line is displayed.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<data-column
key="name"
title="APP.DOCUMENT_LIST.COLUMNS.NAME">
<ng-template let-value="value" let-context>
<span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
</ng-template>
</data-column>
```
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
<!-- seealso end -->

View File

@@ -0,0 +1,145 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { MinimalNodeEntity } from 'alfresco-js-api';
import { NodeNameTooltipPipe } from './node-name-tooltip.pipe';
describe('NodeNameTooltipPipe', () => {
const nodeName = 'node-name';
const nodeTitle = 'node-title';
const nodeDescription = 'node-description';
let pipe: NodeNameTooltipPipe;
beforeEach(() => {
pipe = new NodeNameTooltipPipe();
});
it('should not transform when missing node', () => {
expect(pipe.transform(null)).toBe(null);
});
it('should not transform when missing node entry', () => {
expect(pipe.transform(<any> {})).toBe(null);
});
it('should use title and description when all fields present', () => {
const node: any = {
entry: {
name: nodeName,
properties: {
'cm:title': nodeTitle,
'cm:description': nodeDescription
}
}
};
let tooltip = pipe.transform(node);
expect(tooltip).toBe(`${nodeTitle}\n${nodeDescription}`);
});
it('should use name when other properties are missing', () => {
const node = {
entry: {
name: nodeName
}
};
let tooltip = pipe.transform(<MinimalNodeEntity> node);
expect(tooltip).toBe(nodeName);
});
it('should display name when title and description are missing', () => {
const node: any = {
entry: {
name: nodeName,
properties: {}
}
};
let tooltip = pipe.transform(node);
expect(tooltip).toBe(nodeName);
});
it('should use name and description when title is missing', () => {
const node: any = {
entry: {
name: nodeName,
properties: {
'cm:title': null,
'cm:description': nodeDescription
}
}
};
let tooltip = pipe.transform(node);
expect(tooltip).toBe(`${nodeName}\n${nodeDescription}`);
});
it('should use name and title when description is missing', () => {
const node: any = {
entry: {
name: nodeName,
properties: {
'cm:title': nodeTitle,
'cm:description': null
}
}
};
let tooltip = pipe.transform(node);
expect(tooltip).toBe(`${nodeName}\n${nodeTitle}`);
});
it('should use name if name and description are the same', () => {
const node: any = {
entry: {
name: nodeName,
properties: {
'cm:title': null,
'cm:description': nodeName
}
}
};
let tooltip = pipe.transform(node);
expect(tooltip).toBe(nodeName);
});
it('should use name if name and title are the same', () => {
const node: any = {
entry: {
name: nodeName,
properties: {
'cm:title': nodeName,
'cm:description': null
}
}
};
let tooltip = pipe.transform(node);
expect(tooltip).toBe(nodeName);
});
it('should use name if all values are the same', () => {
const node: any = {
entry: {
name: nodeName,
properties: {
'cm:title': nodeName,
'cm:description': nodeName
}
}
};
let tooltip = pipe.transform(node);
expect(tooltip).toBe(nodeName);
});
});

View File

@@ -0,0 +1,78 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Pipe, PipeTransform } from '@angular/core';
import { MinimalNodeEntity } from 'alfresco-js-api';
@Pipe({
name: 'adfNodeNameTooltip'
})
export class NodeNameTooltipPipe implements PipeTransform {
transform(node: MinimalNodeEntity): string {
if (node) {
return this.getNodeTooltip(node);
}
return null;
}
private containsLine(lines: string[], line: string): boolean {
return lines.some((item: string) => {
return item.toLowerCase() === line.toLowerCase();
});
}
private removeDuplicateLines(lines: string[]): string[] {
const reducer = (acc: string[], line: string): string[] => {
if (!this.containsLine(acc, line)) { acc.push(line); }
return acc;
};
return lines.reduce(reducer, []);
}
private getNodeTooltip(node: MinimalNodeEntity): string {
if (!node || !node.entry) {
return null;
}
const { entry: { properties, name } } = node;
const lines = [ name ];
if (properties) {
const {
'cm:title': title,
'cm:description': description
} = properties;
if (title && description) {
lines[0] = title;
lines[1] = description;
}
if (title) {
lines[1] = title;
}
if (description) {
lines[1] = description;
}
}
return this.removeDuplicateLines(lines).join(`\n`);
}
}