- added login page;

- added file upload;
- added faq item edit modal;

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

@@ -0,0 +1,92 @@
+import React, { useRef } from 'react'
+import { useDrag, useDrop } from 'react-dnd'
+import { ItemTypes } from '../ItemTypes';
+
+// store
+import { storeSet } from '../../../../store';
+
+// components
+import { Button } from 'primereact/button';
+
+const BuilderElement = ({ id, name, label, index, move  }) => {
+    const ref = useRef(null);
+
+    const [{ handlerId }, drop] = useDrop({
+        accept: ItemTypes.FIELD,
+        collect(monitor) {
+            return {
+                handlerId: monitor.getHandlerId(),
+            }
+        },
+        hover(item, monitor) {
+            if (!ref.current) {
+                return
+            }
+            const dragIndex = item.index
+
+            if (dragIndex > -1) {
+                const hoverIndex = index
+
+                if (dragIndex === hoverIndex) {
+                    return
+                }
+
+                const hoverBoundingRect = ref.current?.getBoundingClientRect()
+                const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+                const clientOffset = monitor.getClientOffset()
+                const hoverClientY = clientOffset.y - hoverBoundingRect.top
+
+                if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+                    return
+                }
+
+                if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+                    return
+                }
+
+                move(dragIndex, hoverIndex, item)
+                item.index = hoverIndex
+            } else {
+                let hoverIndex = index
+
+                const hoverBoundingRect = ref.current?.getBoundingClientRect()
+                const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+                const clientOffset = monitor.getClientOffset()
+                const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+                if (hoverClientY > hoverMiddleY) {
+                    hoverIndex = hoverIndex + 1;
+                }
+
+                move(dragIndex, hoverIndex, item)
+                item.index = hoverIndex;
+            }
+        },
+    });
+
+    const [{ isDragging }, drag] = useDrag({
+        type: ItemTypes.FIELD,
+        item: () => {
+            return { id, name, index }
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+
+    const openSettings = (id) => {
+        storeSet.main.activeElement(id);
+    }
+
+    const opacity = isDragging ? 0 : 1;
+    drag(drop(ref));
+
+    return (
+        <div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
+            {label}
+            <Button icon="pi pi-cog" onClick={() => openSettings(id)} outlined />
+        </div>
+    )
+}
+
+export default BuilderElement;

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

@@ -0,0 +1,37 @@
+import React, { useRef } from 'react'
+import { useDrag } from 'react-dnd'
+import { ItemTypes } from '../ItemTypes';
+import uniqid from '../../../../helpers/uniqid';
+
+
+const BuilderElementItem = ({ dbId, name, label, move  }) => {
+    const ref = useRef(null);
+
+    const [{ isDragging }, drag] = useDrag(() => ({
+        type: ItemTypes.FIELD,
+        item: () => {
+            return { name, dbId, id: uniqid(), index: -1 }
+        },
+        end: (item, monitor) => {
+            const dropResult = monitor.getDropResult()
+            if (item && dropResult) {
+                return item;
+            }
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+            handlerId: monitor.getHandlerId(),
+        }),
+    }))
+
+    const opacity = isDragging ? 0.4 : 1
+    drag(ref);
+
+    return (
+        <div ref={ref} className="formBuilder__elementItem" style={{ opacity }}>
+            {label}
+        </div>
+    )
+}
+
+export default BuilderElementItem;

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;

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

@@ -0,0 +1,3 @@
+export const ItemTypes = {
+    FIELD: 'field',
+}