inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-31 17:38:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-1066] Improved files preview (#173)

Browse Source 
* preview files child route

* fix previewing root files (personal)
This commit is contained in:
Denys Vuika
2018-01-09 16:00:19 +00:00
committed by GitHub
parent c38a193712
commit 00d14069c5
13 changed files with 138 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/app/app.routes.ts
View File

@@ -41,13 +41,6 @@ import { PreviewComponent } from './components/preview/preview.component';
import { GenericErrorComponent } from './components/generic-error/generic-error.component';
export const APP_ROUTES: Routes = [
{
path: 'preview/:nodeId',
component: PreviewComponent,
data: {
i18nTitle: 'APP.PREVIEW.TITLE'
}
},
{
path: 'login',
component: LoginComponent,
@@ -66,10 +59,22 @@ export const APP_ROUTES: Routes = [
},
{
path: 'favorites',
component: FavoritesComponent,
data: {
i18nTitle: 'APP.BROWSE.FAVORITES.TITLE'
}
children: [
{
path: '',
component: FavoritesComponent,
data: {
i18nTitle: 'APP.BROWSE.FAVORITES.TITLE'
}
},
{
path: 'preview/:nodeId',
component: PreviewComponent,
data: {
i18nTitle: 'APP.PREVIEW.TITLE'
}
}
]
},
{
path: 'libraries',
@@ -85,38 +90,87 @@ export const APP_ROUTES: Routes = [
data: {
i18nTitle: 'APP.BROWSE.LIBRARIES.TITLE'
}
}]
},
{
path: ':id/preview/:nodeId',
component: PreviewComponent,
data: {
i18nTitle: 'APP.PREVIEW.TITLE'
}
}
]
},
{
path: 'personal-files',
children: [{
path: '',
component: FilesComponent,
data: {
i18nTitle: 'APP.BROWSE.PERSONAL.TITLE',
defaultNodeId: '-my-'
children: [
{
path: '',
component: FilesComponent,
data: {
i18nTitle: 'APP.BROWSE.PERSONAL.TITLE',
defaultNodeId: '-my-'
}
},
{
path: ':id',
component: FilesComponent,
data: {
i18nTitle: 'APP.BROWSE.PERSONAL.TITLE'
}
},
{
path: 'preview/:nodeId',
component: PreviewComponent,
data: {
i18nTitle: 'APP.PREVIEW.TITLE'
}
},
{
path: ':id/preview/:nodeId',
component: PreviewComponent,
data: {
i18nTitle: 'APP.PREVIEW.TITLE'
}
}
}, {
path: ':id',
component: FilesComponent,
data: {
i18nTitle: 'APP.BROWSE.PERSONAL.TITLE'
}
}]
]
},
{
path: 'recent-files',
component: RecentFilesComponent,
data: {
i18nTitle: 'APP.BROWSE.RECENT.TITLE'
}
children: [
{
path: '',
component: RecentFilesComponent,
data: {
i18nTitle: 'APP.BROWSE.RECENT.TITLE'
}
},
{
path: 'preview/:nodeId',
component: PreviewComponent,
data: {
i18nTitle: 'APP.PREVIEW.TITLE'
}
}
]
},
{
path: 'shared',
component: SharedFilesComponent,
data: {
i18nTitle: 'APP.BROWSE.SHARED.TITLE'
}
children: [
{
path: '',
component: SharedFilesComponent,
data: {
i18nTitle: 'APP.BROWSE.SHARED.TITLE'
}
},
{
path: 'preview/:nodeId',
component: PreviewComponent,
data: {
i18nTitle: 'APP.PREVIEW.TITLE'
}
}
]
},
{
path: 'trashcan',

2
src/app/components/favorites/favorites.component.spec.ts
View File

@@ -174,7 +174,7 @@ describe('Favorites Routed Component', () => {
component.onNodeDoubleClick(node);
expect(router.navigate).toHaveBeenCalledWith(['/preview', node.id]);
expect(router.navigate['calls'].argsFor(0)[0]).toEqual(['./preview', 'folder-node']);
});
});

5
src/app/components/favorites/favorites.component.ts
View File

