ui-soxo-bootstrap-core 2.4.24

package/core/lib/modules/forms/components/field-selector/field-selector.js

@@ -0,0 +1,157 @@
+/**
+ * Field Selector Component 
+ * 
+ * @description Component to replace any custom form that you require to have in the project
+ * @author Ashique Mohammed
+ * @version 0.0.1
+ * @date 28/01/2023
+ * 
+ */
+
+import React, { useEffect, useState, Fragment, useContext } from "react";
+
+import { Models, LookupValues, LookupTypes } from '../../../../models';
+
+import { Typography, Divider } from "antd";
+
+import { Button } from "../../../../elements";
+
+// import { ScriptInput } from './../../../../elements/'
+import ScriptInput from './../../../../components/script-input/script-input';
+
+
+import './field-selector.scss';
+
+const { Title } = Typography;
+
+/**
+ * 
+ * Field Selector
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+export default function FieldSelector({ selectElement }) {
+
+    const [types, setTypes] = useState([]);
+
+    useEffect(() => {
+
+        getColumnTypes();
+
+    }, [])
+
+
+    async function getColumnTypes() {
+
+        var queries = [{
+            field: 'name',
+            value: 'Column Types'
+        }]
+
+        const result = await LookupTypes.get(queries)
+
+        if (result['lookup-types'].length) {
+
+            // setTypes(result['lookup-types'][0]);
+
+            getLookup(result['lookup-types'][0])
+        }
+    }
+
+    /**
+     * 
+     */
+    async function getLookup(record) {
+
+        var queries = [{
+            field: 'lookup_type_id',
+            value: record.id
+        }]
+
+        const result = await LookupValues.get(queries)
+
+        console.log(result);
+
+        if (result['lookup_values'].length) {
+
+            setTypes(result['lookup_values']);
+        }
+
+    }
+
+    return (<div className="field-selector card card-shadow">
+
+        <Title level={5}>Form Inputs</Title>
+
+        <div className="selector-box">
+
+            {
+                types.map((type) => {
+
+                    return (<div className="field-element" onClick={() => {
+                        selectElement(type);
+                    }} >
+
+                        {type.name}
+
+                        <Button size={'small'}>+</Button>
+
+                    </div>)
+
+                })
+            }
+
+        </div>
+
+        <Divider />
+
+        <div className="field-selector">
+
+            <Title level={5}>Group</Title>
+
+            <div className="selector-box">
+
+                {
+                    [{
+                        name: 'Tabs',
+                        value: 'Tabs',
+                        type: 'Tabs',
+                        tabs: [{
+                            caption: 'Tab',
+                            fields: []
+                        }]
+                    }].map((type) => {
+
+                        return (<div className="field-element" onClick={() => {
+                            selectElement(type);
+                        }}>
+
+                            {type.name}
+
+                            <Button size={'small'}>+</Button>
+
+                        </div>)
+
+                    })
+                }
+            </div>
+
+        </div>
+
+        <Divider />
+
+        <div>
+
+            <Title level={5}>Listners</Title>
+
+            <ScriptInput callback={(script) => {
+
+                console.log(script);
+
+            }} />
+
+        </div>
+
+    </div>)
+}

package/core/lib/modules/forms/components/field-selector/field-selector.scss

@@ -0,0 +1,25 @@
+.field-selector {
+    flex-basis: 30%;
+    margin-top: 0px;
+    margin-left: 8px;
+
+    .selector-box {
+        display: flex;
+        flex-wrap: wrap;
+
+        .field-element {
+            width: 120px;
+            border: 1px solid #e1e1e1;
+            border-radius: 4px;
+            padding: 16px;
+            margin: 10px;
+            cursor: pointer;
+        }
+    }
+
+    .field-element {
+        button {
+            float: right;
+        }
+    }
+}

package/core/lib/modules/forms/components/form-display/form-display.js

