- added registartion page;
- implemented validation helper-functions; - fixed form fields datepicker and datepicker range; - updated routes logic; - fixed FAQ items editing/submission;
This commit is contained in:
Vitalii Kiiko
@@ -1,10 +1,10 @@
|
||||
import React, { useEffect, useState, useCallback, useRef } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { isEmpty, head } from 'ramda';
|
||||
|
||||
// store
|
||||
import { storeSet, useStore } from '../../store';
|
||||
import { storeGet, storeSet, useStore } from '../../store';
|
||||
|
||||
// api
|
||||
import FormsService from '../../service/forms-service';
|
||||
@@ -19,6 +19,7 @@ import FlowBuilder from '../../components/FlowBuilder';
|
||||
import { Messages } from 'primereact/messages';
|
||||
import FlowService from '../../service/flow-service';
|
||||
import { confirmPopup, ConfirmPopup } from 'primereact/confirmpopup';
|
||||
import { Toast } from 'primereact/toast';
|
||||
|
||||
const BandoFlowEdit = () => {
|
||||
const { id } = useParams();
|
||||
@@ -28,8 +29,12 @@ const BandoFlowEdit = () => {
|
||||
const flowEdges = useStore().main.flowEdges();
|
||||
const [formOptions, setFormOptions] = useState([]);
|
||||
const [initialForm, setInitialForm] = useState(0);
|
||||
const [mainFieldOptions, setMainFieldOptions] = useState([]);
|
||||
const [mainField, setMainField] = useState('');
|
||||
const [isFlowAllowed, setIsFlowAllowed] = useState(false);
|
||||
const [finalForm, setFinalForm] = useState(0);
|
||||
const flowMsgs = useRef(null);
|
||||
const toast = useRef(null);
|
||||
|
||||
const getBandoId = () => {
|
||||
const parsed = parseInt(id)
|
||||
@@ -38,7 +43,7 @@ const BandoFlowEdit = () => {
|
||||
|
||||
const goBack = () => {
|
||||
const bandoId = getBandoId();
|
||||
navigate(`/tenders/${bandoId}/forms`);
|
||||
navigate(`/bandi/${bandoId}/forms`);
|
||||
}
|
||||
|
||||
const confirmDelete = (event) => {
|
||||
@@ -55,9 +60,15 @@ const BandoFlowEdit = () => {
|
||||
};
|
||||
|
||||
const doDelete = () => {
|
||||
if (flowMsgs.current) {
|
||||
flowMsgs.current.clear();
|
||||
}
|
||||
storeSet.main.flowData([]);
|
||||
storeSet.main.flowEdges([]);
|
||||
setInitialForm(0);
|
||||
setMainFieldOptions([]);
|
||||
setMainField('');
|
||||
setIsFlowAllowed(false);
|
||||
setFinalForm(0);
|
||||
}
|
||||
|
||||
@@ -94,15 +105,12 @@ const BandoFlowEdit = () => {
|
||||
|
||||
const getFlowCreateCallback = (data) => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
if (flowMsgs.current) {
|
||||
flowMsgs.current.show([
|
||||
{
|
||||
id: '99',
|
||||
sticky: true, severity: 'success', summary: '',
|
||||
detail: __('Flow è salvato.', 'gepafin'),
|
||||
closable: false
|
||||
}
|
||||
]);
|
||||
if (toast.current) {
|
||||
toast.current.show({
|
||||
severity: 'success',
|
||||
summary: '',
|
||||
detail: __('Il flusso è stato aggiornato corretamente!', 'gepafin')
|
||||
});
|
||||
}
|
||||
}
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
@@ -117,7 +125,7 @@ const BandoFlowEdit = () => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
const formOptions = data.data.map(o => ({ label: o.label, value: o.id }))
|
||||
storeSet.main.flowForms(data.data);
|
||||
setFormOptions(formOptions);
|
||||
setFormOptions([{label: '', value: ''}, ...formOptions]);
|
||||
}
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
@@ -133,7 +141,11 @@ const BandoFlowEdit = () => {
|
||||
storeSet.main.flowEdges(data.data.flowEdges);
|
||||
setInitialForm(data.data.initialForm);
|
||||
setFinalForm(data.data.finalForm);
|
||||
const flowDataItem = head(data.data.flowData.filter(o => !isEmpty(o.chosenField)));
|
||||
|
||||
if (flowDataItem) {
|
||||
setMainField(flowDataItem.chosenField);
|
||||
}
|
||||
}
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
@@ -143,6 +155,66 @@ const BandoFlowEdit = () => {
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const flowForms = storeGet.main.flowForms();
|
||||
const form = head(flowForms.filter(o => String(o.id) === String(initialForm)))
|
||||
const field = form ? head(form.content.filter(o => o.id === mainField)) : null;
|
||||
let options = [];
|
||||
|
||||
if (field) {
|
||||
options = head(field.settings.filter(o => o.name === 'options'));
|
||||
}
|
||||
|
||||
if (field && options.value && options.value.length === flowForms.length - 2) {
|
||||
setIsFlowAllowed(true);
|
||||
} else {
|
||||
setIsFlowAllowed(false);
|
||||
let msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.';
|
||||
|
||||
if (flowForms.length - 2 === 1) {
|
||||
msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzione.';
|
||||
}
|
||||
|
||||
if (flowMsgs.current && !isEmpty(mainField)) {
|
||||
flowMsgs.current.clear();
|
||||
flowMsgs.current.show([
|
||||
{
|
||||
id: '1',
|
||||
sticky: true, severity: 'error', summary: '',
|
||||
detail: sprintf(
|
||||
__(msg, 'gepafin'),
|
||||
flowForms.length - 2
|
||||
),
|
||||
closable: false
|
||||
}
|
||||
]);
|
||||
}
|
||||
}
|
||||
}, [mainField]);
|
||||
|
||||
useEffect(() => {
|
||||
setMainField('');
|
||||
setMainFieldOptions([]);
|
||||
const flowForms = storeGet.main.flowForms();
|
||||
const form = head(flowForms.filter(o => String(o.id) === String(initialForm)))
|
||||
const relevantFields = form
|
||||
? form.content
|
||||
.filter(o => ['radio', 'select'].includes(o.name))
|
||||
.map(o => {
|
||||
const label = head(o.settings.filter(o => o.name === 'label'));
|
||||
return { value: o.id, label: label ? label.value : o.label };
|
||||
})
|
||||
: [];
|
||||
setMainFieldOptions([
|
||||
{label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: ''},
|
||||
...relevantFields]
|
||||
);
|
||||
|
||||
if (flowForms.length === 2) {
|
||||
setIsFlowAllowed(true)
|
||||
}
|
||||
}, [initialForm]);
|
||||
|
||||
useEffect(() => {
|
||||
const bandoId = getBandoId();
|
||||
storeSet.main.setAsyncRequest();
|
||||
@@ -161,6 +233,8 @@ const BandoFlowEdit = () => {
|
||||
closable: false
|
||||
}
|
||||
]);
|
||||
} else {
|
||||
flowMsgs.current.clear();
|
||||
}
|
||||
}, [forms]);
|
||||
|
||||
@@ -170,7 +244,7 @@ const BandoFlowEdit = () => {
|
||||
storeSet.main.flowData([]);
|
||||
storeSet.main.flowEdges([]);
|
||||
}
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="appPage">
|
||||
@@ -184,28 +258,42 @@ const BandoFlowEdit = () => {
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
<div className="appPageSection">
|
||||
<div className="row">
|
||||
<div className="appForm__cols">
|
||||
<div className="appForm__field">
|
||||
<label htmlFor="initialForm">{__('Scegli form iniziale', 'gepafin')}</label>
|
||||
<Dropdown
|
||||
id="initialForm"
|
||||
value={initialForm}
|
||||
onChange={(e) => updateInitialForm(e.value)}
|
||||
optionDisabled={(opt) => finalForm === opt.value}
|
||||
optionDisabled={(opt) => finalForm === opt.value || isEmpty(opt.value)}
|
||||
options={formOptions}
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder={__('Scegli il form', 'gepafin')}/>
|
||||
</div>
|
||||
|
||||
{forms.length > 2
|
||||
{forms.length > 2 && initialForm && mainFieldOptions
|
||||
? <div className="appForm__field">
|
||||
<label htmlFor="mainField">{__('Scegli il campo principale', 'gepafin')}</label>
|
||||
<Dropdown
|
||||
id="mainField"
|
||||
value={mainField}
|
||||
onChange={(e) => setMainField(e.value)}
|
||||
optionDisabled={(opt) => isEmpty(opt.value)}
|
||||
options={mainFieldOptions}
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder={__('Scegli il campo', 'gepafin')}/>
|
||||
</div> : null}
|
||||
|
||||
{forms.length > 2 && mainField && isFlowAllowed || forms.length === 2 && isFlowAllowed
|
||||
? <div className="appForm__field">
|
||||
<label htmlFor="finalForm">{__('Scegli form finale', 'gepafin')}</label>
|
||||
<Dropdown
|
||||
id="finalForm"
|
||||
value={finalForm}
|
||||
onChange={(e) => setFinalForm(e.value)}
|
||||
optionDisabled={(opt) => initialForm === opt.value}
|
||||
optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)}
|
||||
options={formOptions}
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
@@ -217,13 +305,14 @@ const BandoFlowEdit = () => {
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
<div className="appPageSection">
|
||||
{forms.length >= 2
|
||||
? <FlowBuilder initialForm={initialForm} finalForm={finalForm}/>
|
||||
: <Messages ref={flowMsgs}/>}
|
||||
<Messages ref={flowMsgs}/>
|
||||
{forms.length >= 2 && isFlowAllowed
|
||||
? <FlowBuilder initialForm={initialForm} finalForm={finalForm} mainField={mainField}/> : null}
|
||||
</div>
|
||||
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
<Toast ref={toast}/>
|
||||
<div className="appPageSection">
|
||||
<div className="appPageSection__actions">
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user