- added bando preview page;

- added bando form preview;

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { head } from 'ramda';
+import { __ } from '@wordpress/i18n';
+import { klona } from 'klona';
+
+// store
+import { storeSet, useStore } from '../../../../store';
+
+// components
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { Tag } from 'primereact/tag';
+
+const BuilderElementSettings = () => {
+    const elements = useStore().main.elements();
+    const activeElement = useStore().main.activeElement();
+    const [activeElementData, setActiveElementData] = useState({});
+    const [settings, setSettings] = useState([]);
+
+    const onChange = (value, name) => {
+        const newSettings = settings
+            .map(o => {
+                if (o.name === name) {
+                    o.value = value;
+                }
+
+                return o;
+            });
+
+        setSettings(newSettings);
+    }
+
+    const saveSettings = () => {
+        activeElementData.settings = settings;
+        const newElements = elements.map(o => o.id === activeElementData.id ? activeElementData : o);
+        storeSet.main.elements(newElements);
+    }
+
+    useEffect(() => {
+        const chosen = head(elements.filter(o => o.id === activeElement));
+        if (chosen) {
+            setActiveElementData(klona(chosen));
+            setSettings(klona(chosen.settings));
+        } else {
+            setActiveElementData({});
+            setSettings([]);
+        }
+    }, [activeElement])
+
+    return (activeElementData
+            ? <div className="formElementSettings">
+                <Tag value={activeElementData.name} severity="info"/>
+                {settings
+                    ? settings.map((o) => <div className="formElementSettings__field" key={o.name}>
+                    <label htmlFor={o.name}>{o.name}</label>
+                    <InputText id={o.name} aria-describedby={`${o.name}-help`}
+                               value={o.value}
+                               onChange={(e) => onChange(e.target.value, o.name)}/>
+                </div>) : null}
+
+                <Button label={__('Salva', 'gepafin')} onClick={saveSettings}/>
+            </div>
+            : null
+    )
+}
+
+export default BuilderElementSettings;