webscript component viewer

ng2-components/ng2-alfresco-webscript/src/webscript.component.ts

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