- saving progress;

src/pages/BandoFormsEdit/index.js

@@ -6,52 +6,121 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { klona } from 'klona';
 
 // store
-import { storeSet, storeGet } from '../../store';
+import { storeSet, storeGet, useStore } from '../../store';
 
 // components
 import FormBuilder from './components/FormBuilder';
 import { Button } from 'primereact/button';
 
-// TODO temp
-import { formData, elementItems } from '../../tempData';
+// components
 import { InputText } from 'primereact/inputtext';
+import FormsService from '../../service/forms-service';
 
 const BandoFormsEdit = () => {
     const { id, formId } = useParams();
     const navigate = useNavigate();
-    const [isLoading, setIsLoading] = useState(true);
     const [formName, setFormName] = useState('');
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+
+    const getBandoId = () => {
+        const parsed = parseInt(id)
+        return !isNaN(parsed) ? parsed : 0;
+    }
 
     const goBack = () => {
-        navigate(`/bandi/${id}/forms`);
+        const bandoId = getBandoId();
+        navigate(`/bandi/${bandoId}/forms`);
     }
 
     const doSave = () => {
-        console.log('doSave', storeGet.main.formElements());
+        const content = storeGet.main.formElements();
+        const bandoId = getBandoId();
+        const parsedFormId = parseInt(formId)
+        const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
+        const formData = {
+            label: formName,
+            content
+        }
+
+        storeSet.main.setAsyncRequest();
+        if (bandoFormId === 0) {
+            FormsService.createFormForCall(bandoId, formData, formCreateCallback, errFormCreateCallback);
+        } else {
+            FormsService.updateForm(bandoFormId, formData, formCreateCallback, errFormCreateCallback)
+        }
+    }
+
+    const formCreateCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const parsed = parseInt(id)
+            const bandoId = !isNaN(parsed) ? parsed : 0;
+            if (data.data.id) {
+                navigate(`/bandi/${bandoId}/forms/${data.data.id}`);
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errFormCreateCallback = (data) => {
+        console.log('errFormCreateCallback', data)
+        storeSet.main.unsetAsyncRequest();
     }
 
     const openPreview = () => {
-        navigate(`/bandi/${id}/forms/${formId}/preview`);
+        const bandoId = getBandoId();
+        navigate(`/bandi/${bandoId}/forms/${formId}/preview`);
     }
 
     const doPublish = () => {
         console.log('doPublish');
     }
 
+    const getElementItemsCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            storeSet.main.elementItems(data.data);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetElementItemsCallbacks = (data) => {
+        console.log('errGetElementItemsCallbacks', data)
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const getFormCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            storeSet.main.formId(data.data.id);
+            storeSet.main.formLabel(data.data.label);
+            setFormName(data.data.label);
+            const elements = klona(data.data.content);
+            storeSet.main.formElements(elements);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetFormCallbacks = (data) => {
+        console.log('errGetElementItemsCallbacks', data)
+        storeSet.main.unsetAsyncRequest();
+    }
+
     useEffect(() => {
-        //const parsed = parseInt(id)
-        //const bandoId = !isNaN(parsed) ? parsed : 0;
-        //const parsedFormId = parseInt(formId)
-        //const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
+        const parsedFormId = parseInt(formId)
+        const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
 
-        // 1. TODO get builder content data from API
-        storeSet.main.formLabel(formData.label);
-        const elements = klona(formData.content);
-        storeSet.main.formElements(elements);
-        storeSet.main.elementItems(elementItems);
-        setIsLoading(false);
+        storeSet.main.setAsyncRequest();
+        FormsService.getElementItems(getElementItemsCallback, errGetElementItemsCallbacks);
 
-    }, [id]);
+        if (bandoFormId) {
+            storeSet.main.setAsyncRequest();
+            FormsService.getFormById(bandoFormId, getFormCallback, errGetFormCallbacks);
+        }
+
+        return () => {
+            storeSet.main.formId(0);
+            storeSet.main.formLabel('');
+            storeSet.main.formElements([]);
+        }
+    }, [id, formId]);
 
     return (
         <div className="appPage">
@@ -65,11 +134,11 @@ const BandoFormsEdit = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appForm__field">
-                <label htmlFor="label">{__('Form label', 'gepafin')}</label>
+                <label htmlFor="label">{__('Assegna un nome a questo form', 'gepafin')}</label>
                 <InputText
                     id="label"
                     value={formName}
-                    placeholder={__('Nome della forma', 'gepafin')}
+                    placeholder=""
                     onChange={(e) => setFormName(e.target.value)}
                     aria-describedby="label-help"/>
             </div>
@@ -78,7 +147,7 @@ const BandoFormsEdit = () => {
 
             <div className="appPageSection">
                 <DndProvider backend={HTML5Backend}>
-                    {!isLoading ? <FormBuilder/> : null}
+                    {!isAsyncRequest ? <FormBuilder/> : null}
                 </DndProvider>
             </div>