ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.11

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

@@ -1,203 +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>
-    );
-}
-
+/**
+ * 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

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

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

@@ -1,125 +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>)
-}
-
+/**
+ * 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;