add bando page form;
This commit is contained in:
Vitalii Kiiko
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
@@ -10,10 +10,17 @@ import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import getBandoLabel from '../../helpers/getBandoLabel';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { Menu } from 'primereact/menu';
|
||||
import FormField from '../../components/FormField';
|
||||
import FormFieldRepeater from '../../components/FormFieldRepeater';
|
||||
import { Skeleton } from 'primereact/skeleton';
|
||||
import FormFieldRepeaterCriteria from '../../components/FormFieldRepeaterCriteria';
|
||||
import FormFieldRepeaterFaq from '../../components/FormFieldRepeaterFaq';
|
||||
|
||||
const Bando = () => {
|
||||
const { id } = useParams();
|
||||
const [data, setData] = useState({});
|
||||
const [isFormLoading, setIsFormLoading] = useState(true);
|
||||
const [selectedTemplate, setSelectedTemplate] = useState(null);
|
||||
const [templates, setTemplate] = useState(null);
|
||||
const {
|
||||
@@ -21,10 +28,24 @@ const Bando = () => {
|
||||
reset,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
getValues
|
||||
getValues,
|
||||
setValue,
|
||||
register
|
||||
} = useForm(data);
|
||||
const onSubmit = data => console.log(data);
|
||||
console.log('data', data);
|
||||
let minDateStart = new Date();
|
||||
|
||||
const onSubmit = formData => console.log(formData);
|
||||
|
||||
// temp
|
||||
const exampleOfAimedToOptions = [{ id: 11, value: 'PMI con sede in Umbria' }];
|
||||
const exampleOfCriteriaOptions = [{ id: 15, value: 'Innovatività del progetto' }];
|
||||
const exampleOfFaqOptions = [
|
||||
{ id: 2, question: 'Question 1?', answer: 'Lorem ipsum dolor' }
|
||||
];
|
||||
const exampleOfChecklistOptions = [
|
||||
{ id: 9, value: 'Requisiti di ammissibilità soddisfatti' },
|
||||
{ id: 9, value: 'Documentazione completa' }
|
||||
];
|
||||
|
||||
const onPublish = () => {
|
||||
console.log('click onPublish');
|
||||
@@ -34,29 +55,32 @@ const Bando = () => {
|
||||
const parsed = parseInt(id)
|
||||
const bandoId = !isNaN(parsed) ? parsed : 0;
|
||||
|
||||
const data = 0 === bandoId
|
||||
? {
|
||||
status: 'draft',
|
||||
name: '',
|
||||
description: ''
|
||||
}
|
||||
: {
|
||||
name: 'Bando Innovazione 2024',
|
||||
description: '',
|
||||
start_date: '2024-08-08T00:00:00+00:00',
|
||||
end_date: '2024-08-30T00:00:00+00:00',
|
||||
submissions: 24,
|
||||
status: 'publish',
|
||||
id: 11
|
||||
}
|
||||
setData(data);
|
||||
reset();
|
||||
setTimeout(() => {
|
||||
const data = 0 === bandoId
|
||||
? {
|
||||
status: 'draft',
|
||||
name: '',
|
||||
description: ''
|
||||
}
|
||||
: {
|
||||
name: 'Bando Innovazione 2024',
|
||||
description: '',
|
||||
start_date: '2024-08-08T00:00:00+00:00',
|
||||
end_date: '2024-08-30T00:00:00+00:00',
|
||||
submissions: 24,
|
||||
status: 'publish',
|
||||
id: 11
|
||||
}
|
||||
setData(data);
|
||||
reset();
|
||||
|
||||
const templates = [
|
||||
{ name: 'Il mio template', value: 22 },
|
||||
{ name: 'Template #11', value: 11 },
|
||||
];
|
||||
setTemplate(templates)
|
||||
const templates = [
|
||||
{ name: 'Il mio template', value: 22 },
|
||||
{ name: 'Template #11', value: 11 },
|
||||
];
|
||||
setTemplate(templates);
|
||||
setIsFormLoading(false);
|
||||
}, 3000);
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
@@ -71,65 +95,139 @@ const Bando = () => {
|
||||
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
<div className="pageBando__templateSelection">
|
||||
<div className="appForm__field">
|
||||
<label htmlFor="template">
|
||||
{__('Usa Template Salvato', 'gepafin')}
|
||||
</label>
|
||||
<Dropdown
|
||||
id="template"
|
||||
value={selectedTemplate}
|
||||
onChange={(e) => setSelectedTemplate(e.value)}
|
||||
options={templates}
|
||||
optionLabel="name"
|
||||
placeholder={__('Seleziona template', 'gepafin')} />
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => console.log('use template')}
|
||||
label={__('Applica', 'gepafin')}
|
||||
icon="pi pi-check"
|
||||
iconPos="right" />
|
||||
</div>
|
||||
{!isFormLoading
|
||||
? <div className="pageBando__templateSelection">
|
||||
<div className="appForm__field">
|
||||
<label htmlFor="template">
|
||||
{__('Usa Template Salvato', 'gepafin')}
|
||||
</label>
|
||||
<Dropdown
|
||||
id="template"
|
||||
value={selectedTemplate}
|
||||
onChange={(e) => setSelectedTemplate(e.value)}
|
||||
options={templates}
|
||||
optionLabel="name"
|
||||
placeholder={__('Seleziona template', 'gepafin')}/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => console.log('use template')}
|
||||
label={__('Applica', 'gepafin')}
|
||||
icon="pi pi-check"
|
||||
iconPos="right"/>
|
||||
</div> : null}
|
||||
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
{data
|
||||
{!isFormLoading
|
||||
? <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="appForm__field">
|
||||
<label htmlFor="name" className={classNames({ 'p-error': errors.name })}>
|
||||
{__('Titolo del Bando', 'gepafin')}*
|
||||
</label>
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
defaultValue={data['name']}
|
||||
rules={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
render={({ field, fieldState }) => (
|
||||
<InputText id={field.name}
|
||||
onInput={field.onChange}
|
||||
onBlur={field.onBlur}
|
||||
value={field.value}
|
||||
name={field.name}
|
||||
autoFocus
|
||||
className={classNames({ 'p-invalid': fieldState.invalid })}/>
|
||||
)}/>
|
||||
</div>
|
||||
<FormField
|
||||
type="textinput"
|
||||
fieldName="name"
|
||||
label={__('Titolo del Bando', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['name']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
/>
|
||||
|
||||
<div className="appForm__field">
|
||||
<label htmlFor="description" className={classNames({ 'p-error': errors.description })}>
|
||||
{__('Descrizione', 'gepafin')}*
|
||||
</label>
|
||||
<Controller
|
||||
name="description"
|
||||
control={control}
|
||||
defaultValue={data['description']}
|
||||
rules={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
render={({ field, fieldState }) => (
|
||||
<InputTextarea id={field.name}
|
||||
{...field}
|
||||
className={classNames({ 'p-invalid': fieldState.invalid })}/>
|
||||
)}/>
|
||||
</div>
|
||||
<FormField
|
||||
type="textarea"
|
||||
fieldName="description"
|
||||
label={__('Descrizione', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['description']}
|
||||
config={{
|
||||
required: __('È obbligatorio', 'gepafin'),
|
||||
minLength: 200
|
||||
}}
|
||||
infoText={__('Almeno 200 caratteri', 'gepafin')}
|
||||
/>
|
||||
|
||||
<FormFieldRepeater
|
||||
data={data}
|
||||
setDataFn={setValue}
|
||||
fieldName="aimedTo"
|
||||
options={exampleOfAimedToOptions}
|
||||
errors={errors}
|
||||
register={register}
|
||||
label={<>{__('A chi si rivolge', 'gepafin')}*
|
||||
<span>{__('(almeno 1 tipo di destinatari)', 'gepafin')}</span></>}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="datepickerrange"
|
||||
fieldName="dates"
|
||||
label={__('Dati di pubblicazione', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['dates']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
minDate={minDateStart}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="numberinput"
|
||||
fieldName="amount"
|
||||
label={__('Dotazione del Bando', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['amount']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
inputgroup={true}
|
||||
icon="€"
|
||||
/>
|
||||
|
||||
<FormFieldRepeaterCriteria
|
||||
data={data}
|
||||
setDataFn={setValue}
|
||||
fieldName="criteria"
|
||||
options={exampleOfCriteriaOptions}
|
||||
errors={errors}
|
||||
register={register}
|
||||
label={<>{__('Criteri di valutazione', 'gepafin')}*
|
||||
<span>{__('(almeno 1 criterio di valutazione)', 'gepafin')}</span></>}/>
|
||||
|
||||
<FormField
|
||||
type="fileupload"
|
||||
fieldName="documentation"
|
||||
label={__('Documentazione', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['documentation']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
accept="application/pdf,application/vnd.ms-excel"
|
||||
chooseLabel={__('Aggiungi documento', 'gepafin')}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="fileupload"
|
||||
fieldName="images"
|
||||
label={__('Immagine del Bando', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['documentation']}
|
||||
/>
|
||||
|
||||
<FormFieldRepeaterFaq
|
||||
data={data}
|
||||
setDataFn={setValue}
|
||||
fieldName="faq"
|
||||
options={exampleOfFaqOptions}
|
||||
errors={errors}
|
||||
register={register}
|
||||
label={__('FAQ', 'gepafin')}/>
|
||||
|
||||
<FormFieldRepeater
|
||||
data={data}
|
||||
setDataFn={setValue}
|
||||
fieldName="checklist"
|
||||
options={exampleOfChecklistOptions}
|
||||
errors={errors}
|
||||
register={register}
|
||||
label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*
|
||||
<span>{__('(almeno 1 elemento)', 'gepafin')}</span></>}
|
||||
/>
|
||||
|
||||
<div className="appPageSection">
|
||||
<div className="appPageSection__actions">
|
||||
@@ -137,11 +235,18 @@ const Bando = () => {
|
||||
type="submit"
|
||||
label={__('Salva Bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onPublish}
|
||||
label={__('Pubblica', 'gepafin')} icon="pi pi-upload" iconPos="right"/>
|
||||
</div>
|
||||
</div>
|
||||
</form> : null}
|
||||
</form>
|
||||
: <>
|
||||
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user