inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve documentation and test

Browse Source
This commit is contained in:
Eugenio Romano
2016-07-18 14:49:50 +01:00
parent 4f3467e7a5
commit 90a4ef0369
10 changed files with 171 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
ng2-components/ng2-alfresco-webscript/README.md
View File

@@ -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,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
<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
Alternatively you can build component from sources with the following commands:
```sh
npm install
npm run build

16
ng2-components/ng2-alfresco-webscript/demo/src/main.ts
View File

@@ -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>
</div>
[contentType]="'HTML'"
(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, [

BIN
ng2-components/ng2-alfresco-webscript/docs/assets/HTML.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
ng2-components/ng2-alfresco-webscript/docs/assets/datatable.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

1
ng2-components/ng2-alfresco-webscript/karma.conf.js
View File

@@ -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

4
ng2-components/ng2-alfresco-webscript/package.json
View File

@@ -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"

30
ng2-components/ng2-alfresco-webscript/src/webscript.component.spec.ts
View File

@@ -161,8 +161,7 @@ describe('Test ng2-alfresco-webscript', () => {
component.ngOnChanges().then(() => {
webscriptComponentFixture.detectChanges();
expect(element.querySelector('#webscript-datatable-wrapper').innerHTML)
.toBe('<test-element-id><test-elemt-id></test-elemt-id></test-element-id>');
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
});
});
});
});

31
ng2-components/ng2-alfresco-webscript/src/webscript.component.ts
View File

@@ -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;
}
}