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

- added registartion page;

Browse Source 
- 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
2024-09-23 10:05:43 +02:00
parent cf149485e0
commit bbf117eb9b
58 changed files with 1238 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/BandoEdit/components/BandoEditFormActions/index.js
View File

@@ -5,7 +5,7 @@ import { isNil } from 'ramda';
// components
import { Button } from 'primereact/button';
const BandoEditFormActions = ({ id, openPreview, openPreviewEvaluation }) => {
const BandoEditFormActions = ({ id, openPreview, openPreviewEvaluation, status }) => {
return (
<div className="appPageSection">
<div className="appPageSection__actions">

56
src/pages/BandoEdit/components/BandoEditFormStep1/index.js
View File

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { isEmpty, isNil, is } from 'ramda';
import { klona } from 'klona';
import { TZDate } from '@date-fns/tz';
// components
import FormField from '../../../../components/FormField';
@@ -20,7 +21,7 @@ import LookupdataService from '../../../../service/lookupdata-service';
// store
import { storeSet, useStore } from '../../../../store';
const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors }, ref) {
const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, status }, ref) {
const navigate = useNavigate();
const isAsyncRequest = useStore().main.isAsyncRequest();
const [aimedToOptions, setAimedToOptions] = useState([]);
@@ -34,8 +35,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
register,
trigger,
getValues,
clearErrors,
reset
clearErrors
} = useForm({
defaultValues: useMemo(() => {
return formInitialData;
@@ -46,9 +46,17 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
const onSubmit = (formData) => {
if (!isNil(formData.dates) && formData.dates.length) {
formData.dates = formData.dates.map(v => is(String, v) ? v : v.toISOString());
formData.dates = formData.dates.map(v => {
if (is(String, v)) {
return v;
} else {
const tzAwareDate = new TZDate(v, 'Europe/Berlin');
return tzAwareDate.toISOString().substring(0, 19);
}
});
}
storeSet.main.setAsyncRequest();
if (!formData.id) {
BandoService.createBando(formData, createCallback, errCreateCallback);
} else {
@@ -57,6 +65,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
};
const createCallback = (data) => {
storeSet.main.unsetAsyncRequest();
if (data.status === 'SUCCESS') {
toast.current.show({
severity: 'success',
@@ -65,24 +74,24 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
});
const values = getValues();
if (!values.id && data.data.id) {
navigate(`/tenders/${data.data.id}`);
navigate(`/bandi/${data.data.id}`);
} else {
setFormInitialData(data.data);
reset();
}
}
}
const errCreateCallback = (data) => {
console.log('errCreateCallback', data);
storeSet.main.unsetAsyncRequest();
}
const openPreview = () => {
navigate(`/tenders/${values.id}/preview`);
navigate(`/bandi/${values.id}/preview`);
}
const openPreviewEvaluation = () => {
navigate(`/tenders/${values.id}/preview-evaluation`);
navigate(`/bandi/${values.id}/preview-evaluation`);
}
const lookupdataCallback = (data) => {
@@ -118,6 +127,10 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
storeSet.main.unsetAsyncRequest();
}
const shouldDisableField = () => {
return values.status === 'PUBLISH'
}
useImperativeHandle(
ref,
() => {
@@ -144,14 +157,10 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
if (!isNil(formInitialData.dates) && formInitialData.dates.length) {
newFormData.dates = formInitialData.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
}
reset(newFormData);
Object.keys(newFormData).map(v => setValue(v, newFormData[v]));
}, [formInitialData]);
useEffect(() => {
if (isAsyncRequest !== 0) {
return;
}
trigger().then(() => clearErrors());
LookupdataService.getItems(lookupdataCallback, errLookupdataCallback, [['type', ['AIMED_TO', 'FAQ']]]);
@@ -165,6 +174,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
<UnsavedChangesDetector getValuesFn={getValues}/>
<FormField
type="switch"
disabled={shouldDisableField()}
fieldName="confidi"
label={__('Bando Confidi', 'gepafin')}
control={control}
@@ -176,6 +186,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
<FormField
type="textinput"
disabled={shouldDisableField()}
fieldName="name"
label={__('Titolo del Bando', 'gepafin')}
control={control}
@@ -185,7 +196,8 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
/>
<FormField
type="textarea"
type="wysiwyg"
disabled={shouldDisableField()}
fieldName="descriptionShort"
label={__('Descrizione breve', 'gepafin')}
control={control}
@@ -197,7 +209,8 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
/>
<FormField
type="textarea"
type="wysiwyg"
disabled={shouldDisableField()}
fieldName="descriptionLong"
label={__('Descrizione completa', 'gepafin')}
control={control}
@@ -213,6 +226,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
<FormFieldRepeater
data={values['aimedTo']}
disabled={shouldDisableField()}
setDataFn={setValue}
fieldName="aimedTo"
options={aimedToOptions}
@@ -221,9 +235,8 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
trigger={trigger}
config={{
validate: {
minOneItem: v => !isEmpty(v) || __('Almeno 1 tipo di destinatari', 'gepafin'),
noEmptyValue: v => v
.filter(o => isEmpty(o.value)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
minOneItem: v => (v && !isEmpty(v)) || __('Almeno 1 tipo di destinatari', 'gepafin'),
noEmptyValue: v => v.filter(o => isEmpty(o.value)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
}
}}
label={<>{__('A chi si rivolge', 'gepafin')}*
@@ -232,6 +245,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
<FormField
type="textarea"
disabled={shouldDisableField()}
fieldName="documentationRequested"
label={__('Documentazione richiesta', 'gepafin')}
control={control}
@@ -244,6 +258,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
<FormField
type="datepickerrange"
disabled={shouldDisableField()}
fieldName="dates"
label={__('Dati di pubblicazione', 'gepafin')}
control={control}
@@ -253,9 +268,10 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
/*minDate={minDateStart}*/
/>
<div className="appForm__twoCols">
<div className="appForm__cols">
<FormField
type="numberinput"
disabled={shouldDisableField()}
fieldName="amount"
label={__('Dotazione del Bando', 'gepafin')}
control={control}
@@ -268,6 +284,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
<FormField
type="numberinput"
disabled={shouldDisableField()}
fieldName="amountMax"
label={__('Importo massimo per Progetto', 'gepafin')}
control={control}
@@ -304,6 +321,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
<Toast ref={toast} />
<BandoEditFormActions
id={values.id}
status={status}
openPreview={openPreview}
openPreviewEvaluation={openPreviewEvaluation}/>
</form>

34
src/pages/BandoEdit/components/BandoEditFormStep2/index.js
View File

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { is, isEmpty, isNil } from 'ramda';
import { klona } from 'klona';
import { TZDate } from '@date-fns/tz';
// components
import FormField from '../../../../components/FormField';
@@ -20,7 +21,7 @@ import LookupdataService from '../../../../service/lookupdata-service';
// store
import { storeSet } from '../../../../store';
const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors }, ref) {
const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors, status }, ref) {
const navigate = useNavigate();
const [criteriaOptions, setCriteriaOptions] = useState([]);
const [checklistOptions, setChecklistOptions] = useState([]);
@@ -33,8 +34,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
register,
trigger,
getValues,
clearErrors,
reset
clearErrors
} = useForm({
defaultValues: useMemo(() => {
return formInitialData;
@@ -46,7 +46,14 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
const onSubmit = (formData) => {
if (!isNil(formData.dates) && formData.dates.length) {
formData.dates = formData.dates.map(v => is(String, v) ? v : v.toISOString());
formData.dates = formData.dates.map(v => {
if (is(String, v)) {
return v;
} else {
const tzAwareDate = new TZDate(v, 'Europe/Berlin');
return tzAwareDate.toISOString().substring(0, 19);
}
});
}
const forSubmit = Object.keys(formData).reduce((acc, cur) => {
@@ -56,10 +63,12 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
return acc;
}, {});
storeSet.main.setAsyncRequest();
BandoService.updateBandoStep2(formData.id, forSubmit, createCallback, errCreateCallback);
};
const createCallback = (data) => {
storeSet.main.unsetAsyncRequest();
if (data.status === 'SUCCESS') {
toast.current.show({
severity: 'success',
@@ -68,11 +77,11 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
});
const newFormData = {...formInitialData, ...data.data};
setFormInitialData(newFormData);
reset(newFormData);
}
}
const errCreateCallback = (data) => {
storeSet.main.unsetAsyncRequest();
console.log('errCreateCallback', data);
}
@@ -109,11 +118,11 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
}
const openPreview = () => {
navigate(`/tenders/${values.id}/preview`);
navigate(`/bandi/${values.id}/preview`);
}
const openPreviewEvaluation = () => {
navigate(`/tenders/${values.id}/preview-evaluation`);
navigate(`/bandi/${values.id}/preview-evaluation`);
}
useImperativeHandle(
@@ -142,7 +151,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
if (!isNil(formInitialData.dates) && formInitialData.dates.length) {
newFormData.dates = formInitialData.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
}
reset(newFormData);
Object.keys(newFormData).map(v => setValue(v, newFormData[v]));
}, [formInitialData]);
useEffect(() => {
@@ -154,11 +163,16 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
}
}, []);
const shouldDisableField = () => {
return values.status === 'PUBLISH'
}
return (
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
<UnsavedChangesDetector getValuesFn={getValues}/>
<FormFieldRepeaterCriteria
data={values}
disabled={shouldDisableField()}
setDataFn={setValue}
fieldName="criteria"
options={criteriaOptions}
@@ -177,6 +191,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
<FormField
type="fileuploadasync"
disabled={shouldDisableField()}
setDataFn={setValue}
fieldName="docs"
label={__('Documentazione', 'gepafin')}
@@ -195,6 +210,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
<FormField
type="fileuploadasync"
disabled={shouldDisableField()}
setDataFn={setValue}
fieldName="images"
label={__('Immagine del Bando', 'gepafin')}
@@ -209,6 +225,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
<FormFieldRepeater
data={values['checkList']}
disabled={shouldDisableField()}
setDataFn={setValue}
fieldName="checkList"
options={checklistOptions}
@@ -234,6 +251,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
<Toast ref={toast} />
<BandoEditFormActions
id={values.id}
status={status}
openPreview={openPreview}
openPreviewEvaluation={openPreviewEvaluation}/>
</form>

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

@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { is, isNil } from 'ramda';
import { is, isNil, isEmpty } from 'ramda';
// store
import { storeSet, useStore } from '../../store';
@@ -93,11 +93,11 @@ const BandoEdit = () => {
}
const openBandoFormManagement = () => {
navigate(`/tenders/${id}/forms`);
navigate(`/bandi/${id}/forms`);
}
const openBandoFlowManagement = () => {
navigate(`/tenders/${id}/flow`);
navigate(`/bandi/${id}/flow`);
}
const validateBando = () => {
@@ -108,6 +108,7 @@ const BandoEdit = () => {
const validateCallback = (data) => {
if (data.status === 'SUCCESS') {
setData({...data, status: data.data.status});
if (bandoMsgs.current) {
bandoMsgs.current.show([
{
@@ -123,7 +124,19 @@ const BandoEdit = () => {
}
const errValidateCallback = (data) => {
standardErrCallback(data);
if (data.status === 'VALIDATION_ERROR') {
storeSet.main.unsetAsyncRequest();
if (bandoMsgs.current) {
bandoMsgs.current.show(data.data.map((v, i) => ({
id: i,
sticky: true, severity: 'error', summary: '',
detail: v,
closable: false
})));
}
} else {
standardErrCallback(data);
}
}
const publishBando = () => {
@@ -144,6 +157,7 @@ const BandoEdit = () => {
}
]);
}
setData(data.data);
}
storeSet.main.unsetAsyncRequest();
}
@@ -276,23 +290,24 @@ const BandoEdit = () => {
icon="pi pi-check"
iconPos="right"/>
</div> : null*/}
{!isAsyncRequest
{!isEmpty(data)
? <Steps
model={stepItems}
activeIndex={activeStep}
readOnly={false}/>
: <BlockingOverlay shouldDisplay={isAsyncRequest}/>}
: null}
<BlockingOverlay shouldDisplay={isAsyncRequest}/>
<div className="appPage__spacer"></div>
<Messages ref={bandoMsgs}/>
{!isAsyncRequest
{!isEmpty(data)
? <>
{activeStep === 0
? <BandoEditFormStep1 initialData={data} ref={formRef}/> : null}
? <BandoEditFormStep1 initialData={data} ref={formRef} status={data.status}/> : null}
{activeStep === 1
? <BandoEditFormStep2 initialData={data} ref={formRef}/> : null}
? <BandoEditFormStep2 initialData={data} ref={formRef} status={data.status}/> : null}
<div className="appPageSection">
<h2>{__('Crea o modifica il Form compilabile dal Beneficiario', 'gepafin')}</h2>
@@ -300,11 +315,13 @@ const BandoEdit = () => {
<div className="row">
<Button
type="button"
outlined={data.status === 'PUBLISH'}
onClick={openBandoFormManagement}
label={__('Crea/modifica form', 'gepafin')}/>
<Button
type="button"
outlined={data.status === 'PUBLISH'}
onClick={openBandoFlowManagement}
icon="pi pi-sitemap"
iconPos="right"