Fix filename shown in title area of viewer component

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

@@ -148,7 +148,7 @@
                         [multipleFiles]="true"
                         (onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
 
-<alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [mimeType]="mimeType" [overlayMode]="true">
+<alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [fileName]="fileName" [mimeType]="mimeType" [overlayMode]="true">
     <div class="mdl-spinner mdl-js-spinner is-active"></div>
 </alfresco-viewer>
 <file-uploading-dialog></file-uploading-dialog>

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

@@ -46,6 +46,7 @@ export class FilesComponent {
     relativePath: string = '';
 
     urlFile: string;
+    fileName: string;
     mimeType: string;
     fileShowed: boolean = false;
 
@@ -75,6 +76,7 @@ export class FilesComponent {
 
     showFile(event) {
         if (event.value.entry.isFile) {
+            this.fileName = event.value.entry.name;
             this.mimeType = event.value.entry.content.mimeType;
             this.urlFile = this.contentService.getContentUrl(event.value);
             this.fileShowed = true;

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

@@ -37,6 +37,7 @@ declare let __moduleName: string;
 export class SearchBarComponent {
 
     urlFile: string;
+    fileName: string;
     mimeType: string;
     fileShowed: boolean = false;
 
@@ -65,6 +66,7 @@ export class SearchBarComponent {
 
     onFileClicked(event) {
         if (event.value.entry.isFile) {
+            this.fileName = event.value.entry.name;
             this.mimeType = event.value.entry.content.mimeType;
             this.urlFile = this.contentService.getContentUrl(event.value);
             this.fileShowed = true;

ng2-components/ng2-alfresco-viewer/README.md

@@ -107,6 +107,7 @@ bootstrap(MyDemoApp, [
 Attribute     | Options     | Default      | Description | Mandatory
 ---           | ---         | ---          | ---         | ---
 `urlFile`         | *string*    |        |  Url where to load the file | mandatory
+`fileName`         | *string*    | Parsed from `urlFile` |  Name of the file to display in the title bar. If not specified will take the last part of the URL |
 `overlayMode`         | *boolean*    | `false`        | if true Show the Viewer full page over the present content |
 `showViewer`         | *boolean*    | `true`        | Hide o show the viewer |
 

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

@@ -11,7 +11,7 @@
                 <div class="mdl-layout__header-row">
 
                     <!-- File Title -->
-                    <span  id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{nameFile}}</span>
+                    <span  id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{displayName}}</span>
 
                     <!-- Pagination toolbar start -->
                     <div id="viewer-toolbar-pagination">
@@ -70,7 +70,7 @@
                             </div>
                             <div *ngIf="isImage()" ><img src="{{urlFile}}"  id="viewer-image" class="center-element viewer-image"/></div>
                             <div *ngIf="notSupportedExtension()">
-                                <not-supported-format [urlFile]="urlFile" [nameFile]="nameFile" ></not-supported-format>
+                                <not-supported-format [urlFile]="urlFile" [displayName]="displayName" ></not-supported-format>
                             </div>
                         <!-- End View Switch -->
                         </div>

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

@@ -80,6 +80,23 @@ describe('ViewerComponent', () => {
                 });
         }));
 
+        /* tslint:disable:max-line-length */
+        it('should pick up filename from the fileName property when specified', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(ViewerComponent)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+                    let component = fixture.componentInstance;
+                    component.urlFile = 'http://localhost:9876/fake-url-file.pdf';
+                    component.fileName = 'My Example.pdf';
+
+                    component.ngOnChanges().then(() => {
+                        fixture.detectChanges();
+                        expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('My Example.pdf');
+                    });
+                });
+        }));
+
         it('Close button should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(ViewerComponent)

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

@@ -34,6 +34,9 @@ export class ViewerComponent {
     @Input()
     urlFile: string;
 
+    @Input()
+    fileName: string = null;
+
     @Input()
     mimeType: string = null;
 
@@ -48,7 +51,7 @@ export class ViewerComponent {
 
     otherMenu: any;
 
-    nameFile: string;
+    displayName: string;
     currentPdfDocument: any;
     page: number;
     displayPage: number;
@@ -64,8 +67,9 @@ export class ViewerComponent {
             }
             return new Promise((resolve) => {
                 if (this.urlFile) {
-                    this.nameFile = this.getFilenameFromUrl(this.urlFile);
+                    let filenameFromUrl = this.getFilenameFromUrl(this.urlFile);
-                    this.extension = this.getFileExtension(this.nameFile);
+                    this.displayName = this.fileName !== null ? this.fileName : filenameFromUrl;
+                    this.extension = this.getFileExtension(filenameFromUrl);
                 }
                 resolve();
             });