- updated flow edit page;

- fixed issues on application form page;
2024-09-24 17:25:41 +02:00
parent 2341b9ff62
commit b008fcd37a
11 changed files with 103 additions and 75 deletions
--- a/src/pages/BandoApplication/index.js
+++ b/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}
                            />
                        })}

--- a/src/pages/BandoEdit/index.js
+++ b/src/pages/BandoEdit/index.js
@@ -253,10 +253,9 @@ const BandoEdit = () => {
            }
        } else {
            BandoService.getBando(id, getCallback, errGetCallback);
-            FormsService.getFormsForCall(id, getFormsCallback, () => {
-            });
+            FormsService.getFormsForCall(id, getFormsCallback, () => {});
        }
-    }, []);
+    }, [id]);

    return (
        <div className="appPage">
--- a/src/pages/BandoFlowEdit/index.js
+++ b/src/pages/BandoFlowEdit/index.js
@@ -31,6 +31,7 @@ const BandoFlowEdit = () => {
    const [initialForm, setInitialForm] = useState(0);
    const [mainFieldOptions, setMainFieldOptions] = useState([]);
    const [mainField, setMainField] = useState('');
+    const [bandoStatus, setBandoStatus] = useState('');
    const [isFlowAllowed, setIsFlowAllowed] = useState(false);
    const [finalForm, setFinalForm] = useState(0);
    const flowMsgs = useRef(null);
@@ -85,7 +86,8 @@ const BandoFlowEdit = () => {
    const shoudDisableSaving = useCallback(() => {
        return forms.length > 2
            ? isEmpty(flowData) || isEmpty(flowEdges) || isEmpty(initialForm) || isEmpty(finalForm)
-            : isEmpty(flowEdges) || isEmpty(initialForm);
+                || flowData.length < forms.length - 1 || 'PUBLISH' === bandoStatus
+            : isEmpty(flowEdges) || isEmpty(initialForm) || 'PUBLISH' === bandoStatus;
    }, [flowData, flowEdges]);

    const doSave = () => {
@@ -100,6 +102,7 @@ const BandoFlowEdit = () => {
        if (flowMsgs.current) {
            flowMsgs.current.clear();
        }
+
        FlowService.createFlow(bandoId, body, getFlowCreateCallback, errGetFlowCreateCallback);
    }

@@ -141,6 +144,7 @@ const BandoFlowEdit = () => {
            storeSet.main.flowEdges(data.data.flowEdges);
            setInitialForm(data.data.initialForm);
            setFinalForm(data.data.finalForm);
+            setBandoStatus(data.data.callStatus);
            const flowDataItem = head(data.data.flowData.filter(o => !isEmpty(o.chosenField)));

            if (flowDataItem) {
@@ -167,6 +171,12 @@ const BandoFlowEdit = () => {

        if (field && options.value && options.value.length === flowForms.length - 2) {
            setIsFlowAllowed(true);
+            const data = {
+                formId: String(initialForm),
+                chosenField: mainField,
+                chosenValue: ''
+            }
+            storeSet.main.addFlowData(data);
        } else {
            setIsFlowAllowed(false);
            let msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.';
@@ -263,6 +273,7 @@ const BandoFlowEdit = () => {
                        <label htmlFor="initialForm">{__('Scegli form iniziale', 'gepafin')}</label>
                        <Dropdown
                            id="initialForm"
+                            disabled={'PUBLISH' === bandoStatus}
                            value={initialForm}
                            onChange={(e) => updateInitialForm(e.value)}
                            optionDisabled={(opt) => finalForm === opt.value || isEmpty(opt.value)}
@@ -277,6 +288,7 @@ const BandoFlowEdit = () => {
                            <label htmlFor="mainField">{__('Scegli il campo principale', 'gepafin')}</label>
                            <Dropdown
                                id="mainField"
+                                disabled={'PUBLISH' === bandoStatus}
                                value={mainField}
                                onChange={(e) => setMainField(e.value)}
                                optionDisabled={(opt) => isEmpty(opt.value)}
@@ -291,6 +303,7 @@ const BandoFlowEdit = () => {
                            <label htmlFor="finalForm">{__('Scegli form finale', 'gepafin')}</label>
                            <Dropdown
                                id="finalForm"
+                                disabled={'PUBLISH' === bandoStatus}
                                value={finalForm}
                                onChange={(e) => setFinalForm(e.value)}
                                optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)}
@@ -307,7 +320,10 @@ const BandoFlowEdit = () => {
            <div className="appPageSection">
                <Messages ref={flowMsgs}/>
                {forms.length >= 2 && isFlowAllowed
-                    ? <FlowBuilder initialForm={initialForm} finalForm={finalForm} mainField={mainField}/> : null}
+                    ? <FlowBuilder
+                        initialForm={initialForm}
+                        finalForm={finalForm}
+                        mainField={mainField}/> : null}
            </div>

            <div className="appPage__spacer"></div>
@@ -328,6 +344,7 @@ const BandoFlowEdit = () => {
                    <ConfirmPopup/>
                    <Button
                        onClick={confirmDelete}
+                        disabled={'PUBLISH' === bandoStatus}
                        severity="warning"
                        label={__('Reset', 'gepafin')} icon="pi pi-refresh" iconPos="right"/>
                </div>
--- a/src/pages/BandoFormsEdit/index.js
+++ b/src/pages/BandoFormsEdit/index.js
@@ -28,6 +28,7 @@ const BandoFormsEdit = () => {
    const navigate = useNavigate();
    const [formName, setFormName] = useState('');
    const [visibleConfirmation, setVisibleConfirmation] = useState(false);
+    const [bandoStatus, setBandoStatus] = useState('');
    const isAsyncRequest = useStore().main.isAsyncRequest();
    const formMsgs = useRef(null);
    const toast = useRef(null);
@@ -221,6 +222,7 @@ const BandoFormsEdit = () => {
            storeSet.main.formId(data.data.id);
            storeSet.main.formLabel(data.data.label);
            setFormName(data.data.label);
+            setBandoStatus(data.data.callStatus);
            const elements = klona(data.data.content);
            storeSet.main.formElements(elements);
        }
@@ -304,7 +306,7 @@ const BandoFormsEdit = () => {
                        label={__('Indietro', 'gepafin')} icon="pi pi-arrow-left" iconPos="left"/>
                    <Button
                        onClick={() => doSave()}
-                        disabled={isAsyncRequest}
+                        disabled={isAsyncRequest || 'PUBLISH' === bandoStatus}
                        label={__('Salva progressi', 'gepafin')} icon="pi pi-save" iconPos="right"/>
                    <Button
                        outlined
@@ -320,7 +322,7 @@ const BandoFormsEdit = () => {
                    <ConfirmPopup />
                    <Button
                        onClick={confirmDelete}
-                        disabled={isAsyncRequest}
+                        disabled={isAsyncRequest || 'PUBLISH' === bandoStatus}
                        severity="danger"
                        label={__('Cancella', 'gepafin')} icon="pi pi-trash" iconPos="right"/>
                </div>
--- a/src/pages/DashboardBeneficiario/index.js
+++ b/src/pages/DashboardBeneficiario/index.js
@@ -24,7 +24,7 @@ const DashboardBeneficiario = () => {

            <div className="appPageSection statsBigBadges">
                <h2>{__('Panoramica di Sistema', 'gepafin')}</h2>
-                <div className="statsBigBadges__grid grid-3">
+                <div className="statsBigBadges__grid">
                    <div className="statsBigBadges__gridItem">
                        <span>{__('Domande attivi', 'gepafin')}</span>
                        <span>3</span>