- added registartion page;

- implemented validation helper-functions;
- fixed form fields datepicker and datepicker range;
- updated routes logic;
- fixed FAQ items editing/submission;

src/pages/BandoApplication/index.js

@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import { __ } from '@wordpress/i18n';
+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, is, isNil } from 'ramda';
+import { head, range } from 'ramda';
 import { useForm } from 'react-hook-form';
 
 // store
 import { storeSet, useStore } from '../../store';
 
 // api
-import FormsService from '../../service/forms-service';
+import ApplicationService from '../../service/application-service';
 
 // tools
 import {
@@ -19,7 +19,8 @@ import {
     isIBAN,
     isEmail,
     isEmailPEC,
-    isUrl
+    isUrl,
+    isMarcaDaBollo
 } from '../../helpers/validators';
 
 // components
@@ -27,17 +28,21 @@ import { Skeleton } from 'primereact/skeleton';
 import { Button } from 'primereact/button';
 import FormField from '../../components/FormField';
 import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
-
-import { formData as testformData } from '../../tempData';
-import BandoService from '../../service/bando-service';
-import ApplicationService from '../../service/application-service';
+import { Steps } from 'primereact/steps';
+import { Toast } from 'primereact/toast';
+import { TZDate } from '@date-fns/tz';
 
 const BandoApplication = () => {
     const { id } = useParams();
     const navigate = useNavigate();
     const [formData, setFormData] = useState([]);
-    const [formName, setFormName] = useState('');
+    const [bandoTitle, setBandoTitle] = useState('');
+    const [formId, setFormId] = useState('');
+    const [totalSteps, setTotalSteps] = useState(0);
+    const [activeStep, setActiveStep] = useState(1);
+    const [stepItems, setStepItems] = useState([{ label: 'Passo' }]);
     const isAsyncRequest = useStore().main.isAsyncRequest();
+    const toast = useRef(null);
     const {
         control,
         handleSubmit,
@@ -48,7 +53,6 @@ const BandoApplication = () => {
         getValues,
     } = useForm({ defaultValues: {}, mode: 'onChange' });
     const values = getValues();
-
     const validationFns = {
         isPIVA,
         isCodiceFiscale,
@@ -56,54 +60,117 @@ const BandoApplication = () => {
         isIBAN,
         isEmail,
         isEmailPEC,
-        isUrl
+        isUrl,
+        isMarcaDaBollo
     }
 
-    const onSubmit = () => {};
+    const onSubmit = () => {
+    };
 
-    const saveDraft = () => {
+    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');
+                fieldVal = tzAwareDate.toISOString().substring(0, 19);
+            }
+
+            fieldVal = !fieldVal ? null : fieldVal;
             acc.push({
                 'fieldId': cur,
-                'fieldValue': formData[cur] && formData[cur].getMonth ? formData[cur].toISOString() : formData[cur]
+                'fieldValue': fieldVal
             });
             return acc;
         }, []);
-        console.log('newFormData', newFormData);
-        console.log('errors', errors);
-    };
+        const submitData = {
+            formFields: newFormData
+        }
+
+        if (formId) {
+            const applId = getApplicationId();
+            storeSet.main.setAsyncRequest();
+            ApplicationService.submitForm(applId, submitData, submitFormCallback, errSubmitFormCallback, [
+                ['formId', formId]
+            ]);
+        }
+    }, [errors]);
 
     const getApplicationId = () => {
         const parsed = parseInt(id)
         return !isNaN(parsed) ? parsed : 0;
     }
 
-    const getCallback = (data) => {
+    const goBackward = () => {
+        if (formId) {
+            const applId = getApplicationId();
+            storeSet.main.setAsyncRequest();
+            ApplicationService.getApplicationForm(applId, getApplFormCallback, errGetApplFormCallbacks, [
+                ['formId', formId],
+                ['action', 'PREVIOUS']
+            ]);
+        }
+    }
+
+    const goForward = () => {
+        if (formId) {
+            const applId = getApplicationId();
+            storeSet.main.setAsyncRequest();
+            ApplicationService.getApplicationForm(applId, getApplFormCallback, errGetApplFormCallbacks, [
+                ['formId', formId],
+                ['action', 'NEXT']
+            ]);
+        }
+    }
+
+    const submitFormCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            /*const forms = data.data;
-            setFormName(forms[0].label);
-            const elements = klona(forms[0].content);
-            setFormData(elements);*/
-            //console.log('testformData.content', testformData.content);
-            setFormName(testformData.label);
-            setFormData(testformData.content);
+            console.log(data.data);
+            if (toast.current) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: __('Saved!', 'gepafin')
+                });
+            }
         }
         storeSet.main.unsetAsyncRequest();
     }
 
