insert new logic in the demo Shell

demo-shell-ng2/app/components/files/files.component.html

@@ -177,9 +177,7 @@
 </div>
 
 <alfresco-viewer [(showViewer)]="fileShowed"
-                 [urlFile]="urlFile"
+                 [fileNodeId]="fileNodeId"
-                 [fileName]="fileName"
-                 [mimeType]="mimeType"
                  [overlayMode]="true">
     <div class="mdl-spinner mdl-js-spinner is-active"></div>
 </alfresco-viewer>

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

@@ -58,9 +58,7 @@ declare let __moduleName: string;
 export class FilesComponent implements OnInit {
     currentPath: string = '/Sites/swsdp/documentLibrary';
 
-    urlFile: string;
+    fileNodeId: any;
-    fileName: string;
-    mimeType: string;
     fileShowed: boolean = false;
     multipleFileUpload: boolean = false;
     folderUpload: boolean = false;
@@ -92,9 +90,7 @@ export class FilesComponent implements OnInit {
 
     showFile(event) {
         if (event.value.entry.isFile) {
-            this.fileName = event.value.entry.name;
+            this.fileNodeId = event.value.entry.id;
-            this.mimeType = event.value.entry.content.mimeType;
-            this.urlFile = this.contentService.getContentUrl(event.value);
             this.fileShowed = true;
         } else {
             this.fileShowed = false;

demo-shell-ng2/app/components/search/search-bar.component.html

@@ -1,6 +1,8 @@
 <alfresco-search-control *ngIf="isLoggedIn()" [searchTerm]="searchTerm" [autocomplete]="false"
     (searchChange)="searchTermChange($event);" (expand)="onExpandToggle($event);" (preview)="onFileClicked($event)"></alfresco-search-control>
 
-<alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [fileName]="fileName" [mimeType]="mimeType" [overlayMode]="true">
+<alfresco-viewer [(showViewer)]="fileShowed"
+                 [fileNodeId]="fileNodeId"
+                 [overlayMode]="true">
     <div class="mdl-spinner mdl-js-spinner is-active"></div>
 </alfresco-viewer>

demo-shell-ng2/app/components/search/search.component.ts

@@ -56,15 +56,14 @@ export class SearchComponent {
     previewName: string;
     previewMimeType: string;
     previewActive: boolean = false;
+    fileNodeId: string;
 
     constructor(public contentService: AlfrescoContentService) {
     }
 
     onFileClicked(event) {
         if (event.value.entry.isFile) {
-            this.previewName = event.value.entry.name;
+            this.fileNodeId = event.value.entry.id;
-            this.previewMimeType = event.value.entry.content.mimeType;
-            this.previewContentUrl = this.contentService.getContentUrl(event.value);
             this.previewActive = true;
         }
     }

ng2-components/ng2-alfresco-viewer/demo/src/main.ts

@@ -49,15 +49,13 @@ import {
             <alfresco-viewer
                     [fileNodeId]="'09469a81-1ed9-4caa-a5df-8362fc3d096f'"
                     [showViewer]="true"
-                    [overlayMode]="true"
+                    [overlayMode]="true">
-                    [urlFile]="'localTestFile.pdf'">
                     <div class="mdl-spinner mdl-js-spinner is-active"></div>
                    </alfresco-viewer>
                    </div>`,
     directives: [VIEWERCOMPONENT]
 })
 class MyDemoApp {
-
     authenticated: boolean;
 
     ecmHost: string = 'http://127.0.0.1:8080';

ng2-components/ng2-alfresco-viewer/src/viewer.component.html

@@ -43,7 +43,7 @@
                         <!--</button>-->
                     <!--</div>-->
 
-                    <div class="center-element mdl-cell mdl-cell--12-col" >
+                    <div *ngIf="isLoaded()" class="center-element mdl-cell mdl-cell--12-col" >
 
                         <div id="viewer-content-container" class="viewer-content-container mdl-cell" >
                         <!-- Start View Switch-->

ng2-components/ng2-alfresco-viewer/src/viewer.component.ts

@@ -36,15 +36,9 @@ export class ViewerComponent {
     @Input()
     urlFile: string;
 
-    @Input()
-    fileName: string = null;
-
     @Input()
     fileNodeId: string = null;
 
-    @Input()
-    mimeType: string = null;
-
     @Input()
     overlayMode: boolean = false;
 
@@ -60,6 +54,10 @@ export class ViewerComponent {
 
     extension: string;
 
+    mimeType: string;
+
+    loaded: boolean = false;
+
     constructor(private authService: AlfrescoAuthenticationService, private element: ElementRef, @Inject(DOCUMENT) private document) {
     }
 
@@ -67,18 +65,20 @@ export class ViewerComponent {
         if (this.showViewer) {
             this.hideOtherHeaderBar();
             this.blockOtherScrollBar();
-            if (!this.urlFile) {
+            if (!this.urlFile && !this.fileNodeId) {
-                throw new Error('Attribute urlFile is required');
+                throw new Error('Attribute urlFile or fileNodeId is required');
             }
             return new Promise((resolve) => {
                 if (this.urlFile) {
                     let filenameFromUrl = this.getFilenameFromUrl(this.urlFile);
-                    this.displayName = this.fileName !== null ? this.fileName : filenameFromUrl;
+                    this.displayName = filenameFromUrl ? filenameFromUrl : '';
                     this.extension = this.getFileExtension(filenameFromUrl);
                 } else if (this.fileNodeId) {
-                    console.log('call api');
+                    this.authService.getAlfrescoApi().nodes.getNodeInfo(this.fileNodeId).then((data) => {
-                    this.authService.getAlfrescoApi().getNodeInfo(this.fileNodeId).then(function (data) {
+                        this.mimeType = data.content.mimeType;
-                        console.log('This is the name' + JSON.stringify(data) );
+                        this.displayName = data.name;
+                        this.urlFile = this.authService.getAlfrescoApi().content.getContentUrl(data.id);
+                        this.loaded = true;
                     }, function (error) {
                         console.log('This node does not exist');
                     });
@@ -249,4 +249,11 @@ export class ViewerComponent {
             }
         }
     }
+
+    /**
+     * return true if the data about the node in the ecm are loaded
+     */
+    isLoaded() {
+        return this.fileNodeId ? this.loaded : true;
+    }
 }