- 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',
+}

src/pages/BandoFormsEdit/index.js

@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate, useParams } from 'react-router-dom';
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+
+// store
+import { storeSet } from '../../store';
+
+// components
+import FormBuilder from './components/FormBuilder';
+import { Button } from 'primereact/button';
+
+const BandoFormsEdit = () => {
+    const { id, formId } = useParams();
+    const navigate = useNavigate();
+    const [isLoading, setIsLoading] = useState(true);
+
+    const goBack = () => {
+        navigate('/bandi/11/forms');
+    }
+
+    const doSave = () => {
+        console.log('doSave');
+    }
+
+    const openPreview = () => {
+        console.log('openPreview');
+    }
+
+    const doPublish = () => {
+        console.log('doPublish');
+    }
+
+    useEffect(() => {
+        //const parsed = parseInt(id)
+        //const bandoId = !isNaN(parsed) ? parsed : 0;
+        //const parsedFormId = parseInt(formId)
+        //const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
+
+        // 1. TODO get builder content data from API
+        const elements = [
+            {
+                id: 'a123456',
+                name: 'textinput',
+                dbId: 1,
+                label: 'Full Name',
+            },
+            {
+                id: 'a456789',
+                name: 'textarea',
+                dbId: 2,
+                label: 'Bio',
+            }
+        ]
+        const elementItems = [
+            {
+                id: 1,
+                name: 'textinput',
+                label: 'Text Input'
+            },
+            {
+                id: 2,
+                name: 'textarea',
+                label: 'Text Area'
+            },
+            {
+                id: 3, // DB id
+                name: 'piva',
+                label: 'P.IVA'
+            },
+        ]
+        storeSet.main.elements(elements);
+        storeSet.main.elementItems(elementItems);
+        setIsLoading(false);
+
+    }, [id]);
+
+    return (
+        <div className="appPage">
+            <div className="appPage__pageHeader">
+                <h1>{__('Editor del Form', 'gepafin')}</h1>
+                <p>
+                    {__('Imposta gli elementi del tuo Form.', 'gepafin')}
+                </p>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection">
+                <DndProvider backend={HTML5Backend}>
+                    {!isLoading ? <FormBuilder/>: null}
+                </DndProvider>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection">
+                <div className="appPageSection__actions">
+                    <Button
+                        onClick={goBack}
+                        outlined
+                        label={__('Indietro', 'gepafin')} icon="pi pi-arrow-left" iconPos="left"/>
+                    <Button
+                        onClick={doSave}
+                        outlined
+                        label={__('Salva progressi', 'gepafin')} icon="pi pi-save" iconPos="right"/>
+                    <Button
+                        disabled={true}
+                        outlined
+                        onClick={openPreview}
+                        label={__('Visualizza Anteprima Beneficiario', 'gepafin')} icon="pi pi-image" iconPos="right"/>
+                    <Button
+                        disabled={true}
+                        onClick={doPublish}
+                        label={__('Pubblica', 'gepafin')}/>
+                </div>
+            </div>
+        </div>
+    )
+
+}
+
+export default BandoFormsEdit;