-    const errGetCallbacks = (data) => {
+    const errSubmitFormCallback = (data) => {
         set404FromErrorResponse(data);
         storeSet.main.unsetAsyncRequest();
     }
 
+    const getApplFormCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            console.log('getApplFormCallback', data.data);
+            setBandoTitle(data.data.callTitle);
+            setFormData(data.data.applicationFormResponse.content);
+            setFormId(data.data.formId);
+            setTotalSteps(data.data.totalFormSteps);
+            setActiveStep(data.data.currentStep)
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetApplFormCallbacks = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    useEffect(() => {
+        const rangeArr = range(1, totalSteps + 1);
+        setStepItems(rangeArr.map(() => ({ label: 'Passo' })));
+    }, [totalSteps])
+
     useEffect(() => {
         const applId = getApplicationId();
 
         if (applId) {
             storeSet.main.setAsyncRequest();
-            ApplicationService.getApplication(applId, getCallback, errGetCallbacks);
+            ApplicationService.getApplicationForm(applId, getApplFormCallback, errGetApplFormCallbacks);
         }
     }, [id]);
 
@@ -111,7 +178,7 @@ const BandoApplication = () => {
         <div className="appPage">
             {!isAsyncRequest
                 ? <div className="appPage__pageHeader">
-                    <h1>{formName}</h1>
+                    <h1>{sprintf(__('Domanda per il Bando: %s', 'gepafin'), bandoTitle)}</h1>
                 </div>
                 : <>
                     <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
@@ -120,6 +187,12 @@ const BandoApplication = () => {
 
             <div className="appPage__spacer"></div>
 
+            {!isAsyncRequest
+                ? <Steps model={stepItems} activeIndex={activeStep - 1}/> : null}
+
+            <div className="appPage__spacer"></div>
+
+            <Toast ref={toast}/>
             {!isAsyncRequest
                 ? <div className="appPage__content">
                     <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
@@ -132,7 +205,7 @@ const BandoApplication = () => {
                             let mimeValue = '';
 
                             if (mime) {
-                                mimeValue = mime.value.join(',');
+                                mimeValue = mime.value.map(o => o.code).join(',');
                             }
 
                             const validations = Object.keys(o.validators).reduce((acc, cur) => {
@@ -169,7 +242,7 @@ const BandoApplication = () => {
                                 config={validations}
                                 options={options ? options.value : []}
                                 setDataFn={setValue}
-                                sourceId={1}
+                                sourceId={getApplicationId()}
                             />
                         })}
 
@@ -181,17 +254,26 @@ const BandoApplication = () => {
 
                         <div className="appPageSection">
                             <div className="appPageSection__actions">
+                                {activeStep > 1 && activeStep <= totalSteps
+                                    ? <Button
+                                        type="button"
+                                        onClick={goBackward}
+                                        label={__('Vai indietro', 'gepafin')}
+                                        icon="pi pi-arrow-left"
+                                        iconPos="left"/> : null}
                                 <Button
                                     type="button"
+                                    disabled={isAsyncRequest}
                                     onClick={saveDraft}
                                     outlined
                                     label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
-                                <Button
-                                    type="button"
-                                    disabled={true}
-                                    onClick={() => {
-                                    }}
-                                    label={__('Vai avanti', 'gepafin')} icon="pi pi-arrow-right" iconPos="right"/>
+                                {activeStep < totalSteps
+                                    ? <Button
+                                        type="button"
+                                        onClick={goForward}
+                                        label={__('Vai avanti', 'gepafin')}
+                                        icon="pi pi-arrow-right"
+                                        iconPos="right"/> : null}
                             </div>
                         </div>
                     </form>