- updated flow edit page;

- fixed issues on application form page;

src/pages/BandoApplication/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
 import { klona } from 'klona';
-import { head, range } from 'ramda';
+import { head, range, is, isNil } from 'ramda';
 import { useForm } from 'react-hook-form';
 
 // store
@@ -31,11 +31,12 @@ import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 import { Steps } from 'primereact/steps';
 import { Toast } from 'primereact/toast';
 import { TZDate } from '@date-fns/tz';
+import { Messages } from 'primereact/messages';
 
 const BandoApplication = () => {
     const { id } = useParams();
-    const navigate = useNavigate();
     const [formData, setFormData] = useState([]);
+    const [formInitialData, setFormInitialData] = useState([]);
     const [bandoTitle, setBandoTitle] = useState('');
     const [formId, setFormId] = useState('');
     const [totalSteps, setTotalSteps] = useState(0);
@@ -43,6 +44,7 @@ const BandoApplication = () => {
     const [stepItems, setStepItems] = useState([{ label: 'Passo' }]);
     const isAsyncRequest = useStore().main.isAsyncRequest();
     const toast = useRef(null);
+    const formMsgs = useRef(null);
     const {
         control,
         handleSubmit,
@@ -69,15 +71,20 @@ const BandoApplication = () => {
 
     const saveDraft = useCallback(() => {
         trigger();
-        const formData = getValues();
-        const newFormData = Object.keys(formData).reduce((acc, cur) => {
-            let fieldVal = formData[cur];
-            if (formData[cur] && formData[cur].toISOString) {
-                const tzAwareDate = new TZDate(formData[cur], 'Europe/Berlin');
+        const formValues = getValues();
+        const newFormValues = Object.keys(formValues).reduce((acc, cur) => {
+            const formField = head(formData.filter(o => o.id === cur));
+            let fieldVal = formValues[cur];
+
+            if (formValues[cur] && formValues[cur].toISOString) {
+                const tzAwareDate = new TZDate(formValues[cur], 'Europe/Berlin');
                 fieldVal = tzAwareDate.toISOString().substring(0, 19);
             }
 
             fieldVal = !fieldVal ? null : fieldVal;
+            if (formField && formField.name === 'fileupload') {
+                fieldVal = is(Array, fieldVal) ? fieldVal.map(o => o.id).join(',') : fieldVal;
+            }
             acc.push({
                 'fieldId': cur,
                 'fieldValue': fieldVal
@@ -85,12 +92,17 @@ const BandoApplication = () => {
             return acc;
         }, []);
         const submitData = {
-            formFields: newFormData
+            formFields: newFormValues
         }
 
         if (formId) {
             const applId = getApplicationId();
             storeSet.main.setAsyncRequest();
+
+            if (formMsgs.current) {
+                formMsgs.current.clear();
+            }
+
             ApplicationService.submitForm(applId, submitData, submitFormCallback, errSubmitFormCallback, [
                 ['formId', formId]
             ]);
@@ -117,8 +129,21 @@ const BandoApplication = () => {
     }
 
     const errSubmitFormCallback = (data) => {
-        set404FromErrorResponse(data);
         storeSet.main.unsetAsyncRequest();
+        if (data.status === 'VALIDATION_ERROR') {
+            if (formMsgs.current) {
+                formMsgs.current.show([
+                    {
+                        id: '99',
+                        sticky: true, severity: 'error', summary: '',
+                        detail: data.data.join(', '),
+                        closable: true
+                    }
+                ]);
+            }
+        } else {
+            set404FromErrorResponse(data);
+        }
     }
 
     const goBackward = () => {
@@ -147,6 +172,15 @@ const BandoApplication = () => {
         if (data.status === 'SUCCESS') {
             setBandoTitle(data.data.callTitle);
             setFormData(data.data.applicationFormResponse.content);
+
+            if (data.data.applicationFormResponse.formFields) {
+                const submitData = data.data.applicationFormResponse.formFields.map((o) => ({
+                    fieldId: o.fieldId,
+                    fieldValue: o.fieldValue
+                }));
+                setFormInitialData(submitData)
+            }
+
             setFormId(data.data.formId);
             setTotalSteps(data.data.totalFormSteps);
             setActiveStep(data.data.currentStep)
@@ -169,6 +203,12 @@ const BandoApplication = () => {
         }
     }
 
+    useEffect(() => {
+        const newFormData = klona(formInitialData);
+        console.log('newFormData', newFormData);
+        newFormData.map(o => setValue(o.fieldId, o.fieldValue));
+    }, [formInitialData]);
+
     useEffect(() => {
         const rangeArr = range(1, totalSteps + 1);
         setStepItems(rangeArr.map(() => ({ label: 'Passo' })));
@@ -201,6 +241,7 @@ const BandoApplication = () => {
 
             <div className="appPage__spacer"></div>
 
+            <Messages ref={formMsgs}/>
             <Toast ref={toast}/>
             {!isAsyncRequest
                 ? <div className="appPage__content">
@@ -252,6 +293,7 @@ const BandoApplication = () => {
                                 options={options ? options.value : []}
                                 setDataFn={setValue}
                                 sourceId={getApplicationId()}
+                                useGrouping={false}
                             />
                         })}