From 0050a2cc13680ac9f7b1dfc61d94b40c94599478 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Thu, 4 Aug 2016 00:17:21 +0100 Subject: [PATCH 1/8] add alfresco core in viewer --- .../ng2-alfresco-viewer/demo/package.json | 3 ++ .../demo/systemjs.config.js | 2 ++ .../ng2-alfresco-viewer/karma-test-shim.js | 8 +++-- .../ng2-alfresco-viewer/karma.conf.js | 8 +++-- .../ng2-alfresco-viewer/package.json | 5 +++ .../AlfrescoSettingsService.service.mock.ts | 36 +++++++++++++++++++ .../src/pdfViewer.component.spec.ts | 14 +++++++- .../src/viewer.component.spec.ts | 14 +++++++- .../src/viewer.component.ts | 10 +++++- 9 files changed, 93 insertions(+), 7 deletions(-) create mode 100644 ng2-components/ng2-alfresco-viewer/src/assets/AlfrescoSettingsService.service.mock.ts diff --git a/ng2-components/ng2-alfresco-viewer/demo/package.json b/ng2-components/ng2-alfresco-viewer/demo/package.json index d5976d2cd2..70cbdddc35 100644 --- a/ng2-components/ng2-alfresco-viewer/demo/package.json +++ b/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": { diff --git a/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js b/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js index 303190cb41..b6f0d5db4d 100644 --- a/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js +++ b/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js @@ -10,6 +10,7 @@ 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs', + 'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/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 +19,7 @@ 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, + 'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' }, 'ng2-alfresco-viewer': { main: 'index.js', defaultExtension: 'js' } }; var ngPackageNames = [ diff --git a/ng2-components/ng2-alfresco-viewer/karma-test-shim.js b/ng2-components/ng2-alfresco-viewer/karma-test-shim.js index 12d4258019..3f74908bb7 100644 --- a/ng2-components/ng2-alfresco-viewer/karma-test-shim.js +++ b/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 = [ diff --git a/ng2-components/ng2-alfresco-viewer/karma.conf.js b/ng2-components/ng2-alfresco-viewer/karma.conf.js index efa0139c03..70e6adbba1 100644 --- a/ng2-components/ng2-alfresco-viewer/karma.conf.js +++ b/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 @@ -61,7 +65,7 @@ module.exports = function (config) { // Coverage reporter generates the coverage reporters: ['mocha', 'coverage', 'coveralls', 'kjhtml'], - + // Source files that you wanna generate coverage for. // Do not include tests or libraries (these files will be instrumented by Istanbul) preprocessors: { @@ -74,7 +78,7 @@ module.exports = function (config) { reporters: [ {type: 'text'}, {type: 'json', file: 'coverage-final.json'}, - {type: 'html'}, + {type: 'html'}, {type: 'lcov'} ] } diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json index cd19111d33..36c83966e7 100644 --- a/ng2-components/ng2-alfresco-viewer/package.json +++ b/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", diff --git a/ng2-components/ng2-alfresco-viewer/src/assets/AlfrescoSettingsService.service.mock.ts b/ng2-components/ng2-alfresco-viewer/src/assets/AlfrescoSettingsService.service.mock.ts new file mode 100644 index 0000000000..354b652ed8 --- /dev/null +++ b/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; + } +} diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts index 4c8f0d8f8c..f8d01bc5e9 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts +++ b/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 diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts index 12157298c3..5d5467bdb9 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts +++ b/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 diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts index 62e0a9cea4..5bdfeb43c4 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts +++ b/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; @@ -38,6 +39,9 @@ export class ViewerComponent { @Input() fileName: string = null; + @Input() + fileNodeId: string = null; + @Input() mimeType: string = null; @@ -56,7 +60,7 @@ export class ViewerComponent { extension: string; - constructor(private element: ElementRef, @Inject(DOCUMENT) private document) { + constructor(private authService: AlfrescoAuthenticationService, private element: ElementRef, @Inject(DOCUMENT) private document) { } ngOnChanges(changes) { @@ -71,7 +75,11 @@ export class ViewerComponent { let filenameFromUrl = this.getFilenameFromUrl(this.urlFile); this.displayName = this.fileName !== null ? this.fileName : filenameFromUrl; this.extension = this.getFileExtension(filenameFromUrl); + } else if (this.fileNodeId) { + console.log('call api'); } + + resolve(); }); } From efa39eefe8b1220940ed4176f9b96bad02ce09c5 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Thu, 4 Aug 2016 01:29:26 +0100 Subject: [PATCH 2/8] add auth in demo --- .../ng2-alfresco-viewer/demo/index.html | 3 + .../ng2-alfresco-viewer/demo/src/main.ts | 80 +++++++++++++++++-- .../demo/systemjs.config.js | 6 +- .../src/viewer.component.ts | 5 ++ 4 files changed, 88 insertions(+), 6 deletions(-) diff --git a/ng2-components/ng2-alfresco-viewer/demo/index.html b/ng2-components/ng2-alfresco-viewer/demo/index.html index ce2709adcc..5e571042d4 100644 --- a/ng2-components/ng2-alfresco-viewer/demo/index.html +++ b/ng2-components/ng2-alfresco-viewer/demo/index.html @@ -22,6 +22,9 @@ + + + + ``` -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: ``` -#### Basic usage +#### Basic usage with node id + +```html + +``` + +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: ` + + `, + directives: [VIEWERCOMPONENT] +}) +class MyDemoApp { + + fileNodeId: any; + + constructor() { + this.fileNodeId = '09469a81-1ed9-4caa-a5df-8362fc3d096f'; + } +} +bootstrap(MyDemoApp, [ + VIEWERCOMPONENT +]); +``` + +#### Basic usage with urlFile ```html @@ -105,11 +140,10 @@ 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 | +`fileNodeId` | *string* | | node Id of the file to load the file | +`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 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: diff --git a/ng2-components/ng2-alfresco-viewer/demo/src/main.ts b/ng2-components/ng2-alfresco-viewer/demo/src/main.ts index 4f6296c12d..665b3caa91 100644 --- a/ng2-components/ng2-alfresco-viewer/demo/src/main.ts +++ b/ng2-components/ng2-alfresco-viewer/demo/src/main.ts @@ -47,9 +47,9 @@ import {
+ [overlayMode]="true" + [urlFile]="'localTestFile.pdf'">
`, From d18a5a26d95005f7f62853db4a10fcf8e4c7ae16 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Thu, 4 Aug 2016 10:52:31 +0100 Subject: [PATCH 5/8] fix the link script --- scripts/npm-link-demo-shell.sh | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/scripts/npm-link-demo-shell.sh b/scripts/npm-link-demo-shell.sh index a0ba56f46b..c568462756 100755 --- a/scripts/npm-link-demo-shell.sh +++ b/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-viewer \ - ng2-alfresco-webscript + ng2-alfresco-upload do DESTDIR="$DIR/../ng2-components/${PACKAGE}" echo "====== linking component: ${PACKAGE} =====" From a44d1cb6441efc15811cbff906bd7c569cc56096 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Thu, 4 Aug 2016 14:18:33 +0100 Subject: [PATCH 6/8] add link core in travis build viewer --- .travis.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index eab8b041cc..f3c377b2ff 100644 --- a/.travis.yml +++ b/.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 From 8257a17a9417fd1db8ac073a3c38e61a25bfd7d8 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Thu, 4 Aug 2016 22:23:24 +0100 Subject: [PATCH 7/8] remove not used input --- ng2-components/ng2-alfresco-viewer/demo/src/main.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/ng2-components/ng2-alfresco-viewer/demo/src/main.ts b/ng2-components/ng2-alfresco-viewer/demo/src/main.ts index 665b3caa91..8083c5f27e 100644 --- a/ng2-components/ng2-alfresco-viewer/demo/src/main.ts +++ b/ng2-components/ng2-alfresco-viewer/demo/src/main.ts @@ -39,12 +39,6 @@ import { operations.
-
-
-
-
-
-
Date: Sat, 6 Aug 2016 01:55:01 +0100 Subject: [PATCH 8/8] fix tests --- ng2-components/ng2-alfresco-viewer/src/viewer.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts index 44b540309e..960b0cb3fe 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts @@ -151,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; } /**