viewer enhancements (#499)

* fix ngOnInit inheritance

* use unified info drawer

src/app/components/page.component.ts

@@ -53,6 +53,7 @@ export abstract class PageComponent implements OnInit, OnDestroy {
     displayMode = DisplayMode.List;
     sharedPreviewUrl$: Observable<string>;
     actions: Array<ContentActionExtension> = [];
+    canUpdateFile = false;
     canDelete = false;
     canEditFolder = false;
     canUpload = false;
@@ -82,6 +83,7 @@ export abstract class PageComponent implements OnInit, OnDestroy {
                     this.infoDrawerOpened = false;
                 }
                 this.actions = this.extensions.getSelectedContentActions(selection, this.node);
+                this.canUpdateFile = this.selection.file && this.content.canUpdateNode(selection.file);
                 this.canDelete = !this.selection.isEmpty && this.content.canDeleteNodes(selection.nodes);
                 this.canEditFolder = selection.folder && this.content.canUpdateNode(selection.folder);
                 this.canDeleteShared = !this.selection.isEmpty && this.content.canDeleteSharedNodes(selection.nodes);

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

@@ -1,33 +1,9 @@
 <ng-container *ngIf="nodeId">
 
-    <ng-template #sidebarTemplate>
-        <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
-            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.TABS.PROPERTIES' | translate">
-                <adf-content-metadata-card
-                    [readOnly]="!canUpdatePreview"
-                    [displayEmpty]="canUpdatePreview"
-                    [preset]="'custom'"
-                    [node]="node">
-                </adf-content-metadata-card>
-            </adf-info-drawer-tab>
-
-            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.TABS.VERSIONS' | translate">
-                <ng-container>
-                    <adf-version-manager
-                        [showComments]="'adf-version-manager.allowComments' | adfAppConfig:true"
-                        [allowDownload]="'adf-version-manager.allowDownload' | adfAppConfig:true"
-                        [node]="node">
-                    </adf-version-manager>
-                </ng-container>
-            </adf-info-drawer-tab>
-        </adf-info-drawer>
-    </ng-template>
-
     <adf-viewer
         [fileNodeId]="nodeId"
         [allowNavigate]="navigateMultiple"
         [allowSidebar]="true"
-        [sidebarTemplate]="sidebarTemplate"
         [canNavigateBefore]="previousNodeId"
         [canNavigateNext]="nextNodeId"
         [overlayMode]="true"
@@ -35,6 +11,10 @@
         (navigateBefore)="onNavigateBefore()"
         (navigateNext)="onNavigateNext()">
 
+        <adf-viewer-sidebar>
+            <aca-info-drawer [node]="selection.file"></aca-info-drawer>
+        </adf-viewer-sidebar>
+
         <adf-viewer-open-with *ifExperimental="'extensions'">
             <button *ngFor="let entry of openWith"
                 mat-menu-item
@@ -49,7 +29,7 @@
             <button
                 mat-menu-item
                 #favorites="adfFavorite"
-                [adf-node-favorite]="selectedEntities">
+                [adf-node-favorite]="selection.nodes">
                 <mat-icon color="primary" *ngIf="favorites.hasFavorites()">star</mat-icon>
                 <mat-icon *ngIf="!favorites.hasFavorites()">star_border</mat-icon>
                 <span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
@@ -59,7 +39,7 @@
                 <button mat-menu-item
                     color="primary"
                     [baseShareUrl]="sharedPreviewUrl$ | async"
-                    [adf-share]="selectedEntities[0]">
+                    [adf-share]="selection.file">
                     <mat-icon>share</mat-icon>
                     <span>{{ 'APP.ACTIONS.SHARE' | translate }}</span>
                 </button>
@@ -67,22 +47,22 @@
 
             <button
                 mat-menu-item
-                [acaCopyNode]="selectedEntities">
+                [acaCopyNode]="selection.nodes">
                 <mat-icon>content_copy</mat-icon>
                 <span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
             </button>
 
             <button
                 mat-menu-item
-                *ngIf="canDeletePreview"
-                [acaMoveNode]="selectedEntities">
+                *ngIf="canDelete"
+                [acaMoveNode]="selection.nodes">
                 <mat-icon>library_books</mat-icon>
                 <span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
             </button>
 
             <button
                 mat-menu-item
-                *ngIf="canDeletePreview"
+                *ngIf="canDelete"
                 (click)="deleteFile()">
                 <mat-icon>delete</mat-icon>
                 <span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
@@ -90,8 +70,8 @@
 
             <button
                 mat-menu-item
-                *ngIf="canUpdatePreview"
-                [acaNodeVersions]="node">
+                *ngIf="canUpdateFile"
+                [acaNodeVersions]="selection.file">
                 <mat-icon>history</mat-icon>
                 <span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
             </button>

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

@@ -26,10 +26,9 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router, UrlTree, UrlSegmentGroup, UrlSegment, PRIMARY_OUTLET } from '@angular/router';
 import { UserPreferencesService, ObjectUtils } from '@alfresco/adf-core';
-import { Node, MinimalNodeEntity } from 'alfresco-js-api';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states/app.state';
-import { DeleteNodesAction } from '../../store/actions';
+import { DeleteNodesAction, SetSelectedNodesAction } from '../../store/actions';
 import { PageComponent } from '../page.component';
 import { ContentApiService } from '../../services/content-api.service';
 import { ExtensionService } from '../../extensions/extension.service';
@@ -44,24 +43,17 @@ import { ContentManagementService } from '../../common/services/content-manageme
 })
 export class PreviewComponent extends PageComponent implements OnInit {
 
-    node: Node;
     previewLocation: string = null;
     routesSkipNavigation = [ 'shared', 'recent-files', 'favorites' ];
     navigateSource: string = null;
     navigationSources = ['favorites', 'libraries', 'personal-files', 'recent-files', 'shared'];
-
     folderId: string = null;
     nodeId: string = null;
     previousNodeId: string;
     nextNodeId: string;
     navigateMultiple = false;
-
-    selectedEntities: MinimalNodeEntity[] = [];
     openWith: Array<OpenWithExtension> = [];
 
-    canDeletePreview = false;
-    canUpdatePreview = false;
-
     constructor(
         private contentApi: ContentApiService,
         private preferences: UserPreferencesService,
@@ -74,6 +66,8 @@ export class PreviewComponent extends PageComponent implements OnInit {
     }
 
     ngOnInit() {
+        super.ngOnInit();
+
         this.previewLocation = this.router.url
             .substr(0, this.router.url.indexOf('/', 1))
             .replace(/\//g, '');
@@ -110,9 +104,7 @@ export class PreviewComponent extends PageComponent implements OnInit {
         if (id) {
             try {
                 this.node = await this.contentApi.getNodeInfo(id).toPromise();
-                this.selectedEntities = [{ entry: this.node }];
-                this.canDeletePreview = this.node && this.content.canDeleteNode(this.node);
-                this.canUpdatePreview = this.node && this.content.canUpdateNode(this.node);
+                this.store.dispatch(new SetSelectedNodesAction([{ entry: this.node }]));
 
                 if (this.node && this.node.isFile) {
                     const nearest = await this.getNearestNodes(this.node.id, this.node.parentId);
@@ -364,10 +356,4 @@ export class PreviewComponent extends PageComponent implements OnInit {
             return acc;
         }, []);
     }
-
-    // this is where each application decides how to treat an action and what to do
-    // the ACA maps actions to the NgRx actions as an example
-    runAction(actionId: string) {
-        this.extensions.runActionById(actionId);
-    }
 }

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

@@ -38,7 +38,7 @@ export const EDIT_FOLDER = 'EDIT_FOLDER';
 
 export class SetSelectedNodesAction implements Action {
     readonly type = SET_SELECTED_NODES;
-    constructor(public payload: any[] = []) {}
+    constructor(public payload: MinimalNodeEntity[] = []) {}
 }
 
 export class DeleteNodesAction implements Action {

src/app/store/reducers/app.reducer.ts

@@ -179,7 +179,7 @@ function updateSelectedNodes(
         if (nodes.length === 1) {
             file = nodes.find(entity => {
                 // workaround Shared
-                return entity.entry.isFile || entity.entry.nodeId;
+                return (entity.entry.isFile || entity.entry.nodeId) ? true : false;
             });
             folder = nodes.find(entity => entity.entry.isFolder);
         }