[ADF-2755] Fix preview overlay (#3208)

* Fix overlay in the new sidenav

* Update wrong url

* Enrich BlobPreviewService

* Fix another previews

* Filepreview use the same router outlet

demo-shell/src/app/app.component.html

@@ -1,2 +1,3 @@
 <router-outlet></router-outlet>
 <app-log></app-log>
+<router-outlet name="overlay"></router-outlet>

demo-shell/src/app/app.component.scss

@@ -34,6 +34,15 @@
     }
 }
 
+router-outlet[name="overlay"] + * {
+    width: 100%;
+    height: 100%;
+    z-index: 999999;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
 @media (max-width: 425px) {
     adf-content-node-selector {
         .adf-content-node-selector-content-list {

demo-shell/src/app/app.module.ts

@@ -39,6 +39,7 @@ import { TagComponent } from './components/tag/tag.component';
 import { SocialComponent } from './components/social/social.component';
 import { VersionManagerDialogAdapterComponent } from './components/files/version-manager-dialog-adapter.component';
 import { MetadataDialogAdapterComponent } from './components/files/metadata-dialog-adapter.component';
+import { BlobPreviewComponent } from './components/blob-preview/blob-preview.component';
 
 import { ThemePickerModule } from './components/theme-picker/theme-picker';
 import { DebugAppConfigService } from './services/debug-app-config.service';
@@ -49,6 +50,7 @@ import { TaskAttachmentsComponent } from './components/process-service/task-atta
 import { ProcessAttachmentsComponent } from './components/process-service/process-attachments.component';
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
+import { PreviewService } from './services/preview.service';
 
 @NgModule({
     imports: [
@@ -98,7 +100,8 @@ import { DemoPermissionComponent } from './components/permissions/demo-permissio
         SharedLinkViewComponent,
         FormLoadingComponent,
         DemoPermissionComponent,
-        FormLoadingComponent
+        FormLoadingComponent,
+        BlobPreviewComponent
     ],
     providers: [
         { provide: AppConfigService, useClass: DebugAppConfigService },
@@ -117,7 +120,8 @@ import { DemoPermissionComponent } from './components/permissions/demo-permissio
                 name: 'lazy-loading',
                 source: 'resources/lazy-loading'
             }
-        }
+        },
+        PreviewService
     ],
     entryComponents: [
         VersionManagerDialogAdapterComponent,

demo-shell/src/app/app.routes.ts

@@ -46,15 +46,14 @@ import { OverlayViewerComponent } from './components/overlay-viewer/overlay-view
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
 import { FormLoadingComponent } from './components/form/form-loading.component';
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
+import { BlobPreviewComponent } from './components/blob-preview/blob-preview.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
     { path: 'settings', component: SettingsComponent },
-    { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ] },
-    {
-        path: 'preview/s/:id',
-        component: SharedLinkViewComponent
-    },
+    { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ], outlet: 'overlay' },
+    { path: 'preview/blob', component: BlobPreviewComponent, outlet: 'overlay', pathMatch: 'full' },
+    { path: 'preview/s/:id', component: SharedLinkViewComponent },
     {
         path: '',
         component: AppLayoutComponent,

demo-shell/src/app/components/blob-preview/blob-preview.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { PreviewService } from '../../services/preview.service';
+import { Router } from '@angular/router';
+
+@Component({
+    templateUrl: 'bob-preview.component.html'
+})
+export class BlobPreviewComponent {
+    content: Blob;
+    name: string;
+
+    constructor(preview: PreviewService, router: Router) {
+        if (preview.content === null || preview.name === null) {
+            router.navigate([{ outlets: { overlay: null } }]);
+            return;
+        }
+
+        this.content = preview.content;
+        this.name = preview.name;
+    }
+}

demo-shell/src/app/components/blob-preview/bob-preview.component.html

@@ -0,0 +1,5 @@
+<adf-viewer 
+    [showViewer]="true" 
+    [blobFile]="content" 
+    [displayName]="name">
+</adf-viewer>

demo-shell/src/app/components/files/files.component.ts

@@ -38,6 +38,7 @@ import { SelectAppsDialogComponent } from '@alfresco/adf-process-services';
 import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
 import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.component';
 import { Subscription } from 'rxjs/Subscription';
+import { PreviewService } from '../../services/preview.service';
 
 const DEFAULT_FOLDER_TO_SHOW = '-my-';
 
@@ -163,6 +164,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                 private logService: LogService,
                 private preference: UserPreferencesService,
                 private appConfig: AppConfigService,
+                private preview: PreviewService,
                 @Optional() private route: ActivatedRoute,
                 public authenticationService: AuthenticationService) {
         this.preference.select(UserPreferenceValues.SupportedPageSizes)
@@ -174,7 +176,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     showFile(event) {
         const entry = event.value.entry;
         if (entry && entry.isFile) {
-            this.router.navigate(['/files', entry.id, 'view']);
+            this.preview.showResource(entry.id);
         }
     }
 

demo-shell/src/app/components/process-service/process-attachments.component.html

@@ -36,12 +36,3 @@
 
     </div>
 </div>
-
-<div *ngIf="fileShowed">
-    <adf-viewer
-        [(showViewer)]="fileShowed"
-        [blobFile]="content"
-        [displayName]="contentName"
-        [overlayMode]="true">
-    </adf-viewer>
-</div>

demo-shell/src/app/components/process-service/process-attachments.component.ts

@@ -21,6 +21,7 @@ import { ProcessInstance, ProcessService ,
 import { UploadService } from '@alfresco/adf-core';
 import { AlfrescoApiService } from '@alfresco/adf-core';
 import { AppConfigService } from '@alfresco/adf-core';
+import { PreviewService } from '../../services/preview.service';
 
 export function processUploadServiceFactory(api: AlfrescoApiService, config: AppConfigService) {
     return new ProcessUploadService(api, config);
@@ -47,14 +48,13 @@ export class ProcessAttachmentsComponent implements OnInit, OnChanges {
     @Input()
     processInstanceId: string;
 
-    fileShowed = false;
-    content: Blob;
-    contentName: string;
-
     processInstance: ProcessInstance;
 
-    constructor(private uploadService: UploadService, private processService: ProcessService) {
-    }
+    constructor(
+        private uploadService: UploadService,
+        private processService: ProcessService,
+        private preview: PreviewService
+    ) {}
 
     ngOnInit() {
         this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
@@ -74,9 +74,7 @@ export class ProcessAttachmentsComponent implements OnInit, OnChanges {
     }
 
     onAttachmentClick(content: any): void {
-        this.fileShowed = true;
-        this.content = content.contentBlob;
-        this.contentName = content.name;
+        this.preview.showBlob(content.name, content.contentBlob);
     }
 
     isCompletedProcess(): boolean {

demo-shell/src/app/components/process-service/process-service.component.html

@@ -233,12 +233,3 @@
         </div>
     </mat-tab>
 </mat-tab-group>
-
-<div *ngIf="fileShowed">
-    <adf-viewer
-        [(showViewer)]="fileShowed"
-        [blobFile]="content"
-        [displayName]="contentName"
-        [overlayMode]="true">
-    </adf-viewer>
-</div>

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -63,6 +63,7 @@ import {
 import { Subscription } from 'rxjs/Subscription';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 import { DemoFieldValidator } from './demo-field-validator';
+import { PreviewService } from '../../services/preview.service';
 
 const currentProcessIdNew = '__NEW__';
 const currentTaskIdNew = '__NEW__';
@@ -111,14 +112,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     @Output()
     changePageSize: EventEmitter<Pagination> = new EventEmitter();
 
-    fileShowed = false;
     selectFirstReport = false;
 
     private tabs = { tasks: 0, processes: 1, reports: 2 };
 
-    content: Blob;
-    contentName: string;
-
     layoutType: string;
     currentTaskId: string;
     currentProcessInstanceId: string;
@@ -161,6 +158,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
                 private apiService: AlfrescoApiService,
                 private logService: LogService,
                 private appConfig: AppConfigService,
+                private preview: PreviewService,
                 formRenderingService: FormRenderingService,
                 formService: FormService,
                 private preferenceService: UserPreferencesService) {
@@ -385,9 +383,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     }
 
     onContentClick(content: any): void {
-        this.fileShowed = true;
-        this.content = content.contentBlob;
-        this.contentName = content.name;
+        this.preview.showBlob(content.name, content.contentBlob);
     }
 
     onAuditClick(event: any) {

demo-shell/src/app/components/process-service/task-attachments.component.html

@@ -33,12 +33,3 @@
 
     </div>
 </div>
-
-<div *ngIf="fileShowed">
-    <adf-viewer
-        [(showViewer)]="fileShowed"
-        [blobFile]="content"
-        [displayName]="contentName"
-        [overlayMode]="true">
-    </adf-viewer>
-</div>

demo-shell/src/app/components/process-service/task-attachments.component.ts

@@ -18,6 +18,7 @@
 import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
 import { TaskListService, TaskAttachmentListComponent, TaskDetailsModel, TaskUploadService } from '@alfresco/adf-process-services';
 import { UploadService, AlfrescoApiService, AppConfigService } from '@alfresco/adf-core';
+import { PreviewService } from '../../services/preview.service';
 
 export function taskUploadServiceFactory(api: AlfrescoApiService, config: AppConfigService) {
     return new TaskUploadService(api, config);
@@ -44,14 +45,12 @@ export class TaskAttachmentsComponent implements OnInit, OnChanges {
     @Input()
     taskId: string;
 
-    fileShowed = false;
-    content: Blob;
-    contentName: string;
-
     taskDetails: any;
 
-    constructor(private uploadService: UploadService, private activitiTaskList: TaskListService) {
-    }
+    constructor(
+        private uploadService: UploadService,
+        private activitiTaskList: TaskListService,
+        private preview: PreviewService) {}
 
     ngOnInit() {
         this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
@@ -71,9 +70,7 @@ export class TaskAttachmentsComponent implements OnInit, OnChanges {
     }
 
     onAttachmentClick(content: any): void {
-        this.fileShowed = true;
-        this.content = content.contentBlob;
-        this.contentName = content.name;
+        this.preview.showBlob(content.name, content.contentBlob);
     }
 
     isCompletedTask(): boolean {

demo-shell/src/app/services/preview.service.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Injectable()
+export class PreviewService {
+
+    public content: Blob = null;
+    public name: string = null;
+
+    constructor(private router: Router) {}
+
+    showResource(resourceId): void {
+        this.router.navigate([{ outlets: { overlay: ['files', resourceId, 'view'] } }]);
+    }
+
+    showBlob(name: string, content: Blob): void {
+        this.name = name;
+        this.content = content;
+        this.router.navigate([{ outlets: { overlay: ['preview', 'blob'] } }]);
+    }
+}