- added login page;
- added file upload; - added faq item edit modal;
This commit is contained in:
Vitalii Kiiko
@@ -148,7 +148,7 @@ const AllBandiTable = () => {
|
||||
const header = renderHeader();
|
||||
|
||||
return(
|
||||
<div className="latestBandiTable">
|
||||
<div className="appPageSection__table">
|
||||
<DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
|
||||
filters={filters}
|
||||
globalFilterFields={['name', 'status']}
|
||||
|
||||
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;
|
||||
@@ -1,57 +1,71 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
// components
|
||||
import getBandoLabel from '../../helpers/getBandoLabel';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
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';
|
||||
import { Steps } from 'primereact/steps';
|
||||
import BandoEditFormStep1 from './components/BandoEditFormStep1';
|
||||
import BandoEditFormStep2 from './components/BandoEditFormStep2';
|
||||
import { Messages } from 'primereact/messages';
|
||||
import { is, isNil } from 'ramda';
|
||||
|
||||
const BandoEdit = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
const [activeStep, setActiveStep] = useState(0)
|
||||
const [data, setData] = useState({});
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [selectedTemplate, setSelectedTemplate] = useState(null);
|
||||
const [templates, setTemplate] = useState(null);
|
||||
const {
|
||||
control,
|
||||
reset,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
register
|
||||
} = useForm(data);
|
||||
let minDateStart = new Date();
|
||||
const formRef = useRef(null);
|
||||
const stepErrorMsgs = useRef(null);
|
||||
|
||||
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', score: 9 },
|
||||
{ id: 16, value: 'Impatto sulla competitività dell\'azienda', score: 3 },
|
||||
{ id: 17, value: 'Sostenibilità economico-finanziaria', score: 5 }
|
||||
];
|
||||
const exampleOfFaqOptions = [
|
||||
{ id: 2, question: 'Question 1?', answer: 'Lorem ipsum dolor' }
|
||||
];
|
||||
const exampleOfChecklistOptions = [
|
||||
{ id: 15, value: 'Innovatività del progetto' }
|
||||
const stepItems = [
|
||||
{
|
||||
label: __('Testi', 'gepafin'),
|
||||
command: () => {
|
||||
if (activeStep === 0) {
|
||||
return false
|
||||
}
|
||||
stepErrorMsgs.current.clear();
|
||||
if (formRef.current.isFormValid()) {
|
||||
goToStep(0)
|
||||
} else {
|
||||
stepErrorMsgs.current.show([
|
||||
{ sticky: true, severity: 'error', summary: 'Error',
|
||||
detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
|
||||
closable: true }
|
||||
]);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: __('Gestione', 'gepafin'),
|
||||
command: () => {
|
||||
if (activeStep === 1) {
|
||||
return false
|
||||
}
|
||||
stepErrorMsgs.current.clear();
|
||||
const isFormValid = formRef.current.isFormValid();
|
||||
console.log('before go to step 1:', isFormValid)
|
||||
if (isFormValid) {
|
||||
goToStep(1);
|
||||
} else {
|
||||
stepErrorMsgs.current.show([
|
||||
{ sticky: true, severity: 'error', summary: 'Error',
|
||||
detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
|
||||
closable: true }
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const openPreview = () => {
|
||||
navigate('/bandi/preview/11');
|
||||
}
|
||||
|
||||
const openPreviewEvaluation = () => {
|
||||
navigate('/bandi/preview-evaluation/11');
|
||||
const goToStep = (step) => {
|
||||
setActiveStep(step);
|
||||
}
|
||||
|
||||
const openBandoFormManagement = () => {
|
||||
@@ -62,31 +76,72 @@ const BandoEdit = () => {
|
||||
const parsed = parseInt(id)
|
||||
const bandoId = !isNaN(parsed) ? parsed : 0;
|
||||
|
||||
setTimeout(() => {
|
||||
const data = 0 === bandoId
|
||||
? {
|
||||
status: 'draft',
|
||||
name: ''
|
||||
}
|
||||
: {
|
||||
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 data = 0 === bandoId
|
||||
? {
|
||||
status: 'draft',
|
||||
name: ''
|
||||
}
|
||||
: {
|
||||
"name": "Innovazione digitale 2024",
|
||||
"confidi": false,
|
||||
"descriptionShort": "Supporto alle PMI per progetti di digitalizzazione e innovazione tecnologica.",
|
||||
"descriptionLong": "Il bando \"Innovazione Digitale 2024\" mira a sostenere le PMI nell'adozione di tecnologie digitali innovative. I progetti finanziabili includono l'implementazione di soluzioni di intelligenza artificiale, blockchain, IoT, e altre tecnologie avanzate che possono migliorare la competitività delle imprese.",
|
||||
"documentationRequested": "Documentazione richiesta*",
|
||||
"dates": [
|
||||
"2024-08-27T22:00:00.000Z",
|
||||
"2024-10-29T23:00:00.000Z"
|
||||
],
|
||||
"amount": 0,
|
||||
"amountMax": 0,
|
||||
"aimedTo": [
|
||||
{
|
||||
"id": 3,
|
||||
"value": "PMI con sede in Umbria",
|
||||
"status": "existing"
|
||||
}
|
||||
],
|
||||
"faq": [
|
||||
{
|
||||
"id": 2,
|
||||
"question": "Question 1?",
|
||||
"answer": "Lorem ipsum dolor",
|
||||
"visible": true,
|
||||
"status": "existing"
|
||||
}
|
||||
],
|
||||
"documentation": [
|
||||
/*{
|
||||
createdDate: "2024-08-23T12:40:47.700350791",
|
||||
description: null,
|
||||
filePath: "https://mementoresources.s3.eu-west-1.amazonaws.com/gepafin/SCR-20240820-kiwn.pdf",
|
||||
id: 10,
|
||||
name: "SCR-20240820-kiwn.pdf",
|
||||
updatedDate: "2024-08-23T12:40:47.700373894"
|
||||
}*/
|
||||
],
|
||||
status: 'draft',
|
||||
id: 11
|
||||
}
|
||||
|
||||
const templates = [
|
||||
{ name: 'Il mio template', value: 22 },
|
||||
{ name: 'Template #11', value: 11 },
|
||||
];
|
||||
setTemplate(templates);
|
||||
setIsLoading(false);
|
||||
}, 3000);
|
||||
if (bandoId === 0) {
|
||||
setData(data);
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
if (!isNil(data.dates) && data.dates.length) {
|
||||
data.dates = data.dates.map(v => is(String, v) ? new Date(v) : v);
|
||||
}
|
||||
|
||||
setData(data);
|
||||
|
||||
const templates = [
|
||||
{ name: 'Il mio template', value: 22 },
|
||||
{ name: 'Template #11', value: 11 },
|
||||
];
|
||||
setTemplate(templates);
|
||||
setIsLoading(false);
|
||||
}, 2000);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
@@ -101,7 +156,7 @@ const BandoEdit = () => {
|
||||
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
{!isLoading
|
||||
{/*!isLoading
|
||||
? <div className="pageBando__templateSelection">
|
||||
<div className="appForm__field">
|
||||
<label htmlFor="template">
|
||||
@@ -120,178 +175,23 @@ const BandoEdit = () => {
|
||||
label={__('Applica', 'gepafin')}
|
||||
icon="pi pi-check"
|
||||
iconPos="right"/>
|
||||
</div> : null}
|
||||
</div> : null*/}
|
||||
{!isLoading
|
||||
? <Steps
|
||||
model={stepItems}
|
||||
activeIndex={activeStep}
|
||||
readOnly={false}/>
|
||||
: null}
|
||||
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
<Messages ref={stepErrorMsgs} />
|
||||
|
||||
{!isLoading
|
||||
? <>
|
||||
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<FormField
|
||||
type="textinput"
|
||||
fieldName="name"
|
||||
label={__('Titolo del Bando', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['name']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textarea"
|
||||
fieldName="descriptionShort"
|
||||
label={__('Descrizione breve', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['descriptionShort']}
|
||||
config={{
|
||||
required: __('È obbligatorio', 'gepafin')
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textarea"
|
||||
fieldName="descriptionLong"
|
||||
label={__('Descrizione completa', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['descriptionLong']}
|
||||
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="textarea"
|
||||
fieldName="documentationRequested"
|
||||
label={__('Documentazione richiesta', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['documentationRequested']}
|
||||
config={{
|
||||
required: __('È obbligatorio', 'gepafin')
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="datepickerrange"
|
||||
fieldName="dates"
|
||||
label={__('Dati di pubblicazione', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['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={data['amount']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
inputgroup={true}
|
||||
icon="€"
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="numberinput"
|
||||
fieldName="amountMax"
|
||||
label={__('Importo massimo per Progetto', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={data['amountMax']}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
inputgroup={true}
|
||||
icon="€"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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')}
|
||||
multiple={true}
|
||||
/>
|
||||
|
||||
<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">
|
||||
<Button
|
||||
type="submit"
|
||||
label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={openPreview}
|
||||
label={__('Anteprima beneficiario', 'gepafin')} icon="pi pi-eye" iconPos="right"/>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={openPreviewEvaluation}
|
||||
label={__('Anteprima pre-istruttoria', 'gepafin')} icon="pi pi-eye"
|
||||
iconPos="right"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{activeStep === 0
|
||||
? <BandoEditFormStep1 initialData={data} ref={formRef}/>
|
||||
: <BandoEditFormStep2 initialData={data} ref={formRef}/>}
|
||||
|
||||
<div className="appPageSection">
|
||||
<h2>{__('Crea o modifica il Form compilabile dal Beneficiario', 'gepafin')}</h2>
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
import React, { useRef, } from 'react'
|
||||
import { useDrag, useDrop } from 'react-dnd'
|
||||
import { ItemTypes } from '../ItemTypes';
|
||||
|
||||
|
||||
const BuilderElement = ({ id, text, index, move }) => {
|
||||
const ref = useRef(null);
|
||||
|
||||
const [{ handlerId }, drop] = useDrop({
|
||||
accept: ItemTypes.FIELD,
|
||||
collect(monitor) {
|
||||
return {
|
||||
handlerId: monitor.getHandlerId(),
|
||||
}
|
||||
},
|
||||
hover(item, monitor) {
|
||||
if (!ref.current) {
|
||||
return
|
||||
}
|
||||
const dragIndex = item.index
|
||||
const hoverIndex = index
|
||||
|
||||
if (dragIndex === hoverIndex) {
|
||||
return
|
||||
}
|
||||
|
||||
const hoverBoundingRect = ref.current?.getBoundingClientRect()
|
||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
|
||||
const clientOffset = monitor.getClientOffset()
|
||||
const hoverClientY = clientOffset.y - hoverBoundingRect.top
|
||||
|
||||
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
|
||||
return
|
||||
}
|
||||
|
||||
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
|
||||
return
|
||||
}
|
||||
|
||||
move(dragIndex, hoverIndex)
|
||||
item.index = hoverIndex
|
||||
},
|
||||
});
|
||||
|
||||
const [{ isDragging }, drag] = useDrag({
|
||||
type: ItemTypes.FIELD,
|
||||
item: () => {
|
||||
return { id, index }
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
});
|
||||
|
||||
const opacity = isDragging ? 0 : 1;
|
||||
drag(drop(ref));
|
||||
|
||||
return (
|
||||
<div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
|
||||
{text}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BuilderElement;
|
||||
@@ -1,73 +0,0 @@
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
// components
|
||||
import BuilderElement from '../BuilderElement';
|
||||
|
||||
const FormBuilder = () => {
|
||||
const [fields, setFields] = useState([
|
||||
{
|
||||
id: 1,
|
||||
text: 'Write a cool JS library',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: 'Make it generic enough',
|
||||
}
|
||||
]);
|
||||
const [items, setItems] = useState([
|
||||
{
|
||||
id: 1,
|
||||
label: 'Text Input'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Text Area'
|
||||
}
|
||||
])
|
||||
|
||||
const moveField = useCallback((dragIndex, hoverIndex) => {
|
||||
console.log('dragIndex, hoverIndex:', dragIndex, hoverIndex)
|
||||
/*setFields((prevCards) =>
|
||||
update(prevCards, {
|
||||
$splice: [
|
||||
[dragIndex, 1],
|
||||
[hoverIndex, 0, prevCards[dragIndex]],
|
||||
],
|
||||
}),
|
||||
)*/
|
||||
}, []);
|
||||
|
||||
const renderField = useCallback((card, index) => {
|
||||
return (
|
||||
<BuilderElement
|
||||
key={card.id}
|
||||
index={index}
|
||||
id={card.id}
|
||||
text={card.text}
|
||||
move={moveField}
|
||||
/>
|
||||
)
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="formBuilder">
|
||||
<div className="formBuilder__main">
|
||||
<h2>{__('Trascina qui gli elementi del Form', 'gepafin')}</h2>
|
||||
<div className="formBuilder__content">
|
||||
{fields.map((field, i) => renderField(field, i))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="formBuilder__aside">
|
||||
<h2>{__('Elementi del Form', 'gepafin')}</h2>
|
||||
<ul className="formBuilder__list">
|
||||
{items.map((item) => <li key={item.id}>
|
||||
{item.label}
|
||||
</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FormBuilder;
|
||||
@@ -5,7 +5,7 @@ import { useParams, useNavigate } from 'react-router-dom';
|
||||
// components
|
||||
import { Button } from 'primereact/button';
|
||||
|
||||
const BandoEditForms = () => {
|
||||
const BandoForms = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
//const [data, setData] = useState({});
|
||||
@@ -44,4 +44,4 @@ const BandoEditForms = () => {
|
||||
|
||||
}
|
||||
|
||||
export default BandoEditForms;
|
||||
export default BandoForms;
|
||||
92
src/pages/BandoFormsEdit/components/BuilderElement/index.js
Normal file
92
src/pages/BandoFormsEdit/components/BuilderElement/index.js
Normal file
@@ -0,0 +1,92 @@
|
||||
import React, { useRef } from 'react'
|
||||
import { useDrag, useDrop } from 'react-dnd'
|
||||
import { ItemTypes } from '../ItemTypes';
|
||||
|
||||
// store
|
||||
import { storeSet } from '../../../../store';
|
||||
|
||||
// components
|
||||
import { Button } from 'primereact/button';
|
||||
|
||||
const BuilderElement = ({ id, name, label, index, move }) => {
|
||||
const ref = useRef(null);
|
||||
|
||||
const [{ handlerId }, drop] = useDrop({
|
||||
accept: ItemTypes.FIELD,
|
||||
collect(monitor) {
|
||||
return {
|
||||
handlerId: monitor.getHandlerId(),
|
||||
}
|
||||
},
|
||||
hover(item, monitor) {
|
||||
if (!ref.current) {
|
||||
return
|
||||
}
|
||||
const dragIndex = item.index
|
||||
|
||||
if (dragIndex > -1) {
|
||||
const hoverIndex = index
|
||||
|
||||
if (dragIndex === hoverIndex) {
|
||||
return
|
||||
}
|
||||
|
||||
const hoverBoundingRect = ref.current?.getBoundingClientRect()
|
||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
|
||||
const clientOffset = monitor.getClientOffset()
|
||||
const hoverClientY = clientOffset.y - hoverBoundingRect.top
|
||||
|
||||
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
|
||||
return
|
||||
}
|
||||
|
||||
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
|
||||
return
|
||||
}
|
||||
|
||||
move(dragIndex, hoverIndex, item)
|
||||
item.index = hoverIndex
|
||||
} else {
|
||||
let hoverIndex = index
|
||||
|
||||
const hoverBoundingRect = ref.current?.getBoundingClientRect()
|
||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
|
||||
const clientOffset = monitor.getClientOffset()
|
||||
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
|
||||
|
||||
if (hoverClientY > hoverMiddleY) {
|
||||
hoverIndex = hoverIndex + 1;
|
||||
}
|
||||
|
||||
move(dragIndex, hoverIndex, item)
|
||||
item.index = hoverIndex;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [{ isDragging }, drag] = useDrag({
|
||||
type: ItemTypes.FIELD,
|
||||
item: () => {
|
||||
return { id, name, index }
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
});
|
||||
|
||||
const openSettings = (id) => {
|
||||
storeSet.main.activeElement(id);
|
||||
}
|
||||
|
||||
const opacity = isDragging ? 0 : 1;
|
||||
drag(drop(ref));
|
||||
|
||||
return (
|
||||
<div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
|
||||
{label}
|
||||
<Button icon="pi pi-cog" onClick={() => openSettings(id)} outlined />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BuilderElement;
|
||||
@@ -0,0 +1,37 @@
|
||||
import React, { useRef } from 'react'
|
||||
import { useDrag } from 'react-dnd'
|
||||
import { ItemTypes } from '../ItemTypes';
|
||||
import uniqid from '../../../../helpers/uniqid';
|
||||
|
||||
|
||||
const BuilderElementItem = ({ dbId, name, label, move }) => {
|
||||
const ref = useRef(null);
|
||||
|
||||
const [{ isDragging }, drag] = useDrag(() => ({
|
||||
type: ItemTypes.FIELD,
|
||||
item: () => {
|
||||
return { name, dbId, id: uniqid(), index: -1 }
|
||||
},
|
||||
end: (item, monitor) => {
|
||||
const dropResult = monitor.getDropResult()
|
||||
if (item && dropResult) {
|
||||
return item;
|
||||
}
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
handlerId: monitor.getHandlerId(),
|
||||
}),
|
||||
}))
|
||||
|
||||
const opacity = isDragging ? 0.4 : 1
|
||||
drag(ref);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="formBuilder__elementItem" style={{ opacity }}>
|
||||
{label}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BuilderElementItem;
|
||||
98
src/pages/BandoFormsEdit/components/FormBuilder/index.js
Normal file
98
src/pages/BandoFormsEdit/components/FormBuilder/index.js
Normal file
@@ -0,0 +1,98 @@
|
||||
import React, { useCallback, useState, useEffect } from 'react'
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { head, isEmpty } from 'ramda';
|
||||
|
||||
// store
|
||||
import { storeGet, storeSet, useStore } from '../../../../store';
|
||||
|
||||
// components
|
||||
import BuilderElement from '../BuilderElement';
|
||||
import BuilderElementItem from '../BuilderElementItem';
|
||||
import { Sidebar } from 'primereact/sidebar';
|
||||
|
||||
const FormBuilder = () => {
|
||||
const [fields, setFields] = useState([]);
|
||||
const [items, setItems] = useState([]);
|
||||
const activeElement = useStore().main.activeElement();
|
||||
|
||||
const moveField = useCallback((dragIndex, hoverIndex, item) => {
|
||||
setFields((prevFields) => {
|
||||
if (dragIndex === -1) {
|
||||
const configs = storeGet.main.elementItems();
|
||||
const itemCfg = head(configs.filter(o => o.id === item.dbId));
|
||||
const newItem = {
|
||||
...itemCfg,
|
||||
id: item.id,
|
||||
dbId: item.dbId
|
||||
}
|
||||
return prevFields.toSpliced(hoverIndex, 0, newItem);
|
||||
} else {
|
||||
let newFields = prevFields.toSpliced(dragIndex, 1);
|
||||
return newFields.toSpliced(hoverIndex, 0, prevFields[dragIndex]);
|
||||
}
|
||||
})
|
||||
}, []);
|
||||
|
||||
const renderField = useCallback((field, index) => {
|
||||
return (
|
||||
<BuilderElement
|
||||
key={field.id}
|
||||
index={index}
|
||||
id={field.id}
|
||||
label={field.label}
|
||||
name={field.name}
|
||||
move={moveField}
|
||||
/>
|
||||
)
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const elements = storeGet.main.elements();
|
||||
const elementItems = storeGet.main.elementItems();
|
||||
setFields(elements);
|
||||
setItems(elementItems);
|
||||
}, [])
|
||||
|
||||
const renderItem = useCallback((item, index) => {
|
||||
return (
|
||||
<BuilderElementItem
|
||||
key={item.id}
|
||||
dbId={item.id}
|
||||
label={item.label}
|
||||
name={item.name}
|
||||
move={moveField}
|
||||
/>
|
||||
)
|
||||
}, []);
|
||||
|
||||
const closeSettings = () => {
|
||||
storeSet.main.activeElement('');
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
|
||||
<h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
|
||||
<p>
|
||||
Form fields here
|
||||
</p>
|
||||
</Sidebar>
|
||||
<div className="formBuilder">
|
||||
<div className="formBuilder__main">
|
||||
<h2>{__('Trascina qui gli elementi del Form', 'gepafin')}</h2>
|
||||
<div className="formBuilder__content">
|
||||
{fields.map((field, i) => renderField(field, i))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="formBuilder__aside">
|
||||
<h2>{__('Elementi del Form', 'gepafin')}</h2>
|
||||
<ul className="formBuilder__list">
|
||||
{items.map((item) => renderItem(item))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default FormBuilder;
|
||||
@@ -1,18 +1,20 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { DndProvider } from 'react-dnd'
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend'
|
||||
|
||||
// store
|
||||
import { storeSet } from '../../store';
|
||||
|
||||
// components
|
||||
import FormBuilder from './components/FormBuilder';
|
||||
import { Button } from 'primereact/button';
|
||||
|
||||
const BandoEditForm = () => {
|
||||
const BandoFormsEdit = () => {
|
||||
const { id, formId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
//const [data, setData] = useState({});
|
||||
//const [isLoading, setIsLoading] = useState(true);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const goBack = () => {
|
||||
navigate('/bandi/11/forms');
|
||||
@@ -31,12 +33,47 @@ const BandoEditForm = () => {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const parsed = parseInt(id)
|
||||
const bandoId = !isNaN(parsed) ? parsed : 0;
|
||||
const parsedFormId = parseInt(formId)
|
||||
const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
|
||||
//const parsed = parseInt(id)
|
||||
//const bandoId = !isNaN(parsed) ? parsed : 0;
|
||||
//const parsedFormId = parseInt(formId)
|
||||
//const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
|
||||
|
||||
// 1. TODO get builder content data from API
|
||||
const elements = [
|
||||
{
|
||||
id: 'a123456',
|
||||
name: 'textinput',
|
||||
dbId: 1,
|
||||
label: 'Full Name',
|
||||
},
|
||||
{
|
||||
id: 'a456789',
|
||||
name: 'textarea',
|
||||
dbId: 2,
|
||||
label: 'Bio',
|
||||
}
|
||||
]
|
||||
const elementItems = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'textinput',
|
||||
label: 'Text Input'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'textarea',
|
||||
label: 'Text Area'
|
||||
},
|
||||
{
|
||||
id: 3, // DB id
|
||||
name: 'piva',
|
||||
label: 'P.IVA'
|
||||
},
|
||||
]
|
||||
storeSet.main.elements(elements);
|
||||
storeSet.main.elementItems(elementItems);
|
||||
setIsLoading(false);
|
||||
|
||||
// TODO
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
@@ -52,7 +89,7 @@ const BandoEditForm = () => {
|
||||
|
||||
<div className="appPageSection">
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<FormBuilder/>
|
||||
{!isLoading ? <FormBuilder/>: null}
|
||||
</DndProvider>
|
||||
</div>
|
||||
|
||||
@@ -84,4 +121,4 @@ const BandoEditForm = () => {
|
||||
|
||||
}
|
||||
|
||||
export default BandoEditForm;
|
||||
export default BandoFormsEdit;
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { Skeleton } from 'primereact/skeleton';
|
||||
@@ -11,8 +11,8 @@ const BandoView = () => {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const parsed = parseInt(id)
|
||||
const bandoId = !isNaN(parsed) ? parsed : 0;
|
||||
//const parsed = parseInt(id)
|
||||
//const bandoId = !isNaN(parsed) ? parsed : 0;
|
||||
|
||||
setTimeout(() => {
|
||||
const data = {
|
||||
|
||||
@@ -148,7 +148,7 @@ const LatestBandiTable = () => {
|
||||
const header = renderHeader();
|
||||
|
||||
return(
|
||||
<div className="latestBandiTable">
|
||||
<div className="appPageSection__table">
|
||||
<DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
|
||||
filters={filters}
|
||||
globalFilterFields={['name', 'status']}
|
||||
|
||||
@@ -102,7 +102,7 @@ const LatestUsersActivityTable = () => {
|
||||
const header = renderHeader();
|
||||
|
||||
return(
|
||||
<div className="latestBandiTable">
|
||||
<div className="appPageSection__table">
|
||||
<DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
|
||||
filters={filters}
|
||||
globalFilterFields={['name', 'status']}
|
||||
|
||||
@@ -1,10 +1,109 @@
|
||||
import React from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { classNames } from 'primereact/utils';
|
||||
import { isEmpty } from 'ramda';
|
||||
|
||||
// tools
|
||||
import AuthenticationService from '../../service/authentication-service';
|
||||
|
||||
// store
|
||||
import { storeSet, useStore } from '../../store';
|
||||
|
||||
// components
|
||||
import FormField from '../../components/FormField';
|
||||
import LogoIcon from '../../icons/LogoIcon';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Messages } from 'primereact/messages';
|
||||
|
||||
const Login = () => {
|
||||
return(
|
||||
<div>
|
||||
{__('Login page', 'gepafin')}
|
||||
const token = useStore().main.token();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const errorMsgs = useRef(null);
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm({ mode: 'onChange' });
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
errorMsgs.current.clear();
|
||||
setLoading(true);
|
||||
const request = {
|
||||
...formData,
|
||||
rememberMe: true
|
||||
}
|
||||
|
||||
AuthenticationService.login(request, loginCallback, loginError);
|
||||
};
|
||||
|
||||
const loginCallback = (data) => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
storeSet.main.setAuthData({
|
||||
token: data.data.token,
|
||||
userData: data.data.user
|
||||
});
|
||||
} else {
|
||||
errorMsgs.current.show([
|
||||
{ sticky: true, severity: 'error', summary: 'Error',
|
||||
detail: data.message,
|
||||
closable: true }
|
||||
]);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
const loginError = (err) => {
|
||||
errorMsgs.current.show([
|
||||
{ sticky: true, severity: 'error', summary: 'Error',
|
||||
detail: sprintf(__('%s', 'gepafin'), err),
|
||||
closable: true }
|
||||
]);
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!isEmpty(token)) {
|
||||
setLoading(true);
|
||||
window.location.replace('/')
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
return (
|
||||
<div className={classNames(['appPage', 'appPageLogin'])}>
|
||||
<div className="appPageLogin__wrapper">
|
||||
<LogoIcon/>
|
||||
|
||||
<h1>{__('Accedi o Registrati', 'gepafin')}</h1>
|
||||
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
<Messages ref={errorMsgs}/>
|
||||
|
||||
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<FormField
|
||||
type="textinput"
|
||||
fieldName="email"
|
||||
label={__('Email', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
placeholder="sample@example.com"
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textinput"
|
||||
inputtype="password"
|
||||
fieldName="password"
|
||||
label={__('Password', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
/>
|
||||
|
||||
<Button label={__('Accedi', 'gepafin')} disabled={loading}/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user