@@ -0,0 +1,203 @@
+/**
+ * Form Display Component 
+ * 
+ * @description Component to replace any custom form that you require to have in the project
+ * @author Ashique Mohammed
+ * @version 0.0.1
+ * @date 28/01/2023
+ * 
+ */
+
+import React, { useEffect, useState, Fragment, useContext } from "react";
+
+import FormCreator from "./../../../../models/forms/components/form-creator/form-creator";
+
+import FieldSelector from './../field-selector/field-selector';
+
+import './form-display.scss';
+
+const layout = {
+    labelCol: { span: 8 },
+    wrapperCol: { span: 8 },
+};
+
+/**
+ * FormDisplay
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+export default function FormDisplay({ match, step, history }) {
+
+    const [selected, setSelected] = useState([]);
+
+    /**
+     * The selected element is added to the list
+     * 
+     * @param {*} element 
+     */
+    const selectElement = (element) => {
+
+        // We generate an initial random field name for the field added
+        // This can be configured later with the field customizer
+        let randomFieldName = 'field_' + Math.floor(Math.random() * (200000 - 10000 + 1) + 10000)
+
+        // We need to check if the last element is a tab 
+        // If its a tab , and if we add more tabs , it should be pushed to the array . 
+        // If its a tab ,and we add a field input , we push to the array fields
+
+        let lastElement = selected.length;
+
+        if (selected.length && selected[lastElement - 1].type === 'Tabs') {
+
+            // For upcoming tabs , we have to push to the array
+            if (element.type === 'Tabs') {
+
+                selected[lastElement - 1].tabs.push({
+                    ...element,
+                    caption: 'Caption',
+                    name: 'caption',
+                    field: randomFieldName,
+                    type: element.value,
+                    options: [],
+                })
+            } else {
+
+                selected[lastElement - 1].tabs[0].fields.push({
+                    ...element,
+                    caption: 'Caption',
+                    name: 'caption',
+                    field: randomFieldName,
+                    type: element.value,
+                    options: [],
+                })
+            }
+
+        } else {
+
+            selected.push({
+                ...element,
+                caption: 'Caption',
+                name: 'caption',
+                field: randomFieldName,
+                type: element.value,
+                options: [],
+            })
+
+        }
+
+        setSelected([...selected]);
+
+        console.log(selected);
+    }
+
+    /**
+     * On Update of field configuration 
+     * We use the configuration to update the properties 
+     * of the field
+     * 
+     * @param {'*'} index 
+     * @param {*} field 
+     * @param {*} value 
+     */
+    const onFieldUpdate = async (index, field, values) => {
+
+        selected[index] = values;
+
+        setSelected([...selected]);
+
+        await true;
+
+    }
+
+    /**
+     * On remove of field
+     * 
+     * @param {'*'} index 
+     * @param {*} field 
+     * @param {*} value 
+     */
+    const onFieldRemove = async (index) => {
+
+        selected.splice(index, 1);
+
+        setSelected([...selected]);
+    }
+
+    /**
+     * Event triggered on end of drag
+     * 
+     * @param {*} source 
+     * @param {*} destination 
+     */
+    const onListUpdate = async (source, destination) => {
+
+        // Saving the source value
+        let initial = selected[source.index];
+
+        // Saving the destination value
+        let final = selected[destination.index];
+
+        // Shuffle the value as per final output
+        selected[destination.index] = initial;
+
+        // 
+        selected[source.index] = final;
+
+        setSelected([...selected]);
+    }
+
+    /**
+     * Customize the tab from the form creator
+     * 
+     * @param {*} tab 
+     * @param {*} index 
+     */
+    const onTabUpdate = (tab, index) => {
+
+        selected[index] = values;
+
+        setSelected([...selected]);
+    }
+
+
+    useEffect(() => {
+    }, []);
+
+    return (
+        <div className="form-display">
+
+            <div className="form-creator-container">
+
+                {/* Selected Columns */}
+                <FormCreator
+                    fields={selected}
+                    onFieldRemove={onFieldRemove}
+                    onFieldUpdate={onFieldUpdate}
+                    onListUpdate={onListUpdate}
+
+                    onTabUpdate={onTabUpdate}
+
+                    onSubmit={async (values) => {
+
+                        console.log(values);
+
+                        await values;
+                    }}
+                />
+                {/* Selected Columns Ends */}
+
+                {/* Form Configure */}
+                {/* {selected.map((field) => <FieldCustomizer field={field} />)} */}
+                {/* Form Configure Ends */}
+
+            </div>
+
+            {/* Field Selector */}
+            <FieldSelector selectElement={selectElement} />
+            {/* Field Selector Ends */}
+
+        </div>
+    );
+}
+

