Merge pull request #519 from Alfresco/dev-eromano-506

Dev eromano 506

.travis.yml

@@ -32,7 +32,7 @@ env:
     - MODULE=ng2-activiti-tasklist
 
 before_script:
-  - if ([ "$MODULE" != "ng2-alfresco-core" ] && [ "$MODULE" != "ng2-alfresco-viewer" ]); then
+  - if ([ "$MODULE" != "ng2-alfresco-core" ]); then
         (cd ng2-components/ng2-alfresco-core; npm install; npm link);
     fi
   - if ([ "$MODULE" == "ng2-alfresco-documentlist" ] || [ "$MODULE" == "ng2-alfresco-webscript" ] || [ "$MODULE" == "ng2-activiti-processlist" ] || [ "$MODULE" == "ng2-activiti-tasklist" ]); then
@@ -42,7 +42,7 @@ before_script:
         (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; npm install; npm link);
     fi
   - cd ng2-components/$MODULE;
-  - if ([ "$MODULE" != "ng2-alfresco-core" ] && [ "$MODULE" != "ng2-alfresco-viewer" ]); then
+  - if ([ "$MODULE" != "ng2-alfresco-core" ]); then
         npm link ng2-alfresco-core;
     fi
   - if ([ "$MODULE" == "ng2-alfresco-documentlist" ] || [ "$MODULE" == "ng2-alfresco-webscript" ] || [ "$MODULE" == "ng2-activiti-processlist" ] || [ "$MODULE" == "ng2-activiti-tasklist" ]); then

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/README.md

@@ -48,11 +48,13 @@ Add the following dependency to your index.html:
 <script src="node_modules/pdfjs-dist/build/pdf.js"></script>
 <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
 <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
+<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
 ```
 
-Make sure your systemjs.config has the following configuration:
+The following component needs to be added to your systemjs.config: 
 
-https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
+- ng2-translate
+- ng2-alfresco-core
 
 #### Style
 The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
@@ -71,7 +73,40 @@ Also make sure you include these dependencies in your .html page:
 <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 ```
 
-#### Basic usage
+#### Basic usage with node id
+
+```html
+<ng2-alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></ng2-alfresco-viewer>
+```
+
+Example of an App that declares the file viewer component :
+
+```ts
+import { Component } from '@angular/core';
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
+
+@Component({
+    selector: 'my-app',
+    template: `   <alfresco-viewer [showViewer]="true" [overlayMode]="true" [fileNodeId]="fileNodeId">
+                    <div class="mdl-spinner mdl-js-spinner is-active"></div>
+                   </alfresco-viewer>`,
+    directives: [VIEWERCOMPONENT]
+})
+class MyDemoApp {
+
+    fileNodeId: any;
+    
+    constructor() {
+        this.fileNodeId = '09469a81-1ed9-4caa-a5df-8362fc3d096f';    
+    }
+}
+bootstrap(MyDemoApp, [
+    VIEWERCOMPONENT
+]);
+```
+
+#### Basic usage with urlFile
 
 ```html
 <ng2-alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></ng2-alfresco-viewer>
@@ -105,11 +140,10 @@ bootstrap(MyDemoApp, [
 
 Attribute     | Options     | Default      | Description | Mandatory
 ---           | ---         | ---          | ---         | ---
-`urlFile`         | *string*    |        |  Url where to load the file | mandatory
+`fileNodeId`         | *string*    |        |  node Id of the file to load the file | 
-`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 |
+`urlFile`         | *string*    |        |  If you want laod an external file that not comes from the ECM you can use this Url where to load the file | 
-`overlayMode`         | *boolean*    | `false`        | if true Show the Viewer full page over the present content |
+`overlayMode`         | *boolean*    | `false`        | if true Show the Viewer full page over the present content otherwise will fit the parent div  |
 `showViewer`         | *boolean*    | `true`        | Hide or show the viewer |
