BFLOWS/bflows-bandi-fe
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- fixed fileupload;

Browse Source
This commit is contained in:
Vitalii Kiiko
2024-10-10 14:42:19 +02:00
parent d9e03efa6c
commit 156aac3d20
5 changed files with 132 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/FormField/components/Fileupload/index.js
View File

@@ -14,6 +14,7 @@ import { mimeTypes } from '../../../../configData';
const Fileupload = ({
fieldName,
setDataFn,
control,
label,
errors,
register,
@@ -21,7 +22,7 @@ const Fileupload = ({
config = {},
infoText = null,
accept = ['image/*'],
doctype = 'images',
doctype = 'document',
maxSize = 100000000,
emptyText = __('Trascina qui il tuo file', 'gepafin'),
chooseLabel = __('Aggiungi file', 'gepafin'),
@@ -29,7 +30,7 @@ const Fileupload = ({
sourceId = 0,
source = 'application',
disabled = false,
maxFileSize = 100000000
saveFormCallback = () => {}
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const [acceptFormats, setAcceptFormats] = useState('');
@@ -51,7 +52,9 @@ const Fileupload = ({
setStateFieldData(data.data);
const files = inputRef.current.getFiles();
inputRef.current.setUploadedFiles(files);
setDataFn(fieldName, data.data, { shouldValidate: true });
inputRef.current.setFiles([]);
saveFormCallback();
}
}
@@ -60,11 +63,12 @@ const Fileupload = ({
}
const itemTemplate = (file) => {
let fileName = file.fileName ? file.fileName : file.name;
return (
<div className="appForm__fileUploadItem">
<div>
<span className="appForm__fileUploadItemName">
{file.name}
{fileName}
</span>
</div>
<div>
@@ -72,7 +76,9 @@ const Fileupload = ({
{!file.id ? <Tag value={__('In attesa', 'gepafin')} severity="warning"></Tag> : null}
</div>
<div>
<Button icon="pi pi-times" severity="danger"
<Button icon="pi pi-times"
severity="danger"
type="button"
disabled={disabled}
aria-label={__('Anulla', 'gepafin')}
onClick={() => onTemplateRemove(file)}/>
@@ -101,6 +107,8 @@ const Fileupload = ({
setStateFieldData(prevState => {
const newFiles = prevState.filter(o => o.id !== id);
inputRef.current.setUploadedFiles(newFiles);
setDataFn(fieldName, newFiles, { shouldValidate: true });
saveFormCallback();
return newFiles;
});
}
@@ -154,11 +162,9 @@ const Fileupload = ({
useEffect(() => {
if (inputRef.current) {
const properValue = multiple
? defaultValue
: !isEmpty(defaultValue) ? [defaultValue] : [];
inputRef.current.setUploadedFiles(properValue);
inputRef.current.setUploadedFiles(defaultValue);
}
setStateFieldData(defaultValue);
}, [defaultValue]);
useEffect(() => {
@@ -166,18 +172,12 @@ const Fileupload = ({
setAcceptFormats(accept.join(',').replace(/\*/g, '.\*').replace(/,/g, '|'));
}, [accept]);
useEffect(() => {
if (inputRef.current) {
inputRef.current.setUploadedFiles(stateFieldData);
}
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
return (
sourceId || sourceId === 0
? <>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required || config.isRequired ? <span className="appForm__field--required">*</span> : null}
{label}{config.required || config.isRequired ?
<span className="appForm__field--required">*</span> : null}
{acceptFormats ? ' (' + getPropeMimeLabels(accept) + ')' : null}
</label>
<FileUpload

2
src/configData.js
View File

@@ -1,6 +1,6 @@
export const mimeTypes = [
{ name: 'PDF', code: 'application/pdf' },
{ name: 'p7m', ext: '.p7m,application/pkcs7-mime,application/x-pkcs7-mime' },
{ name: 'p7m', code: '.p7m,application/pkcs7-mime,application/x-pkcs7-mime' },
{ name: 'ZIP', code: 'application/zip' },
{ name: 'Immagine', code: 'image/*' },
{

10
src/pages/BandoApplication/ApplicationSteps/index.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { range } from 'ramda';
import { __ } from '@wordpress/i18n';
//import { __ } from '@wordpress/i18n';
// components
import { Steps } from 'primereact/steps';
@@ -9,18 +9,18 @@ const ApplicationSteps = ({ totalSteps = 0, activeStepIndex }) => {
const rangeArr = range(1, totalSteps + 1);
const items = rangeArr.map(() => ({ label: 'Passo' }));
// TODO update to using Steps after primereact is updated
/*// TODO update to using Steps after primereact is updated
return(
0 !== totalSteps
? <span>{__('Passo', 'gepafin')}: {activeStepIndex + 1}</span>
: null
)
)*/
/*return(
return(
0 !== totalSteps
? <Steps model={items} activeIndex={activeStepIndex} readOnly/>
: null
)*/
)
}
export default ApplicationSteps

138
src/pages/BandoApplication/index.js
View File

@@ -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>

37
src/pages/BandoViewBeneficiario/index.js
View File

@@ -19,6 +19,7 @@ import { AccordionTab } from 'primereact/accordion';
import { Button } from 'primereact/button';
import { Messages } from 'primereact/messages';
import { Message } from 'primereact/message';
import { Toast } from 'primereact/toast';
// api
import BandoService from '../../service/bando-service';
@@ -35,6 +36,7 @@ const BandoViewBeneficiario = () => {
const [newQuestion, setNewQuestion] = useState('');
const [applicationObj, setApplicationObj] = useState(true);
const bandoMsgs = useRef(null);
const toast = useRef(null);
const scaricaBando = () => {
@@ -66,6 +68,13 @@ const BandoViewBeneficiario = () => {
}
const errCreateApplCallback = (data) => {
if (toast.current) {
toast.current.show({
severity: 'error',
summary: '',
detail: data.message
});
}
if (bandoMsgs.current && data.message) {
bandoMsgs.current.show([
{
@@ -103,7 +112,7 @@ const BandoViewBeneficiario = () => {
const createCallBack = (data) => {
if (data.status === 'SUCCESS') {
setNewQuestion('');
if (bandoMsgs.current && data.message) {
/*if (bandoMsgs.current && data.message) {
bandoMsgs.current.show([
{
sticky: true, severity: 'success', summary: '',
@@ -115,13 +124,20 @@ const BandoViewBeneficiario = () => {
setTimeout(() => {
bandoMsgs.current.clear();
}, 5000);
}*/
if (toast.current) {
toast.current.show({
severity: 'success',
summary: '',
detail: data.message
});
}
}
storeSet.main.unsetAsyncRequest();
}
const errCreateCallback = (data) => {
if (bandoMsgs.current && data.message) {
/*if (bandoMsgs.current && data.message) {
bandoMsgs.current.show([
{
sticky: true, severity: 'error', summary: '',
@@ -129,6 +145,13 @@ const BandoViewBeneficiario = () => {
closable: true
}
]);
}*/
if (toast.current && data.message) {
toast.current.show({
severity: 'error',
summary: '',
detail: data.message
});
}
storeSet.main.unsetAsyncRequest();
}
@@ -140,7 +163,7 @@ const BandoViewBeneficiario = () => {
}
const errGetBandoCallback = (data) => {
if (bandoMsgs.current && data.message) {
/*if (bandoMsgs.current && data.message) {
bandoMsgs.current.show([
{
sticky: true, severity: 'error', summary: '',
@@ -148,6 +171,13 @@ const BandoViewBeneficiario = () => {
closable: true
}
]);
}*/
if (toast.current && data.message) {
toast.current.show({
severity: 'error',
summary: '',
detail: data.message
});
}
set404FromErrorResponse(data);
}
@@ -215,6 +245,7 @@ const BandoViewBeneficiario = () => {
<div className="appPage__spacer"></div>
<Messages ref={bandoMsgs}/>
<Toast ref={toast}/>
{!isAsyncRequest && !isEmpty(data)
? <div className="appPage__content">