improve documentation and test

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/).
 

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:
 

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)">
  </alfresco-webscript-get>
  ```
 
@@ -147,6 +148,105 @@ 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
+ <alfresco-webscript-get [scriptPath]="scriptPath"
+                           [contextRoot]= "'alfresco'"
+                           [servicePath]= "'service'";
+                           [scriptPath]=  "'Sample/folder/Company%20Home'"
+                           [contentType]= "'HTML'">
+ </alfresco-webscript-get>
+```                          
+
+![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
+ <alfresco-webscript-get [scriptPath]="scriptPath"
+                           [contextRoot]= "'alfresco'"
+                           [servicePath]= "'service'";
+                           [scriptPath]=  "'Sample/folder/DATATABLE'"
+                           [contentType]= "'DATATABLE'">
+ </alfresco-webscript-get>
+```  
+
+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
+ <alfresco-webscript-get [scriptPath]="scriptPath"
+                           [contextRoot]= "'alfresco'"
+                           [servicePath]= "'service'";
+                           [scriptPath]=  "'Sample/folder/JSON_EXAMPLE'"
+                           [contentType]= "'HTML'"
+                           (onSuccess)= "logDataExample($event)">
+ </alfresco-webscript-get>
+``` 
+
+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

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'"></alfresco-webscript-get>
+                           [contentType]="'HTML'"
-        </div>
+                           (onSuccess)= "logData($event)"></alfresco-webscript-get>
+        </div>{{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, [

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

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"

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)
+                expect(element.querySelector('#webscript-datatable-wrapper').innerHTML).not.toBe.undefined;
-                    .toBe('<test-element-id><test-elemt-id></test-elemt-id></test-element-id>');
                 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
+            });
+        });
     });
 });

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';
-
 /**
  * <alfresco-webscript-get [scriptPath]="string"
  *                         [scriptArgs]="Object"
  *                         [contextRoot]="string"
  *                         [servicePath]="string"
- *                         [contentType]="JSON|HTML|DATATABLE">
+ *                         [contentType]="JSON|HTML|DATATABLE"
+ *                         (onSuccess)="customMethod($event)>
  * </alfresco-webscript-get>
  *
  * 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: `
     <div id="webscript-data" ></div>
-    <div *ngIf="isDataTableCOntent()" ><alfresco-datatable id="webscript-datatable-wrapper" [data]="data" ></alfresco-datatable><div>
+    <div *ngIf="isDataTableContent()" ><alfresco-datatable id="webscript-datatable-wrapper" [data]="data" ></alfresco-datatable><div>
     <div *ngIf="!show" id="error">Error during the deserialization of {{data}} as {{contentType}}</div>`,
-    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;
     }
 }