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

- added proper fields for amendment note and documents;

Browse Source 
- rewritten logic for repeater field;
This commit is contained in:
Vitalii Kiiko
2024-12-17 16:35:25 +01:00
parent ea2b46ddfe
commit 6724b9a5ba
6 changed files with 245 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/scss/components/fieldsRepeater.scss
View File

@@ -29,10 +29,16 @@
color: var(--menuitem-active-background);
}
}
&[data-hide="true"] {
display: none;
}
}
.fieldsRepeater__fields {
&[data-hide="true"] {
display: none;
}
}
.fieldsRepeater__addNew {

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

@@ -38,7 +38,8 @@ const Fileupload = ({
source = 'application',
disabled = false,
saveFormCallback = () => {
}
},
deleteOnBackend = true
}) => {
// eslint-disable-next-line no-unused-vars
const [stateFieldData, setStateFieldData] = useState([]);
@@ -97,7 +98,7 @@ const Fileupload = ({
};
const onTemplateRemove = (file) => {
if (file.id) {
if (file.id && deleteOnBackend) {
FileUploadService.deleteFile(
{},
(data) => deleteCallback(data, file.id),
@@ -108,6 +109,11 @@ const Fileupload = ({
const files = inputRef.current.getFiles()
const newFiles = files.filter(o => o.lastModified !== file.lastModified && o.name !== file.name);
inputRef.current.setFiles(newFiles);
if (file.id) {
const uploadedFiles = inputRef.current.getUploadedFiles();
const newUploadedFiles = uploadedFiles.filter(o => o.id !== file.id);
inputRef.current.setUploadedFiles(newUploadedFiles);
}
}
}

77
src/pages/DomandaBeneficiario/index.js
View File

@@ -27,6 +27,7 @@ import FormField from '../../components/FormField';
import SoccorsoComunications from '../SoccorsoEditPreInstructor/components/SoccorsoComunications';
import RepeaterFields from '../DomandaEditPreInstructor/components/RepeaterFields';
import { wrap } from 'object-path-immutable';
import { Editor } from 'primereact/editor';
const DomandaBeneficiario = () => {
const isAsyncRequest = useStore().main.isAsyncRequest();
@@ -69,12 +70,16 @@ const DomandaBeneficiario = () => {
if (data.data.length) {
const amendmentObj = data.data[0];
setData(getFormattedData(amendmentObj));
const formDataInitial = amendmentObj.applicationFormFields.reduce((acc, cur) => {
let formDataInitial = amendmentObj.applicationFormFields.reduce((acc, cur) => {
if (cur.fieldValue) {
acc[cur.fieldId] = cur.fieldValue;
}
return acc;
}, {});
formDataInitial = {
...formDataInitial,
amendmentDocuments: data.amendmentDocuments
}
setFormInitialData(formDataInitial);
storeSet.main.unsetAsyncRequest();
} else {
@@ -116,6 +121,7 @@ const DomandaBeneficiario = () => {
trigger();
let formValues = klona(getValues());
const newFormValues = Object.keys(formValues)
.filter(v => v !== 'amendmentDocuments')
.reduce((acc, cur) => {
let fieldVal = formValues[cur];
@@ -128,9 +134,12 @@ const DomandaBeneficiario = () => {
});
return acc;
}, []);
const newAmendDocs = formValues.amendmentDocuments.map(o => o.id).join(',');
const submitData = {
applicationFormFields: newFormValues,
amendmentDocuments: newAmendDocs,
amendmentNotes: data.amendmentNotes
}
const amendmentId = data.id;
@@ -175,6 +184,26 @@ const DomandaBeneficiario = () => {
setData(newData);
}
const renderHeader = () => {
return (
<span className="ql-formats">
<button className="ql-bold" aria-label="Bold"></button>
<button className="ql-italic" aria-label="Italic"></button>
<button className="ql-underline" aria-label="Underline"></button>
<button className="ql-link" aria-label="Link"></button>
<button className="ql-list" value="ordered"></button>
<button className="ql-header" value="2"></button>
<button className="ql-header" value="3"></button>
<button className="ql-blockquote"></button>
<button className="ql-list" value="bullet"></button>
<button className="ql-indent" value="-1"></button>
<button className="ql-indent" value="+1"></button>
</span>
);
};
const header = renderHeader();
useEffect(() => {
if (formInitialData) {
//reset();
@@ -298,7 +327,7 @@ const DomandaBeneficiario = () => {
disabled={data.status === 'CLOSE'}
type="fileupload"
setDataFn={setValue}
/*saveFormCallback={doUpdateAmendment}*/
saveFormCallback={doUpdateAmendment}
fieldName={o.fieldId}
label={o.label}
control={control}
@@ -321,18 +350,39 @@ const DomandaBeneficiario = () => {
</ol>
</div> : null}
{data.id
? <div className="appPageSection">
<div className="appPageSection">
<h2>{__('Documenti aggiuntivi', 'gepafin')}</h2>
<RepeaterFields
defaultValue={data.amendmentDocuments ?? []}
updateFn={(data) => updateNewAmendmentData(
data,
['amendmentDocuments']
<div className="appPageSection">
<h3>{__('Notes', 'gepafin')}</h3>
<div style={{ marginBottom: '30px', width: '100%' }}>
<Editor
value={data.amendmentNotes}
placeholder={__('Digita qui il messagio', 'gepafin')}
headerTemplate={header}
onTextChange={(e) => updateNewAmendmentData(
e.htmlValue,
'amendmentNotes'
)}
style={{ height: 80 * 3, width: '100%' }}
/>
</div>
<FormField
type="fileupload"
setDataFn={setValue}
saveFormCallback={doUpdateAmendment}
fieldName="amendmentDocuments"
label={__('I file', 'gepafin')}
control={control}
register={register}
errors={errors}
defaultValue={formInitialData.amendmentDocuments ? formInitialData.amendmentDocuments : []}
accept={[]}
source="amendment"
sourceId={data.id}
sourceName="evaluation"/>
</div> : null}
multiple={true}
/>
</div>
</div>
{data.id
? <div className="appPageSection__message warning">
@@ -371,7 +421,10 @@ const DomandaBeneficiario = () => {
header={__('Invia documenti via PEC', 'gepafin')}
visible={isVisibleEmailDialog}
style={{ width: '50vw' }}
onHide={() => {if (!isVisibleEmailDialog) return; setIsVisibleEmailDialog(false); }}>
onHide={() => {
if (!isVisibleEmailDialog) return;
setIsVisibleEmailDialog(false);
}}>
<p className="m-0">
{data.callEmail}
</p>

120
src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js
View File

@@ -1,7 +1,8 @@
import React, { useMemo, useState, useEffect, useCallback } from 'react';
import { useForm } from 'react-hook-form';
import React, { useMemo, useState, useCallback } from 'react';
import { useForm, useFieldArray } from 'react-hook-form';
import { isEmpty, head } from 'ramda';
import { __ } from '@wordpress/i18n';
import { klona } from 'klona';
// tools
import uniqid from '../../../../helpers/uniqid';
@@ -15,13 +16,11 @@ const RepeaterFields = ({
sourceName,
updateFn = () => {
},
defaultValue = [],
updateCallbackFn = () => {
}
},
defaultValue = [],
}) => {
const [items, setItems] = useState([]);
const [chosen, setChosen] = useState('');
const [formInitialData, setFormInitialData] = useState({});
const {
control,
handleSubmit,
@@ -29,90 +28,67 @@ const RepeaterFields = ({
setValue,
register,
trigger,
reset,
watch,
getValues
getValues,
watch
} = useForm({
defaultValues: useMemo(() => {
return formInitialData;
}, [formInitialData]), mode: 'onChange'
return {
items: defaultValue || []
};
}, [defaultValue]), mode: 'onChange'
});
const watchName = watch('nameValue');
const watchFile = watch('fileValue');
const { fields, append, remove } = useFieldArray({
control,
name: 'items'
});
const watchFields = watch('items');
const onSubmit = () => {
};
const doUpdateAfterFileUploaded = () => {
trigger();
}
const addNew = useCallback(() => {
setValue('nameValue', '');
setValue('fileValue', []);
trigger();
const doUpdateAfterFileUploaded = () => {
const formData = getValues();
updateFn(formData.items);
updateCallbackFn(formData.items);
}
const addNew = () => {
const uid = uniqid('f');
const newItem = {
fieldId: uid,
nameValue: '',
fileValue: []
}
setItems([...items, newItem]);
setChosen(uid);
append(newItem);
setChosen(newItem.fieldId);
trigger();
}, [items]);
};
const setNewChosen = useCallback((id) => {
const chosenObj = head(items.filter(o => id === o.fieldId));
setChosen(chosen === id ? '' : id);
reset();
const chosenObj = head(fields.filter(o => id === o.fieldId));
if (chosenObj) {
setValue('nameValue', chosenObj.nameValue);
setValue('fileValue', chosenObj.fileValue);
setChosen(chosen === id ? '' : id);
}
}, [items]);
}, [fields, chosen]);
const removeItem = useCallback((id) => {
setItems([...items.filter(o => id !== o.fieldId)]);
if (chosen === id) {
const removeItem = useCallback((index) => {
const chosenObj = klona(fields[index]);
remove(index);
if (chosen === chosenObj.fieldId) {
setChosen('');
reset();
}
}, [items, chosen]);
useEffect(() => {
const updatedItems = items.map((o) => {
return o.fieldId === chosen ? {
...o,
nameValue: watchName
} : o;
})
setItems([...updatedItems]);
}, [watchName]);
useEffect(() => {
const updatedItems = items.map((o) => {
return o.fieldId === chosen ? {
...o,
fileValue: watchFile
} : o;
});
setItems([...updatedItems]);
}, [watchFile]);
useEffect(() => {
updateFn(items);
}, [items]);
useEffect(() => {
setItems(defaultValue);
}, [])
const formData = getValues();
updateFn(formData.items);
updateCallbackFn(formData.items);
}, [fields, chosen]);
return (
<div className="fieldsRepeater">
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
{items
? items.map(o => <div key={o.fieldId} className="fieldsRepeater__panel p-panel p-component">
{watchFields
? watchFields.map((o, index) => <div key={o.fieldId}
className="fieldsRepeater__panel p-panel p-component">
<div className="fieldsRepeater__heading p-panel p-panel-header">
<span onClick={() => setNewChosen(o.fieldId)}>{o.nameValue}</span>
<Button icon="pi pi-times"
@@ -121,13 +97,12 @@ const RepeaterFields = ({
className="actionBtn"
type="button"
aria-label={__('Cancella', 'gepafin')}
onClick={() => removeItem(o.fieldId)}/>
onClick={() => removeItem(index)}/>
</div>
{chosen === o.fieldId
? <div className="fieldsRepeater__fields p-panel-content">
<div className="fieldsRepeater__fields p-panel-content" data-hide={chosen !== o.fieldId}>
<FormField
type="textinput"
fieldName="nameValue"
fieldName={`items.${index}.nameValue`}
label={__('Titolo del file', 'gepafin')}
control={control}
errors={errors}
@@ -139,7 +114,7 @@ const RepeaterFields = ({
disabled={isEmpty(o.nameValue)}
setDataFn={setValue}
saveFormCallback={doUpdateAfterFileUploaded}
fieldName="fileValue"
fieldName={`items.${index}.fileValue`}
label={__('File', 'gepafin')}
control={control}
register={register}
@@ -149,9 +124,10 @@ const RepeaterFields = ({
source={sourceName}
sourceId={sourceId}
multiple={false}
deleteOnBackend={false}
config={{ required: __('È obbligatorio', 'gepafin') }}
/>
</div> : null}
</div>
</div>
) : null}
</form>
@@ -159,7 +135,7 @@ const RepeaterFields = ({
className="fieldsRepeater__addNew"
outlined
type="button"
disabled={!isEmpty(chosen.fileId) && (isEmpty(watchName) || isEmpty(watchFile))}
disabled={watchFields && watchFields.filter(o => isEmpty(o.nameValue) || isEmpty(o.fileValue)).length > 0}
onClick={addNew}
label={__('Aggiungi nuovo file', 'gepafin')}
/>

10
src/pages/DomandaEditPreInstructor/index.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { is, isEmpty, isNil, sum, pathOr, head } from 'ramda';
@@ -153,7 +153,7 @@ const DomandaEditPreInstructor = () => {
updateFlagsForSoccorso(newData);
}
const doSaveDraft = (doRedirect = '') => {
const doSaveDraft = useCallback((doRedirect = '') => {
const formData = {
criteria: klona(data.criteria),
checklist: klona(data.checklist),
@@ -173,7 +173,7 @@ const DomandaEditPreInstructor = () => {
(data) => updateCallback(data, doRedirect),
errUpdateCallback
);
}
}, [data]);
const updateCallback = (data, doRedirect = '') => {
if (data.status === 'SUCCESS') {
@@ -605,7 +605,7 @@ const DomandaEditPreInstructor = () => {
</div>
</div>
<div className="appPageSection">
{/*<div className="appPageSection">
<h2>{__('Documenti di soccorso', 'gepafin')}</h2>
{data.amendmentDetails
.filter(o => o.amendmentDocuments && !isEmpty(o.amendmentDocuments)
@@ -632,7 +632,7 @@ const DomandaEditPreInstructor = () => {
name="files"
ndg={data.ndg}
applicationId={id}/>)}
</div>
</div>*/}
<div className="appPageSection">
<h2>{__('Punteggi di valutazione', 'gepafin')}</h2>

123
src/pages/SoccorsoEditPreInstructor/index.js
View File

@@ -36,6 +36,7 @@ const SoccorsoEditPreInstructor = () => {
const { id, amendmentId } = useParams();
const navigate = useNavigate();
const [data, setData] = useState({});
const [isVisibleCloseAmendDialog, setIsVisibleCloseAmendDialog] = useState(false);
const [isVisibleExtendTimeDialog, setIsVisibleExtendTimeDialog] = useState(false);
const [extendedTime, setExtendedTime] = useState(3);
const [isLoadingExtendingTime, setIsLoadingExtendingTime] = useState(false);
@@ -63,12 +64,16 @@ const SoccorsoEditPreInstructor = () => {
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
setData(getFormattedData(data.data));
const formDataInitial = data.data.applicationFormFields.reduce((acc, cur) => {
let formDataInitial = data.data.applicationFormFields.reduce((acc, cur) => {
if (cur.fieldValue) {
acc[cur.fieldId] = cur.fieldValue;
}
return acc;
}, {});
formDataInitial = {
...formDataInitial,
amendmentDocuments: data.amendmentDocuments
}
setFormInitialData(formDataInitial);
}
storeSet.main.unsetAsyncRequest();
@@ -124,6 +129,7 @@ const SoccorsoEditPreInstructor = () => {
trigger();
let formValues = klona(getValues());
const newFormValues = Object.keys(formValues)
.filter(v => v !== 'amendmentDocuments')
.reduce((acc, cur) => {
let fieldVal = formValues[cur];
@@ -136,16 +142,7 @@ const SoccorsoEditPreInstructor = () => {
});
return acc;
}, []);
const newAmendDocs = data.amendmentDocuments
.reduce((acc, cur) => {
const newObj = {
...klona(cur),
fileValue: cur.fileValue[0] ? cur.fileValue[0].id : ''
}
acc.push(newObj);
return acc;
}, []);
const newAmendDocs = formValues.amendmentDocuments.map(o => o.id).join(',');
const submitData = {
applicationFormFields: newFormValues,
@@ -188,8 +185,29 @@ const SoccorsoEditPreInstructor = () => {
storeSet.main.unsetAsyncRequest();
}
const openCloseAmendmentDialog = () => {
setIsVisibleCloseAmendDialog(true);
}
const headerCloseAmendDialog = () => {
return <span>{__('Chiudi Soccorso Istruttorio', 'gepafin')}</span>
}
const hideCloseAmendDialog = () => {
setIsVisibleCloseAmendDialog(false);
}
const footerCloseAmendDialog = () => {
return <div>
<Button type="button" label={__('Anulla', 'gepafin')} onClick={hideCloseAmendDialog} outlined/>
<Button
type="button"
disabled={isAsyncRequest || isEmpty(data.internalNotes)}
label={__('Invia', 'gepafin')} onClick={doCloseAmendment}/>
</div>
}
const doCloseAmendment = () => {
doUpdateAmendment();
const submitData = {
internalNote: data.internalNote
}
@@ -311,7 +329,6 @@ const SoccorsoEditPreInstructor = () => {
useEffect(() => {
if (formInitialData) {
//reset();
Object.keys(formInitialData).map(k => setValue(k, formInitialData[k]));
trigger();
}
@@ -324,7 +341,6 @@ const SoccorsoEditPreInstructor = () => {
AmendmentsService.getSoccorsoById(getCallback, errGetCallback, [['id', soccorsoEntityId]]);
}, [amendmentId]);
console.log('data', data.amendmentDocuments);
return (
<div className="appPage">
<div className="appPage__pageHeader">
@@ -432,31 +448,28 @@ const SoccorsoEditPreInstructor = () => {
<div className="appPageSection">
<h2>{__('Documenti aggiuntivi', 'gepafin')}</h2>
{data.id
? <RepeaterFields
defaultValue={data.amendmentDocuments ?? []}
updateFn={(data) => updateNewAmendmentData(
data,
['amendmentDocuments']
)}
sourceId={amendmentId}
sourceName="AMENDMENT"/> : null}
<div className="appPageSection columns">
{data.amendmentNotes
? <>
<h3>{__('Notes', 'gepafin')}</h3>
<div className="ql-editor" style={{ marginBottom: '30px', width: '100%' }}>
{renderHtmlContent(data.amendmentNotes)}
</div>
<div className="appForm__field">
<label>{__('Motivazioni / Note Interne', 'gepafin')}</label>
<div style={{ position: 'relative' }}>
<BlockingOverlay shouldDisplay={data.status === 'CLOSE'}/>
<Editor
value={data.internalNote}
readOnly={data.status === 'CLOSE'}
placeholder={__('Digita qui il messagio', 'gepafin')}
headerTemplate={header}
onTextChange={(e) => updateNewAmendmentData(
e.htmlValue,
['internalNote']
)}
style={{ height: 80 * 3, width: '100%' }}
</> : null}
<FormField
type="fileupload"
setDataFn={setValue}
saveFormCallback={doUpdateAmendment}
fieldName="amendmentDocuments"
label={__('I file', 'gepafin')}
control={control}
register={register}
errors={errors}
defaultValue={formInitialData.amendmentDocuments ? formInitialData.amendmentDocuments : []}
accept={[]}
source="amendment"
sourceId={amendmentId}
multiple={true}
/>
</div>
</div>
@@ -469,6 +482,12 @@ const SoccorsoEditPreInstructor = () => {
<div className="appPageSection">
<div className="appPageSection__actions">
<Button
type="button"
disabled={isAsyncRequest}
onClick={doUpdateAmendment}
label={__('Salva', 'gepafin')}
icon="pi pi-save" iconPos="right"/>
<Button
type="button"
onClick={sendReminder}
@@ -493,7 +512,7 @@ const SoccorsoEditPreInstructor = () => {
icon="pi pi-save" iconPos="right"/>*/}
<Button
type="button"
onClick={doCloseAmendment}
onClick={openCloseAmendmentDialog}
disabled={isAsyncRequest || data.status === 'CLOSE'}
label={__('Chiudi Soccorso Istruttorio', 'gepafin')}
icon="pi pi-times" iconPos="right"/>
@@ -522,6 +541,32 @@ const SoccorsoEditPreInstructor = () => {
onChange={(e) => setExtendedTime(e.value)}/>
</div>
</Dialog>
<Dialog
visible={isVisibleCloseAmendDialog}
modal
header={headerCloseAmendDialog}
footer={footerCloseAmendDialog}
style={{ maxWidth: '600px', width: '100%' }}
onHide={hideCloseAmendDialog}>
<div className="appForm__field">
<label>{__('Motivazioni', 'gepafin')}</label>
<div style={{ position: 'relative' }}>
<BlockingOverlay shouldDisplay={data.status === 'CLOSE'}/>
<Editor
value={data.internalNote}
readOnly={data.status === 'CLOSE'}
placeholder={__('Digita qui il messagio', 'gepafin')}
headerTemplate={header}
onTextChange={(e) => updateNewAmendmentData(
e.htmlValue,
['internalNote']
)}
style={{ height: 80 * 3, width: '100%' }}
/>
</div>
</div>
</Dialog>
</div>
)