From b008fcd37a860959363e45ab9e286bb93e0ba79f Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Tue, 24 Sep 2024 17:25:41 +0200 Subject: [PATCH] - updated flow edit page; - fixed issues on application form page; --- .../scss/components/statsBigBadges.scss | 21 ++++--- .../components/NodeInitialForm/index.js | 33 ---------- src/components/FlowBuilder/index.js | 11 +--- .../FormField/components/NumberInput/index.js | 4 +- src/helpers/validators.js | 10 ++-- src/pages/BandoApplication/index.js | 60 ++++++++++++++++--- src/pages/BandoEdit/index.js | 5 +- src/pages/BandoFlowEdit/index.js | 21 ++++++- src/pages/BandoFormsEdit/index.js | 6 +- src/pages/DashboardBeneficiario/index.js | 2 +- src/store/actions.js | 5 +- 11 files changed, 103 insertions(+), 75 deletions(-) diff --git a/src/assets/scss/components/statsBigBadges.scss b/src/assets/scss/components/statsBigBadges.scss index a77f6cf..6e63deb 100644 --- a/src/assets/scss/components/statsBigBadges.scss +++ b/src/assets/scss/components/statsBigBadges.scss @@ -4,13 +4,11 @@ .statsBigBadges__grid { display: grid; align-items: stretch; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; width: 100%; - - &.grid-3 { - grid-template-columns: repeat(3, 1fr); - } + container-name: big-badges-grid; + container-type: inline-size; } .statsBigBadges__grid .statsBigBadges__gridItem span { @@ -53,8 +51,15 @@ } } -@media (max-width: 1240px) { - .statsBigBadges__grid { - grid-template-columns: 1fr; +@container big-badges-grid (max-width: 700px) { + .statsBigBadges__gridItem { + padding: 12px; + + span { + font-size: 16px; + } + span:nth-last-of-type(1) { + font-size: 16px; + } } } \ No newline at end of file diff --git a/src/components/FlowBuilder/components/NodeInitialForm/index.js b/src/components/FlowBuilder/components/NodeInitialForm/index.js index 20f6ace..79fe833 100644 --- a/src/components/FlowBuilder/components/NodeInitialForm/index.js +++ b/src/components/FlowBuilder/components/NodeInitialForm/index.js @@ -8,41 +8,8 @@ import { __ } from '@wordpress/i18n'; const NodeInitialForm = ({ data: { id, label = '' } }) => { const flowData = storeGet.main.flowData(); - //const [options, setOptions] = useState([]); const [value, setValue] = useState(''); - /*const onChangeFn = (e) => { - const { value } = e.target; - const data = { - formId: String(id), - chosenField: value, - chosenValue: '' - } - setValue(value); - storeSet.main.addFlowData(data); - }*/ - - /*useEffect(() => { - const flowForms = storeGet.main.flowForms(); - const flowData = storeGet.main.flowData(); - - if (flowForms.length > 2) { - const form = head(flowForms.filter(o => String(o.id) === String(id))) - const relevantFields = form - ? form.content - .filter(o => ['radio', 'select'].includes(o.name)) - .map(o => ({ name: o.id, label: o.label })) - : []; - setOptions(relevantFields); - } - - const flowDataForm = head(flowData.filter(o => String(o.formId) === String(id))); - - if (flowDataForm) { - setValue(flowDataForm.chosenField); - } - }, [id]);*/ - useEffect(() => { const flowForms = storeGet.main.flowForms(); const form = head(flowForms.filter(o => String(o.id) === String(id))); diff --git a/src/components/FlowBuilder/index.js b/src/components/FlowBuilder/index.js index a08eb80..fdb2d7f 100644 --- a/src/components/FlowBuilder/index.js +++ b/src/components/FlowBuilder/index.js @@ -8,7 +8,7 @@ import { isEmpty } from 'ramda'; import '@xyflow/react/dist/style.css'; // store -import { useStore, storeSet } from '../../store'; +import { useStore, storeSet, storeGet } from '../../store'; // nodes import NodeInitialForm from './components/NodeInitialForm'; @@ -104,15 +104,6 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0, mainField = '' }) => { setNodes(initialNodes); setEdges(edges); storeSet.main.flowEdges(edges); - - if (!isEmpty(mainField)) { - const data = { - formId: String(initialForm), - chosenField: mainField, - chosenValue: '' - } - storeSet.main.addFlowData(data); - } } else { setNodes([]); setEdges([]); diff --git a/src/components/FormField/components/NumberInput/index.js b/src/components/FormField/components/NumberInput/index.js index 6aa4d22..c26ceb7 100644 --- a/src/components/FormField/components/NumberInput/index.js +++ b/src/components/FormField/components/NumberInput/index.js @@ -19,7 +19,8 @@ const NumberInput = ({ maxFractionDigits = 1, min, max, - disabled = false + disabled = false, + useGrouping = true }) => { const input = )}/> diff --git a/src/helpers/validators.js b/src/helpers/validators.js index 130c10a..99c9de3 100644 --- a/src/helpers/validators.js +++ b/src/helpers/validators.js @@ -3,7 +3,8 @@ import { match, isEmpty } from 'ramda'; import CodiceFiscale from 'codice-fiscale-js'; export const isPIVA = (v) => { - return false; + const regexp = new RegExp(/^[0-9]{11}$/); + return !isEmpty(match(regexp, String(v))); } // example: DSDDSD99P23B352G @@ -14,8 +15,8 @@ export const isCodiceFiscale = (v) => { } export const isCAP = (v) => { - const regexp = new RegExp(/^[0-9]{5}$/) - return !isEmpty(match(regexp, v)); + const regexp = new RegExp(/^[0-9]{5}$/); + return !isEmpty(match(regexp, String(v))); } export const isIBAN = (v) => { @@ -54,5 +55,6 @@ export const isUrl = (v) => { } export const isMarcaDaBollo = (v) => { - return true; + const regexp = new RegExp(/^[0-9]{14}$/); + return !isEmpty(match(regexp, String(v))); } \ No newline at end of file diff --git a/src/pages/BandoApplication/index.js b/src/pages/BandoApplication/index.js index a8495bb..528a23a 100644 --- 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 = () => {
+ {!isAsyncRequest ?
@@ -252,6 +293,7 @@ const BandoApplication = () => { options={options ? options.value : []} setDataFn={setValue} sourceId={getApplicationId()} + useGrouping={false} /> })} diff --git a/src/pages/BandoEdit/index.js b/src/pages/BandoEdit/index.js index 3501ed8..b6825b0 100644 --- 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 (
diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index ce40c9a..a1d715e 100644 --- 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 = () => { updateInitialForm(e.value)} optionDisabled={(opt) => finalForm === opt.value || isEmpty(opt.value)} @@ -277,6 +288,7 @@ const BandoFlowEdit = () => { setMainField(e.value)} optionDisabled={(opt) => isEmpty(opt.value)} @@ -291,6 +303,7 @@ const BandoFlowEdit = () => { setFinalForm(e.value)} optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)} @@ -307,7 +320,10 @@ const BandoFlowEdit = () => {
{forms.length >= 2 && isFlowAllowed - ? : null} + ? : null}
@@ -328,6 +344,7 @@ const BandoFlowEdit = () => {
diff --git a/src/pages/BandoFormsEdit/index.js b/src/pages/BandoFormsEdit/index.js index 04d9394..3ece0a4 100644 --- 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"/>
diff --git a/src/pages/DashboardBeneficiario/index.js b/src/pages/DashboardBeneficiario/index.js index e2fe5b0..a3b416f 100644 --- a/src/pages/DashboardBeneficiario/index.js +++ b/src/pages/DashboardBeneficiario/index.js @@ -24,7 +24,7 @@ const DashboardBeneficiario = () => {

{__('Panoramica di Sistema', 'gepafin')}

-
+
{__('Domande attivi', 'gepafin')} 3 diff --git a/src/store/actions.js b/src/store/actions.js index 8c7e9f2..3f03911 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -45,9 +45,10 @@ export const actionsBeta = (set, get, api) => ({ }, addFlowData: (data) => { const initial = get.flowData(); - const exists = initial ? initial.filter(o => o.formId === data.formId) : []; + const exists = initial ? initial.filter(o => parseInt(o.formId) === parseInt(data.formId)) : []; + if (exists.length) { - const newData = initial.map(o => o.formId === data.formId ? data : o); + const newData = initial.map(o => parseInt(o.formId) === parseInt(data.formId) ? data : o); set.flowData(newData); } else { set.flowData([...initial, data]);