diff --git a/README.md b/README.md index a8f9444e61..3d2a490a25 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,7 @@ The following is a list of some of the components that you can use when building - [Viewer](ng2-components/ng2-alfresco-viewer/README.md) - [Login](ng2-components/ng2-alfresco-login/README.md) - [Upload](ng2-components/ng2-alfresco-upload/README.md) +- [Webscript viewer](ng2-components/ng2-alfresco-webscript/README.md) You can browse all the components at the following [page](http://devproducts.alfresco.com/). diff --git a/ng2-components/README.md b/ng2-components/README.md index bffb887a03..4f2098a0a9 100644 --- a/ng2-components/README.md +++ b/ng2-components/README.md @@ -35,6 +35,7 @@ - [Viewer](ng2-alfresco-viewer/README.md) - [Login](ng2-alfresco-login/README.md) - [Upload](ng2-alfresco-upload/README.md) +- [Webscript viewer](ng2-components/ng2-alfresco-webscript/README.md) You can browse all the components at the following address: diff --git a/ng2-components/ng2-alfresco-webscript/README.md b/ng2-components/ng2-alfresco-webscript/README.md index 29bb623a2b..02b5d608b5 100644 --- a/ng2-components/ng2-alfresco-webscript/README.md +++ b/ng2-components/ng2-alfresco-webscript/README.md @@ -87,7 +87,8 @@ Also make sure you include these dependencies in your .html page: [scriptArgs]="Object" [contextRoot]="string" [servicePath]="string" - [contentType]="JSON | HTML | DATATABLE | TEXT"> + [contentType]="JSON | HTML | DATATABLE | TEXT" + (onSuccess)= "logData($event)"> ``` @@ -147,12 +148,111 @@ bootstrap(AppComponent, [ **contextRoot** {string} path where application is deployed default value 'alfresco' **servicePath** {string} path where Web Script service is mapped default value 'service' **contentType** {string} how to handle the data received from te web script JSON | HTML | DATATABLE | TEXT +***data*** {string} data contain the plain value get from the webscipt is an output parameter + +## Webscript View HTML example +This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript +This sample Web Scripts reside in your Alfresco Server AND you can access the folder webscript here: + +http://localhost:8080/alfresco/service/sample/folder/Company%20Home +```html + + +``` + +![Custom columns](docs/assets/HTML.png) + +## Webscript View DATATABLE example +This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript + +http://localhost:8080/alfresco/service/sample/folder/DATATABLE + +```html + + +``` + +If you want show the result from a webscript inside a ng2-alfresco-datatable you have to return from the GET of the webscript the datatructure below: +subdivide in data and schema + +```ts +data: [], +schema: [] +``` + +this is an example: + +```ts +data: [ + {id: 1, name: 'Name 1'}, + {id: 2, name: 'Name 2'} +], +schema: [{ + type: 'text', + key: 'id', + title: 'Id', + sortable: true +}, { + type: 'text', + key: 'name', + title: 'Name', + sortable: true +}] +``` + +or you can send just the array data and the component will create a schema for you: + +```ts +data: [ + {id: 1, name: 'Name 1'}, + {id: 2, name: 'Name 2'} +]] +``` + +that will render the follow table + +![Custom columns](docs/assets/datatable.png) + + +## Webscript View JSON example +This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript +This sample Web Scripts reside in your Alfresco Server AND you can access the folder webscript here: + +http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE + +```html + + +``` + +You can get the plain data from the webscript through the **onSuccess** event parameter and use it as you need in your application + +```ts + logDataExample(data) { + console.log('You webscript data are here' + data); + } +``` + + ## Build from sources Alternatively you can build component from sources with the following commands: - - + + ```sh npm install npm run build diff --git a/ng2-components/ng2-alfresco-webscript/demo/src/main.ts b/ng2-components/ng2-alfresco-webscript/demo/src/main.ts index 925344bdaf..fae84a5847 100644 --- a/ng2-components/ng2-alfresco-webscript/demo/src/main.ts +++ b/ng2-components/ng2-alfresco-webscript/demo/src/main.ts @@ -22,7 +22,8 @@ import { HTTP_PROVIDERS } from '@angular/http'; import { ALFRESCO_CORE_PROVIDERS, AlfrescoSettingsService, - AlfrescoAuthenticationService + AlfrescoAuthenticationService, + CONTEXT_MENU_DIRECTIVES } from 'ng2-alfresco-core'; import { WEBSCRIPTCOMPONENT } from 'ng2-alfresco-webscript'; @@ -50,10 +51,11 @@ import { WEBSCRIPTCOMPONENT } from 'ng2-alfresco-webscript'; [scriptArgs]="scriptArgs" [contextRoot]="contextRoot" [servicePath]="servicePath" - [contentType]="'HTM'"> - + [contentType]="'HTML'" + (onSuccess)= "logData($event)"> + {{prova}} `, - directives: [WEBSCRIPTCOMPONENT] + directives: [WEBSCRIPTCOMPONENT, CONTEXT_MENU_DIRECTIVES] }) class WebscriptDemo implements OnInit { @@ -73,6 +75,8 @@ class WebscriptDemo implements OnInit { token: string; + prova: string; + constructor(private authService: AlfrescoAuthenticationService, private alfrescoSettingsService: AlfrescoSettingsService) { @@ -107,6 +111,10 @@ class WebscriptDemo implements OnInit { this.authenticated = false; }); } + + logData(data) { + console.log(data); + } } bootstrap(WebscriptDemo, [ diff --git a/ng2-components/ng2-alfresco-webscript/docs/assets/HTML.png b/ng2-components/ng2-alfresco-webscript/docs/assets/HTML.png new file mode 100644 index 0000000000..b64090bb2a Binary files /dev/null and b/ng2-components/ng2-alfresco-webscript/docs/assets/HTML.png differ diff --git a/ng2-components/ng2-alfresco-webscript/docs/assets/datatable.png b/ng2-components/ng2-alfresco-webscript/docs/assets/datatable.png new file mode 100644 index 0000000000..aea7fbbb4a Binary files /dev/null and b/ng2-components/ng2-alfresco-webscript/docs/assets/datatable.png differ diff --git a/ng2-components/ng2-alfresco-webscript/karma.conf.js b/ng2-components/ng2-alfresco-webscript/karma.conf.js index 2db4427f82..c84efe0a76 100644 --- a/ng2-components/ng2-alfresco-webscript/karma.conf.js +++ b/ng2-components/ng2-alfresco-webscript/karma.conf.js @@ -23,6 +23,7 @@ module.exports = function (config) { {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: 'node_modules/material-design-lite/material.min.js', included: true, watched: false}, {pattern: 'karma-test-shim.js', included: true, watched: true}, // paths loaded via module imports diff --git a/ng2-components/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json index 811f7c9aff..42b49c0fd8 100644 --- a/ng2-components/ng2-alfresco-webscript/package.json +++ b/ng2-components/ng2-alfresco-webscript/package.json @@ -75,6 +75,10 @@ "typings": "^1.0.4", "wsrv": "0.1.3" }, + "peerDependencies": { + "material-design-icons": "^2.2.3", + "material-design-lite": "^1.1.3" + }, "keywords": [ "webscript", "alfresco-component" diff --git a/ng2-components/ng2-alfresco-webscript/src/webscript.component.spec.ts b/ng2-components/ng2-alfresco-webscript/src/webscript.component.spec.ts index 0789bda90a..e516ae4783 100644 --- a/ng2-components/ng2-alfresco-webscript/src/webscript.component.spec.ts +++ b/ng2-components/ng2-alfresco-webscript/src/webscript.component.spec.ts @@ -161,8 +161,7 @@ describe('Test ng2-alfresco-webscript', () => { component.ngOnChanges().then(() => { webscriptComponentFixture.detectChanges(); - expect(element.querySelector('#webscript-datatable-wrapper').innerHTML) - .toBe(''); + expect(element.querySelector('#webscript-datatable-wrapper').innerHTML).not.toBe.undefined; done(); }); @@ -190,5 +189,32 @@ describe('Test ng2-alfresco-webscript', () => { responseText: dataTable }); }); + + it('webscript Datatable response should be displayed also if no schema is provided', (done) => { + let component = webscriptComponentFixture.componentInstance; + let element = webscriptComponentFixture.nativeElement; + + component.scriptPath = 'sample/folder/Company%20Home'; + component.contentType = 'DATATABLE'; + + component.ngOnChanges().then(() => { + webscriptComponentFixture.detectChanges(); + expect(element.querySelector('#webscript-datatable-wrapper').innerHTML).not.toBe.undefined; + done(); + }); + + let dataTable = { + data: [ + {id: 1, name: 'Name 1'}, + {id: 2, name: 'Name 2'} + ] + }; + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: dataTable + }); + }); }); }); diff --git a/ng2-components/ng2-alfresco-webscript/src/webscript.component.ts b/ng2-components/ng2-alfresco-webscript/src/webscript.component.ts index 042681855d..6309977592 100644 --- a/ng2-components/ng2-alfresco-webscript/src/webscript.component.ts +++ b/ng2-components/ng2-alfresco-webscript/src/webscript.component.ts @@ -15,22 +15,24 @@ * limitations under the License. */ -import { Component, Input } from '@angular/core'; +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { + AlfrescoAuthenticationService, + CONTEXT_MENU_DIRECTIVES, + CONTEXT_MENU_PROVIDERS +} from 'ng2-alfresco-core'; import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter } from 'ng2-alfresco-datatable'; -import { - AlfrescoAuthenticationService -} from 'ng2-alfresco-core'; - /** * + * [contentType]="JSON|HTML|DATATABLE" + * (onSuccess)="customMethod($event)> * * * This component, provide a get webscript viewer @@ -41,15 +43,18 @@ import { * @InputParam {string} servicePath path where Web Script service is mapped default value 'service' * @InputParam {string} contentType JSON | HTML | DATATABLE | TEXT * + * @Output - onSuccess - The event is emitted when the data are recived + * * @returns {WebscriptComponent} . */ @Component({ selector: 'alfresco-webscript-get', template: `
-
+
Error during the deserialization of {{data}} as {{contentType}}
`, - directives: [ALFRESCO_DATATABLE_DIRECTIVES] + directives: [ALFRESCO_DATATABLE_DIRECTIVES, CONTEXT_MENU_DIRECTIVES], + providers: [CONTEXT_MENU_PROVIDERS] }) export class WebscriptComponent { @@ -68,6 +73,9 @@ export class WebscriptComponent { @Input() contentType: string = 'TEXT'; + @Output() + onSuccess = new EventEmitter(); + data: any = undefined; show: boolean = false; @@ -92,6 +100,9 @@ export class WebscriptComponent { } else { this.show = this.showDataAsHTML(data); } + + this.onSuccess.emit(data); + resolve(); }, function (error) { console.log('Error' + error); @@ -152,7 +163,7 @@ export class WebscriptComponent { let datatableShow = true; try { if (!data.schema) { - data.schema = ObjectDataTableAdapter.generationSchema(data[0]); + data.schema = ObjectDataTableAdapter.generationSchema(data.data[0]); } if (data.schema && data.schema.length > 0) { this.data = new ObjectDataTableAdapter(data.data, data.schema); @@ -172,7 +183,7 @@ export class WebscriptComponent { this.data = undefined; } - isDataTableCOntent() { + isDataTableContent() { return this.contentType === 'DATATABLE' && this.show; } }