@@ -24,7 +24,7 @@
*/
import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Rx';
import { MinimalNodeEntryEntity, MinimalNodeEntity, PathElementEntity, PathInfo } from 'alfresco-js-api';
@@ -46,6 +46,7 @@ export class FavoritesComponent extends PageComponent implements OnInit, OnDestr
constructor(
private router: Router,
private route: ActivatedRoute,
private nodesApi: NodesApiService,
private contentService: ContentService,
private content: ContentManagementService,
@@ -95,7 +96,7 @@ export class FavoritesComponent extends PageComponent implements OnInit, OnDestr
}
if (node.isFile) {
this.router.navigate(['/preview', node.id]);
this.router.navigate(['./preview', node.id], { relativeTo: this.route });
}
}
}

5
src/app/components/files/files.component.spec.ts
View File

@@ -143,7 +143,7 @@ describe('FilesComponent', () => {
fixture.detectChanges();
expect(router.navigate).toHaveBeenCalledWith([ '/personal-files', 'parent-id' ]);
expect(router.navigate['calls'].argsFor(0)[0]).toEqual(['/personal-files', 'parent-id']);
});
});
@@ -315,6 +315,7 @@ describe('FilesComponent', () => {
it('opens preview if node is file', () => {
spyOn(router, 'navigate').and.stub();
node.isFile = true;
node.isFolder = false;
const event: any = {
detail: {
@@ -325,7 +326,7 @@ describe('FilesComponent', () => {
};
component.onNodeDoubleClick(event);
expect(router.navigate).toHaveBeenCalledWith(['/preview', node.id]);
expect(router.navigate['calls'].argsFor(0)[0]).toEqual(['./preview', node.id]);
});
it('navigate if node is folder', () => {

7
src/app/components/files/files.component.ts
View File

@@ -80,9 +80,10 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
if (node.isFolder) {
this.updateCurrentNode(node);
} else {
this.router.navigate(['/personal-files', node.parentId]);
this.router.navigate(['/personal-files', node.parentId], { replaceUrl: true });
}
})
.skipWhile(node => !node.isFolder)
.flatMap((node) => this.fetchNodes(node.id))
.subscribe(
(page) => {
@@ -154,7 +155,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
event.preventDefault();
} else if (node.isFile) {
this.router.navigate(['/preview', node.id]);
this.router.navigate(['./preview', node.id], { relativeTo: this.route });
}
}
@@ -164,7 +165,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
showPreview(node: MinimalNodeEntryEntity) {
if (node) {
if (node.isFile) {
this.router.navigate(['/preview', node.id]);
this.router.navigate(['./preview', node.id], { relativeTo: this.route });
}
}
}

6
src/app/components/preview/preview.component.html
View File

@@ -1,3 +1,7 @@
<ng-container *ngIf="nodeId">
<adf-viewer [fileNodeId]="nodeId"></adf-viewer>
<adf-viewer
[fileNodeId]="nodeId"
[overlayMode]="true"
(showViewerChange)="onShowChange($event)">
</adf-viewer>
</ng-container>

25
src/app/components/preview/preview.component.ts
View File

@@ -26,6 +26,7 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AlfrescoApiService } from '@alfresco/adf-core';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
@Component({
selector: 'app-preview',
@@ -37,12 +38,17 @@ import { AlfrescoApiService } from '@alfresco/adf-core';
})
export class PreviewComponent implements OnInit {
private node: MinimalNodeEntryEntity;
private previewLocation: string = null;
private routesSkipNavigation = [ '/shared', '/recent-files', '/favorites' ];
nodeId: string = null;
constructor(
private router: Router,
private route: ActivatedRoute,
private apiService: AlfrescoApiService) {}
private apiService: AlfrescoApiService) {
this.previewLocation = this.router.url.substr(0, this.router.url.indexOf('/', 1));
}
ngOnInit() {
this.route.params.subscribe(params => {
@@ -50,16 +56,29 @@ export class PreviewComponent implements OnInit {
if (id) {
this.apiService.getInstance().nodes.getNodeInfo(id).then(
(node) => {
this.node = node;
if (node && node.isFile) {
this.nodeId = id;
return;
}
this.router.navigate(['/personal-files', id]);
this.router.navigate([this.previewLocation, id]);
},
() => this.router.navigate(['/personal-files', id])
() => this.router.navigate([this.previewLocation, id])
);
}
});
}
onShowChange(isVisible) {
const shouldSkipNavigation = this.routesSkipNavigation.includes(this.previewLocation);
if (!isVisible) {
if ( !shouldSkipNavigation ) {
this.router.navigate([this.previewLocation, this.node.parentId ]);
} else {
this.router.navigate([this.previewLocation]);
}
}
}
}

4
src/app/components/recent-files/recent-files.component.spec.ts
View File

@@ -122,12 +122,12 @@ describe('RecentFiles Routed Component', () => {
it('open preview if node is file', () => {
spyOn(router, 'navigate').and.stub();
const node: any = { isFile: true };
const node: any = { id: 'node-id', isFile: true };
component.onNodeDoubleClick(node);
fixture.detectChanges();
expect(router.navigate).toHaveBeenCalledWith(['/preview', node.id]);
expect(router.navigate['calls'].argsFor(0)[0]).toEqual(['./preview', node.id]);
});
it('does not open preview if node is folder', () => {

5
src/app/components/recent-files/recent-files.component.ts
View File

@@ -25,7 +25,7 @@
import { Subscription } from 'rxjs/Rx';
import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Router, ActivatedRoute } from '@angular/router';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
import { UserPreferencesService } from '@alfresco/adf-core';
import { DocumentListComponent } from '@alfresco/adf-content-services';
@@ -45,6 +45,7 @@ export class RecentFilesComponent extends PageComponent implements OnInit, OnDes
constructor(
private router: Router,
private route: ActivatedRoute,
private content: ContentManagementService,
preferences: UserPreferencesService) {
super(preferences);
@@ -67,7 +68,7 @@ export class RecentFilesComponent extends PageComponent implements OnInit, OnDes
event.preventDefault();
} else if (node && node.isFile) {
this.router.navigate(['/preview', node.id]);
this.router.navigate(['./preview', node.id], { relativeTo: this.route });
}
}

5
src/app/components/search/search.component.spec.ts
View File

@@ -60,11 +60,12 @@ describe('SearchComponent', () => {
describe('onItemClicked()', () => {
it('opens preview if node is file', () => {
spyOn(router, 'navigate').and.stub();
const node = { entry: { isFile: true, id: 'node-id' } };
const node = { entry: { isFile: true, id: 'node-id', parentId: 'parent-id' } };
component.onItemClicked(node);
expect(router.navigate).toHaveBeenCalledWith(['/preview', node.entry.id]);
expect(router.navigate['calls'].argsFor(0)[0])
.toEqual([`/personal-files/${node.entry.parentId}/preview/`, node.entry.id]);
});
it('navigates if node is folder', () => {

2
src/app/components/search/search.component.ts
View File

@@ -41,7 +41,7 @@ export class SearchComponent {
onItemClicked(node: MinimalNodeEntity) {
if (node && node.entry) {
if (node.entry.isFile) {
this.router.navigate(['/preview', node.entry.id]);
this.router.navigate([`/personal-files/${node.entry.parentId}/preview/`, node.entry.id]);
} else if (node.entry.isFolder) {
this.router.navigate([ '/personal-files', node.entry.id ]);
}

2
src/app/components/shared-files/shared-files.component.spec.ts
View File

@@ -126,7 +126,7 @@ describe('SharedFilesComponent', () => {
component.onNodeDoubleClick(link);
tick();
expect(router.navigate).toHaveBeenCalledWith(['/preview', node.entry.id]);
expect(router.navigate['calls'].argsFor(0)[0]).toEqual(['./preview', node.entry.id]);
}));
it('does nothing if node is folder', fakeAsync(() => {

5
src/app/components/shared-files/shared-files.component.ts
View File

@@ -24,7 +24,7 @@
*/
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Rx';
import { MinimalNodeEntity } from 'alfresco-js-api';
import { AlfrescoApiService, UserPreferencesService } from '@alfresco/adf-core';
@@ -45,6 +45,7 @@ export class SharedFilesComponent extends PageComponent implements OnInit, OnDes
constructor(
private router: Router,
private route: ActivatedRoute,
private content: ContentManagementService,
private apiService: AlfrescoApiService,
preferences: UserPreferencesService) {
@@ -68,7 +69,7 @@ export class SharedFilesComponent extends PageComponent implements OnInit, OnDes
this.apiService.nodesApi.getNode(link.nodeId).then(
(node: MinimalNodeEntity) => {
if (node && node.entry && node.entry.isFile) {
this.router.navigate(['/preview', node.entry.id]);
this.router.navigate(['./preview', node.entry.id], { relativeTo: this.route });
}
}
);