updated form fields and application logic;

src/pages/BandoFlowEdit/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
-import { isEmpty } from 'ramda';
+import { isEmpty, head } from 'ramda';
 
 // store
 import { storeSet, useStore } from '../../store';
@@ -17,6 +17,8 @@ import { Button } from 'primereact/button';
 import { Dropdown } from 'primereact/dropdown';
 import FlowBuilder from '../../components/FlowBuilder';
 import { Messages } from 'primereact/messages';
+import FlowService from '../../service/flow-service';
+import { confirmPopup, ConfirmPopup } from 'primereact/confirmpopup';
 
 const BandoFlowEdit = () => {
     const { id } = useParams();
@@ -39,17 +41,76 @@ const BandoFlowEdit = () => {
         navigate(`/tenders/${bandoId}/forms`);
     }
 
+    const confirmDelete = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: __('Sei sicuro di reset questo flow?', 'gepafin'),
+            acceptLabel: __('Si', 'gepafin'),
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept: doDelete,
+            reject: () => {}
+        });
+    };
+
+    const doDelete = () => {
+        storeSet.main.flowData([]);
+        storeSet.main.flowEdges([]);
+        setInitialForm(0);
+        setFinalForm(0);
+    }
+
+    const updateInitialForm = (value) => {
+        setInitialForm(value);
+        if (forms.length === 2) {
+            const finalForm = head(forms.filter(o => o.id !== value));
+            if (finalForm) {
+                setFinalForm(finalForm.id);
+            }
+        }
+    }
+
     const shoudDisableSaving = useCallback(() => {
-        return isEmpty(flowData) || isEmpty(flowEdges) || isEmpty(initialForm) || isEmpty(finalForm);
+        return forms.length > 2
+            ? isEmpty(flowData) || isEmpty(flowEdges) || isEmpty(initialForm) || isEmpty(finalForm)
+            : isEmpty(flowEdges) || isEmpty(initialForm);
     }, [flowData, flowEdges]);
 
     const doSave = () => {
-        console.log('doSave', {
+        storeSet.main.setAsyncRequest();
+        const bandoId = getBandoId();
+        const body = {
             initialForm,
             finalForm,
             flowData,
             flowEdges
-        });
+        };
+        if (flowMsgs.current) {
+            flowMsgs.current.clear();
+        }
+        FlowService.createFlow(bandoId, body, getFlowCreateCallback, errGetFlowCreateCallback);
+    }
+
+    const getFlowCreateCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (flowMsgs.current) {
+                flowMsgs.current.show([
+                    {
+                        id: '99',
+                        sticky: true, severity: 'success', summary: '',
+                        detail: __('Flow è salvato.', 'gepafin'),
+                        closable: false
+                    }
+                ]);
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetFlowCreateCallback = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
     }
 
     const getFormsCallback = (data) => {
@@ -66,10 +127,27 @@ const BandoFlowEdit = () => {
         storeSet.main.unsetAsyncRequest();
     }
 
+    const getFlowCallback = (data) => {
+        if (data.status === 'SUCCESS' && data.data) {
+            storeSet.main.flowData(data.data.flowData);
+            storeSet.main.flowEdges(data.data.flowEdges);
+            setInitialForm(data.data.initialForm);
+            setFinalForm(data.data.finalForm);
+
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetFlowCallback = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
     useEffect(() => {
         const bandoId = getBandoId();
         storeSet.main.setAsyncRequest();
         FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback);
+        FlowService.getFlow(bandoId, getFlowCallback, errGetFlowCallback)
     }, [id]);
 
     useEffect(() => {
@@ -112,7 +190,7 @@ const BandoFlowEdit = () => {
                         <Dropdown
                             id="initialForm"
                             value={initialForm}
-                            onChange={(e) => setInitialForm(e.value)}
+                            onChange={(e) => updateInitialForm(e.value)}
                             optionDisabled={(opt) => finalForm === opt.value}
                             options={formOptions}
                             optionLabel="label"
@@ -157,6 +235,13 @@ const BandoFlowEdit = () => {
                         disabled={shoudDisableSaving()}
                         label={__('Salva', 'gepafin')} icon="pi pi-save" iconPos="right"/>
                 </div>
+                <div className="appPageSection__actions">
+                    <ConfirmPopup/>
+                    <Button
+                        onClick={confirmDelete}
+                        severity="warning"
+                        label={__('Reset', 'gepafin')} icon="pi pi-refresh" iconPos="right"/>
+                </div>
             </div>
         </div>
     )