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

* preview files child route

* fix previewing root files (personal)

src/app/app.routes.ts

@@ -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,
+                children: [
-                data: {
+                    {
-                    i18nTitle: 'APP.BROWSE.FAVORITES.TITLE'
+                        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: [{
+                children: [
-                    path: '',
+                    {
-                    component: FilesComponent,
+                        path: '',
-                    data: {
+                        component: FilesComponent,
-                        i18nTitle: 'APP.BROWSE.PERSONAL.TITLE',
+                        data: {
-                        defaultNodeId: '-my-'
+                            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,
+                children: [
-                data: {
+                    {
-                    i18nTitle: 'APP.BROWSE.RECENT.TITLE'
+                        path: '',
-                }
+                        component: RecentFilesComponent,
+                        data: {
+                            i18nTitle: 'APP.BROWSE.RECENT.TITLE'
+                        }
+                    },
+                    {
+                        path: 'preview/:nodeId',
+                        component: PreviewComponent,
+                        data: {
+                            i18nTitle: 'APP.PREVIEW.TITLE'
+                        }
+                    }
+                ]
             },
             {
                 path: 'shared',
-                component: SharedFilesComponent,
+                children: [
-                data: {
+                    {
-                    i18nTitle: 'APP.BROWSE.SHARED.TITLE'
+                        path: '',
-                }
+                        component: SharedFilesComponent,
+                        data: {
+                            i18nTitle: 'APP.BROWSE.SHARED.TITLE'
+                        }
+                    },
+                    {
+                        path: 'preview/:nodeId',
+                        component: PreviewComponent,
+                        data: {
+                            i18nTitle: 'APP.PREVIEW.TITLE'
+                        }
+                    }
+                ]
             },
             {
                 path: 'trashcan',

src/app/components/favorites/favorites.component.spec.ts

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

src/app/components/favorites/favorites.component.ts

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

src/app/components/files/files.component.spec.ts

@@ -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', () => {

src/app/components/files/files.component.ts

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

src/app/components/preview/preview.component.html

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

src/app/components/preview/preview.component.ts

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

src/app/components/recent-files/recent-files.component.spec.ts

@@ -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', () => {

src/app/components/recent-files/recent-files.component.ts

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

src/app/components/search/search.component.spec.ts

@@ -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', () => {

src/app/components/search/search.component.ts

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

src/app/components/shared-files/shared-files.component.spec.ts

@@ -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(() => {

src/app/components/shared-files/shared-files.component.ts

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