mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
webscript component viewer
This commit is contained in:
Eugenio Romano
@@ -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 host(): string {
|
||||
return this._host;
|
||||
}
|
||||
|
||||
getProviders(): string [] {
|
||||
return this.providers;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
/*!
|
||||
* @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 { describe, expect, it, inject, beforeEachProviders, beforeEach, afterEach } from '@angular/core/testing';
|
||||
import { TestComponentBuilder } from '@angular/compiler/testing';
|
||||
import { WebscriptComponent } from '../src/webscript.component';
|
||||
import { AlfrescoSettingsServiceMock } from '../src/assets/AlfrescoSettingsService.service.mock';
|
||||
import { HTTP_PROVIDERS } from '@angular/http';
|
||||
|
||||
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
|
||||
|
||||
declare let jasmine: any;
|
||||
|
||||
describe('Test ng2-alfresco-webscript', () => {
|
||||
|
||||
let webscriptComponentFixture;
|
||||
|
||||
beforeEachProviders(() => {
|
||||
return [
|
||||
HTTP_PROVIDERS,
|
||||
{provide: AlfrescoSettingsService, useClass: AlfrescoSettingsServiceMock},
|
||||
{provide: AlfrescoAuthenticationService, useClass: AlfrescoAuthenticationService}
|
||||
];
|
||||
});
|
||||
|
||||
beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
|
||||
return tcb
|
||||
.createAsync(WebscriptComponent)
|
||||
.then(fixture => webscriptComponentFixture = fixture);
|
||||
}));
|
||||
|
||||
describe('View', () => {
|
||||
it('webscript html wrapper should be present', () => {
|
||||
let element = webscriptComponentFixture.nativeElement;
|
||||
expect(element.querySelector('#webscript-html-wrapper')).toBeDefined();
|
||||
});
|
||||
|
||||
it('webscript JSON datatable wrapper should be present', () => {
|
||||
let element = webscriptComponentFixture.nativeElement;
|
||||
expect(element.querySelector('#webscript-json-wrapper')).toBeDefined();
|
||||
});
|
||||
|
||||
it('webscript plain text datatable wrapper should be present', () => {
|
||||
let element = webscriptComponentFixture.nativeElement;
|
||||
expect(element.querySelector('#webscript-plaintext-wrapper')).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Content tests', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
jasmine.Ajax.install();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jasmine.Ajax.uninstall();
|
||||
});
|
||||
|
||||
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(() => {
|
||||
webscriptComponentFixture.detectChanges();
|
||||
let request = jasmine.Ajax.requests.mostRecent();
|
||||
expect(request.url).toBe('fakehost/alfresco/service/sample/folder/Company%20Home');
|
||||
done();
|
||||
});
|
||||
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'text/plain',
|
||||
responseText: '<div></div>'
|
||||
});
|
||||
});
|
||||
|
||||
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)
|
||||
.toBe('text test');
|
||||
done();
|
||||
});
|
||||
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'text/html',
|
||||
responseText: 'text test'
|
||||
});
|
||||
});
|
||||
|
||||
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"}}');
|
||||
done();
|
||||
});
|
||||
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'json',
|
||||
responseText: [{id: 1, name: 'Name 1'},
|
||||
{id: 2, name: 'Name 2'}]
|
||||
});
|
||||
});
|
||||
|
||||
it('webscript HTML response should be displayed', (done) => {
|
||||
let component = webscriptComponentFixture.componentInstance;
|
||||
let element = webscriptComponentFixture.nativeElement;
|
||||
|
||||
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>');
|
||||
done();
|
||||
});
|
||||
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'text/html',
|
||||
responseText: '<test-element-id><test-elemt-id>'
|
||||
});
|
||||
});
|
||||
|
||||
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';
|
||||
|
||||
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>');
|
||||
done();
|
||||
});
|
||||
|
||||
let dataTable = {
|
||||
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
|
||||
}]
|
||||
};
|
||||
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'json',
|
||||
responseText: dataTable
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
178
ng2-components/ng2-alfresco-webscript/src/webscript.component.ts
Normal file
178
ng2-components/ng2-alfresco-webscript/src/webscript.component.ts
Normal file
@@ -0,0 +1,178 @@
|
||||
/*!
|
||||
* @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 { Component, Input } from '@angular/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">
|
||||
* </alfresco-webscript-get>
|
||||
*
|
||||
* This component, provide a get webscript viewer
|
||||
*
|
||||
* @InputParam {string} scriptPath path to Web Script (as defined by Web Script)
|
||||
* @InputParam {Object} scriptArgs arguments to pass to Web Script
|
||||
* @InputParam {string} contextRoot path where application is deployed default value 'alfresco'
|
||||
* @InputParam {string} servicePath path where Web Script service is mapped default value 'service'
|
||||
* @InputParam {string} contentType JSON | HTML | DATATABLE | TEXT
|
||||
*
|
||||
* @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="!show" id="error">Error during the deserialization of {{data}} as {{contentType}}</div>`,
|
||||
directives: [ALFRESCO_DATATABLE_DIRECTIVES]
|
||||
})
|
||||
export class WebscriptComponent {
|
||||
|
||||
@Input()
|
||||
scriptPath: string;
|
||||
|
||||
@Input()
|
||||
scriptArgs: any;
|
||||
|
||||
@Input()
|
||||
contextRoot: string = 'alfresco';
|
||||
|
||||
@Input()
|
||||
servicePath: string = 'service';
|
||||
|
||||
@Input()
|
||||
contentType: string = 'TEXT';
|
||||
|
||||
data: any = undefined;
|
||||
|
||||
show: boolean = false;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
* @param auth
|
||||
*/
|
||||
constructor(public authService: AlfrescoAuthenticationService) {
|
||||
|
||||
}
|
||||
|
||||
ngOnChanges(changes) {
|
||||
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);
|
||||
}
|
||||
resolve();
|
||||
}, function (error) {
|
||||
console.log('Error' + error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
showDataAsDataTable(data: any) {
|
||||
let datatableShow = true;
|
||||
try {
|
||||
if (!data.schema) {
|
||||
data.schema = ObjectDataTableAdapter.generationSchema(data[0]);
|
||||
}
|
||||
if (data.schema && data.schema.length > 0) {
|
||||
this.data = new ObjectDataTableAdapter(data.data, data.schema);
|
||||
} else {
|
||||
datatableShow = false;
|
||||
}
|
||||
} catch (e) {
|
||||
datatableShow = false;
|
||||
}
|
||||
|
||||
return datatableShow;
|
||||
}
|
||||
|
||||
clean() {
|
||||
let wrapper = document.getElementById('webscript-data');
|
||||
wrapper.innerHTML = '';
|
||||
this.data = undefined;
|
||||
}
|
||||
|
||||
isDataTableCOntent() {
|
||||
return this.contentType === 'DATATABLE' && this.show;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user