-`mimeType`         | *string*    | `true`        | MimeType of the file, used to detect if the browser can display the content. If not supplied the component will attempt to guess based on file extension of the `urlFile` |
 
 ## Build from sources
 Alternatively you can build component from sources with the following commands:

ng2-components/ng2-alfresco-viewer/demo/index.html

@@ -22,6 +22,9 @@
     <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
     <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
 
+    <!-- Additional Alfresco libraries -->
+    <script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
+
 
     <script src="systemjs.config.js"></script>
     <script>

ng2-components/ng2-alfresco-viewer/demo/package.json

@@ -38,6 +38,9 @@
     "material-design-lite": "1.1.3",
     "pdfjs-dist": "1.5.258",
 
+    "ng2-alfresco-core": "^0.2.0",
+    "ng2-translate": "2.2.2",
+    "alfresco-js-api": "^0.2.0",
     "ng2-alfresco-viewer" : "file:../"
   },
   "devDependencies": {

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

@@ -19,18 +19,80 @@ import { Component } from '@angular/core';
 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
 
+import { HTTP_PROVIDERS } from '@angular/http';
+
+import {
+    ALFRESCO_CORE_PROVIDERS,
+    AlfrescoSettingsService,
+    AlfrescoAuthenticationService
+} from 'ng2-alfresco-core';
+
 @Component({
     selector: 'my-app',
-    template: `   <alfresco-viewer [showViewer]="true" [overlayMode]="true" [urlFile]="'localTestFile.pdf'">
+    template: `
+               <label for="token"><b>Insert a valid access token / ticket:</b></label><br>
+               <input id="token" type="text" size="48" (change)="updateToken();documentList.reload()" [(ngModel)]="token"><br>
+               <label for="token"><b>Insert the ip of your Alfresco instance:</b></label><br>
+               <input id="token" type="text" size="48" (change)="updateHost();documentList.reload()" [(ngModel)]="host"><br><br>
+               <div *ngIf="!authenticated" style="color:#FF2323">
+                    Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid token to perform
+                    operations.
+               </div>
+               <hr>
+        <div class="container" *ngIf="authenticated">
+            <alfresco-viewer
+                    [showViewer]="true"
+                    [overlayMode]="true"
+                    [urlFile]="'localTestFile.pdf'">
                     <div class="mdl-spinner mdl-js-spinner is-active"></div>
-                   </alfresco-viewer>`,
+                   </alfresco-viewer>
+                   </div>`,
     directives: [VIEWERCOMPONENT]
 })
 class MyDemoApp {
-    constructor() {
+    authenticated: boolean;
-        console.log('constructor');
+
+    ecmHost: string = 'http://127.0.0.1:8080';
+
+    token: string;
+
+    constructor(private authService: AlfrescoAuthenticationService,
+                private alfrescoSettingsService: AlfrescoSettingsService) {
+
+        alfrescoSettingsService.ecmHost = this.ecmHost;
+        if (this.authService.getTicket()) {
+            this.token = this.authService.getTicket();
+        }
+    }
+
+    public updateToken(): void {
+        localStorage.setItem('token', this.token);
+    }
+
+    public updateHost(): void {
+        this.alfrescoSettingsService.ecmHost = this.ecmHost;
+        this.login();
+    }
+
+    ngOnInit() {
+        this.login();
+    }
+
+    login() {
+        this.authService.login('admin', 'admin', ['ECM']).subscribe(
+            token => {
+                console.log(token);
+                this.token = token;
+                this.authenticated = true;
+            },
+            error => {
+                console.log(error);
+                this.authenticated = false;
+            });
     }
 }
 bootstrap(MyDemoApp, [
-    VIEWERCOMPONENT
+    VIEWERCOMPONENT,
+    HTTP_PROVIDERS,
+    ALFRESCO_CORE_PROVIDERS
 ]);

ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js

@@ -10,6 +10,9 @@
         'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
         'rxjs':                       'node_modules/rxjs',
 
+        'ng2-translate': 'node_modules/ng2-translate',
+        'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/dist',
+        'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/dist',
         'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/dist'
     };
     // packages tells the System loader how to load when no filename and/or no extension
@@ -18,6 +21,9 @@
         'rxjs':                       { defaultExtension: 'js' },
         'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
 
+        'ng2-translate': { defaultExtension: 'js' },
+        'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' },
+        'ng2-alfresco-datatable': { main: 'index.js', defaultExtension: 'js' },
         'ng2-alfresco-viewer': { main: 'index.js', defaultExtension: 'js' }
     };
     var ngPackageNames = [
@@ -37,7 +43,7 @@
     }
     // Bundled (~40 requests):
     function packUmd(pkgName) {
-        packages['@angular/'+pkgName] = { main: '/bundles/'+ pkgName + '.umd.js', defaultExtension: 'js' };
+        packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
     }
     // Most environments should use UMD; some (Karma) need the individual index files
     var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

