#68 first simple integration filelist and viewer

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

@@ -1,4 +1,5 @@
-<alfresco-upload-drag-area
+<div *ngIf="!fileShowed">
+    <alfresco-upload-drag-area
             [showUploadDialog]="true"
             currentFolderPath="{{absolutePath}}"
             uploaddirectory="{{relativePath}}"
@@ -6,6 +7,7 @@
         <alfresco-document-list
                 [currentFolderPath]="absolutePath"
                 [breadcrumb]="breadcrumb"
+                (itemClick)="showFile($event)"
                 (folderChange)="onFolderChanged($event)">
             <content-columns>
                 <content-column source="$thumbnail"></content-column>
@@ -90,32 +92,38 @@
                 </content-action>
             </content-actions>
         </alfresco-document-list>
-</alfresco-upload-drag-area>
+    </alfresco-upload-drag-area>
 
-<div class="p-10">
+    <div class="p-10">
         <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
             <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="breadcrumb">
             <span class="mdl-checkbox__label">Breadcrumb</span>
         </label>
-</div>
+    </div>
 
-<div class="p-10">
+    <div class="p-10">
         <ul>
             <li>Relative path: {{relativePath}}</li>
             <li>Absolute path: {{absolutePath}}</li>
         </ul>
-</div>
+    </div>
 
