- added login page;

- added file upload; - added faq item edit modal;
2024-08-23 16:55:19 +02:00
parent 0a21444ee4
commit 5095ed7365
50 changed files with 1540 additions and 576 deletions
--- a/src/pages/BandoFormsEdit/components/FormBuilder/index.js
+++ b/src/pages/BandoFormsEdit/components/FormBuilder/index.js
@@ -0,0 +1,98 @@
+import React, { useCallback, useState, useEffect } from 'react'
+import { __ } from '@wordpress/i18n';
+import { head, isEmpty } from 'ramda';
+
+// store
+import { storeGet, storeSet, useStore } from '../../../../store';
+
+// components
+import BuilderElement from '../BuilderElement';
+import BuilderElementItem from '../BuilderElementItem';
+import { Sidebar } from 'primereact/sidebar';
+
+const FormBuilder = () => {
+    const [fields, setFields] = useState([]);
+    const [items, setItems] = useState([]);
+    const activeElement = useStore().main.activeElement();
+
+    const moveField = useCallback((dragIndex, hoverIndex, item) => {
+        setFields((prevFields) => {
+            if (dragIndex === -1) {
+                const configs = storeGet.main.elementItems();
+                const itemCfg = head(configs.filter(o => o.id === item.dbId));
+                const newItem = {
+                    ...itemCfg,
+                    id: item.id,
+                    dbId: item.dbId
+                }
+                return prevFields.toSpliced(hoverIndex, 0, newItem);
+            } else {
+                let newFields = prevFields.toSpliced(dragIndex, 1);
+                return newFields.toSpliced(hoverIndex, 0, prevFields[dragIndex]);
+            }
+        })
+    }, []);
+
+    const renderField = useCallback((field, index) => {
+        return (
+            <BuilderElement
+                key={field.id}
+                index={index}
+                id={field.id}
+                label={field.label}
+                name={field.name}
+                move={moveField}
+            />
+        )
+    }, []);
+
+    useEffect(() => {
+        const elements = storeGet.main.elements();
+        const elementItems = storeGet.main.elementItems();
+        setFields(elements);
+        setItems(elementItems);
+    }, [])
+
+    const renderItem = useCallback((item, index) => {
+        return (
+            <BuilderElementItem
+                key={item.id}
+                dbId={item.id}
+                label={item.label}
+                name={item.name}
+                move={moveField}
+            />
+        )
+    }, []);
+
+    const closeSettings = () => {
+        storeSet.main.activeElement('');
+    }
+
+    return (
+        <>
+            <Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
+                <h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
+                <p>
+                    Form fields here
+                </p>
+            </Sidebar>
+            <div className="formBuilder">
+                <div className="formBuilder__main">
+                    <h2>{__('Trascina qui gli elementi del Form', 'gepafin')}</h2>
+                    <div className="formBuilder__content">
+                        {fields.map((field, i) => renderField(field, i))}
+                    </div>
+                </div>
+                <div className="formBuilder__aside">
+                    <h2>{__('Elementi del Form', 'gepafin')}</h2>
+                    <ul className="formBuilder__list">
+                        {items.map((item) => renderItem(item))}
+                    </ul>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default FormBuilder;