ng2-components/ng2-alfresco-viewer/karma-test-shim.js

@@ -8,12 +8,16 @@ __karma__.loaded = function() {};
 var map = {
     'app': 'base/dist',
     'rxjs': 'base/node_modules/rxjs',
-    '@angular': 'base/node_modules/@angular'
+    'ng2-alfresco-core': '/base/node_modules/ng2-alfresco-core/dist',
+    '@angular': 'base/node_modules/@angular',
+    'ng2-translate' : '/base/node_modules/ng2-translate'
 };
 
 var packages = {
     'app': { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs': { defaultExtension: 'js' }
+    'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' },
+    'rxjs': { defaultExtension: 'js' },
+    'ng2-translate': { defaultExtension: 'js' }
 };
 
 var packageNames = [

ng2-components/ng2-alfresco-viewer/karma.conf.js

@@ -16,6 +16,10 @@ module.exports = function (config) {
       {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
       {pattern: 'node_modules/@angular/**/*.map', included: false, watched: false},
 
+      {pattern: 'node_modules/ng2-alfresco-core/dist/**/*.js', included: false, served: true, watched: false},
+      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, served: true, watched: false},
+      {pattern: 'node_modules/alfresco-js-api/dist/alfresco-js-api.js', included: true, watched: false},
+
       {pattern: 'karma-test-shim.js', included: true, watched: true},
 
       // paths loaded via module imports

ng2-components/ng2-alfresco-viewer/package.json

@@ -58,6 +58,11 @@
     "@angular/router": "3.0.0-alpha.7",
     "@angular/router-deprecated": "2.0.0-rc.2",
     "@angular/upgrade": "2.0.0-rc.3",
+
+    "ng2-alfresco-core": "0.2.0",
+    "ng2-translate": "2.2.2",
+    "alfresco-js-api": "^0.2.0",
+
     "systemjs": "0.19.27",
     "core-js": "2.4.0",
     "reflect-metadata": "0.1.3",

ng2-components/ng2-alfresco-viewer/src/assets/AlfrescoSettingsService.service.mock.ts

@@ -0,0 +1,36 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AlfrescoSettingsServiceMock {
+
+    static DEFAULT_HOST_ADDRESS: string = 'fakehost';
+
+    private providers: string[] = ['ECM', 'BPM'];
+
+    private _host: string = AlfrescoSettingsServiceMock.DEFAULT_HOST_ADDRESS;
+
+    public get ecmHost(): string {
+        return this._host;
+    }
+
+    getProviders(): string [] {
+        return this.providers;
+    }
+}

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { describe, expect, it, inject } from '@angular/core/testing';
+import { describe, expect, it, inject, beforeEachProviders } from '@angular/core/testing';
 import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import { PdfViewerComponent } from './pdfViewer.component';
@@ -23,8 +23,20 @@ import { PDFJSmock } from './assets/PDFJS.mock';
 import { PDFViewermock } from './assets/PDFViewer.mock';
 import { EventMock } from './assets/event.mock';
 
+import { HTTP_PROVIDERS } from '@angular/http';
+import { AlfrescoSettingsServiceMock } from '../src/assets/AlfrescoSettingsService.service.mock';
+import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
+
 describe('PdfViewer', () => {
 
+    beforeEachProviders(() => {
+        return [
+            HTTP_PROVIDERS,
+            {provide: AlfrescoSettingsService, useClass: AlfrescoSettingsServiceMock},
+            {provide: AlfrescoAuthenticationService, useClass: AlfrescoAuthenticationService}
+        ];
+    });
+
     describe('View', () => {
         it('Canvas should be present', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb

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.spec.ts

@@ -15,13 +15,25 @@
  * limitations under the License.
  */
 
-import {describe, expect, it, inject } from '@angular/core/testing';
+import { describe, expect, it, inject, beforeEachProviders } from '@angular/core/testing';
 import { TestComponentBuilder } from '@angular/compiler/testing';
 import { ViewerComponent } from './viewer.component';
 import { EventMock } from './assets/event.mock';
 
+import { HTTP_PROVIDERS } from '@angular/http';
+import { AlfrescoSettingsServiceMock } from '../src/assets/AlfrescoSettingsService.service.mock';
+import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
+
  describe('ViewerComponent', () => {
 
+     beforeEachProviders(() => {
+         return [
+             HTTP_PROVIDERS,
+             {provide: AlfrescoSettingsService, useClass: AlfrescoSettingsServiceMock},
+             {provide: AlfrescoAuthenticationService, useClass: AlfrescoAuthenticationService}
+         ];
+     });
+
      describe('View', () => {
          it('shadow overlay should be present if is overlay mode', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
              return tcb

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

@@ -20,6 +20,7 @@ import { PdfViewerComponent } from './pdfViewer.component';
 import { ImgViewerComponent } from './imgViewer.component';
 import { NotSupportedFormat } from './notSupportedFormat.component';
 import { DOCUMENT } from '@angular/platform-browser';
+import { AlfrescoAuthenticationService} from 'ng2-alfresco-core';
 
 declare let __moduleName: string;
 
@@ -36,10 +37,7 @@ export class ViewerComponent {
     urlFile: string;
 
     @Input()
-    fileName: string = null;
+    fileNodeId: string = null;
-
-    @Input()
-    mimeType: string = null;
 
     @Input()
     overlayMode: boolean = false;
@@ -56,22 +54,37 @@ export class ViewerComponent {
 
     extension: string;
 
-    constructor(private element: ElementRef, @Inject(DOCUMENT) private document) {
+    mimeType: string;
+
+    loaded: boolean = false;
+
+    constructor(private authService: AlfrescoAuthenticationService, private element: ElementRef, @Inject(DOCUMENT) private document) {
     }
 
     ngOnChanges(changes) {
         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) {
+                    this.authService.getAlfrescoApi().nodes.getNodeInfo(this.fileNodeId).then((data) => {
+                        this.mimeType = data.content.mimeType;
+                        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');
+                    });
                 }
+
+
                 resolve();
             });
         }
@@ -138,7 +151,7 @@ export class ViewerComponent {
      * @returns {boolean}
      */
     private isImageMimeType() {
-        return this.mimeType !== null && this.mimeType.indexOf('image/') === 0;
+        return this.mimeType && this.mimeType.indexOf('image/') === 0;
     }
 
     /**
@@ -236,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;
+    }
 }

scripts/npm-link-demo-shell.sh

@@ -64,13 +64,19 @@ npm link
 npm run typings
 npm run build
 
+#LINK VIEWER
+echo "====== linking component: ng2-activiti-processlist ====="
+cd "$DIR/../ng2-components/ng2-activiti-viewer"
+npm link ng2-alfresco-core
+npm link
+npm run typings
+npm run build
+
 #LINK ALL THE OTHERS COMPONENTS
 for PACKAGE in \
   ng2-alfresco-login \
   ng2-alfresco-search \
-  ng2-alfresco-upload \
+  ng2-alfresco-upload
-  ng2-alfresco-viewer \
-  ng2-alfresco-webscript
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== linking component: ${PACKAGE} ====="