-<h5>Single file upload</h5>
+    <h5>Single file upload</h5>
-<alfresco-upload-button data-automation-id="single-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
+    <alfresco-upload-button data-automation-id="single-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
                              (onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
-<h5>Folder upload</h5>
+    <h5>Folder upload</h5>
-<alfresco-upload-button data-automation-id="folder-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
+    <alfresco-upload-button data-automation-id="folder-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
                             [uploadFolders]="true"
                             (onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
-<h5>Multiple file upload</h5>
+    <h5>Multiple file upload</h5>
-<input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
+    <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
-<alfresco-upload-button data-automation-id="multiple-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
+    <alfresco-upload-button data-automation-id="multiple-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
                             acceptedFilesType="{{acceptedFilesType}}"
                             [multipleFiles]="true"
                             (onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
+</div>
+<div *ngIf="fileShowed">
+    <alfresco-viewer [urlFile]="(urlFile)" [hidden]="!fileShowed" >
+        <div class="mdl-spinner mdl-js-spinner is-active"></div>
+    </alfresco-viewer>
+</div>

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

@@ -24,6 +24,7 @@ import {
 import { MDL } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
 import { ALFRESCO_ULPOAD_COMPONENTS } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
 import { AlfrescoPipeTranslate } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
+import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer/dist/ng2-alfresco-viewer';
 
 declare let __moduleName: string;
 
@@ -31,7 +32,7 @@ declare let __moduleName: string;
     moduleId: __moduleName,
     selector: 'files-component',
     templateUrl: './files.component.html',
-    directives: [DOCUMENT_LIST_DIRECTIVES, MDL, ALFRESCO_ULPOAD_COMPONENTS],
+    directives: [DOCUMENT_LIST_DIRECTIVES, MDL, ALFRESCO_ULPOAD_COMPONENTS, VIEWERCOMPONENT],
     providers: [DOCUMENT_LIST_PROVIDERS],
     pipes: [AlfrescoPipeTranslate]
 })
@@ -41,6 +42,9 @@ export class FilesComponent {
     absolutePath: string = '/Sites/swsdp/documentLibrary';
     relativePath: string = '';
 
+    urlFile: string;
+    fileShowed: boolean = false;
+
     acceptedFilesType: string = '.jpg,.pdf,.js';
 
     constructor(documentActions: DocumentActionsService) {
@@ -63,6 +67,20 @@ export class FilesComponent {
         this.absolutePath += '/';
     }
 
+    showFile(event) {
+        if (event.value.entry.isFile) {
+            let workSpace = 'workspace/SpacesStore/' + event.value.entry.id;
+            let nameFile = event.value.entry.name;
+
+            let host = 'http://192.168.99.100:8080/';
+            this.urlFile = host + 'alfresco/s/slingshot/node/content/' + workSpace + '/' + nameFile;
+
+            this.fileShowed = true;
+        } else {
+            this.fileShowed = false;
+        }
+    }
+
     onFolderChanged(event?: any) {
         if (event) {
             this.absolutePath = event.absolutePath;

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component } from 'angular2/core';
+import { Component, Input } from 'angular2/core';
 import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer/dist/ng2-alfresco-viewer';
 
 declare let __moduleName: string;
@@ -30,19 +30,15 @@ export class ViewerFileComponent {
 
     hrefFile: string;
 
-    constructor() {
+    @Input()
-        console.log('constructor');
+    nameFile: string;
-        let host = 'http://192.168.99.100:8080/';
-        let nameFile = 'Energy_Bill_20May16.pdf';
-        let workSpace = 'workspace/SpacesStore/01f144c6-bd6f-43ed-8b92-e417ad629467/';
-        this.hrefFile = host + 'alfresco/s/slingshot/node/content/' + workSpace + nameFile + '?alf_ticket=' + this.getAlfrescoTicket();
-    }
 
-    /**
+    @Input()
-     * Get the token from the local storage
+    workSpace: string;
-     * @returns {any}
+
-     */
+    constructor() {
-    private getAlfrescoTicket(): string {
+        let host = 'http://192.168.99.100:8080/';
-        return localStorage.getItem('token');
+        this.hrefFile = host + 'alfresco/s/slingshot/node/content/' + this.workSpace
+            + '/' + this.nameFile;
     }
 }

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

@@ -25,7 +25,16 @@ describe('Ng2-alfresco-viewer', () => {
 
     describe('View', () => {
 
-        it('Next an Previous Buttons have to be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        it('Canvas should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(ViewerComponent)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+                    expect(element.querySelector('#vviewer-the-canvas')).toBeDefined();
+                });
+        }));
+
+        it('Next an Previous Buttons should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(ViewerComponent)
                 .then((fixture) => {
@@ -35,7 +44,7 @@ describe('Ng2-alfresco-viewer', () => {
                 });
         }));
 
-        it('Input Page elements have to be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        it('Input Page elements should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(ViewerComponent)
                 .then((fixture) => {

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input } from 'angular2/core';
+import { Component, Input, SimpleChange } from 'angular2/core';
 
 declare let PDFJS: any;
 declare let __moduleName: string;
@@ -38,11 +38,12 @@ export class ViewerComponent {
     displayPage: number;
     totalPages: number;
 
-    ngOnInit() {
+    ngOnChanges(changes: {[urlFile: string]: SimpleChange}) {
-        console.log('urlFile ' + this.urlFile);
+        if (this.urlFile) {
-
             this.nameFile = this.getPDFJS().getFilenameFromUrl(this.urlFile);
 
+            this.urlFile = this.addAlfrescoTicket(this.urlFile);
+
             return this.getPDFJS().getDocument(this.urlFile).then((pdf) => {
                 this.currentPdf = pdf;
                 this.totalPages = pdf.numPages;
@@ -50,8 +51,15 @@ export class ViewerComponent {
                 this.displayPage = 1;
                 this.loadPage(this.currentPdf, this.currentPage);
             });
+        } else {
+            console.log('Url File is a required value');
+        }
     }
 
+    /**
+     * return the PDFJS global object (exist to facilitate the mock of PDFJS in the test)
+     * @returns {PDFJS}
+     */
     getPDFJS() {
         return PDFJS;
     }
@@ -81,6 +89,9 @@ export class ViewerComponent {
         });
     }
 
+    /**
+     * load the previous page
+     */
     previousPage() {
         if (this.currentPage > 1) {
             this.currentPage--;
@@ -89,6 +100,9 @@ export class ViewerComponent {
         }
     }
 
+    /**
+     * load the next page
+     */
     nextPage() {
         if (this.currentPage < this.totalPages) {
             this.currentPage++;
@@ -97,7 +111,12 @@ export class ViewerComponent {
         }
     }
 
-    inputPage(page: any) {
+    /**
+     * load the page in input
+     *
+     * @param {string} page - page to load
+     */
+    inputPage(page: string) {
         let pageInput = parseInt(page, 10);
 
         if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) {
@@ -107,4 +126,20 @@ export class ViewerComponent {
             this.displayPage = this.currentPage;
         }
     }
+
+    /**
+     * Add Ticket to the file request
+     * @returns {string}
+     */
+    private addAlfrescoTicket(url: string) {
+        return url + '?alf_ticket=' + this.getAlfrescoTicket();
+    }
+
+    /**
+     * Get the token from the local storage
+     * @returns {string}
+     */
+    private getAlfrescoTicket(): string {
+        return localStorage.getItem('token');
+    }
 }