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

- added confirmation dialog;

Browse Source 
- refactored form validation;
This commit is contained in:
Vitalii Kiiko
2024-10-11 16:22:39 +02:00
parent bbb599add3
commit 68f2d756ce
7 changed files with 159 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Applications/index.js
View File

@@ -36,12 +36,12 @@ const Applications = () => {
<Button
onClick={gotToBandiDisponibili}
label={__('Bandi disponibili', 'gepafin')} icon="pi pi-bookmark" iconPos="right"/>
<Button
{/*<Button
disabled={true}
outlined
onClick={() => {
}}
label={__('Contatta assistenza', 'gepafin')} icon="pi pi-envelope" iconPos="right"/>
label={__('Contatta assistenza', 'gepafin')} icon="pi pi-envelope" iconPos="right"/>*/}
</div>
</div>
</div>

4
src/pages/BandiBeneficiario/components/AllBandiAccordion/index.js
View File

@@ -146,8 +146,8 @@ const AllBandiAccordion = () => {
<Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
style={{ width: '120px' }} body={statusBodyTemplate} filter sortable
filterElement={statusFilterTemplate}/>
<Column header={__('Azioni', 'gepafin')}
body={actionsBodyTemplate}/>
{/*<Column header={__('Azioni', 'gepafin')}
body={actionsBodyTemplate}/>*/}
</DataTable>
</div>
)

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

@@ -32,6 +32,8 @@ import FormField from '../../components/FormField';
import { Toast } from 'primereact/toast';
import { Messages } from 'primereact/messages';
import ApplicationSteps from './ApplicationSteps';
import BlockingOverlay from '../../components/BlockingOverlay';
import { Dialog } from 'primereact/dialog';
const BandoApplication = () => {
const { id } = useParams();
@@ -41,6 +43,7 @@ const BandoApplication = () => {
const [formId, setFormId] = useState('');
const [totalSteps, setTotalSteps] = useState(0);
const [completedSteps, setCompletedSteps] = useState(0);
const [visibleConfirmation, setVisibleConfirmation] = useState(false);
const [applicationStatus, setApplicationStatus] = useState('');
const [activeStep, setActiveStep] = useState(1);
const isAsyncRequest = useStore().main.isAsyncRequest();
@@ -77,6 +80,7 @@ const BandoApplication = () => {
const onSubmit = () => {
const applId = getApplicationId();
storeSet.main.setAsyncRequest();
formMsgs.current.clear();
ApplicationService.updateStatusApplication(applId, {}, submitApplicationCallback, errSubmitApplicationCallback, [
['status', 'SUBMIT']
@@ -85,16 +89,17 @@ const BandoApplication = () => {
const submitApplicationCallback = (data) => {
if (data.status === 'SUCCESS') {
if (toast.current) {
/*if (toast.current) {
toast.current.show({
severity: 'success',
summary: '',
detail: __('La domanda è stata presentata!', 'gepafin')
});
}
}*/
if (data.data.applicationStatus) {
setApplicationStatus(data.data.applicationStatus);
setApplicationStatus(data.data.status);
}
setVisibleConfirmation(true);
}
storeSet.main.unsetAsyncRequest();
}
@@ -123,6 +128,22 @@ const BandoApplication = () => {
}
]);
}
} else if (data.status === 'BAD_REQUEST') {
if (formMsgs.current) {
formMsgs.current.show([
{
id: '99',
sticky: true, severity: 'error', summary: '',
detail: data.message,
closable: true
}
]);
toast.current.show({
severity: 'error',
summary: '',
detail: data.message
});
}
} else {
set404FromErrorResponse(data);
}
@@ -286,6 +307,36 @@ const BandoApplication = () => {
set404FromErrorResponse(data);
}
const actionBtns = <div className="appPageSection__actions">
{activeStep > 1 && activeStep <= totalSteps
? <Button
type="button"
disabled={'SUBMIT' === applicationStatus}
onClick={goBackward}
label={__('Vai indietro', 'gepafin')}
icon="pi pi-arrow-left"
iconPos="left"/> : null}
<Button
type="button"
disabled={isAsyncRequest || 'SUBMIT' === applicationStatus}
onClick={saveDraft}
outlined
label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
{activeStep < totalSteps
? <Button
type="button"
disabled={'SUBMIT' === applicationStatus}
onClick={goForward}
label={__('Vai avanti', 'gepafin')}
icon="pi pi-arrow-right"
iconPos="right"/> : null}
<Button
disabled={'SUBMIT' === applicationStatus}
label={__('Invia', 'gepafin')}
icon="pi pi-check"
iconPos="right"/>
</div>
useEffect(() => {
if (formInitialData) {
reset();
@@ -321,9 +372,96 @@ const BandoApplication = () => {
<Messages ref={formMsgs}/>
<Toast ref={toast}/>
{!isAsyncRequest
? <div className="appPage__content">
<Dialog header={__('Conferma', 'gepafin')}
visible={visibleConfirmation}
style={{ width: '50vw' }}
onHide={() => {if (!visibleConfirmation) return; setVisibleConfirmation(false); }}>
<p>
{__('Grazie, la tua domanda è stata inviata correttamente. Entro 24 ore riceverai una pec con data, ora e numero di protocollo.', 'gepafin')}
</p>
</Dialog>
<div className="appPage__content">
<BlockingOverlay shouldDisplay={isAsyncRequest}/>
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
<div className="appPageSection">
{actionBtns}
</div>
{formData.map(o => {
const label = head(o.settings.filter(o => o.name === 'label'));
const text = head(o.settings.filter(o => o.name === 'text'));
const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
const options = head(o.settings.filter(o => o.name === 'options'));
const tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
const step = head(o.settings.filter(o => o.name === 'step'));
const mime = head(o.settings.filter(o => o.name === 'mime'));
let mimeValue = '';
if (mime) {
mimeValue = mime.value.map(o => o.code ? o.code : o.ext);
}
const validations = Object.keys(o.validators).reduce((acc, cur) => {
if (o.validators[cur]) {
if (['min', 'max', 'minLength', 'maxLength', 'maxSize'].includes(cur)) {
acc[cur] = parseInt(o.validators[cur]);
} else if ('pattern' === cur) {
acc[cur] = new RegExp(o.validators[cur]);
} else if ('isRequired' === cur) {
//acc[cur] = o.validators[cur];
acc['required'] = true;
} else if ('custom' === cur && validationFns[o.validators[cur]]) {
if (!acc.validate) {
acc.validate = {};
}
acc.validate[o.validators[cur]] = validationFns[o.validators[cur]];
}
}
return acc;
}, {});
//console.log('validations', validations, o.name)
return ['paragraph'].includes(o.name) && text
? <div className="appForm__content" key={o.id}>{renderHtmlContent(text.value)}</div>
: <FormField
key={o.id}
type={o.name}
fieldName={o.id}
label={label ? label.value : ''}
placeholder={placeholder ? placeholder.value : ''}
control={control}
register={register}
errors={errors}
defaultValue={values[o.id] ? values[o.id] : ''}
maxFractionDigits={step ? step.value : 0}
accept={mimeValue}
config={validations}
options={options ? options.value : []}
setDataFn={setValue}
saveFormCallback={saveDraft}
sourceId={getApplicationId()}
useGrouping={false}
tableColumns={tableColumns ? tableColumns.value : {}}
/>
})}
<div className="appPage__spacer"></div>
<div className="appPageSection__hr">
<span>{__('Azioni rapide', 'gepafin')}</span>
</div>
<div className="appPageSection">
{actionBtns}
</div>
</form>
</div>
{/*{!isAsyncRequest
? <div className="appPage__content">
<form className="appForm" ref={formRef} onSubmit={handleSubmit(onSubmit)}>
<div className="appPageSection">
<div className="appPageSection__actions">
{activeStep > 1 && activeStep <= totalSteps
@@ -357,8 +495,6 @@ const BandoApplication = () => {
</div>
</div>
{formInitialData
? formData.map(o => {
const label = head(o.settings.filter(o => o.name === 'label'));
@@ -387,12 +523,13 @@ const BandoApplication = () => {
if (!acc.validate) {
acc.validate = {};
}
acc.validate[cur] = validationFns[o.validators[cur]];
acc.validate[o.validators[cur]] = validationFns[o.validators[cur]];
}
}
return acc;
}, {});
//console.log('validations', validations, o.name)
return ['paragraph'].includes(o.name) && text
? <div className="appForm__content" key={o.id}>{renderHtmlContent(text.value)}</div>
@@ -467,7 +604,7 @@ const BandoApplication = () => {
<Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
<Skeleton width="100%" height="4rem"></Skeleton>
</>}
</>}*/}
</div>
)

4
src/pages/BandoForms/index.js
View File

@@ -99,7 +99,7 @@ const BandoForms = () => {
<div className="appPage__content">
<div className="appPageSection__withBorder disabled">
{/*<div className="appPageSection__withBorder disabled">
<h2>{__('Usa un template', 'gepafin')}</h2>
<div className="row">
<p>{__('Scegli tra i template predefiniti e personalizzali', 'gepafin')}</p>
@@ -119,7 +119,7 @@ const BandoForms = () => {
label={__('Crea', 'gepafin')}
icon="pi pi-plus" iconPos="right"/>
</div>
</div>
</div>*/}
<div className="appPageSection__withBorder">
<h2>{__('Crea un nuovo Form da Zero', 'gepafin')}</h2>

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

@@ -237,14 +237,14 @@ const BandoView = () => {
onClick={() => {}}
label={__('Presenta Domanda', 'gepafin')}
icon="pi pi-save" iconPos="right"/>
<Button
{/*<Button
type="button"
outlined
rounded
disabled={true}
onClick={() => {}}
label={__('Aggiungi a Preferiti', 'gepafin')}
icon="pi pi-heart" iconPos="left"/>
label={__('Aggiungi a preferiti', 'gepafin')}
icon="pi pi-heart" iconPos="left"/>*/}
</div>
</div>

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

@@ -372,14 +372,14 @@ const BandoViewBeneficiario = () => {
onClick={submitApplication}
label={__('Presenta Domanda', 'gepafin')}
icon="pi pi-save" iconPos="right"/>
<Button
{/*<Button
type="button"
outlined
rounded
disabled={true}
onClick={saveToFavourites}
label={__('Aggiungi a Preferiti', 'gepafin')}
icon="pi pi-heart" iconPos="left"/>
label={__('Aggiungi a preferiti', 'gepafin')}
icon="pi pi-heart" iconPos="left"/>*/}
</div>
</div>

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

@@ -11,7 +11,7 @@ const DashboardBeneficiario = () => {
const navigate = useNavigate();
const goToAllSubmissions = () => {
navigate('/bids');
navigate('/bandi');
}
return(