mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
[ACA-1595] Location link - reduce HTTP requests for tooltip (#535)
* get node tooltip info on hover * refactore * remove nodeLocation private attribute * e2e - added datatable method for async tooltips * fix failing tests * lint * lint * removed manual unsubscribe
This commit is contained in:
committed by
Denys Vuika
parent
34888e2b0f
commit
617f80c9fd
@@ -204,6 +204,18 @@ export class DataTable extends Component {
|
||||
return this.getItemLocation(name).$('a').getAttribute('title');
|
||||
}
|
||||
|
||||
getItemLocationTileAttr(name: string) {
|
||||
const location = this.getItemLocation(name).$('a');
|
||||
const condition = () => location.getAttribute('title').then((value) => value && value.length > 0);
|
||||
|
||||
browser.actions()
|
||||
.mouseMove(location)
|
||||
.perform();
|
||||
|
||||
browser.wait(condition, BROWSER_WAIT_TIMEOUT);
|
||||
return location.getAttribute('title');
|
||||
}
|
||||
|
||||
clickItemLocation(name: string) {
|
||||
return this.getItemLocation(name).click();
|
||||
}
|
||||
|
@@ -131,9 +131,9 @@ describe('Favorites', () => {
|
||||
});
|
||||
|
||||
it('Location column displays a tooltip with the entire path of the file [C213671]', async () => {
|
||||
expect(dataTable.getItemLocationTooltip(fileName1)).toEqual(`File Libraries/${siteName}`);
|
||||
expect(dataTable.getItemLocationTooltip(fileName2)).toEqual(`Personal Files/${parentFolder}`);
|
||||
expect(dataTable.getItemLocationTooltip(favFolderName)).toEqual('Personal Files');
|
||||
expect(dataTable.getItemLocationTileAttr(fileName1)).toEqual(`File Libraries/${siteName}`);
|
||||
expect(dataTable.getItemLocationTileAttr(fileName2)).toEqual(`Personal Files/${parentFolder}`);
|
||||
expect(dataTable.getItemLocationTileAttr(favFolderName)).toEqual('Personal Files');
|
||||
});
|
||||
|
||||
it('Location column redirect - item in user Home [C213650] [C260968]', async () => {
|
||||
|
@@ -119,9 +119,9 @@ describe('Recent Files', () => {
|
||||
});
|
||||
|
||||
it('Location column displays a tooltip with the entire path of the file [C213177]', () => {
|
||||
expect(dataTable.getItemLocationTooltip(fileName1)).toEqual(`Personal Files/${folderName}`);
|
||||
expect(dataTable.getItemLocationTooltip(fileName2)).toEqual('Personal Files');
|
||||
expect(dataTable.getItemLocationTooltip(fileSite)).toEqual(`File Libraries/${siteName}/${folderSite}`);
|
||||
expect(dataTable.getItemLocationTileAttr(fileName1)).toEqual(`Personal Files/${folderName}`);
|
||||
expect(dataTable.getItemLocationTileAttr(fileName2)).toEqual('Personal Files');
|
||||
expect(dataTable.getItemLocationTileAttr(fileSite)).toEqual(`File Libraries/${siteName}/${folderSite}`);
|
||||
});
|
||||
|
||||
it('Location column redirect - file in user Home [C213176] [C260968]', () => {
|
||||
|
@@ -136,7 +136,7 @@ describe('Shared Files', () => {
|
||||
});
|
||||
|
||||
it('Location column displays a tooltip with the entire path of the file [C213667]', () => {
|
||||
expect(dataTable.getItemLocationTooltip(fileAdmin)).toEqual(`File Libraries/${siteName}`);
|
||||
expect(dataTable.getItemLocationTooltip(file1User)).toEqual(`Personal Files/${folderUser}`);
|
||||
expect(dataTable.getItemLocationTileAttr(fileAdmin)).toEqual(`File Libraries/${siteName}`);
|
||||
expect(dataTable.getItemLocationTileAttr(file1User)).toEqual(`Personal Files/${folderUser}`);
|
||||
});
|
||||
});
|
||||
|
@@ -23,9 +23,9 @@
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Component, Input, ChangeDetectionStrategy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Component, Input, ChangeDetectionStrategy, OnInit, ViewEncapsulation, HostListener } from '@angular/core';
|
||||
import { PathInfo, MinimalNodeEntity } from 'alfresco-js-api';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
import { Observable, BehaviorSubject } from 'rxjs/Rx';
|
||||
|
||||
import { Store } from '@ngrx/store';
|
||||
import { AppStore } from '../../store/states/app.state';
|
||||
@@ -35,7 +35,7 @@ import { ContentApiService } from '../../services/content-api.service';
|
||||
@Component({
|
||||
selector: 'aca-location-link',
|
||||
template: `
|
||||
<a href="" [title]="tooltip | async" (click)="goToLocation()">
|
||||
<a href="" [title]="nodeLocation$ | async" (click)="goToLocation()">
|
||||
{{ displayText | async }}
|
||||
</a>
|
||||
`,
|
||||
@@ -44,6 +44,9 @@ import { ContentApiService } from '../../services/content-api.service';
|
||||
host: { 'class': 'aca-location-link adf-location-cell' }
|
||||
})
|
||||
export class LocationLinkComponent implements OnInit {
|
||||
private _path: PathInfo;
|
||||
|
||||
nodeLocation$ = new BehaviorSubject(null);
|
||||
|
||||
@Input()
|
||||
context: any;
|
||||
@@ -57,6 +60,10 @@ export class LocationLinkComponent implements OnInit {
|
||||
@Input()
|
||||
tooltip: Observable<string>;
|
||||
|
||||
@HostListener('mouseenter') onMouseEnter() {
|
||||
this.getTooltip(this._path);
|
||||
}
|
||||
|
||||
constructor(
|
||||
private store: Store<AppStore>,
|
||||
private contentApi: ContentApiService) {
|
||||
@@ -77,7 +84,7 @@ export class LocationLinkComponent implements OnInit {
|
||||
|
||||
if (path && path.name && path.elements) {
|
||||
this.displayText = this.getDisplayText(path);
|
||||
this.tooltip = this.getTooltip(path);
|
||||
this._path = path;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -120,7 +127,9 @@ export class LocationLinkComponent implements OnInit {
|
||||
}
|
||||
|
||||
// todo: review once 5.2.3 is out
|
||||
private getTooltip(path: PathInfo): Observable<string> {
|
||||
private getTooltip(path: PathInfo) {
|
||||
let result: string = null;
|
||||
|
||||
const elements = path.elements.map(e => Object.assign({}, e));
|
||||
|
||||
if (elements[0].name === 'Company Home') {
|
||||
@@ -129,8 +138,6 @@ export class LocationLinkComponent implements OnInit {
|
||||
if (elements.length > 2) {
|
||||
if (elements[1].name === 'Sites') {
|
||||
const fragment = elements[2];
|
||||
|
||||
return new Observable<string>(observer => {
|
||||
this.contentApi.getNodeInfo(fragment.id).subscribe(
|
||||
node => {
|
||||
elements.splice(0, 2);
|
||||
@@ -138,19 +145,18 @@ export class LocationLinkComponent implements OnInit {
|
||||
elements.splice(1, 1);
|
||||
elements.unshift({ id: null, name: 'File Libraries' });
|
||||
|
||||
observer.next(elements.map(e => e.name).join('/'));
|
||||
observer.complete();
|
||||
result = elements.map(e => e.name).join('/');
|
||||
this.nodeLocation$.next(result);
|
||||
},
|
||||
() => {
|
||||
elements.splice(0, 2);
|
||||
elements.unshift({ id: null, name: 'File Libraries' });
|
||||
elements.splice(2, 1);
|
||||
|
||||
observer.next(elements.map(e => e.name).join('/'));
|
||||
observer.complete();
|
||||
result = elements.map(e => e.name).join('/');
|
||||
this.nodeLocation$.next(result);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (elements[1].name === 'User Homes') {
|
||||
@@ -160,7 +166,7 @@ export class LocationLinkComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
const result = elements.map(e => e.name).join('/');
|
||||
return Observable.of(result);
|
||||
result = elements.map(e => e.name).join('/');
|
||||
this.nodeLocation$.next(result);
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user