- fixed fileupload;
This commit is contained in:
Vitalii Kiiko
@@ -1,7 +1,6 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { klona } from 'klona';
|
||||
import { head, is, pluck, isEmpty } from 'ramda';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { TZDate } from '@date-fns/tz';
|
||||
@@ -37,7 +36,7 @@ import ApplicationSteps from './ApplicationSteps';
|
||||
const BandoApplication = () => {
|
||||
const { id } = useParams();
|
||||
const [formData, setFormData] = useState([]);
|
||||
const [formInitialData, setFormInitialData] = useState([]);
|
||||
const [formInitialData, setFormInitialData] = useState(null);
|
||||
const [bandoTitle, setBandoTitle] = useState('');
|
||||
const [formId, setFormId] = useState('');
|
||||
const [totalSteps, setTotalSteps] = useState(0);
|
||||
@@ -54,9 +53,14 @@ const BandoApplication = () => {
|
||||
setValue,
|
||||
trigger,
|
||||
register,
|
||||
getValues
|
||||
} = useForm({ defaultValues: {}, mode: 'onChange' });
|
||||
const values = getValues();
|
||||
getValues,
|
||||
reset
|
||||
} = useForm({
|
||||
defaultValues: useMemo(() => {
|
||||
return formInitialData ? formInitialData : {}
|
||||
}, [formInitialData]),
|
||||
mode: 'onChange'
|
||||
});
|
||||
const validationFns = {
|
||||
isPIVA,
|
||||
isCodiceFiscale,
|
||||
@@ -68,6 +72,7 @@ const BandoApplication = () => {
|
||||
isMarcaDaBollo
|
||||
}
|
||||
const activeStepIndex = activeStep - 1;
|
||||
const values = getValues();
|
||||
|
||||
const onSubmit = () => {
|
||||
const applId = getApplicationId();
|
||||
@@ -140,7 +145,7 @@ const BandoApplication = () => {
|
||||
|
||||
fieldVal = !fieldVal ? null : fieldVal;
|
||||
if (formField && formField.name === 'fileupload') {
|
||||
fieldVal = is(Array, fieldVal) ? fieldVal.map(o => o.id).join(',') : fieldVal;
|
||||
fieldVal = is(Array, fieldVal) ? fieldVal.map(o => o.id).join(',') : null;
|
||||
}
|
||||
acc.push({
|
||||
'fieldId': cur,
|
||||
@@ -245,7 +250,12 @@ const BandoApplication = () => {
|
||||
fieldId: o.fieldId,
|
||||
fieldValue: o.fieldValue
|
||||
}));
|
||||
setFormInitialData(submitData)
|
||||
const formDataInitial = submitData.reduce((acc, cur) => {
|
||||
acc[cur.fieldId] = cur.fieldValue;
|
||||
return acc;
|
||||
}, {});
|
||||
console.log('formDataInitial', formDataInitial)
|
||||
setFormInitialData(formDataInitial);
|
||||
}
|
||||
}
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
@@ -277,8 +287,10 @@ const BandoApplication = () => {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const newFormData = klona(formInitialData);
|
||||
newFormData.map(o => setValue(o.fieldId, o.fieldValue));
|
||||
if (formInitialData) {
|
||||
reset();
|
||||
Object.keys(formInitialData).map(k => setValue(k, formInitialData[k]))
|
||||
}
|
||||
}, [formInitialData]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -312,62 +324,64 @@ const BandoApplication = () => {
|
||||
{!isAsyncRequest
|
||||
? <div className="appPage__content">
|
||||
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
{formData.map(o => {
|
||||
const label = head(o.settings.filter(o => o.name === 'label'));
|
||||
const text = head(o.settings.filter(o => o.name === 'text'));
|
||||
const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
|
||||
const options = head(o.settings.filter(o => o.name === 'options'));
|
||||
const tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
|
||||
const step = head(o.settings.filter(o => o.name === 'step'));
|
||||
const mime = head(o.settings.filter(o => o.name === 'mime'));
|
||||
let mimeValue = '';
|
||||
{formInitialData
|
||||
? formData.map(o => {
|
||||
const label = head(o.settings.filter(o => o.name === 'label'));
|
||||
const text = head(o.settings.filter(o => o.name === 'text'));
|
||||
const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
|
||||
const options = head(o.settings.filter(o => o.name === 'options'));
|
||||
const tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
|
||||
const step = head(o.settings.filter(o => o.name === 'step'));
|
||||
const mime = head(o.settings.filter(o => o.name === 'mime'));
|
||||
let mimeValue = '';
|
||||
|
||||
if (mime) {
|
||||
mimeValue = mime.value.map(o => o.code);
|
||||
}
|
||||
|
||||
const validations = Object.keys(o.validators).reduce((acc, cur) => {
|
||||
if (o.validators[cur]) {
|
||||
if (['min', 'max', 'minLength', 'maxLength', 'maxSize'].includes(cur)) {
|
||||
acc[cur] = parseInt(o.validators[cur]);
|
||||
} else if ('pattern' === cur) {
|
||||
acc[cur] = new RegExp(o.validators[cur]);
|
||||
} else if ('isRequired' === cur) {
|
||||
//acc[cur] = o.validators[cur];
|
||||
acc['required'] = true;
|
||||
} else if ('custom' === cur && validationFns[o.validators[cur]]) {
|
||||
if (!acc.validate) {
|
||||
acc.validate = {};
|
||||
}
|
||||
acc.validate[cur] = validationFns[o.validators[cur]];
|
||||
}
|
||||
if (mime) {
|
||||
mimeValue = mime.value.map(o => o.code ? o.code : o.ext);
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
const validations = Object.keys(o.validators).reduce((acc, cur) => {
|
||||
if (o.validators[cur]) {
|
||||
if (['min', 'max', 'minLength', 'maxLength', 'maxSize'].includes(cur)) {
|
||||
acc[cur] = parseInt(o.validators[cur]);
|
||||
} else if ('pattern' === cur) {
|
||||
acc[cur] = new RegExp(o.validators[cur]);
|
||||
} else if ('isRequired' === cur) {
|
||||
//acc[cur] = o.validators[cur];
|
||||
acc['required'] = true;
|
||||
} else if ('custom' === cur && validationFns[o.validators[cur]]) {
|
||||
if (!acc.validate) {
|
||||
acc.validate = {};
|
||||
}
|
||||
acc.validate[cur] = validationFns[o.validators[cur]];
|
||||
}
|
||||
}
|
||||
|
||||
return ['paragraph'].includes(o.name) && text
|
||||
? <div className="appForm__content" key={o.id}>{renderHtmlContent(text.value)}</div>
|
||||
: <FormField
|
||||
key={o.id}
|
||||
type={o.name}
|
||||
fieldName={o.id}
|
||||
label={label ? label.value : ''}
|
||||
placeholder={placeholder ? placeholder.value : ''}
|
||||
control={control}
|
||||
register={register}
|
||||
errors={errors}
|
||||
defaultValue={values[o.id]}
|
||||
maxFractionDigits={step ? step.value : 0}
|
||||
accept={mimeValue}
|
||||
config={validations}
|
||||
options={options ? options.value : []}
|
||||
setDataFn={setValue}
|
||||
sourceId={getApplicationId()}
|
||||
useGrouping={false}
|
||||
tableColumns={tableColumns ? tableColumns.value : {}}
|
||||
/>
|
||||
})}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return ['paragraph'].includes(o.name) && text
|
||||
? <div className="appForm__content" key={o.id}>{renderHtmlContent(text.value)}</div>
|
||||
: <FormField
|
||||
key={o.id}
|
||||
type={o.name}
|
||||
fieldName={o.id}
|
||||
label={label ? label.value : ''}
|
||||
placeholder={placeholder ? placeholder.value : ''}
|
||||
control={control}
|
||||
register={register}
|
||||
errors={errors}
|
||||
defaultValue={values[o.id] ? values[o.id] : ''}
|
||||
maxFractionDigits={step ? step.value : 0}
|
||||
accept={mimeValue}
|
||||
config={validations}
|
||||
options={options ? options.value : []}
|
||||
setDataFn={setValue}
|
||||
saveFormCallback={saveDraft}
|
||||
sourceId={getApplicationId()}
|
||||
useGrouping={false}
|
||||
tableColumns={tableColumns ? tableColumns.value : {}}
|
||||
/>
|
||||
}) : null}
|
||||
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user