- added bando preview page;

- added bando form preview;

src/pages/BandoFormsEdit/components/FormBuilder/index.js

@@ -1,38 +1,22 @@
-import React, { useCallback, useState, useEffect } from 'react'
+import React, { useCallback } from 'react'
 import { __ } from '@wordpress/i18n';
-import { head, isEmpty } from 'ramda';
+import { isEmpty } from 'ramda';
 
 // store
-import { storeGet, storeSet, useStore } from '../../../../store';
+import { storeSet, useStore } from '../../../../store';
 
 // components
 import BuilderElement from '../BuilderElement';
 import BuilderElementItem from '../BuilderElementItem';
 import { Sidebar } from 'primereact/sidebar';
+import BuilderElementSettings from '../BuilderElementSettings';
+import BuilderDropzone from '../BuilderDropzone';
 
 const FormBuilder = () => {
-    const [fields, setFields] = useState([]);
-    const [items, setItems] = useState([]);
+    const elements = useStore().main.formElements();
+    const elementItems = useStore().main.elementItems();
     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
@@ -41,26 +25,17 @@ const FormBuilder = () => {
                 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) => {
+    const renderItem = useCallback((item) => {
         return (
             <BuilderElementItem
                 key={item.id}
                 dbId={item.id}
                 label={item.label}
                 name={item.name}
-                move={moveField}
             />
         )
     }, []);
@@ -73,21 +48,21 @@ const FormBuilder = () => {
         <>
             <Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
                 <h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
-                <p>
-                    Form fields here
-                </p>
+                {!isEmpty(activeElement) ? <BuilderElementSettings/> : null}
             </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))}
+                        {!isEmpty(elements)
+                            ? elements.map((field, i) => renderField(field, i))
+                            : <BuilderDropzone/>}
                     </div>
                 </div>
                 <div className="formBuilder__aside">
                     <h2>{__('Elementi del Form', 'gepafin')}</h2>
                     <ul className="formBuilder__list">
-                        {items.map((item) => renderItem(item))}
+                        {elementItems.map((item) => renderItem(item))}
                     </ul>
                 </div>
             </div>