BFLOWS/bflows-bandi-fe
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- updated flow edit page;

Browse Source 
- fixed issues on application form page;
This commit is contained in:
Vitalii Kiiko
2024-09-24 17:25:41 +02:00
parent 2341b9ff62
commit b008fcd37a
11 changed files with 103 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/assets/scss/components/statsBigBadges.scss
View File

@@ -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;
}
}
}

33
src/components/FlowBuilder/components/NodeInitialForm/index.js
View File

@@ -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)));

11
src/components/FlowBuilder/index.js
View File

@@ -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([]);

4
src/components/FormField/components/NumberInput/index.js
View File

@@ -19,7 +19,8 @@ const NumberInput = ({
maxFractionDigits = 1,
min,
max,
disabled = false
disabled = false,
useGrouping = true
}) => {
const input = <Controller
name={fieldName}
@@ -34,6 +35,7 @@ const NumberInput = ({
min={min}
max={max}
locale={locale}
useGrouping={useGrouping}
minFractionDigits={minFractionDigits}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>

10
src/helpers/validators.js
View File

@@ -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)));
}

60
src/pages/BandoApplication/index.js
View File

@@ -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}
/>
})}

5
src/pages/BandoEdit/index.js
View File

@@ -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">

21
src/pages/BandoFlowEdit/index.js
View File

@@ -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>

6
src/pages/BandoFormsEdit/index.js
View File

@@ -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>

2
src/pages/DashboardBeneficiario/index.js
View File

@@ -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>

5
src/store/actions.js
View File

@@ -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]);