- 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;