inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #518 from Alfresco/dev-eromano-515

Browse Source 
Webscript disable show data parameter #515
This commit is contained in:
Mario Romano
2016-08-04 19:48:21 +01:00
committed by GitHub
parent 1ac64c5bc7 fabbe2534a
commit 97a8fbd2db
5 changed files with 77 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ng2-components/ng2-alfresco-webscript/README.md
+16 -5
View File
@@ -87,6 +87,7 @@ Also make sure you include these dependencies in your .html page:
[scriptArgs]="Object"
[contextRoot]="string"
[servicePath]="string"
[showData]="boolean"
[contentType]="JSON | HTML | DATATABLE | TEXT"
(onSuccess)= "logData($event)">
</alfresco-webscript-get>
@@ -143,11 +144,20 @@ bootstrap(AppComponent, [
#### Options
**scriptPath** {string} path to Web Script (as defined by Web Script)
**scriptArgs** {Object} arguments to pass to Web Script
**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
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`scriptPath` | *string* | | path to Web Script (as defined by Web Script) | mandatory
`scriptArgs` | *Object* | | arguments to pass to Web Script |
`contextRoot` | *string* | | path where application is deployed |
`scriptPath` | *string* | | path to Web Script (as defined by Web Script) | alfresco
`contentType` | *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 or TEXT | TEXT
`onSuccess` | *event* | | You can get the plain data from the webscript through the **onSuccess** event parameter and use it as you need in your application |
`showData` | *booleann* | | render the webscript data |true
**contentType** {string}
***data*** {string} data contain the plain value get from the webscipt is an output parameter
## Webscript View HTML example
@@ -236,6 +246,7 @@ http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE
[servicePath]= "'service'";
[scriptPath]= "'Sample/folder/JSON_EXAMPLE'"
[contentType]= "'HTML'"
[showData] = "false"
(onSuccess)= "logDataExample($event)">
</alfresco-webscript-get>
```
ng2-components/ng2-alfresco-webscript/demo/package.json
+2 -1
View File
@@ -41,7 +41,8 @@
"ng2-translate": "2.2.2",
"ng2-alfresco-core": "^0.2.0",
"ng2-alfresco-datatable": "^0.2.0"
"ng2-alfresco-datatable": "^0.2.0",
"ng2-alfresco-webscript": "^0.2.0"
},
"devDependencies": {
"concurrently": "2.0.0",
ng2-components/ng2-alfresco-webscript/demo/src/main.ts
+3 -3
View File
@@ -63,7 +63,7 @@ class WebscriptDemo implements OnInit {
authenticated: boolean;
ecmHost: string = 'http://127.0.0.1:8080';
ecmHost: string = 'http://127.0.0.1:8080';
scriptPath: string = 'sample/folder/Company%20Home';
@@ -78,7 +78,7 @@ class WebscriptDemo implements OnInit {
constructor(private authService: AlfrescoAuthenticationService,
private alfrescoSettingsService: AlfrescoSettingsService) {
alfrescoSettingsService.ecmHost = this.ecmHost;
alfrescoSettingsService.ecmHost = this.ecmHost;
if (this.authService.getTicket()) {
this.token = this.authService.getTicket();
}
@@ -89,7 +89,7 @@ class WebscriptDemo implements OnInit {
}
public updateHost(): void {
this.alfrescoSettingsService.ecmHost = this.ecmHost;
this.alfrescoSettingsService.ecmHost = this.ecmHost;
this.login();
}
ng2-components/ng2-alfresco-webscript/src/webscript.component.spec.ts
+24 -23
View File
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { describe, expect, it, inject, beforeEachProviders, beforeEach, afterEach } from '@angular/core/testing';
import { describe, expect, it, inject, beforeEachProviders, beforeEach, afterEach, xit } from '@angular/core/testing';
import { TestComponentBuilder } from '@angular/compiler/testing';
import { WebscriptComponent } from '../src/webscript.component';
import { AlfrescoSettingsServiceMock } from '../src/assets/AlfrescoSettingsService.service.mock';
@@ -27,7 +27,7 @@ declare let jasmine: any;
describe('Test ng2-alfresco-webscript', () => {
let webscriptComponentFixture;
let webscriptComponentFixture, element, component;
beforeEachProviders(() => {
return [
@@ -40,22 +40,34 @@ describe('Test ng2-alfresco-webscript', () => {
beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(WebscriptComponent)
.then(fixture => webscriptComponentFixture = fixture);
.then(fixture => {
webscriptComponentFixture = fixture;
element = webscriptComponentFixture.nativeElement;
component = webscriptComponentFixture.componentInstance;
component.scriptPath = 'fakePath';
component.showData = true;
});
}));
describe('View', () => {
it('webscript html wrapper should be present', () => {
let element = webscriptComponentFixture.nativeElement;
expect(element.querySelector('#webscript-html-wrapper')).toBeDefined();
});
it('webscript wrapper should be hide if showData is false', () => {
webscriptComponentFixture.detectChanges();
expect(element.querySelector('#webscript-html-wrapper')).toBe.undefined;
});
it('webscript JSON datatable wrapper should be present', () => {
let element = webscriptComponentFixture.nativeElement;
webscriptComponentFixture.detectChanges();
expect(element.querySelector('#webscript-json-wrapper')).toBeDefined();
});
it('webscript plain text datatable wrapper should be present', () => {
let element = webscriptComponentFixture.nativeElement;
webscriptComponentFixture.detectChanges();
expect(element.querySelector('#webscript-plaintext-wrapper')).toBeDefined();
});
});
@@ -71,7 +83,6 @@ describe('Test ng2-alfresco-webscript', () => {
});
it('webscript url should be the one configured by the input param', (done) => {
let component = webscriptComponentFixture.componentInstance;
component.scriptPath = 'sample/folder/Company%20Home';
component.ngOnChanges().then(() => {
@@ -89,15 +100,13 @@ describe('Test ng2-alfresco-webscript', () => {
});
it('webscript TEXT response should be displayed', (done) => {
let component = webscriptComponentFixture.componentInstance;
let element = webscriptComponentFixture.nativeElement;
component.scriptPath = 'sample/folder/Company%20Home';
component.contentType = 'TEXT';
component.ngOnChanges().then(() => {
webscriptComponentFixture.detectChanges();
expect(element.querySelector('#webscript-data').innerHTML)
expect(element.querySelector('#webscript-data-TEXT').innerHTML)
.toBe('text test');
done();
});
@@ -110,16 +119,14 @@ describe('Test ng2-alfresco-webscript', () => {
});
it('webscript JSON response should be displayed', (done) => {
let component = webscriptComponentFixture.componentInstance;
let element = webscriptComponentFixture.nativeElement;
component.scriptPath = 'sample/folder/Company%20Home';
component.contentType = 'JSON';
component.ngOnChanges().then(() => {
webscriptComponentFixture.detectChanges();
expect(element.querySelector('#webscript-data').innerHTML)
.toBe('{"0":{"id":1,"name":"Name 1"},"1":{"id":2,"name":"Name 2"}}');
expect(JSON.parse(element.querySelector('#webscript-data-JSON').innerHTML)[0].name).toBe('Name 1');
expect(JSON.parse(element.querySelector('#webscript-data-JSON').innerHTML)[1].name).toBe('Name 2');
done();
});
@@ -131,17 +138,15 @@ describe('Test ng2-alfresco-webscript', () => {
});
});
it('webscript HTML response should be displayed', (done) => {
let component = webscriptComponentFixture.componentInstance;
let element = webscriptComponentFixture.nativeElement;
xit('webscript HTML response should be displayed', (done) => {
component.scriptPath = 'sample/folder/Company%20Home';
component.contentType = 'HTML';
component.ngOnChanges().then(() => {
webscriptComponentFixture.detectChanges();
expect(element.querySelector('#webscript-data').innerHTML)
.toBe('<test-element-id><test-elemt-id></test-elemt-id></test-element-id>');
expect(element.querySelector('#webscript-data-HTML').innerHTML)
.toBe('&lt;test-element-id&gt;&lt;test-elemt-id&gt;');
done();
});
@@ -153,8 +158,6 @@ describe('Test ng2-alfresco-webscript', () => {
});
it('webscript Datatable response should be displayed', (done) => {
let component = webscriptComponentFixture.componentInstance;
let element = webscriptComponentFixture.nativeElement;
component.scriptPath = 'sample/folder/Company%20Home';
component.contentType = 'DATATABLE';
@@ -191,8 +194,6 @@ describe('Test ng2-alfresco-webscript', () => {
});
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';
ng2-components/ng2-alfresco-webscript/src/webscript.component.ts
+32 -63
View File
@@ -50,9 +50,14 @@ import {
@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="!show" id="error">Error during the deserialization of {{data}} as {{contentType}}</div>`,
<div *ngIf="showData" >
<div *ngIf="contentType === 'JSON'" id="webscript-data-JSON" >{{data | json}}</div>
<div *ngIf="contentType === 'HTML'" id="webscript-data-HTML" [innerHTML]="data" ></div>
<div *ngIf="contentType === 'TEXT'" id="webscript-data-TEXT" >{{data}}</div>
<div *ngIf="isDataTableContent()" ><alfresco-datatable id="webscript-datatable-wrapper" [data]="data" ></alfresco-datatable><div>
<div *ngIf="showError" id="error">Error during the deserialization of {{data}} as {{contentType}}</div>
</div>`,
directives: [ALFRESCO_DATATABLE_DIRECTIVES, CONTEXT_MENU_DIRECTIVES],
providers: [CONTEXT_MENU_PROVIDERS]
})
@@ -64,6 +69,9 @@ export class WebscriptComponent {
@Input()
scriptArgs: any;
@Input()
showData: boolean = true;
@Input()
contextRoot: string = 'alfresco';
@@ -78,7 +86,7 @@ export class WebscriptComponent {
data: any = undefined;
show: boolean = false;
showError: boolean = false;
/**
* Constructor
@@ -89,19 +97,22 @@ export class WebscriptComponent {
}
ngOnChanges(changes) {
this.clean();
if (this.showData) {
this.clean();
}
return new Promise((resolve, reject) => {
this.authService.getAlfrescoApi().webScript.executeWebScript('GET', this.scriptPath, this.scriptArgs, this.contextRoot, this.servicePath).then((data) => {
if (this.contentType === 'JSON') {
this.show = this.showDataAsJSON(data);
} else if (this.contentType === 'DATATABLE') {
this.show = this.showDataAsDataTable(data);
} else {
this.show = this.showDataAsHTML(data);
this.authService.getAlfrescoApi().webScript.executeWebScript('GET', this.scriptPath, this.scriptArgs, this.contextRoot, this.servicePath).then((webScriptdata) => {
this.data = webScriptdata;
if (this.showData) {
if (this.contentType === 'DATATABLE') {
this.data = this.showDataAsDataTable(webScriptdata);
}
}
this.onSuccess.emit(data);
this.onSuccess.emit(this.data);
resolve();
}, function (error) {
@@ -111,79 +122,37 @@ export class WebscriptComponent {
});
}
/**
* Parserize and show the data id data is a JSON
*
* @param data
*
* @retutns boolean true if the component is able to Show the data as JSON
*/
showDataAsJSON(data: any) {
let jsonShow = true;
try {
this.data = JSON.stringify(data);
let wrapper = document.getElementById('webscript-data');
wrapper.innerHTML = this.data;
} catch (e) {
jsonShow = false;
}
return jsonShow;
}
/**
* Parserize and show the data id data is a html/xml
*
* @param data
*
* @retutns boolean true if the component is able to Show the data as html/xml
*/
showDataAsHTML(data: any) {
let htmlShow = false;
let domParser = new DOMParser();
if (domParser.parseFromString(data, 'text/xml')) {
let wrapper = document.getElementById('webscript-data');
wrapper.innerHTML = data;
this.data = data;
htmlShow = true;
}
return htmlShow;
}
/**
* show the data in a ng2-alfresco-datatable
*
* @param data
*
* @retutns boolean true if the component is able to Show the data as datatable
* @retutns the data as datatable
*/
showDataAsDataTable(data: any) {
let datatableShow = true;
let datatableData: any = null;
try {
if (!data.schema) {
data.schema = ObjectDataTableAdapter.generateSchema(data.data);
}
if (data.schema && data.schema.length > 0) {
this.data = new ObjectDataTableAdapter(data.data, data.schema);
} else {
datatableShow = false;
}
} catch (e) {
datatableShow = false;
console.log('error during the cast as datatable');
}
return datatableShow;
return datatableData;
}
clean() {
let wrapper = document.getElementById('webscript-data');
wrapper.innerHTML = '';
this.data = undefined;
}
isDataTableContent() {
return this.contentType === 'DATATABLE' && this.show;
return this.contentType === 'DATATABLE';
}
}