package/core/lib/modules/forms/components/form-display/form-display.scss

@@ -0,0 +1,9 @@
+.form-display {
+    display: flex;
+
+    .form-creator-container {
+        flex-basis: 70%;
+    }
+
+
+}

package/core/lib/modules/forms/components/tab-customizer/tab-customizer.js

@@ -0,0 +1,125 @@
+/**
+ * Tab Customizer 
+ * 
+ * @description Customize the tabs for the form
+ * @author Ashique Mohammed
+ * @version 0.0.1
+ * @date 28/01/2023
+ * 
+ */
+
+import React, { useEffect, useState, Fragment, useContext } from "react";
+
+import { Input, Form, Switch, Modal } from 'antd';
+
+import { Button } from "../../../../elements";
+
+import { ConfirmModal } from './../../../../components/'
+
+import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
+
+import './tab-customizer.scss';
+
+const layout = {
+    labelCol: { span: 8 },
+    wrapperCol: { span: 8 },
+};
+
+
+/**
+ * Customize the field to control its output , validity and more
+ */
+function TabCustomizer({ field, onFieldUpdate, onFieldRemove, index ,layoutValue}) {
+
+    const [form] = Form.useForm();
+
+    // Form Initial values for configuring
+    let formValues = field;
+
+    const [visible, setVisible] = useState(false);
+
+    /**
+     * On Submit of the form
+     * 
+     * @param {*} values 
+     */
+    const onFinish = (values) => {
+        console.log(values);
+
+        onFieldUpdate(index, field, values);
+
+        setVisible(false);
+    }
+
+    /**
+     * On edit of field
+     */
+    const onEdit = () => {
+        setVisible(true);
+    }
+
+    /**
+     * On delete of field
+     */
+    const onDelete = () => {
+
+        onFieldRemove(index);
+    }
+
+    return (<div className="field-customizer">
+
+        <div className="actions">
+
+            <Button className={"field-editor"} size="small" onClick={onEdit}>
+                <EditOutlined style={{ fontSize: 12 }} />
+            </Button>
+
+            <ConfirmModal callback={onDelete} caption={<DeleteOutlined style={{ fontSize: 12 }} />}>
+            </ConfirmModal>
+
+        </div>
+
+        <Modal
+            width={'50%'}
+            header={null}
+            destroyOnClose
+            className=""
+            visible={visible}
+            title={'Configure Field'}
+            footer={null}
+            onCancel={() => { setVisible(false); }}>
+
+            <Form
+                name="form-configurator"
+                form={form}
+                {...layoutValue}
+                onFinish={onFinish}
+                layout={layoutValue}
+
+                initialValues={{
+                    ...formValues,
+                    required: true
+                }}>
+
+                <Form.Item label="Caption" name="caption" required tooltip="Caption for the field">
+                    <Input placeholder="Enter Caption" />
+                </Form.Item>
+
+                <Form.Item label="Required" name="required" required tooltip="Is this a mandatory field?">
+                    <Switch placeholder="Select required" />
+                </Form.Item>
+
+                <Form.Item label="Field" name="field" required tooltip="Is this a mandatory field?">
+                    <Input placeholder="Enter field" />
+                </Form.Item>
+
+                {/* <Form.Item> */}
+                <Button htmlType="submit" type="primary">Submit</Button>
+                {/* </Form.Item> */}
+
+            </Form>
+        </Modal>
+    </div>)
+}
+
+export default TabCustomizer;