- added bando preview page;

- added bando form preview;

src/pages/BandoFormsEdit/index.js

@@ -1,31 +1,37 @@
 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'
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { klona } from 'klona';
 
 // store
-import { storeSet } from '../../store';
+import { storeSet, storeGet } from '../../store';
 
 // components
 import FormBuilder from './components/FormBuilder';
 import { Button } from 'primereact/button';
 
+// TODO temp
+import { formData, elementItems } from '../../tempData';
+import { InputText } from 'primereact/inputtext';
+
 const BandoFormsEdit = () => {
     const { id, formId } = useParams();
     const navigate = useNavigate();
     const [isLoading, setIsLoading] = useState(true);
+    const [formName, setFormName] = useState('');
 
     const goBack = () => {
-        navigate('/bandi/11/forms');
+        navigate(`/bandi/${id}/forms`);
     }
 
     const doSave = () => {
-        console.log('doSave');
+        console.log('doSave', storeGet.main.formElements());
     }
 
     const openPreview = () => {
-        console.log('openPreview');
+        navigate(`/bandi/${id}/forms/${formId}/preview`);
     }
 
     const doPublish = () => {
@@ -39,38 +45,9 @@ const BandoFormsEdit = () => {
         //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.formLabel(formData.label);
+        const elements = klona(formData.content);
+        storeSet.main.formElements(elements);
         storeSet.main.elementItems(elementItems);
         setIsLoading(false);
 
@@ -87,9 +64,21 @@ const BandoFormsEdit = () => {
 
             <div className="appPage__spacer"></div>
 
+            <div className="appForm__field">
+                <label htmlFor="label">{__('Form label', 'gepafin')}</label>
+                <InputText
+                    id="label"
+                    value={formName}
+                    placeholder={__('Nome della forma', 'gepafin')}
+                    onChange={(e) => setFormName(e.target.value)}
+                    aria-describedby="label-help"/>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
             <div className="appPageSection">
                 <DndProvider backend={HTML5Backend}>
-                    {!isLoading ? <FormBuilder/>: null}
+                    {!isLoading ? <FormBuilder/> : null}
                 </DndProvider>
             </div>
 
@@ -106,7 +95,6 @@ const BandoFormsEdit = () => {
                         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"/>