@agilemotion/oui-react-js 0.1.0

package/src/lib/BasicAppHome.js

@@ -0,0 +1,128 @@
+import React, {Component} from "react";
+import {connect} from 'react-redux';
+import {BrowserRouter as Router, withRouter} from 'react-router-dom';
+import {bindActionCreators} from 'redux';
+import {actionCreators} from './redux/store/DashboardStore';
+import LoadingIndicator from './components/LoadingIndicator';
+import BasicBusinessApp from "./components/dashboard/BasicBusinessApp";
+import applicationContext, {AVATAR_LISTENER_TYPE} from "./ApplicationContext";
+import tokenManager from "./security/TokenManager";
+import Utils from "./Utils";
+import {createMuiTheme} from "@material-ui/core";
+import ThemeProvider from "@material-ui/styles/ThemeProvider";
+
+const location = window.location.protocol + "//" + window.location.hostname;
+const propHandler = (state) => {
+    let isLoading = state.dashboard.isLoading;
+    let dashboardSettings = state.dashboard.dashboardSettings;
+
+    return {
+        isLoading: isLoading,
+        error: state.error,
+        dashboardSettings: dashboardSettings
+    };
+};
+
+class BasicAppHome extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dashboardSettings: null,
+            message: "",
+            open: false,
+            avatarUrl: null,
+            tokenRefreshMonitorStarted: false
+        };
+    }
+
+    componentDidMount() {
+        applicationContext.setApplicationHistory(this.props.history);
+        this.props.getDashboardSettings(location + this.props.baseApiUrl + "/setup");
+    }
+
+    componentDidUpdate(prevProps) {
+        if (JSON.stringify(prevProps.dashboardSettings) !== JSON.stringify(this.props.dashboardSettings)
+            && !this.props.error) {
+            this.setState({dashboardSettings: this.props.dashboardSettings});
+            if (!this.state.tokenRefreshMonitorStarted && !Utils.isNull(this.props.dashboardSettings)) {
+                tokenManager.startTokenRefreshMonitor(location + this.props.authUrl + "/refresh",
+                    this.props.dashboardSettings.userName);
+                this.setState({tokenRefreshMonitorStarted: true});
+                if (!Utils.isNull(this.props.dashboardSettings.userAvatar)) {
+                    this.setState({avatarUrl: this.props.dashboardSettings.userAvatar.url});
+                }
+
+                let avatarListener = {};
+                avatarListener.type = AVATAR_LISTENER_TYPE;
+                avatarListener.handler = (avatar) => {
+                    this.setState({avatarUrl: avatar.url});
+                };
+
+                applicationContext.addApplicationListener(avatarListener);
+                applicationContext.setApplicationThemeColors(
+                    this.props.dashboardSettings.systemProfileDto.firstCorporateBrandColor,
+                    this.props.dashboardSettings.systemProfileDto.secondCorporateBrandColor,
+                );
+
+                this.setState({loadingColor: this.props.dashboardSettings.systemProfileDto.firstCorporateBrandColor});
+            }
+        }
+
+        if (prevProps.error !== this.props.error && this.props.error) {
+            this.setState({message: "A system error has accured"});
+        }
+    }
+
+    logout() {
+        sessionStorage.removeItem("accessToken");
+        sessionStorage.removeItem("refreshToken");
+        sessionStorage.removeItem("idToken");
+        sessionStorage.removeItem("lastLogin");
+
+        applicationContext.clear();
+        this.props.history.push('/login');
+    }
+
+    render() {
+        return (
+            <Router>
+                <div className="main w-100 h-100 d-inline-block">
+                    <div className="w-100 h-100">
+                        {
+                            this.state.dashboardSettings !== null ?
+                                <ThemeProvider
+                                    theme={createMuiTheme({
+                                        palette: {
+                                            primary: {
+                                                main: this.state.dashboardSettings.systemProfileDto.firstCorporateBrandColor,
+                                            },
+                                            secondary: {
+                                                main: this.state.dashboardSettings.systemProfileDto.secondCorporateBrandColor,
+                                            },
+                                        },
+                                    })}>
+                                    <BasicBusinessApp logoutCallBack={() => {
+                                        this.logout()
+                                    }}
+                                                      settings={this.state.dashboardSettings}
+                                                      avatar={!Utils.isNull(this.state.avatarUrl)
+                                                          ? this.state.avatarUrl : null}
+                                                      logo={this.state.dashboardSettings.logo}
+                                                      appLogoPath={this.props.appLogoPath}
+                                    />
+                                </ThemeProvider>
+                                :
+                                null
+                        }
+                    </div>
+                    <LoadingIndicator color={this.state.loadingColor}/>
+                </div>
+            </Router>
+        );
+    }
+}
+
+export default withRouter(connect(
+    propHandler,
+    dispatch => bindActionCreators(actionCreators, dispatch)
+)(BasicAppHome))

