[ADF-3176] file content reload fixed (#3501)

* file content reload fixed

* refactoring & layout fix

* resolve indentation problems

* missing semicolon

lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -15,12 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { Observable } from 'rxjs/Observable';
 import { CardViewItem, NodesApiService, LogService, CardViewUpdateService, AlfrescoApiService } from '@alfresco/adf-core';
 import { ContentMetadataService } from '../../services/content-metadata.service';
 import { CardViewGroup } from '../../interfaces/content-metadata.interfaces';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector: 'adf-content-metadata',
@@ -29,7 +30,7 @@ import { CardViewGroup } from '../../interfaces/content-metadata.interfaces';
     host: { 'class': 'adf-content-metadata' },
     encapsulation: ViewEncapsulation.None
 })
-export class ContentMetadataComponent implements OnChanges, OnInit {
+export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
     /** (required) The node entity to fetch metadata about */
     @Input()
     node: MinimalNodeEntryEntity;
@@ -59,6 +60,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
     componentInited: boolean = false;
     basicProperties$: Observable<CardViewItem[]>;
     groupedProperties$: Observable<CardViewGroup[]>;
+    disposableNodeUpdate: Subscription;
 
     constructor(
         private contentMetadataService: ContentMetadataService,
@@ -69,7 +71,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
     ) {}
 
     ngOnInit() {
-        this.cardViewUpdateService.itemUpdated$.switchMap(this.saveNode.bind(this)).subscribe(
+        this.disposableNodeUpdate =  this.cardViewUpdateService.itemUpdated$.switchMap(this.saveNode.bind(this)).subscribe(
             updatedNode => {
                 Object.assign(this.node, updatedNode);
                 this.alfrescoApiService.nodeUpdated.next(this.node);
@@ -93,4 +95,9 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
     private saveNode({ changed: nodeBody }): Observable<MinimalNodeEntryEntity> {
         return this.nodesApiService.updateNode(this.node.id, nodeBody);
     }
+
+    ngOnDestroy() {
+        this.disposableNodeUpdate.unsubscribe();
+    }
+
 }

lib/core/viewer/components/viewer.component.html

@@ -122,16 +122,7 @@
             </adf-toolbar>
         </ng-container>
 
-        <ng-container *ngIf="isLoading">
-            <div class="adf-viewer__loading-screen" fxFlex="1 1 auto">
-                <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
-                <div>
-                    <mat-spinner></mat-spinner>
-                </div>
-            </div>
-        </ng-container>
-
-        <div *ngIf="!isLoading" fxLayout="row" fxFlex="1 1 auto">
+        <div fxLayout="row" fxFlex="1 1 auto">
 
             <ng-container *ngIf="allowSidebar && showSidebar">
                 <div class="adf-viewer__sidebar" [ngClass]="getSideBarStyle()" fxFlexOrder="{{sidebarPosition === 'left'? 1 : 4 }}">
@@ -142,7 +133,23 @@
                 </div>
             </ng-container>
 
-            <div class="adf-viewer-main" fxFlexOrder="{{sidebarPosition !== 'left'? 1 : 4}}" fxFlex="1 1 auto">
+            <div  *ngIf="isLoading"  class="adf-viewer-main" fxFlexOrder="{{sidebarPosition !== 'left'? 1 : 4}}" fxFlex="1 1 auto">
+                <div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
+                    <div class="adf-viewer-content-container">
+                        <ng-container *ngIf="isLoading">
+                            <div class="adf-viewer__loading-screen" fxFlex="1 1 auto">
+                                <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
+                                <div>
+                                    <mat-spinner></mat-spinner>
+                                </div>
+                            </div>
+                        </ng-container>
+
+                    </div>
+                </div>
+            </div>
+
+            <div  *ngIf="!isLoading"  class="adf-viewer-main" fxFlexOrder="{{sidebarPosition !== 'left'? 1 : 4}}" fxFlex="1 1 auto">
                 <div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
                     <div class="adf-viewer-content-container" [ngSwitch]="viewerType">
                         <ng-container *ngSwitchCase="'pdf'">

lib/core/viewer/components/viewer.component.ts

@@ -209,7 +209,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Output()
     navigateNext = new EventEmitter();
 
-    showPdfThumbnails: boolean = false;
     viewerType = 'unknown';
     isLoading = false;
     node: MinimalNodeEntryEntity;
@@ -265,7 +264,10 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     private onNodeUpdated(node: MinimalNodeEntryEntity) {
         if (node && node.id === this.nodeId) {
             this.generateCacheBusterNumber();
-            this.setUpNodeFile(node);
+            this.isLoading = true;
+            this.setUpNodeFile(node).then(() => {
+                this.isLoading = false;
+            });
         }
     }
 
@@ -274,15 +276,20 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
             if (!this.isSourceDefined()) {
                 throw new Error('A content source attribute value is missing.');
             }
+            this.isLoading = true;
+
             if (this.blobFile) {
                 this.setUpBlobData();
+                this.isLoading = false;
             } else if (this.urlFile) {
                 this.setUpUrlFile();
+                this.isLoading = false;
             } else if (this.nodeId) {
-                this.isLoading = true;
                 this.apiService.nodesApi.getNodeInfo(this.nodeId).then(
                     (data: MinimalNodeEntryEntity) => {
-                        this.setUpNodeFile(data);
+                        this.setUpNodeFile(data).then(() => {
+                            this.isLoading = false;
+                        });
                     },
                     (error) => {
                         this.isLoading = false;
@@ -290,10 +297,10 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
                     }
                 );
             } else if (this.sharedLinkId) {
-                this.isLoading = true;
 
                 this.apiService.sharedLinksApi.getSharedLink(this.sharedLinkId).then(details => {
                     this.setUpSharedLinkFile(details);
+                    this.isLoading = false;
                 });
             }
         }
@@ -301,7 +308,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
 
     private setUpBlobData() {
         this.displayName = this.getDisplayName('Unknown');
-        this.isLoading = true;
         this.mimeType = this.blobFile.type;
         this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
 
@@ -309,12 +315,10 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         // TODO: wrap blob into the data url and allow downloading
 
         this.extensionChange.emit(this.mimeType);
-        this.isLoading = false;
         this.scrollTop();
     }
 
     private setUpUrlFile() {
-        this.isLoading = true;
         let filenameFromUrl = this.getFilenameFromUrl(this.urlFile);
         this.displayName = this.getDisplayName(filenameFromUrl);
         this.extension = this.getFileExtension(filenameFromUrl);
@@ -329,11 +333,12 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         }
 
         this.extensionChange.emit(this.extension);
-        this.isLoading = false;
         this.scrollTop();
     }
 
-    private setUpNodeFile(data: MinimalNodeEntryEntity) {
+    private async setUpNodeFile(data: MinimalNodeEntryEntity) {
+        let setupNode;
+
         if (data.content) {
             this.mimeType = data.content.mimeType;
         }
@@ -354,14 +359,14 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         }
 
         if (this.viewerType === 'unknown') {
-            this.displayNodeRendition(data.id);
-        } else {
-            this.isLoading = false;
+            setupNode = this.displayNodeRendition(data.id);
         }
 
         this.extensionChange.emit(this.extension);
         this.sidebarTemplateContext.node = data;
         this.scrollTop();
+
+        return setupNode;
     }
 
     private setUpSharedLinkFile(details: any) {
@@ -380,11 +385,9 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
 
         if (this.viewerType === 'unknown') {
             this.displaySharedLinkRendition(this.sharedLinkId);
-        } else {
-            this.isLoading = false;
         }
+
         this.extensionChange.emit(this.extension);
-        this.isLoading = false;
     }
 
     toggleSidebar() {
@@ -606,8 +609,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     }
 
     private async displayNodeRendition(nodeId: string) {
-        this.isLoading = true;
-
         try {
             const rendition = await this.resolveRendition(nodeId, 'pdf');
             if (rendition) {
@@ -624,13 +625,9 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         } catch (err) {
             this.logService.error(err);
         }
-
-        this.isLoading = false;
     }
 
     private async displaySharedLinkRendition(sharedId: string) {
-        this.isLoading = true;
-
         try {
             const rendition = await this.apiService.renditionsApi.getSharedLinkRendition(sharedId, 'pdf');
             if (rendition.entry.status.toString() === 'CREATED') {
@@ -649,8 +646,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
                 this.logService.error(error);
             }
         }
-
-        this.isLoading = false;
     }
 
     private async resolveRendition(nodeId: string, renditionId: string): Promise<RenditionEntry> {
@@ -662,34 +657,28 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         if (!rendition) {
             renditionId = 'imgpreview';
             rendition = supported.list.entries.find(obj => obj.entry.id.toLowerCase() === renditionId);
-
-            if (!rendition) {
-                return null;
-            }
         }
 
+        if (rendition) {
             const status = rendition.entry.status.toString();
 
-        if (status === 'CREATED') {
-            return rendition;
-        } else if (status === 'NOT_CREATED') {
+            if (status === 'NOT_CREATED') {
                 try {
                     await this.apiService.renditionsApi.createRendition(nodeId, { id: renditionId });
-                return await this.waitRendition(nodeId, renditionId, 0);
+                    rendition = await this.waitRendition(nodeId, renditionId, 0);
                 } catch (err) {
                     this.logService.error(err);
-                return null;
                 }
             }
         }
 
+        return rendition;
+    }
+
     private async waitRendition(nodeId: string, renditionId: string, retries: number): Promise<RenditionEntry> {
         const rendition = await this.apiService.renditionsApi.getRendition(nodeId, renditionId);
 
-        if (retries > this.maxRetries) {
-            return null;
-        }
-
+        if (this.maxRetries < retries) {
             const status = rendition.entry.status.toString();
 
             if (status === 'CREATED') {
@@ -700,6 +689,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
                 return await this.waitRendition(nodeId, renditionId, retries);
             }
         }
+    }
 
     private wait(ms: number): Promise<any> {
         return new Promise(resolve => setTimeout(resolve, ms));