@agilemotion/oui-react-js 0.1.0

package/src/lib/components/form/Form.jsx

@@ -0,0 +1,720 @@
+import React from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+import Utils from '../../Utils';
+import Section from './Section';
+import './Form.css';
+import {invokeRpc} from "../../RestUtils";
+import {Mutex} from "async-mutex";
+import eventManager from "../../event/Observable";
+import applicationContext from "../../ApplicationContext";
+import serviceCallActionHandler from "../../event/ServiceCallActionHandler";
+import dynamicJS from "../../DynamicJS";
+import EventType from "../../event/EventType";
+import Event from "../../event/Event";
+
+const useStyles = makeStyles(theme => ({
+    container: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        width: '100%',
+        "& tr td": {
+            verticalAlign: "top"
+        }
+    },
+    select: {
+        margin: theme.spacing(1),
+        minWidth: 120,
+        minHeight: 48
+    },
+    selectEmpty: {
+        marginTop: theme.spacing(2),
+    },
+    root: {}
+}));
+
+const Form = React.memo(React.forwardRef((props, ref) => {
+        const [values, setValues] = React.useState(!Utils.isNull(props.values) ? props.values : {});
+        const [masterValues, setMasterValues] = React.useState(null);
+        const [config, setConfig] = React.useState(null);
+        const [binder] = React.useState(Utils.isNull(props.config.binder) ? 'PLAIN_OBJECT' : props.config.binder);
+        const [fields] = React.useState([]);
+        const containerErrorCallback = React.useRef();
+        const [sectionHandles] = React.useState({});
+        const [loadedComponents] = React.useState([]);
+        const [fieldParentErrors] = React.useState({});
+        const loadingRef = React.useRef(true);
+        const [initializing, setInitializing] = React.useState(true);
+        const mutex = new Mutex();
+        let sectionCounter = 0;
+
+        const api = () => {
+            return {
+                get id() {
+                    return props.config.id;
+                },
+                doUpdateValue: (name, value) => {
+                    return updateValue(name, value);
+                },
+                clear: () => {
+                    doClear();
+                }, setValue: (id, value) => {
+                    doHandleChange(id, value)
+                },
+                handleSelectItemChange: (name, options, selectedId) => {
+                    return handleSelectItemChange(name, options, selectedId)
+                },
+                handleChange: (id, value) => {
+                    doHandleChange(id, value)
+                },
+                getValuePath: (id, values) => {
+                    return getValuePath(id, values)
+                },
+                addField: (id, ref, parentId, bindValueToForm) => {
+                    return addField(id, ref, parentId, bindValueToForm)
+                },
+                removeField: (id) => {
+                    removeField(id);
+                },
+                loadData: (actionConfig) => {
+                    loadData(actionConfig, config);
+                },
+                bindData: (data) => {
+                    doBindData(data);
+                },
+                validateParent: (id, invalid) => {
+                    doValidateParent(getField(id), invalid);
+                },
+                get fieldDataBindings() {
+                    let fieldNames = [];
+                    for (let i = 0; i < props.config.sections.length; i++) {
+                        let section = props.config.sections[i];
+                        for (let j = 0; j < section.components.length; j++) {
+                            let component = section.components[j];
+                            let fields = null;
+
+                            if (component.type === 'tab') {
+                                fields = getFieldsFromTab(component);
+                            } else {
+                                fields = component.fields;
+                            }
+
+                            for (let k = 0; k < fields.length; k++) {
+                                let field = fields[k];
+                                fieldNames.push(!Utils.isNull(field.dataBinding) ? field.dataBinding : field.id);
+                            }
+                        }
+                    }
+
+                    return fieldNames;
+                },
+                setContainerErrorHandler(callback) {
+                    containerErrorCallback.current = callback;
+                },
+                get model() {
+                    return values;
+                },
+                set model(model) {
+                    parseValues(transformDataObject(model));
+                    setMasterValues(model);
+                },
+                get value() {
+                    if (loadingRef.current === false) {
+                        let data = null;
+                        let currentValue = values;
+                        let valid = true;
+                        let parentErrors = {};
+                        if (binder === 'MAP_OBJECT') {
+                            data = {};
+                            let map = !Utils.isNull(masterValues) ? JSON.parse(JSON.stringify(masterValues.map)) : {};
+                            if (Utils.isNull(map.id)) {
+                                map.id = values.id;
+                            }
+
+                            for (const field of fields) {
+                                if (field.bindValueToForm === false) {
+                                    continue;
+                                }
+
+                                let fieldValid = field.handle.api.validate(values, null);
+                                if (fieldValid === false) {
+                                    doValidateParent(field, !fieldValid);
+                                    valid = false;
+                                } else if (valid) {
+                                    let id = field.id;
+                                    let path = getValuePath(id, values);
+                                    map[id] = field.handle.api.parseValue(path.valueObject[path.valueProperty], false);
+                                }
+                            }
+
+                            if (binder === 'MAP_OBJECT') {
+                                data.map = map;
+                            } else {
+                                data = map;
+                            }
+                        } else {
+                            data = values;
+                        }
+
+                        return valid ? data : null;
+                    }
+
+                    return null;
+                },
+                setFieldError: (id, error) => {
+                    return setFieldError(id, error);
+                },
+                getChildren: () => {
+                    let children = [];
+                    for (let i = 0; i < fields.length; i++) {
+                        let field = fields[i];
+                        children.push(field.handle);
+                        let moreChildren = field.handle.api.getChildren();
+                        for (let j = 0; j < moreChildren.length; j++) {
+                            children.push(moreChildren[j]);
+                        }
+                    }
+
+                    let properties = Object.getOwnPropertyNames(sectionHandles);
+                    for (const property of properties) {
+                        let sectionHandle = sectionHandles[property];
+                        children.push(sectionHandle);
+                        for (const child of sectionHandle.api.getChildren()) {
+                            children.push(child);
+                        }
+                    }
+
+                    return children;
+                }
+            }
+        };
+
+        const createSectionHandle = (section) => {
+            if (Utils.isNull(sectionHandles[section.id])) {
+                let handle = {};
+                sectionHandles[section.id] = handle;
+                return handle;
+            }
+
+            return sectionHandles[section.id];
+        };
+
+    function updateViewTitle() {
+        let currentView = applicationContext.getCurrentView();
+        let title = currentView.config.title;
+
+        if (title.includes(props.config.id)) {
+            applicationContext.updateAppBarTitle(currentView.config.id, title);
+        }
+    }
+
+    function handleDataArrived(data) {
+        updateViewTitle();
+
+        if(!Utils.isNull(data)) {
+                let event = new Event(props.handle, props.viewId, data);
+                eventManager.fireEvent(EventType.DATA_ARRIVED, event);
+            }
+
+            eventManager.processSystemGeneratedSubscriptions(props.config.id);
+            for (const field of fields) {
+                eventManager.processSystemGeneratedSubscriptions(field.handle.api.id);
+            }
+        }
+
+        function loadData(eventConfig, componentConfig) {
+            let service = !Utils.isNull(componentConfig.dataService) ? componentConfig.dataService :
+                eventConfig !== null ? eventConfig.dataService : null;
+            let componentValue = !Utils.isNull(componentConfig.value) ? componentConfig.value :
+                eventConfig !== null ? eventConfig.value : null;
+
+            if (!Utils.isNull(service)) {
+                if (service.type === 'remoteObjectProxy') {
+                    invokeRpc(service, props.handle, props.viewId, (result) => {
+                            try {
+                                if (!Utils.isNull(result.data)) {
+                                    parseValues(transformDataObject(result.data));
+                                    setMasterValues(result.data);
+                                    loadingRef.current = false;
+                                }
+                            } catch (e) {
+                                console.error(e);
+                            }
+                        },
+                        (e) => {
+                            console.error(e);
+                            Utils.publishSystemErrorMessage(props.viewId);
+                        }, (parameter) => {
+                            loadingRef.current = false;
+                            handleDataArrived({});
+                        });
+                } else {
+                    if (Utils.isNull(eventConfig)) {
+                        eventConfig = {};
+                        eventConfig.service = service;
+                    }
+
+                    // TODO : Implement the invalid paramenter callback
+                    serviceCallActionHandler.execute(eventConfig, null, null, props.viewId,
+                        (data) => {
+                            parseValues(transformDataObject(data));
+                            setMasterValues(data);
+                            loadingRef.current = false;
+                        }, () => {
+                        });
+                }
+
+                return true;
+            } else {
+                if (!Utils.isNull(componentValue)) {
+                    if (applicationContext.isExpression(componentValue)) {
+                        let path = Utils.getPropertyChainPath(componentValue);
+                        if (!Utils.isNull(path.valueObject)) {
+                            eventManager.addSystemGeneratedSubscription(props.viewId, props.config.id, () => {
+                                let value = dynamicJS.executeScript(`${props.config.id}ValueEvaluator`, componentValue);
+                                if (!Utils.isNull(value)) {
+                                    parseValues(transformDataObject(value));
+                                    setMasterValues(value);
+                                }
+                            })
+                        }
+                    } else {
+                        parseValues(transformDataObject(componentValue));
+                        setMasterValues(componentValue);
+                    }
+                } else {
+                    updateViewTitle();
+                }
+
+                loadingRef.current = false;
+                return false;
+            }
+        }
+
+        React.useEffect(() => {
+            props.handle.api = api();
+            if (initializing) {
+                let parsedConfig = Utils.parseConfig(props.config, props.viewId);
+                let eventHandlingConfig = Utils.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
+                eventHandlingConfig.subscriptions = Utils.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
+
+                let autoLoadData = Utils.getComponentAttribute(parsedConfig, 'autoLoadData', null);
+                if (autoLoadData === null || autoLoadData === true) {
+                    let subscription = {
+                        publisher: props.viewId,
+                        eventType: EventType.COMPONENT_LOAD,
+                        actions: [
+                            {
+                                actionType: "loadData"
+                            }
+                        ]
+                    };
+
+                    eventHandlingConfig.subscriptions.push(subscription);
+                } else {
+                    loadingRef.current = false;
+                    handleDataArrived();
+                }
+
+                eventManager.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
+                eventManager.addSystemSubscriptions(parsedConfig);
+                setConfig(parsedConfig);
+
+                let data = {};
+                data.viewId = props.viewId;
+                setInitializing(false);
+            }
+        });
+
+        React.useEffect(() => {
+            if (!Utils.isNull(props.config) && !Utils.isNull(props.values)) {
+                parseValues(props.values);
+            }
+        }, [props.config, props.values]);
+
+        React.useEffect(() => {
+            if (!Utils.isNull(masterValues)) {
+                handleDataArrived(masterValues);
+            }
+        }, [masterValues]);
+
+        const getFieldsFromTab = (tab) => {
+            let fields = [];
+            for (const tabPage of tab.tabPages) {
+                for (const formSection of tabPage.components) {
+                    for (const fieldset of formSection.components) {
+                        fields = fields.concat(fieldset.fields);
+                    }
+                }
+            }
+
+            return fields;
+        };
+
+        async function loadCompleteHandler(id) {
+            if (!Utils.isNull(id)) {
+                const release = await mutex.acquire();
+                try {
+                    if (!loadedComponents.includes(id)) {
+                        loadedComponents.push(id);
+                        let allLoaded = true;
+
+                        for (const section of props.config.sections) {
+                            for (const component of section.components) {
+                                let fields = null;
+
+                                if (component.type === 'tab') {
+                                    fields = getFieldsFromTab(component);
+                                } else {
+                                    fields = component.fields;
+                                }
+
+                                for (const field of fields) {
+                                    if (!loadedComponents.includes(field.id)) {
+                                        allLoaded = false;
+                                        break;
+                                    }
+                                }
+                                if (!allLoaded) {
+                                    break;
+                                }
+                            }
+                            if (!allLoaded) {
+                                break;
+                            }
+                        }
+
+                        if (allLoaded) {
+                            for (const field of fields) {
+                                let handle = field.handle;
+                                handle.api.handleLoadComplete();
+                            }
+                        }
+
+                        if (allLoaded && !Utils.isNull(props.loadCompleteHandler)) {
+                            props.loadCompleteHandler(props.config.id);
+                        }
+                    }
+                } finally {
+                    release();
+                }
+            }
+        }
+
+        const transformDataObject = (data) => {
+            let formValues = null;
+
+            if (binder === 'MAP_OBJECT') {
+                formValues = {};
+
+                if (Utils.isNull(data)) {
+                    return null;
+                }
+
+                let map = data.map;
+                if (!Utils.isNull(map)) {
+                    let properties = Object.getOwnPropertyNames(map);
+
+                    for (let i = 0; i < properties.length; i++) {
+                        let property = properties[i];
+                        let tokens = property.split('.');
+                        let vo = formValues;
+
+                        for (let j = 0; j < tokens.length; j++) {
+                            let token = tokens[j];
+                            if (j < tokens.length - 1) {
+                                if (Utils.isNull(vo[token])) {
+                                    vo[token] = {};
+                                }
+
+                                vo = vo[token];
+                            } else {
+                                vo[token] = map[property];
+                            }
+                        }
+                    }
+                }
+            } else {
+                formValues = data;
+            }
+
+            return formValues;
+        };
+
+        function doClear() {
+            for (let i = 0; i < fields.length; i++) {
+                let field = fields[i];
+                field.handle.api.clear();
+            }
+
+            values.id = null;
+
+            if (!Utils.isNull(props.valueChangeHandler)) {
+                props.valueChangeHandler(values);
+            }
+        }
+
+        function doBindData(data) {
+            if (!Utils.isNull(data)) {
+                if (!Utils.isNull(data.map)) {
+                    data = data.map;
+                }
+
+                for (const key of Object.keys(data)) {
+                    let field = getField(key);
+                    if (!Utils.isNull(field)) {
+                        field.handle.api.value = field.handle.api.parseValue(data[key], true);
+                    }
+                }
+            }
+        }
+
+        function parseValues(data) {
+            let parsedValues = JSON.parse(JSON.stringify(data));
+            for (let i = 0; i < fields.length; i++) {
+                let field = fields[i];
+                let path = getValuePath(field.id, parsedValues);
+                let objectValue = path.valueObject[path.valueProperty];
+                if (!Utils.isNull(field.handle.api)) {
+                    path.valueObject[path.valueProperty] = field.handle.api.parseValue(objectValue, true);
+                } else {
+                    console.error("NULL field reference while parsing form value - " + field.id);
+                }
+            }
+
+            setValues(parsedValues);
+            if (!Utils.isNull(props.dataArrivedHandler)) {
+                props.dataArrivedHandler(parsedValues);
+            }
+
+            if (!Utils.isNull(props.valueChangeHandler)) {
+                props.valueChangeHandler(parsedValues);
+            }
+        }
+
+        React.useEffect(() => {
+            if (!Utils.isNull(props.values)) {
+                parseValues(props.values);
+            }
+        }, [props.values]);
+
+        const getField = (id) => {
+            for (let i = 0; i < fields.length; i++) {
+                if (fields[i].id === id) {
+                    return fields[i];
+                }
+            }
+
+            return null;
+        };
+
+        const removeField = (id) => {
+            for (let i = 0; i < fields.length; i++) {
+                if (fields[i].id === id) {
+                    fields.splice(i, 1);
+                }
+            }
+        };
+
+        function doValidateParent(field, invalid) {
+            let hasErrors = false;
+
+            if (!Utils.isNull(field.parentId)) {
+                let isParentInvalid = invalid;
+                for (let i = 0; i < fields.length; i++) {
+                    if (fields[i] !== field && fields[i].parentId === field.parentId) {
+                        isParentInvalid = isParentInvalid || !(Utils.isNull(fields[i].error) || fields[i].error.length === 0);
+                    }
+                }
+
+                hasErrors = hasErrors || isParentInvalid;
+                fieldParentErrors[field.parentId] = isParentInvalid;
+            }
+
+            if (!Utils.isNull(containerErrorCallback.current) && !applicationContext.isFormMarkersEnabled()) {
+                containerErrorCallback.current(fieldParentErrors);
+            }
+        }
+
+        const validateField = (field, id, value) => {
+            if (loadingRef.current === false) {
+                field.error = null;
+                let invalid = field.handle.api.validate({...values, [id]: value}, value) === false;
+                doValidateParent(field, invalid);
+
+                return invalid;
+            }
+
+            return true;
+        };
+
+        const getValuePath = (id, vals) => {
+            let path = {};
+            let currentValues = vals;
+            if (Utils.isNull(vals)) {
+                currentValues = values;
+            }
+
+            if (!Utils.isNull(currentValues)) {
+                let tokens = id.split(".");
+                if (tokens.length === 1) {
+                    path.valueObject = currentValues;
+                    path.valueProperty = tokens[0];
+                } else if (tokens.length > 1) {
+                    let vo = currentValues;
+                    for (let i = 0; i < tokens.length - 1; i++) {
+                        if (!Utils.isNull(vo[tokens[i]])) {
+                            vo = vo[tokens[i]];
+                        } else {
+                            vo[tokens[i]] = {};
+                            vo = vo[tokens[i]];
+                        }
+                    }
+
+                    if (!Utils.isNull(vo)) {
+                        path.valueObject = vo;
+                        path.valueProperty = tokens[tokens.length - 1];
+                    }
+                }
+            }
+
+            return path;
+        };
+
+        const doHandleChange = (id, value) => {
+            let path = getValuePath(id, null);
+
+            if (!Utils.isNull(path.valueObject) && !Utils.isNull(path.valueProperty) && loadingRef.current === false) {
+                path.valueObject[path.valueProperty] = value;
+                let invalid = false;
+                let field = getField(id);
+
+                if (!Utils.isNull(field)) {
+                    invalid = validateField(field, id, value);
+                    for (let i = 0; i < fields.length; i++) {
+                        let groupField = fields[i];
+                        let validationGroup = groupField.handle.api.getValidationGroup();
+                        if (!Utils.isNull(validationGroup)) {
+                            if (field !== groupField && validationGroup === field.handle.api.getValidationGroup()) {
+                                let groupFieldId = groupField.handle.api.getId();
+                                let gridFieldPath = getValuePath(groupFieldId, null);
+
+                                if (!Utils.isNull(gridFieldPath)) {
+                                    let groupFieldVal = gridFieldPath.valueObject[gridFieldPath.valueProperty];
+                                    validateField(groupField, groupFieldId, groupFieldVal);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                if (!Utils.isNull(props.valueChangeHandler)) {
+                    props.valueChangeHandler(invalid ? null : values, id, value);
+                }
+            }
+
+            eventManager.processSystemGeneratedSubscriptions(props.config.id);
+        };
+
+        const setFieldError = (id, error) => {
+            let field = getField(id);
+            if (!Utils.isNull(field)) {
+                field.error = error;
+            }
+        };
+
+        const addField = (id, handle, parentId, bindValueToForm) => {
+            let field = getField(id);
+            let error = null;
+
+            if (!Utils.isNull(field)) {
+                error = field.error;
+                removeField(id);
+            }
+
+            field = {};
+            field.id = id;
+            field.handle = handle;
+            field.error = error;
+            field.bindValueToForm = bindValueToForm;
+            field.parentId = parentId;
+            fields.push(field);
+
+            return field;
+        };
+
+        const handleSelectItemChange = (name, options, selectedId) => {
+            let selectedValue = null;
+
+            for (let i = 0; i < options.length; i++) {
+                if (options[i].id === selectedId) {
+                    selectedValue = options[i];
+                }
+            }
+
+            doHandleChange(name, selectedValue);
+            return selectedValue;
+        };
+
+        const updateValue = (name, value) => {
+            props.valueChangeHandler({...values, [name]: value});
+        };
+
+        function render(form) {
+            return (
+                (Utils.isNull(form.sections) || form.sections.length === 0) ?
+                    null
+                    :
+                    <div style={{
+                        overflow: Utils.getComponentAttribute(props.config, 'overflow', 'auto'),
+                        maxHeight: '70vh'
+                    }}>
+                        {
+                            form.sections.map((section) => {
+                                if (Utils.isNull(section.id)) {
+                                    section.id = sectionCounter + '-form-section';
+                                }
+
+                                return <div key={sectionCounter++}>
+                                    <Section keyHandler={props.keyHandler}
+                                             config={section}
+                                             handle={createSectionHandle(section)}
+                                             ref={React.createRef()}
+                                             loadCompleteHandler={loadCompleteHandler}
+                                             form={() => {
+                                                 return !Utils.isNull(props.handle.api) ? props.handle.api : api()
+                                             }}
+                                             viewId={props.viewId}
+                                             values={values}
+                                    />
+                                </div>
+                            })
+                        }
+                    </div>
+            );
+        }
+
+        return (
+            <div className={props.className} ref={ref} style={
+                props.className === 'defaultForm' ?
+                    {
+                        height: Utils.getComponentAttribute(props.config, 'height', null),
+                        padding: Utils.getComponentAttribute(props.config, 'padding', '16px 32px 0 48px'),
+                        margin: Utils.getComponentAttribute(props.config, 'margin', '0'),
+                        overflow: 'hidden'
+                    }
+                    :
+                    null
+            }>
+                {
+                    !Utils.isNull(props.config.id) ?
+                        !initializing ?
+                            render(props.config)
+                            : null
+                        :
+                        <div>ERROR: A form must have an ID</div>
+                }
+            </div>)
+    }))
+;
+
+export default Form;