package/src/lib/DynamicJS.js

@@ -0,0 +1,131 @@
+import applicationContext, {APP_VARIABLE} from './ApplicationContext';
+import Utils from "./Utils";
+export const TEMPLATE_REGEX = new RegExp('[@]{1}([#@]{1}{)(([a-zA-Z0-9_.[\\]]*)+){1}}((\\(([^)]*)\\))*)', 'g');
+
+class DynamicJS {
+
+    constructor(){
+        if(! DynamicJS.instance){
+            DynamicJS.instance = this;
+        }
+
+        return DynamicJS.instance;
+    }
+
+    isNull(value) {
+        return Utils.isNull(value);
+    }
+
+    isEmpty(value) {
+        return Utils.isNull(value) || value.toString().trim().length === 0;
+    }
+
+    evaluateExpression = (expression) => {
+        return applicationContext.resolveExpressionValue(expression);
+    };
+
+    parseScript = (script, componentId, isScriptlet) => {
+        let parsedScript = script.replace(/#this/g, '#' + componentId)
+            .replace(/isNull/g, 'this.isNull')
+            .replace(/\$application/g, APP_VARIABLE)
+            .replace(/isEmpty/g, 'this.isEmpty');
+
+        let matches = parsedScript.match(TEMPLATE_REGEX);
+
+        if(!Utils.isNull(matches)) {
+            let expressions = [];
+            for (const match of matches) {
+                if (!expressions.includes(match.trim())) {
+                    expressions.push(match.trim());
+                }
+            }
+
+            for (const expression of expressions) {
+                var replaceRegex = new RegExp(`${expression}`, 'g');
+                parsedScript = parsedScript.replace(replaceRegex, `this.evaluateExpression("${expression}")`)
+            }
+        }
+
+        return Utils.isNull(isScriptlet) || isScriptlet === true && !parsedScript.trim().startsWith('return')
+            ?  `return ${parsedScript}` : parsedScript;
+    };
+
+    /**
+     * inject and executes a script
+     *
+     * @param name
+     * @param scriptCode
+     * @param componentId
+     * @param isScriplet
+     * @param event
+     */
+    executeScript = (name, scriptCode, componentId, isScriplet = true, event) => {
+        let parsedScript = this.parseScript(scriptCode, componentId, isScriplet);
+        let eventParam = null;
+        if(!Utils.isNull(event)) {
+            eventParam = {};
+            eventParam.data = event.data;
+        }
+
+        try {
+            let func = new Function(parsedScript.replace(/\$event/g, JSON.stringify(eventParam)));
+
+            if (!Utils.isNull(name)) {
+                DynamicJS.prototype[name] = func;
+                let result = instance[name]({});
+                delete DynamicJS.prototype[name];
+
+                return result;
+            }
+        } catch (e) {
+            console.error("Error Executing script : " + name + " - " + parsedScript);
+            console.error(e);
+
+            throw e;
+        }
+
+        return null;
+    };
+
+    parseScriptLine(line, valuesMap) {
+        let parsedLine = line;
+        if(!parsedLine.endsWith(";") && !parsedLine.endsWith(":")
+            && !parsedLine.endsWith("{") && !parsedLine.endsWith("}")) {
+            parsedLine += ";";
+        }
+
+        if(!Utils.isNull(valuesMap)) {
+            const properties = Object.getOwnPropertyNames(valuesMap);
+            for (const property of properties) {
+                var replaceRegex = new RegExp(`@{${property}}`, 'g');
+                let propertyValue = valuesMap[property];
+                parsedLine = parsedLine.replace(replaceRegex, propertyValue)
+            }
+        }
+
+        return parsedLine;
+    }
+
+    /**
+     * inject and executes a script
+     *
+     * @param name
+     * @param script
+     * @param componentId
+     * @param valuesMap
+     * @param event
+     */
+    executeScriptObject = (name, script, componentId = null, valuesMap = {}, event = null) => {
+        let scriptBody = '';
+        for (const line of script.lines) {
+            scriptBody += this.parseScriptLine(line, valuesMap);
+        }
+
+        return this.executeScript(name, scriptBody, componentId, false, event);
+    };
+}
+
+const instance = new DynamicJS();
+Object.freeze(instance);
+
+export default instance;

package/src/lib/RestUtils.js

@@ -0,0 +1,384 @@
+import Utils from './Utils'
+import {trackPromise} from 'react-promise-tracker';
+import applicationContext from "./ApplicationContext";
+import Event from "./event/Event";
+import eventManager from "./event/Observable";
+import EventType from "./event/EventType";
+
+const location = window.location.protocol + "//" + window.location.hostname;
+const RPC_DISPATCHER_BASE_URL = location + "/agility/app/controller";
+
+const status = (response) => {
+    if (response.ok) {
+        return Promise.resolve(response);
+    } else {
+        let error = new Error(response.statusText);
+        error.code = response.status;
+
+        return Promise.reject(error);
+    }
+};
+
+const json = (response) => {
+    return response.text();
+};
+
+class RestUtils {
+    invokeRest(service, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage) {
+        let url = service.url.startsWith('http://') || service.url.startsWith('https://') ? service.url : location + `/agility${service.url}`;
+        let requestBody = null;
+
+        if (!Utils.isNull(service.parameters)) {
+            let queryString = "";
+            let pathParameters = "";
+            let requestBodyParamFound = false;
+
+            for (const parameter of service.parameters) {
+                let parameterValue = applicationContext.resolveParameterValue(parameter);
+                if (!Utils.isNull(parameter.validator)
+                    && !Utils.evaluateBooleanExpression(parameter.validator.nullable, parameter.name)
+                    && (Utils.isNull(parameterValue) || Utils.isNull(parameterValue.value))) {
+                    console.debug('Invalid parameter value ' + parameter.name);
+                    if(!Utils.isNull(invalidParamCallback)) {
+                        invalidParamCallback (parameter);
+                    }
+
+                    return;
+                }
+
+                let httpParameterType = parameter.httpParameterType;
+                if (Utils.isNull(httpParameterType)) {
+                    httpParameterType = 'REQUEST_PARAMETER';
+                }
+
+                if (httpParameterType === 'REQUEST_PARAMETER') {
+                    if (!Utils.isNull(parameterValue)) {
+                        if (queryString.length > 0) {
+                            queryString += '&';
+                        }
+
+                        if (!Utils.isNull(service.includeParameterTypes) && service.includeParameterTypes === true) {
+                            queryString += parameterValue.type + ":";
+                        }
+
+                        if (parameterValue.type === 'MapObject') {
+                            parameterValue.value.type = 'MapEntityDto';
+                        }
+
+                        queryString += parameter.name + "=";
+                        queryString += (typeof parameterValue.value === 'string' || typeof parameterValue.value === 'number' ?
+                            parameterValue.value : JSON.stringify(parameterValue.value));
+                    }
+                }
+
+                if (httpParameterType === 'PATH_VARIABLE') {
+                    if (!Utils.isNull(parameterValue)) {
+                        if (pathParameters.length > 0) {
+                            pathParameters += '/' + JSON.stringify(parameterValue.value);
+                        }
+                    }
+                }
+
+                if (httpParameterType === 'REQUEST_BODY') {
+                    if(requestBodyParamFound) {
+                        console.error("Only one request body is permitted");
+                        return;
+                    } else {
+                        if (!Utils.isNull(parameterValue)) {
+                            requestBody = parameterValue.instanceType === 'TypedValue' ? parameterValue.value : parameterValue;
+
+                            if (parameterValue.type === 'MapObject') {
+                                requestBody.type = 'MapEntityDto';
+                            } else {
+                                requestBody.type = parameterValue.type;
+                            }
+                        }
+                    }
+                }
+            }
+
+            if (pathParameters.length > 0) {
+                url += pathParameters;
+            }
+
+            if (queryString.length > 0) {
+                url += '?';
+                url += queryString;
+            }
+        }
+
+        let headers = service.headers;
+        let contentType = null;
+
+        if (!Utils.isNull(headers)) {
+            contentType = headers['Content-Type'];
+        }
+
+        if (requestBody !== null) {
+            postData(url, (response) => {
+                let responseData = !Utils.isNull(response) ? response.data : null;
+                if (!Utils.isNull(responseData) && responseData.type === 'MessageDto' && responseData.messageType === "ERROR") {
+                    this.fireEvent(viewId, component, EventType.SERVICE_CALL_FAILURE);
+                } else {
+                    if (!Utils.isNull(successCallback)) {
+                        this.processSuccessfulResponseData(response, successCallback, viewId, successMessage)
+                    }
+
+                    this.fireEvent(viewId, component, EventType.SERVICE_CALL_SUCCESS, response);
+                }
+            }, (e) => {
+                if (!Utils.isNull(errorCallback)) {
+                    errorCallback(e);
+                }
+
+                this.fireEvent(viewId, component, EventType.SERVICE_CALL_FAILURE);
+            }, !service.url.startsWith("http://"), requestBody)
+        } else if (contentType === "application/pdf" || contentType === "application/vnd.ms-excel") {
+            download(url, (data) => {
+            }, (e) => {
+                if (!Utils.isNull(errorCallback)) {
+                    errorCallback(e);
+                }
+            });
+        } else {
+            sendRequest(url, (data) => {
+                if (!Utils.isNull(successCallback)) {
+                    successCallback(data);
+                }
+            }, (e) => {
+                if (!Utils.isNull(errorCallback)) {
+                    errorCallback(e);
+                }
+            }, !service.url.startsWith("http://"))
+        }
+    }
+
+    invokeRpc(rpcDetails, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage) {
+        let request = {};
+        request.id = viewId;
+
+        request.service = rpcDetails.serviceId;
+        request.method = rpcDetails.procedureName;
+
+        if (!Utils.isNull(rpcDetails.parameters) && rpcDetails.parameters.length > 0) {
+            request.parameters = [];
+            for (let i = 0; i < rpcDetails.parameters.length; i++) {
+                let parameterConfig = rpcDetails.parameters[i];
+                let parameter = {};
+                parameter.name = parameterConfig.name;
+                parameter.index = parameterConfig.index;
+                let val = applicationContext.resolveParameterValue(parameterConfig);
+
+                if (!Utils.isNull(val)) {
+                    parameter.value = val.value;
+
+                    // TODO : Make the default object type a library setting
+                    if (val.type === 'object') {
+                        parameter.type = 'MapObject';
+                    } else {
+                        parameter.type = val.type;
+                    }
+                }
+
+                if (typeof parameter.value === "undefined") {
+                    parameter.value = null;
+                }
+
+                if (Utils.isNull(parameter.type)) {
+                    parameter.type = 'String';
+                }
+
+                if (!Utils.isNull(parameterConfig.validator)
+                    && Utils.evaluateBooleanExpression(parameterConfig.validator.nullable, parameterConfig.name) === false && Utils.isNull(parameter.value)) {
+                    if (!Utils.isNull(invalidParamCallback)) {
+                        invalidParamCallback(parameter);
+                    }
+
+                    return;
+                }
+
+                request.parameters.push(parameter);
+            }
+        }
+
+        this.doFetch(RPC_DISPATCHER_BASE_URL + '/invoke',
+            (response) => {
+                if (successCallback !== null) {
+                    successCallback(response);
+                }
+
+                if (!Utils.isNull(viewId) && !Utils.isNull(component)) {
+                    let path = Utils.getPropertyChainPath(returnValueBinding);
+                    if (!Utils.isNull(path.valueObject) && !Utils.isNull(path.property)) {
+                        path.valueObject[path.property] = response.data;
+                    }
+                    let responseData = !Utils.isNull(response) ? response.data : null;
+                    if (!Utils.isNull(responseData) && responseData.type === 'MessageDto' && responseData.messageType === "ERROR") {
+                        this.fireEvent(viewId, component, EventType.SERVICE_CALL_FAILURE);
+                    } else {
+                        this.fireEvent(viewId, component, EventType.SERVICE_CALL_SUCCESS, response.data);
+                    }
+                }
+            }, (e) => {
+                console.error(e);
+                if (errorCallback !== null) {
+                    errorCallback(e);
+                }
+
+                if (!Utils.isNull(viewId) && !Utils.isNull(component)) {
+                    this.fireEvent(viewId, component, EventType.SERVICE_CALL_FAILURE);
+                }
+            }, true, 'POST', false, request, viewId, successMessage, true);
+    }
+
+    doPostData(url, successCallback, errorCallback, secure, data, viewId, successMessage) {
+        this.fetchWithCustomConfig(url, successCallback, errorCallback, secure, null, 'POST', false, data, 'rest');
+    }
+
+    doFetch(url, successCallback, errorCallback, secure, method, download, body, viewId, successMessage, track) {
+        this.fetchWithCustomConfig(url, successCallback, errorCallback, secure, null, method, download, body, null, viewId, successMessage, track);
+    }
+
+    fetchWithCustomConfig(url, successCallback, errorCallback, secure, config, method, download, body, serviceType, viewId, successMessage, track) {
+        const accessToken = sessionStorage.getItem("accessToken");
+        const idToken = sessionStorage.getItem("idToken");
+
+        let data = null;
+        if(serviceType === 'rest') {
+            data = JSON.stringify(body);
+        } else {
+            if (!Utils.isNull(body)) {
+                data = new FormData();
+                const json = JSON.stringify(body);
+
+                data.append("requestDto", json);
+                let currentView = applicationContext.getCurrentView();
+                if (!Utils.isNull(currentView)) {
+                    let domainCache = applicationContext.getFileDomainCache(currentView.config.id);
+                    if (!Utils.isNull(domainCache)) {
+                        for (const file of domainCache.files) {
+                            data.append(file.correlationId, file.content);
+                        }
+                    }
+                }
+            }
+        }
+
+        let fetchConfig = config;
+        if (Utils.isNull(fetchConfig)) {
+            if (Utils.isNull(secure) || secure === true) {
+                fetchConfig = {
+                    method: Utils.isNull(method) ? 'GET' : method,
+                    headers: {
+                        'Accept': 'application/json',
+                        'Authorization': 'Bearer ' + accessToken,
+                        'idToken': idToken
+
+                    },
+                    body: data
+                };
+            } else {
+                fetchConfig = {
+                    method: Utils.isNull(method) ? 'GET' : method,
+                    headers: {
+                        'Accept': 'application/json'
+                    },
+                    body: data
+                }
+            }
+
+            if('rest' === serviceType) {
+                fetchConfig.headers['Content-Type'] = 'application/json; utf-8';
+            }
+        }
+
+        if (download) {
+            if (url.indexOf('?') < 0) {
+                url += "?";
+            } else {
+                url += "&";
+            }
+
+            url += 'access_token=' + accessToken;
+            url += '&idToken=' + idToken;
+
+            window.open(encodeURI(url), '_blank');
+        } else {
+            if(Utils.isNull(track) || track === true) {
+                trackPromise(
+                    this.exeuteFetch(url, fetchConfig, successCallback, viewId, successMessage, errorCallback)
+                );
+            }else {
+                this.exeuteFetch(url, fetchConfig, successCallback, viewId, successMessage, errorCallback);
+            }
+        }
+    }
+
+    exeuteFetch(url, fetchConfig, successCallback, viewId, successMessage, errorCallback) {
+        return fetch(encodeURI(url), fetchConfig)
+            .then(status)
+            .then(json)
+            .then((data) => {
+                this.processSuccessfulResponseData(data, successCallback, viewId, successMessage);
+            }).catch((e) => {
+                if (e.code === 401) {
+                    errorCallback(e);
+                    applicationContext.clear();
+                    applicationContext.getApplicationHistory().push('/login');
+                }
+
+                if (errorCallback !== null) {
+                    errorCallback(e);
+                }
+            });
+    }
+
+    processSuccessfulResponseData(data, successCallback, viewId, successMessage) {
+        let response = typeof data === "object" || Utils.isNull(data) || data.toString().trim().length === 0
+            ? data : JSON.parse(data);
+        if (successCallback !== null) {
+            let responseData = !Utils.isNull(response) ? response.data : null;
+            if (!Utils.isNull(responseData) && responseData.type === 'MessageDto') {
+                let event = new Event(applicationContext, viewId, responseData);
+                eventManager.fireEvent(EventType.MESSAGE_ARRIVED, event);
+            } else if (!Utils.isNull(successMessage)) {
+                let message = {
+                    messageType: 'SUCCESS',
+                    message: applicationContext.populateTemplate(successMessage, response.data)
+                };
+
+                let event = new Event(applicationContext, viewId, message);
+                eventManager.fireEvent(EventType.MESSAGE_ARRIVED, event);
+            }
+
+            successCallback(response);
+        }
+    }
+
+    fireEvent(viewId, component, eventType, response) {
+        let event = new Event(component, viewId, response);
+        eventManager.fireEvent(eventType, event);
+    }
+}
+
+const instance = new RestUtils();
+export const postData = (url, successCallback, errorCallback, secure, data) => {
+    instance.doPostData(url, successCallback, errorCallback, secure, data)
+};
+
+export const sendRequest = (url, successCallback, errorCallback, secure, track) => {
+    instance.doFetch(url, successCallback, errorCallback, secure, null, null, null, null,
+        null, Utils.isNull(track) ? false : track)
+};
+
+export const download = (url, successCallback, errorCallback, secure) => {
+    instance.doFetch(url, successCallback, errorCallback, secure, 'GET', true)
+};
+
+export const invokeRpc = (rpcDetails, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage) => {
+    instance.invokeRpc(rpcDetails, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage);
+};
+
+export const invokeRest = (serviceConfig, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage) => {
+    instance.invokeRest(serviceConfig, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage);
+};

package/src/lib/TypedValue.js

@@ -0,0 +1,22 @@
+export default class TypedValue {
+
+    constructor(type, value){
+        this.type = type;
+        this.value = value;
+        this.instanceType = 'TypedValue';
+    }
+
+    /**
+     * getter
+     */
+    getValue = () => {
+        return this.value;
+    };
+
+    /**
+     * getter
+     */
+    getType = () => {
+        return this.type;
+    };
+}