320 lines
12 KiB
JavaScript
320 lines
12 KiB
JavaScript
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
import { __ } from '@wordpress/i18n';
|
|
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';
|
|
import FormFieldRepeater from '../../../../components/FormFieldRepeater';
|
|
import FormFieldRepeaterCriteria from '../../../../components/FormFieldRepeaterCriteria';
|
|
import BandoEditFormActions from '../BandoEditFormActions';
|
|
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
|
|
import { Toast } from 'primereact/toast';
|
|
|
|
// api
|
|
import BandoService from '../../../../service/bando-service';
|
|
import LookupdataService from '../../../../service/lookupdata-service';
|
|
|
|
// store
|
|
import { storeSet } from '../../../../store';
|
|
import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
|
|
import { mimeTypes } from '../../../../configData';
|
|
import { wrap } from 'object-path-immutable';
|
|
import formatDateString from '../../../../helpers/formatDateString';
|
|
|
|
const BandoEditFormStep2 = forwardRef(function ({ initialData, setInitialData, getFormErrors, status }, ref) {
|
|
const navigate = useNavigate();
|
|
const [criteriaOptions, setCriteriaOptions] = useState([]);
|
|
const [checklistOptions, setChecklistOptions] = useState([]);
|
|
const [formInitialData, setFormInitialData] = useState(initialData);
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors, isValid },
|
|
setValue,
|
|
register,
|
|
trigger,
|
|
getValues,
|
|
clearErrors
|
|
} = useForm({
|
|
defaultValues: useMemo(() => {
|
|
return formInitialData;
|
|
}, [formInitialData]), mode: 'onChange'
|
|
});
|
|
const values = getValues();
|
|
//const step2Props = ['threshold', 'criteria', 'checkList', 'docs', 'images'];
|
|
const toast = useRef(null);
|
|
|
|
const onSubmit = () => {};
|
|
|
|
const onSaveDraft = () => {
|
|
trigger();
|
|
let formData = klona(getValues());
|
|
formData.dates = [];
|
|
|
|
if (formData.startDate) {
|
|
let starDate;
|
|
|
|
if (is(String, formData.startDate)) {
|
|
starDate = formData.startDate;
|
|
} else {
|
|
starDate = formatDateString(formData.startDate);
|
|
}
|
|
|
|
formData = wrap(formData).insert(['dates'], starDate, 0).value();
|
|
}
|
|
if (formData.endDate) {
|
|
let endDate;
|
|
|
|
if (is(String, formData.endDate)) {
|
|
endDate = formData.endDate;
|
|
} else {
|
|
endDate = formatDateString(formData.endDate);
|
|
}
|
|
|
|
formData = wrap(formData).insert(['dates'], endDate, 1).value();
|
|
}
|
|
if (!isNil(formData.startTime)) {
|
|
if (!is(String, formData.startTime)) {
|
|
const tzAwareDate = new TZDate(formData.startTime, 'Europe/Berlin');
|
|
formData.startTime = tzAwareDate.toISOString().substring(11, 16);
|
|
}
|
|
}
|
|
if (!isNil(formData.endTime)) {
|
|
if (!is(String, formData.endTime)) {
|
|
const tzAwareDate = new TZDate(formData.endTime, 'Europe/Berlin');
|
|
formData.endTime = tzAwareDate.toISOString().substring(11, 16);
|
|
}
|
|
}
|
|
|
|
delete formData.startDate;
|
|
delete formData.endDate;
|
|
|
|
storeSet.main.setAsyncRequest();
|
|
if (values.evaluationVersion === 'V1') {
|
|
BandoService.updateBandoStep2(formData.id, formData, createCallback, errCreateCallback);
|
|
} else if (values.evaluationVersion === 'V2') {
|
|
BandoService.updateBandoStep2V2(formData.id, formData, createCallback, errCreateCallback);
|
|
}
|
|
}
|
|
|
|
const createCallback = (data) => {
|
|
storeSet.main.unsetAsyncRequest();
|
|
if (data.status === 'SUCCESS') {
|
|
toast.current.show({
|
|
severity: 'success',
|
|
summary: '',
|
|
detail: __('Il bando è stato aggiornato correttamente!', 'gepafin')
|
|
});
|
|
const newFormData = {...formInitialData, ...data.data};
|
|
setFormInitialData(newFormData);
|
|
setInitialData(newFormData);
|
|
}
|
|
}
|
|
|
|
const errCreateCallback = (data) => {
|
|
storeSet.main.unsetAsyncRequest();
|
|
console.log('errCreateCallback', data);
|
|
}
|
|
|
|
const lookupdataCallback = (data) => {
|
|
if (data.status === 'SUCCESS') {
|
|
const criteria = data.data
|
|
.filter(o => o.type === 'EVALUATION_CRITERIA')
|
|
.map(o => {
|
|
delete o.type;
|
|
return {
|
|
...o,
|
|
score: 0,
|
|
lookUpDataId: o.id,
|
|
id: null
|
|
};
|
|
});
|
|
setCriteriaOptions(criteria);
|
|
const checklist = data.data
|
|
.filter(o => o.type === 'CHECKLIST')
|
|
.map(o => {
|
|
delete o.type;
|
|
return {
|
|
...o,
|
|
lookUpDataId: o.id,
|
|
id: null
|
|
};
|
|
});
|
|
setChecklistOptions(checklist);
|
|
}
|
|
}
|
|
|
|
const errLookupdataCallback = (data) => {
|
|
console.log('errLookupdataCallback', data)
|
|
}
|
|
|
|
const openPreview = () => {
|
|
navigate(`/bandi/${values.id}/preview`);
|
|
}
|
|
|
|
const openPreviewEvaluation = () => {
|
|
navigate(`/bandi/${values.id}/preview-evaluation`);
|
|
}
|
|
|
|
useImperativeHandle(
|
|
ref,
|
|
() => {
|
|
return {
|
|
isFormValid: () => {
|
|
return isValid;
|
|
},
|
|
getErrors: () => {
|
|
return errors;
|
|
},
|
|
getValues: () => {
|
|
return getValues();
|
|
}
|
|
}
|
|
}, [errors, isValid]);
|
|
|
|
useEffect(() => {
|
|
storeSet.main.formInitialData(initialData);
|
|
setFormInitialData(initialData);
|
|
}, [initialData]);
|
|
|
|
useEffect(() => {
|
|
const newFormData = klona(formInitialData);
|
|
if (!isNil(formInitialData.dates) && formInitialData.dates.length) {
|
|
newFormData.dates = formInitialData.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
|
|
}
|
|
if (!isNil(formInitialData.startTime) && !isEmpty(formInitialData.startTime)) {
|
|
newFormData.startTime = is(String, formInitialData.startTime)
|
|
? getTimeParsedFromString(formInitialData.startTime)
|
|
: formInitialData.startTime;
|
|
}
|
|
if (!isNil(formInitialData.endTime) && !isEmpty(formInitialData.endTime)) {
|
|
newFormData.endTime = is(String, formInitialData.endTime)
|
|
? getTimeParsedFromString(formInitialData.endTime)
|
|
: formInitialData.endTime;
|
|
}
|
|
|
|
Object.keys(newFormData).map(v => setValue(v, newFormData[v]));
|
|
}, [formInitialData]);
|
|
|
|
useEffect(() => {
|
|
trigger().then(() => clearErrors());
|
|
LookupdataService.getItems(lookupdataCallback, errLookupdataCallback, [['type', ['CHECKLIST', 'EVALUATION_CRITERIA']]]);
|
|
|
|
return () => {
|
|
storeSet.main.formInitialData({});
|
|
}
|
|
}, []);
|
|
|
|
const shouldDisableField = (fieldName) => {
|
|
return values.status === 'PUBLISH' &&
|
|
![
|
|
'descriptionShort', 'descriptionLong', 'documentationRequested', 'threshold',
|
|
'aimedTo', 'criteria', 'docs', 'checklist', 'faq', 'amount', 'amountMin', 'amountMax',
|
|
'email', 'phoneNumber', 'checkList', 'images', 'endDate', 'endTime'
|
|
].includes(fieldName)
|
|
}
|
|
|
|
const acceptAllFormats = () => {
|
|
return mimeTypes.map(o => o.code);
|
|
}
|
|
|
|
return (
|
|
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
|
<UnsavedChangesDetector getValuesFn={getValues}/>
|
|
{values.evaluationVersion === 'V1'
|
|
? <FormFieldRepeaterCriteria
|
|
data={values}
|
|
disabled={shouldDisableField('criteria')}
|
|
setDataFn={setValue}
|
|
fieldName="criteria"
|
|
options={criteriaOptions}
|
|
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')
|
|
}
|
|
}}/> : null}
|
|
|
|
<FormField
|
|
type="fileuploadasync"
|
|
disabled={shouldDisableField('docs')}
|
|
setDataFn={setValue}
|
|
fieldName="docs"
|
|
label={__('Documentazione', 'gepafin')}
|
|
control={control}
|
|
errors={errors}
|
|
defaultValue={values['docs']}
|
|
config={{ required: __('È obbligatorio', 'gepafin') }}
|
|
accept={acceptAllFormats()}
|
|
chooseLabel={__('Aggiungi documento', 'gepafin')}
|
|
multiple={true}
|
|
doctype='document'
|
|
register={register}
|
|
sourceId={values.id}
|
|
source="call"
|
|
/>
|
|
|
|
<FormField
|
|
type="fileuploadasync"
|
|
disabled={shouldDisableField('images')}
|
|
setDataFn={setValue}
|
|
fieldName="images"
|
|
label={__('Immagine del Bando', 'gepafin')}
|
|
control={control}
|
|
errors={errors}
|
|
defaultValue={values['images']}
|
|
doctype='images'
|
|
register={register}
|
|
sourceId={values.id}
|
|
source="call"
|
|
multiple={false}
|
|
/>
|
|
|
|
{values.evaluationVersion === 'V1'
|
|
? <FormFieldRepeater
|
|
data={values['checkList']}
|
|
disabled={shouldDisableField('checkList')}
|
|
setDataFn={setValue}
|
|
fieldName="checkList"
|
|
options={checklistOptions}
|
|
errors={errors}
|
|
register={register}
|
|
label={<>{__('Checklist valutazione 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')
|
|
}
|
|
}}
|
|
/> : null}
|
|
|
|
<div className="appPage__spacer"></div>
|
|
|
|
<div className="appPageSection__hr">
|
|
<span>{__('Azioni', 'gepafin')}</span>
|
|
</div>
|
|
|
|
<Toast ref={toast} />
|
|
<BandoEditFormActions
|
|
id={values.id}
|
|
status={status}
|
|
submitFn={onSaveDraft}
|
|
openPreview={openPreview}
|
|
openPreviewEvaluation={openPreviewEvaluation}/>
|
|
</form>
|
|
)
|
|
})
|
|
|
|
export default BandoEditFormStep2; |