- updated version;

src/pages/BandoFlowEdit/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
 import { isEmpty } from 'ramda';
@@ -16,15 +16,18 @@ import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 import { Button } from 'primereact/button';
 import { Dropdown } from 'primereact/dropdown';
 import FlowBuilder from '../../components/FlowBuilder';
+import { Messages } from 'primereact/messages';
 
 const BandoFlowEdit = () => {
     const { id } = useParams();
     const navigate = useNavigate();
+    const forms = useStore().main.flowForms();
     const flowData = useStore().main.flowData();
     const flowEdges = useStore().main.flowEdges();
     const [formOptions, setFormOptions] = useState([]);
     const [initialForm, setInitialForm] = useState(0);
     const [finalForm, setFinalForm] = useState(0);
+    const flowMsgs = useRef(null);
 
     const getBandoId = () => {
         const parsed = parseInt(id)
@@ -51,7 +54,7 @@ const BandoFlowEdit = () => {
 
     const getFormsCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            const formOptions = data.data.map(o => ({label: o.label, value: o.id}))
+            const formOptions = data.data.map(o => ({ label: o.label, value: o.id }))
             storeSet.main.flowForms(data.data);
             setFormOptions(formOptions);
         }
@@ -69,6 +72,20 @@ const BandoFlowEdit = () => {
         FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback);
     }, [id]);
 
+    useEffect(() => {
+        if (flowMsgs.current && forms.length < 2) {
+            flowMsgs.current.clear();
+            flowMsgs.current.show([
+                {
+                    id: '1',
+                    sticky: true, severity: 'info', summary: '',
+                    detail: __('Devi creare almeno 2 form.', 'gepafin'),
+                    closable: false
+                }
+            ]);
+        }
+    }, [forms]);
+
     useEffect(() => {
         return () => {
             storeSet.main.flowForms([]);
@@ -100,28 +117,31 @@ const BandoFlowEdit = () => {
                             options={formOptions}
                             optionLabel="label"
                             optionValue="value"
-                            placeholder={__('Scegli il form', 'gepafin')} />
+                            placeholder={__('Scegli il form', 'gepafin')}/>
                     </div>
 
-                    <div className="appForm__field">
-                        <label htmlFor="finalForm">{__('Scegli form finale', 'gepafin')}</label>
-                        <Dropdown
-                            id="finalForm"
-                            value={finalForm}
-                            onChange={(e) => setFinalForm(e.value)}
-                            optionDisabled={(opt) => initialForm === opt.value}
-                            options={formOptions}
-                            optionLabel="label"
-                            optionValue="value"
-                            placeholder={__('Scegli il form', 'gepafin')} />
-                    </div>
+                    {forms.length > 2
+                        ? <div className="appForm__field">
+                            <label htmlFor="finalForm">{__('Scegli form finale', 'gepafin')}</label>
+                            <Dropdown
+                                id="finalForm"
+                                value={finalForm}
+                                onChange={(e) => setFinalForm(e.value)}
+                                optionDisabled={(opt) => initialForm === opt.value}
+                                options={formOptions}
+                                optionLabel="label"
+                                optionValue="value"
+                                placeholder={__('Scegli il form', 'gepafin')}/>
+                        </div> : null}
                 </div>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <FlowBuilder initialForm={initialForm} finalForm={finalForm}/>
+                {forms.length >= 2
+                    ? <FlowBuilder initialForm={initialForm} finalForm={finalForm}/>
+                    : <Messages ref={flowMsgs}/>}
             </div>
 
             <div className="appPage__spacer"></div>