[ACA-1455] universal Viewer @effect (#412)

* viewer @effect

* universal preview effect

* remove router where not needed

* update tests

* update tests

src/app/app.module.ts

@@ -87,6 +87,7 @@ import { RouterEffects } from './store/effects/router.effects';
 import { CreateFolderDirective } from './directives/create-folder.directive';
 import { DownloadEffects } from './store/effects/download.effects';
 import { DownloadNodesDirective } from './directives/download-nodes.directive';
+import { ViewerEffects } from './store/effects/viewer.effects';
 
 
 @NgModule({
@@ -110,7 +111,13 @@ import { DownloadNodesDirective } from './directives/download-nodes.directive';
 
         StoreModule.forRoot({ app: appReducer }, { initialState: INITIAL_STATE }),
         StoreRouterConnectingModule.forRoot({ stateKey: 'router' }),
-        EffectsModule.forRoot([SnackbarEffects, NodeEffects, RouterEffects, DownloadEffects]),
+        EffectsModule.forRoot([
+            SnackbarEffects,
+            NodeEffects,
+            RouterEffects,
+            DownloadEffects,
+            ViewerEffects
+        ]),
         !environment.production ? StoreDevtoolsModule.instrument({ maxAge: 25 }) : []
     ],
     declarations: [

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

@@ -191,32 +191,6 @@ describe('FavoritesComponent', () => {
         });
     });
 
-    describe('onNodeDoubleClick', () => {
-        beforeEach(() => {
-            spyOn(nodesApi, 'getNode').and.returnValue(Observable.of(node));
-            fixture.detectChanges();
-        });
-
-        it('navigates if node is a folder', () => {
-            node.isFolder = true;
-            spyOn(router, 'navigate');
-
-            component.onNodeDoubleClick({ entry: node });
-
-            expect(router.navigate).toHaveBeenCalled();
-        });
-
-        it('opens preview if node is a file', () => {
-            node.isFolder = false;
-            node.isFile = true;
-            spyOn(router, 'navigate').and.stub();
-
-            component.onNodeDoubleClick({ entry: node });
-
-            expect(router.navigate['calls'].argsFor(0)[0]).toEqual(['./preview', 'folder-node']);
-        });
-    });
-
     describe('refresh', () => {
         it('should call document list reload', () => {
             spyOn(component.documentList, 'reload');

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

@@ -39,14 +39,14 @@ import { AppStore } from '../../store/states/app.state';
 })
 export class FavoritesComponent extends PageComponent implements OnInit {
 
-    constructor(router: Router,
+    constructor(private router: Router,
                 route: ActivatedRoute,
                 store: Store<AppStore>,
                 private nodesApi: NodesApiService,
                 private content: ContentManagementService,
                 public permission: NodePermissionService,
                 preferences: UserPreferencesService) {
-        super(preferences, router, route, store);
+        super(preferences, route, store);
     }
 
     ngOnInit() {

src/app/components/files/files.component.html

@@ -112,7 +112,7 @@
                     [allowDropFiles]="true"
                     [navigate]="false"
                     [imageResolver]="imageResolver"
-                    (node-dblclick)="onNodeDoubleClick($event)"
+                    (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
                     (ready)="onDocumentListReady($event, documentList)"
                     (node-select)="onNodeSelect($event, documentList)"
                     (node-unselect)="onNodeUnselect($event, documentList)">

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

@@ -335,49 +335,6 @@ describe('FilesComponent', () => {
         });
     });
 
-    describe('onNodeDoubleClick()', () => {
-        beforeEach(() => {
-            spyOn(component, 'fetchNode').and.returnValue(Observable.of(node));
-            spyOn(component, 'fetchNodes').and.returnValue(Observable.of(page));
-
-            fixture.detectChanges();
-        });
-
-        it('should open preview if node is file', () => {
-            spyOn(router, 'navigate').and.stub();
-            node.isFile = true;
-            node.isFolder = false;
-
-            const event: any = {
-                detail: {
-                    node: {
-                        entry: node
-                    }
-                }
-            };
-            component.onNodeDoubleClick(event);
-
-            expect(router.navigate['calls'].argsFor(0)[0]).toEqual(['./preview', node.id]);
-        });
-
-        it('should navigate if node is folder', () => {
-            spyOn(component, 'navigate').and.stub();
-            node.isFolder = true;
-
-
-            const event: any = {
-                detail: {
-                    node: {
-                        entry: node
-                    }
-                }
-            };
-            component.onNodeDoubleClick(event);
-
-            expect(component.navigate).toHaveBeenCalledWith(node.id);
-        });
-    });
-
     describe('onBreadcrumbNavigate()', () => {
         beforeEach(() => {
             spyOn(component, 'fetchNode').and.returnValue(Observable.of(node));

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

@@ -50,7 +50,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
 
     private nodePath: PathElement[];
 
-    constructor(router: Router,
+    constructor(private router: Router,
                 route: ActivatedRoute,
                 store: Store<AppStore>,
                 private nodesApi: NodesApiService,
@@ -61,7 +61,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
                 private apiService: AlfrescoApiService,
                 public permission: NodePermissionService,
                 preferences: UserPreferencesService) {
-        super(preferences, router, route, store);
+        super(preferences, route, store);
     }
 
     ngOnInit() {
@@ -139,24 +139,21 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
         });
     }
 
-    onNodeDoubleClick(event: CustomEvent) {
+    onNodeDoubleClick(node: MinimalNodeEntity) {
-        if (!!event.detail && !!event.detail.node) {
+        if (node && node.entry) {
+            const { id, isFolder } = node.entry;
 
-            const node: MinimalNodeEntryEntity = event.detail.node.entry;
+            if (isFolder) {
-            if (node) {
+                this.navigate(id);
-
+                return;
-                if (node.isFolder) {
-                    this.navigate(node.id);
-                }
-
-                if (PageComponent.isLockedNode(node)) {
-                    event.preventDefault();
-
-                } else if (node.isFile) {
-                    this.router.navigate(['./preview', node.id], { relativeTo: this.route });
-                }
             }
 
+            if (PageComponent.isLockedNode(node.entry)) {
+                event.preventDefault();
+                return;
+            }
+
+            this.showPreview(node);
         }
     }
 

src/app/components/libraries/libraries.component.ts

@@ -40,9 +40,9 @@ export class LibrariesComponent extends PageComponent {
     constructor(private nodesApi: NodesApiService,
                 route: ActivatedRoute,
                 store: Store<AppStore>,
-                router: Router,
+                private router: Router,
                 preferences: UserPreferencesService) {
-        super(preferences, router, route, store);
+        super(preferences, route, store);
     }
 
     makeLibraryTooltip(library: any): string {

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

@@ -34,7 +34,7 @@ class TestClass extends PageComponent {
     }
 
     constructor() {
-        super(null, null, null, null);
+        super(null, null, null);
     }
 }
 

src/app/components/page.component.ts

@@ -26,7 +26,7 @@
 import { MinimalNodeEntity, MinimalNodeEntryEntity, Pagination } from 'alfresco-js-api';
 import { UserPreferencesService, FileUploadErrorEvent } from '@alfresco/adf-core';
 import { ShareDataRow, DocumentListComponent } from '@alfresco/adf-content-services';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { OnDestroy, ViewChild, OnInit } from '@angular/core';
 import { Subscription, Subject } from 'rxjs/Rx';
 import { Store } from '@ngrx/store';
@@ -35,6 +35,7 @@ import { SetSelectedNodesAction } from '../store/actions/node.action';
 import { selectedNodes } from '../store/selectors/app.selectors';
 import { takeUntil } from 'rxjs/operators';
 import { SnackbarErrorAction } from '../store/actions';
+import { ViewNodeAction } from '../store/actions/viewer.action';
 
 
 export abstract class PageComponent implements OnInit, OnDestroy {
@@ -66,7 +67,6 @@ export abstract class PageComponent implements OnInit, OnDestroy {
     }
 
     constructor(protected preferences: UserPreferencesService,
-                protected router: Router,
                 protected route: ActivatedRoute,
                 protected store: Store<AppStore>) {
     }
@@ -103,8 +103,17 @@ export abstract class PageComponent implements OnInit, OnDestroy {
     }
 
     showPreview(node: MinimalNodeEntity) {
-        if (node && node.entry && node.entry.isFile) {
+        if (node && node.entry) {
-            this.router.navigate(['./preview', node.entry.id], { relativeTo: this.route });
+            const { id, nodeId, name, isFile, isFolder } = node.entry;
+            const parentId = this.node ? this.node.id : null;
+
+            this.store.dispatch(new ViewNodeAction({
+                parentId,
+                id: nodeId || id,
+                name,
+                isFile,
+                isFolder
+            }));
         }
     }
 

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

@@ -61,11 +61,11 @@ export class PreviewComponent extends PageComponent implements OnInit {
         private apiService: AlfrescoApiService,
         preferences: UserPreferencesService,
         route: ActivatedRoute,
-        router: Router,
+        private router: Router,
         store: Store<AppStore>,
         public permission: NodePermissionService) {
 
-        super(preferences, router, route, store);
+        super(preferences, route, store);
     }
 
     ngOnInit() {

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

@@ -92,7 +92,7 @@
                 [sorting]="[ 'modifiedAt', 'desc' ]"
                 [acaSortingPreferenceKey]="sortingPreferenceKey"
                 [imageResolver]="imageResolver"
-                (node-dblclick)="onNodeDoubleClick($event.detail?.node?.entry)"
+                (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
                 (ready)="onDocumentListReady($event, documentList)"
                 (node-select)="onNodeSelect($event, documentList)"
                 (node-unselect)="onNodeUnselect($event, documentList)">

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

@@ -25,7 +25,6 @@
 
 import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientModule } from '@angular/common/http';
 import {
@@ -51,7 +50,6 @@ import { INITIAL_STATE } from '../../store/states/app.state';
 describe('RecentFiles Routed Component', () => {
     let fixture: ComponentFixture<RecentFilesComponent>;
     let component: RecentFilesComponent;
-    let router: Router;
     let alfrescoApi: AlfrescoApiService;
     let contentService: ContentManagementService;
     let page;
@@ -108,7 +106,6 @@ describe('RecentFiles Routed Component', () => {
             fixture = TestBed.createComponent(RecentFilesComponent);
             component = fixture.componentInstance;
 
-            router = TestBed.get(Router);
             contentService = TestBed.get(ContentManagementService);
             alfrescoApi = TestBed.get(AlfrescoApiService);
             alfrescoApi.reset();
@@ -153,28 +150,6 @@ describe('RecentFiles Routed Component', () => {
         });
     });
 
-    describe('onNodeDoubleClick()', () => {
-        it('open preview if node is file', () => {
-            spyOn(router, 'navigate').and.stub();
-            const node: any = { id: 'node-id', isFile: true };
-
-            component.onNodeDoubleClick(node);
-            fixture.detectChanges();
-
-            expect(router.navigate['calls'].argsFor(0)[0]).toEqual(['./preview', node.id]);
-        });
-
-        it('does not open preview if node is folder', () => {
-            spyOn(router, 'navigate').and.stub();
-            const node: any = { isFolder: true };
-
-            component.onNodeDoubleClick(node);
-            fixture.detectChanges();
-
-            expect(router.navigate).not.toHaveBeenCalled();
-        });
-    });
-
     describe('refresh', () => {
         it('should call document list reload', () => {
             spyOn(component.documentList, 'reload');

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

@@ -24,8 +24,8 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { MinimalNodeEntity } from 'alfresco-js-api';
 import { UserPreferencesService, UploadService } from '@alfresco/adf-core';
 
 import { ContentManagementService } from '../../common/services/content-management.service';
@@ -40,14 +40,13 @@ import { AppStore } from '../../store/states/app.state';
 export class RecentFilesComponent extends PageComponent implements OnInit {
 
     constructor(
-        router: Router,
         route: ActivatedRoute,
         store: Store<AppStore>,
         private uploadService: UploadService,
         private content: ContentManagementService,
         public permission: NodePermissionService,
         preferences: UserPreferencesService) {
-        super(preferences, router, route, store);
+        super(preferences, route, store);
     }
 
     ngOnInit() {
@@ -61,12 +60,14 @@ export class RecentFilesComponent extends PageComponent implements OnInit {
         ]);
     }
 
-    onNodeDoubleClick(node: MinimalNodeEntryEntity) {
+    onNodeDoubleClick(node: MinimalNodeEntity) {
-        if (node && PageComponent.isLockedNode(node)) {
+        if (node && node.entry) {
-            event.preventDefault();
+            if (PageComponent.isLockedNode(node.entry)) {
+                event.preventDefault();
+                return;
+            }
 
-        } else if (node && node.isFile) {
+            this.showPreview(node);
-            this.router.navigate(['./preview', node.id], { relativeTo: this.route });
         }
     }
 }

src/app/components/search/search.component.html

@@ -96,7 +96,7 @@
                         [sortingMode]="'server'"
                         [sorting]="sorting"
                         [node]="data"
-                        (node-dblclick)="onNodeDoubleClick($event.detail?.node?.entry)"
+                        (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
                         (ready)="onDocumentListReady($event, documentList)"
                         (node-select)="onNodeSelect($event, documentList)"
                         (node-unselect)="onNodeUnselect($event, documentList)">

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

@@ -24,8 +24,8 @@
  */
 
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MinimalNodeEntryEntity, NodePaging, Pagination } from 'alfresco-js-api';
+import { NodePaging, Pagination, MinimalNodeEntity } from 'alfresco-js-api';
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Params } from '@angular/router';
 import { SearchQueryBuilderService, SearchComponent as AdfSearchComponent, NodePermissionService } from '@alfresco/adf-content-services';
 import { SearchConfigurationService, UserPreferencesService, SearchService } from '@alfresco/adf-core';
 import { PageComponent } from '../page.component';
@@ -57,10 +57,9 @@ export class SearchComponent extends PageComponent implements OnInit {
         private queryBuilder: SearchQueryBuilderService,
         private searchConfiguration: SearchConfigurationService,
         store: Store<AppStore>,
-        router: Router,
         preferences: UserPreferencesService,
         route: ActivatedRoute) {
-        super(preferences, router, route, store);
+        super(preferences, route, store);
 
         queryBuilder.paging = {
             skipCount: 0,
@@ -123,16 +122,19 @@ export class SearchComponent extends PageComponent implements OnInit {
         return ['name', 'asc'];
     }
 
-    onNodeDoubleClick(node: MinimalNodeEntryEntity) {
+    onNodeDoubleClick(node: MinimalNodeEntity) {
-        if (node && node.isFolder) {
+        if (node && node.entry) {
-            this.store.dispatch(new NavigateToLocationAction(node));
+            if (node.entry.isFolder) {
-        }
+                this.store.dispatch(new NavigateToLocationAction(node));
+                return;
+            }
 
-        if (node && PageComponent.isLockedNode(node)) {
+            if (PageComponent.isLockedNode(node.entry)) {
-            event.preventDefault();
+                event.preventDefault();
+                return;
+            }
 
-        } else if (node && node.isFile) {
+            this.showPreview(node);
-            this.router.navigate(['./preview', node.id], { relativeTo: this.route });
         }
     }
 }

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

@@ -98,7 +98,7 @@
                 selectionMode="multiple"
                 [sorting]="[ 'modifiedAt', 'desc' ]"
                 [acaSortingPreferenceKey]="sortingPreferenceKey"
-                (node-dblclick)="onNodeDoubleClick($event.detail?.node?.entry)"
+                (node-dblclick)="showPreview($event.detail?.node)"
                 (ready)="onDocumentListReady($event, documentList)"
                 (node-select)="onNodeSelect($event, documentList)"
                 (node-unselect)="onNodeUnselect($event, documentList)">

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

@@ -23,9 +23,8 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { TestBed, async, fakeAsync, tick, ComponentFixture } from '@angular/core/testing';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientModule } from '@angular/common/http';
 import {
@@ -52,9 +51,7 @@ describe('SharedFilesComponent', () => {
     let fixture: ComponentFixture<SharedFilesComponent>;
     let component: SharedFilesComponent;
     let contentService: ContentManagementService;
-    let nodeService;
     let alfrescoApi: AlfrescoApiService;
-    let router: Router;
     let page;
 
     beforeEach(() => {
@@ -114,8 +111,6 @@ describe('SharedFilesComponent', () => {
                 contentService = TestBed.get(ContentManagementService);
                 alfrescoApi = TestBed.get(AlfrescoApiService);
                 alfrescoApi.reset();
-                nodeService = alfrescoApi.getInstance().nodes;
-                router = TestBed.get(Router);
             });
 
     }));
@@ -154,33 +149,6 @@ describe('SharedFilesComponent', () => {
         });
     });
 
-    describe('onNodeDoubleClick()', () => {
-        beforeEach(() => {
-            fixture.detectChanges();
-        });
-
-        it('opens viewer if node is file', fakeAsync(() => {
-            spyOn(router, 'navigate').and.stub();
-            const link = { nodeId: 'nodeId' };
-            const node = { entry: { isFile: true, id: 'nodeId' } };
-
-            spyOn(nodeService, 'getNode').and.returnValue(Promise.resolve(node));
-            component.onNodeDoubleClick(link);
-            tick();
-
-            expect(router.navigate['calls'].argsFor(0)[0]).toEqual(['./preview', node.entry.id]);
-        }));
-
-        it('does nothing if link data is not passed', () => {
-            spyOn(router, 'navigate').and.stub();
-            spyOn(nodeService, 'getNode').and.returnValue(Promise.resolve({ entry: { isFile: true } }));
-
-            component.onNodeDoubleClick(null);
-
-            expect(router.navigate).not.toHaveBeenCalled();
-        });
-    });
-
     describe('refresh', () => {
         it('should call document list reload', () => {
             spyOn(component.documentList, 'reload');

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

@@ -24,7 +24,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { UserPreferencesService, UploadService } from '@alfresco/adf-core';
 
 import { ContentManagementService } from '../../common/services/content-management.service';
@@ -38,14 +38,13 @@ import { AppStore } from '../../store/states/app.state';
 })
 export class SharedFilesComponent extends PageComponent implements OnInit {
 
-    constructor(router: Router,
+    constructor(route: ActivatedRoute,
-                route: ActivatedRoute,
                 store: Store<AppStore>,
                 private uploadService: UploadService,
                 private content: ContentManagementService,
                 public permission: NodePermissionService,
                 preferences: UserPreferencesService) {
-        super(preferences, router, route, store);
+        super(preferences, route, store);
     }
 
     ngOnInit() {
@@ -58,10 +57,4 @@ export class SharedFilesComponent extends PageComponent implements OnInit {
             this.uploadService.fileUploadError.subscribe((error) => this.onFileUploadedError(error))
         ]);
     }
-
-    onNodeDoubleClick(link: { nodeId?: string }) {
-        if (link && link.nodeId) {
-            this.router.navigate(['./preview', link.nodeId], { relativeTo: this.route });
-        }
-    }
 }

src/app/components/trashcan/trashcan.component.ts

@@ -24,7 +24,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { Pagination } from 'alfresco-js-api';
 import { UserPreferencesService } from '@alfresco/adf-core';
 import { ContentManagementService } from '../../common/services/content-management.service';
@@ -40,9 +40,8 @@ export class TrashcanComponent extends PageComponent implements OnInit {
     constructor(private contentManagementService: ContentManagementService,
                 preferences: UserPreferencesService,
                 store: Store<AppStore>,
-                router: Router,
                 route: ActivatedRoute) {
-        super(preferences, router, route, store);
+        super(preferences, route, store);
     }
 
     ngOnInit() {

src/app/store/actions/node.action.ts

@@ -8,6 +8,7 @@ export const PURGE_DELETED_NODES = 'PURGE_DELETED_NODES';
 export const DOWNLOAD_NODES = 'DOWNLOAD_NODES';
 
 export interface NodeInfo {
+    parentId?: string;
     id: string;
     name: string;
     isFile?: boolean;

src/app/store/actions/viewer.action.ts

@@ -0,0 +1,9 @@
+import { Action } from '@ngrx/store';
+import { NodeInfo } from './node.action';
+
+export const VIEW_NODE = 'VIEW_NODE';
+
+export class ViewNodeAction implements Action {
+    readonly type = VIEW_NODE;
+    constructor(public payload: NodeInfo) {}
+}

src/app/store/effects/viewer.effects.ts

@@ -0,0 +1,37 @@
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Injectable } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { ViewNodeAction, VIEW_NODE } from '../actions/viewer.action';
+import { Router } from '@angular/router';
+
+@Injectable()
+export class ViewerEffects {
+    constructor(private actions$: Actions, private router: Router) {}
+
+    @Effect({ dispatch: false })
+    viewNode$ = this.actions$.pipe(
+        ofType<ViewNodeAction>(VIEW_NODE),
+        map(action => {
+            const node = action.payload;
+            if (!node) {
+                return;
+            }
+
+            let previewLocation = this.router.url;
+            if (previewLocation.lastIndexOf('/') > 0) {
+                previewLocation = previewLocation.substr(
+                    0,
+                    this.router.url.indexOf('/', 1)
+                );
+            }
+            previewLocation = previewLocation.replace(/\//g, '');
+
+            const path = [previewLocation];
+            if (node.parentId) {
+                path.push(node.parentId);
+            }
+            path.push('preview', node.id);
+            this.router.navigateByUrl(path.join('/'));
+        })
+    );
+}