#68 first simple integration filelist and viewer

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

@@ -1,121 +1,129 @@
-<alfresco-upload-drag-area
-        [showUploadDialog]="true"
-        currentFolderPath="{{absolutePath}}"
-        uploaddirectory="{{relativePath}}"
-        (onSuccess)="refreshDocumentList($event)">
-    <alfresco-document-list 
-            [currentFolderPath]="absolutePath"
-            [breadcrumb]="breadcrumb"
-            (folderChange)="onFolderChanged($event)">
-        <content-columns>
-            <content-column source="$thumbnail"></content-column>
-            <content-column
-                    title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
-                    source="name"
-                    class="full-width name-column">
-            </content-column>
-            <content-column
-                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
-                    source="createdByUser.displayName">
-            </content-column>
-            <content-column
-                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
-                    source="createdAt">
-            </content-column>
-        </content-columns>
+<div *ngIf="!fileShowed">
+    <alfresco-upload-drag-area
+            [showUploadDialog]="true"
+            currentFolderPath="{{absolutePath}}"
+            uploaddirectory="{{relativePath}}"
+            (onSuccess)="refreshDocumentList($event)">
+        <alfresco-document-list
+                [currentFolderPath]="absolutePath"
+                [breadcrumb]="breadcrumb"
+                (itemClick)="showFile($event)"
+                (folderChange)="onFolderChanged($event)">
+            <content-columns>
+                <content-column source="$thumbnail"></content-column>
+                <content-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                        source="name"
+                        class="full-width name-column">
+                </content-column>
+                <content-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
+                        source="createdByUser.displayName">
+                </content-column>
+                <content-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
+                        source="createdAt">
+                </content-column>
+            </content-columns>
 
-        <content-actions>
-            <!-- folder actions -->
-            <content-action
-                    target="folder"
-                    type="button"
-                    icon="delete"
-                    handler="system1">
-            </content-action>
-            <content-action
-                    target="folder"
-                    type="menu"
-                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
-                    handler="system1">
-            </content-action>
-            <content-action
-                    target="folder"
-                    type="menu"
-                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
-                    (execute)="myFolderAction1($event)">
-            </content-action>
-            <content-action
-                    target="folder"
-                    type="menu"
-                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
-                    handler="delete">
-            </content-action>
+            <content-actions>
+                <!-- folder actions -->
+                <content-action
+                        target="folder"
+                        type="button"
+                        icon="delete"
+                        handler="system1">
+                </content-action>
+                <content-action
+                        target="folder"
+                        type="menu"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
+                        handler="system1">
+                </content-action>
+                <content-action
+                        target="folder"
+                        type="menu"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
+                        (execute)="myFolderAction1($event)">
+                </content-action>
+                <content-action
+                        target="folder"
+                        type="menu"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
+                        handler="delete">
+                </content-action>
 
-            <!-- document actions -->
-            <content-action
-                    target="document"
-                    type="button"
-                    icon="account_circle"
-                    handler="my-handler">
-            </content-action>
-            <content-action
-                    target="document"
-                    type="button"
-                    icon="cloud_download"
-                    handler="download">
-            </content-action>
-            <content-action
-                    target="document"
-                    type="menu"
-                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
-                    handler="download">
-            </content-action>
-            <content-action
-                    target="document"
-                    type="menu"
-                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
-                    handler="system2">
-            </content-action>
-            <content-action
-                    target="document"
-                    type="menu"
-                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
-                    (execute)="myCustomAction1($event)">
-            </content-action>
-            <content-action
-                    target="document"
-                    type="menu"
-                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
-                    handler="delete">
-            </content-action>
-        </content-actions>
-    </alfresco-document-list>
-</alfresco-upload-drag-area>
+                <!-- document actions -->
+                <content-action
+                        target="document"
+                        type="button"
+                        icon="account_circle"
+                        handler="my-handler">
+                </content-action>
+                <content-action
+                        target="document"
+                        type="button"
+                        icon="cloud_download"
+                        handler="download">
+                </content-action>
+                <content-action
+                        target="document"
+                        type="menu"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
+                        handler="download">
+                </content-action>
+                <content-action
+                        target="document"
+                        type="menu"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
+                        handler="system2">
+                </content-action>
+                <content-action
+                        target="document"
+                        type="menu"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
+                        (execute)="myCustomAction1($event)">
+                </content-action>
+                <content-action
+                        target="document"
+                        type="menu"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
+                        handler="delete">
+                </content-action>
+            </content-actions>
+        </alfresco-document-list>
+    </alfresco-upload-drag-area>
 
-<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 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 class="p-10">
+        <ul>
+            <li>Relative path: {{relativePath}}</li>
+            <li>Absolute path: {{absolutePath}}</li>
+        </ul>
+    </div>
+
+    <h5>Single file upload</h5>
+    <alfresco-upload-button data-automation-id="single-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
+                             (onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
+    <h5>Folder upload</h5>
+    <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>
+    <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
+    <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 class="p-10">
-    <ul>
-        <li>Relative path: {{relativePath}}</li>
-        <li>Absolute path: {{absolutePath}}</li>
-    </ul>
-</div>
-
-<h5>Single file upload</h5>
-<alfresco-upload-button data-automation-id="single-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
-                         (onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
-<h5>Folder upload</h5>
-<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>
-<input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
-<alfresco-upload-button data-automation-id="multiple-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
-                        acceptedFilesType="{{acceptedFilesType}}"
-                        [multipleFiles]="true"
-                        (onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
+<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() {
-        console.log('constructor');
-        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()
+    nameFile: string;
 
-    /**
-     * Get the token from the local storage
-     * @returns {any}
-     */
-    private getAlfrescoTicket(): string {
-        return localStorage.getItem('token');
+    @Input()
+    workSpace: string;
+
+    constructor() {
+        let host = 'http://192.168.99.100:8080/';
+        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,20 +38,28 @@ export class ViewerComponent {
     displayPage: number;
     totalPages: number;
 
-    ngOnInit() {
-        console.log('urlFile ' + this.urlFile);
+    ngOnChanges(changes: {[urlFile: string]: SimpleChange}) {
+        if (this.urlFile) {
+            this.nameFile = this.getPDFJS().getFilenameFromUrl(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;
-            this.currentPage = 1;
-            this.displayPage = 1;
-            this.loadPage(this.currentPdf, this.currentPage);
-        });
+            return this.getPDFJS().getDocument(this.urlFile).then((pdf) => {
+                this.currentPdf = pdf;
+                this.totalPages = pdf.numPages;
+                this.currentPage = 1;
+                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');
+    }
 }