- added login page;
- added file upload; - added faq item edit modal;
This commit is contained in:
Vitalii Kiiko
32
src/pages/BandoEdit/components/BandoEditFormActions/index.js
Normal file
32
src/pages/BandoEdit/components/BandoEditFormActions/index.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
// components
|
||||
import { Button } from 'primereact/button';
|
||||
|
||||
const BandoEditFormActions = ({ openPreview, openPreviewEvaluation }) => {
|
||||
return (
|
||||
<div className="appPageSection">
|
||||
<div className="appPageSection__actions">
|
||||
<Button
|
||||
type="submit"
|
||||
label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={true}
|
||||
outlined
|
||||
onClick={openPreview}
|
||||
label={__('Anteprima beneficiario', 'gepafin')} icon="pi pi-eye" iconPos="right"/>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={true}
|
||||
outlined
|
||||
onClick={openPreviewEvaluation}
|
||||
label={__('Anteprima pre-istruttoria', 'gepafin')} icon="pi pi-eye"
|
||||
iconPos="right"/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BandoEditFormActions;
|
||||
209
src/pages/BandoEdit/components/BandoEditFormStep1/index.js
Normal file
209
src/pages/BandoEdit/components/BandoEditFormStep1/index.js
Normal file
@@ -0,0 +1,209 @@
|
||||
import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { isEmpty, isNil, is } from 'ramda';
|
||||
|
||||
// components
|
||||
import FormField from '../../../../components/FormField';
|
||||
import FormFieldRepeater from '../../../../components/FormFieldRepeater';
|
||||
import FormFieldRepeaterFaq from '../../../../components/FormFieldRepeaterFaq';
|
||||
import BandoEditFormActions from '../BandoEditFormActions';
|
||||
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
|
||||
|
||||
const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors }, ref) {
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors, isValid },
|
||||
setValue,
|
||||
register,
|
||||
trigger,
|
||||
getValues,
|
||||
clearErrors
|
||||
} = useForm({defaultValues: initialData, mode: 'onChange'});
|
||||
const values = getValues();
|
||||
let minDateStart = new Date();
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
if (!isNil(formData.dates) && formData.dates.length) {
|
||||
formData.dates = formData.dates.map(v => is(String, v) ? v : v.toISOString());
|
||||
}
|
||||
console.log('onSubmit', formData);
|
||||
};
|
||||
|
||||
// TODO temp data
|
||||
const exampleOfAimedToOptions = [{ id: 11, value: 'PMI con sede in Umbria' }];
|
||||
const exampleOfFaqOptions = [
|
||||
{ id: 2, question: 'Question 1?', answer: 'Lorem ipsum dolor', visible: true }
|
||||
];
|
||||
// end of temp data
|
||||
|
||||
const openPreview = () => {
|
||||
navigate('/bandi/preview/11');
|
||||
}
|
||||
|
||||
const openPreviewEvaluation = () => {
|
||||
navigate('/bandi/preview-evaluation/11');
|
||||
}
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => {
|
||||
return {
|
||||
isFormValid: () => {
|
||||
return isValid;
|
||||
},
|
||||
getErrors: () => {
|
||||
return errors;
|
||||
}
|
||||
}
|
||||
}, [errors, isValid]);
|
||||
|
||||
useEffect(() => {
|
||||
trigger().then(() => clearErrors());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<UnsavedChangesDetector initialData={values} getValuesFn={getValues}/>
|
||||
<FormField
|
||||
type="switch"
|
||||
fieldName="confidi"
|
||||
label={__('Bando Confidi', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={values['confidi']}
|
||||
onLabel={__('Si', 'gepafin')}
|
||||
offLabel={__('No', 'gepafin')}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textinput"
|
||||
fieldName="name"
|
||||
label={__('Titolo del Bando', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={values['name']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textarea"
|
||||
fieldName="descriptionShort"
|
||||
label={__('Descrizione breve', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={values['descriptionShort']}
|
||||
config={{
|
||||
required: __('È obbligatorio', 'gepafin')
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textarea"
|
||||
fieldName="descriptionLong"
|
||||
label={__('Descrizione completa', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={values['descriptionLong']}
|
||||
config={{
|
||||
required: __('È obbligatorio', 'gepafin'),
|
||||
minLength: 200
|
||||
}}
|
||||
infoText={__('Almeno 200 caratteri', 'gepafin')}
|
||||
/>
|
||||
|
||||
<FormFieldRepeater
|
||||
data={values}
|
||||
setDataFn={setValue}
|
||||
fieldName="aimedTo"
|
||||
options={exampleOfAimedToOptions}
|
||||
errors={errors}
|
||||
register={register}
|
||||
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')
|
||||
}
|
||||
}}
|
||||
label={<>{__('A chi si rivolge', 'gepafin')}*
|
||||
<span>{__('(almeno 1 tipo di destinatari)', 'gepafin')}</span></>}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textarea"
|
||||
fieldName="documentationRequested"
|
||||
label={__('Documentazione richiesta', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={values['documentationRequested']}
|
||||
config={{
|
||||
required: __('È obbligatorio', 'gepafin')
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="datepickerrange"
|
||||
fieldName="dates"
|
||||
label={__('Dati di pubblicazione', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={values['dates']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
minDate={minDateStart}
|
||||
/>
|
||||
|
||||
<div className="appForm__twoCols">
|
||||
<FormField
|
||||
type="numberinput"
|
||||
fieldName="amount"
|
||||
label={__('Dotazione del Bando', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={values['amount']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
inputgroup={true}
|
||||
icon="€"
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="numberinput"
|
||||
fieldName="amountMax"
|
||||
label={__('Importo massimo per Progetto', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={values['amountMax']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
inputgroup={true}
|
||||
icon="€"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormFieldRepeaterFaq
|
||||
data={values}
|
||||
setDataFn={setValue}
|
||||
fieldName="faq"
|
||||
options={exampleOfFaqOptions}
|
||||
errors={errors}
|
||||
register={register}
|
||||
trigger={trigger}
|
||||
config={{
|
||||
validate: {
|
||||
noEmptyValue: v => v
|
||||
.filter(o => isEmpty(o.question) || isEmpty(o.answer)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
|
||||
}
|
||||
}}
|
||||
label={__('FAQ', 'gepafin')}/>
|
||||
|
||||
<BandoEditFormActions
|
||||
openPreview={openPreview}
|
||||
openPreviewEvaluation={openPreviewEvaluation}/>
|
||||
</form>
|
||||
)
|
||||
})
|
||||
|
||||
export default BandoEditFormStep1;
|
||||
146
src/pages/BandoEdit/components/BandoEditFormStep2/index.js
Normal file
146
src/pages/BandoEdit/components/BandoEditFormStep2/index.js
Normal file
@@ -0,0 +1,146 @@
|
||||
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { is, isEmpty, isNil } from 'ramda';
|
||||
|
||||
// components
|
||||
import FormField from '../../../../components/FormField';
|
||||
import FormFieldRepeater from '../../../../components/FormFieldRepeater';
|
||||
import FormFieldRepeaterCriteria from '../../../../components/FormFieldRepeaterCriteria';
|
||||
import BandoEditFormActions from '../BandoEditFormActions';
|
||||
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
|
||||
|
||||
const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors }, ref) {
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors, isValid },
|
||||
setValue,
|
||||
register,
|
||||
trigger,
|
||||
getValues,
|
||||
clearErrors
|
||||
} = useForm({defaultValues: initialData, mode: 'onChange'});
|
||||
const values = getValues();
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
if (!isNil(formData.dates) && formData.dates.length) {
|
||||
formData.dates = formData.dates.map(v => is(String, v) ? v : v.toISOString());
|
||||
}
|
||||
console.log('onSubmit', formData);
|
||||
};
|
||||
|
||||
// TODO temp data
|
||||
const exampleOfCriteriaOptions = [
|
||||
{ id: 15, value: 'Innovatività del progetto', score: 9 },
|
||||
{ id: 16, value: 'Impatto sulla competitività dell\'azienda', score: 3 },
|
||||
{ id: 17, value: 'Sostenibilità economico-finanziaria', score: 5 }
|
||||
];
|
||||
const exampleOfChecklistOptions = [
|
||||
{ id: 15, value: 'Innovatività del progetto' }
|
||||
];
|
||||
// end of temp data
|
||||
|
||||
const openPreview = () => {
|
||||
navigate('/bandi/preview/11');
|
||||
}
|
||||
|
||||
const openPreviewEvaluation = () => {
|
||||
navigate('/bandi/preview-evaluation/11');
|
||||
}
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => {
|
||||
return {
|
||||
isFormValid: () => {
|
||||
return isValid;
|
||||
},
|
||||
getErrors: () => {
|
||||
return errors;
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
trigger().then(() => clearErrors());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<UnsavedChangesDetector initialData={initialData} getValuesFn={getValues}/>
|
||||
<FormFieldRepeaterCriteria
|
||||
data={values}
|
||||
setDataFn={setValue}
|
||||
fieldName="criteria"
|
||||
options={exampleOfCriteriaOptions}
|
||||
errors={errors}
|
||||
register={register}
|
||||
label={<>{__('Criteri di valutazione', 'gepafin')}*
|
||||
<span>{__('(almeno 1 criterio di valutazione)', 'gepafin')}</span></>}
|
||||
config={{
|
||||
validate: {
|
||||
minOneItem: v => !isEmpty(v) || __('Almeno 1 criterio di valutazione', 'gepafin'),
|
||||
noEmptyValue: v => v
|
||||
.filter(o => isEmpty(o.value) || isEmpty(o.score)).length === 0
|
||||
|| __('Non lasciare il valore vuoto', 'gepafin')
|
||||
}
|
||||
}}/>
|
||||
|
||||
<FormField
|
||||
type="fileupload"
|
||||
setDataFn={setValue}
|
||||
fieldName="documentation"
|
||||
label={__('Documentazione', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={values['documentation']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
accept="application/pdf,application/vnd.ms-excel"
|
||||
chooseLabel={__('Aggiungi documento', 'gepafin')}
|
||||
multiple={true}
|
||||
doctype='document'
|
||||
register={register}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="fileupload"
|
||||
setDataFn={setValue}
|
||||
fieldName="images"
|
||||
label={__('Immagine del Bando', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={values['images']}
|
||||
doctype='images'
|
||||
register={register}
|
||||
/>
|
||||
|
||||
<FormFieldRepeater
|
||||
data={values}
|
||||
setDataFn={setValue}
|
||||
fieldName="checklist"
|
||||
options={exampleOfChecklistOptions}
|
||||
errors={errors}
|
||||
register={register}
|
||||
label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*
|
||||
<span>{__('(almeno 1 elemento)', 'gepafin')}</span></>}
|
||||
config={{
|
||||
validate: {
|
||||
minOneItem: v => !isEmpty(v) || __('Almeno 1 elemento', 'gepafin'),
|
||||
noEmptyValue: v => v
|
||||
.filter(o => isEmpty(o.value)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<button type="button" onClick={() => console.log(getValues())}>Check</button>
|
||||
<BandoEditFormActions
|
||||
openPreview={openPreview}
|
||||
openPreviewEvaluation={openPreviewEvaluation}/>
|
||||
</form>
|
||||
)
|
||||
})
|
||||
|
||||
export default BandoEditFormStep2;
|
||||
Reference in New Issue
Block a user