- added uploading files for evaluation;
- added uploading files for amendment for instructor; (need more tests)
This commit is contained in:
@@ -2,12 +2,13 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 30px;
|
gap: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fieldsRepeater form {
|
.fieldsRepeater form {
|
||||||
display: contents;
|
display: contents;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fieldsRepeater__panel {
|
.fieldsRepeater__panel {
|
||||||
@@ -18,6 +19,16 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--menuitem-active-background);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fieldsRepeater__fields {
|
.fieldsRepeater__fields {
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import React, { useMemo, useState, useEffect } from 'react';
|
import React, { useMemo, useState, useEffect, useCallback } from 'react';
|
||||||
import { klona } from 'klona';
|
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { isEmpty } from 'ramda';
|
import { isEmpty, head } from 'ramda';
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
|
|
||||||
// tools
|
// tools
|
||||||
@@ -11,7 +10,12 @@ import uniqid from '../../../../helpers/uniqid';
|
|||||||
import FormField from '../../../../components/FormField';
|
import FormField from '../../../../components/FormField';
|
||||||
import { Button } from 'primereact/button';
|
import { Button } from 'primereact/button';
|
||||||
|
|
||||||
const RepeaterFields = ({ sourceId, sourceName }) => {
|
const RepeaterFields = ({
|
||||||
|
sourceId,
|
||||||
|
sourceName,
|
||||||
|
updateFn = () => {},
|
||||||
|
defaultValue = []
|
||||||
|
}) => {
|
||||||
const [items, setItems] = useState([]);
|
const [items, setItems] = useState([]);
|
||||||
const [chosen, setChosen] = useState('');
|
const [chosen, setChosen] = useState('');
|
||||||
const [formInitialData, setFormInitialData] = useState({});
|
const [formInitialData, setFormInitialData] = useState({});
|
||||||
@@ -22,7 +26,7 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
|
|||||||
setValue,
|
setValue,
|
||||||
register,
|
register,
|
||||||
trigger,
|
trigger,
|
||||||
getValues,
|
reset,
|
||||||
watch
|
watch
|
||||||
} = useForm({
|
} = useForm({
|
||||||
defaultValues: useMemo(() => {
|
defaultValues: useMemo(() => {
|
||||||
@@ -35,32 +39,49 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
|
|||||||
const onSubmit = () => {
|
const onSubmit = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const doUpdateAmendment = () => {
|
const doUpdateAfterFileUploaded = () => {
|
||||||
trigger();
|
trigger();
|
||||||
let formValues = klona(getValues());
|
|
||||||
console.log('formValues', formValues);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const addNew = () => {
|
const addNew = useCallback(() => {
|
||||||
setValue('nameValue', '');
|
setValue('nameValue', '');
|
||||||
setValue('fileValue', {});
|
setValue('fileValue', []);
|
||||||
trigger();
|
trigger();
|
||||||
const uid = uniqid('f');
|
const uid = uniqid('f');
|
||||||
const newItem = {
|
const newItem = {
|
||||||
fieldId: uid,
|
fieldId: uid,
|
||||||
name: '',
|
nameValue: '',
|
||||||
file: {},
|
fileValue: [],
|
||||||
|
valid: true
|
||||||
}
|
}
|
||||||
setItems([...items, newItem]);
|
setItems([...items, newItem]);
|
||||||
setChosen(uid);
|
setChosen(uid);
|
||||||
trigger();
|
trigger();
|
||||||
}
|
}, [items]);
|
||||||
|
|
||||||
|
const setNewChosen = useCallback((id) => {
|
||||||
|
const chosenObj = head(items.filter(o => id === o.fieldId));
|
||||||
|
setChosen(chosen === id ? '' : id);
|
||||||
|
reset();
|
||||||
|
if (chosenObj) {
|
||||||
|
setValue('nameValue', chosenObj.nameValue);
|
||||||
|
setValue('fileValue', chosenObj.fileValue);
|
||||||
|
}
|
||||||
|
}, [items]);
|
||||||
|
|
||||||
|
const removeItem = useCallback((id) => {
|
||||||
|
setItems([...items.filter(o => id !== o.fieldId)]);
|
||||||
|
if (chosen === id) {
|
||||||
|
setChosen('');
|
||||||
|
reset();
|
||||||
|
}
|
||||||
|
}, [items, chosen]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const updatedItems = items.map((o) => {
|
const updatedItems = items.map((o) => {
|
||||||
return o.fieldId === chosen ? {
|
return o.fieldId === chosen ? {
|
||||||
...o,
|
...o,
|
||||||
name: watchName
|
nameValue: watchName
|
||||||
} : o;
|
} : o;
|
||||||
})
|
})
|
||||||
setItems([...updatedItems]);
|
setItems([...updatedItems]);
|
||||||
@@ -70,29 +91,35 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
|
|||||||
const updatedItems = items.map((o) => {
|
const updatedItems = items.map((o) => {
|
||||||
return o.fieldId === chosen ? {
|
return o.fieldId === chosen ? {
|
||||||
...o,
|
...o,
|
||||||
file: watchFile
|
fileValue: watchFile
|
||||||
} : o;
|
} : o;
|
||||||
})
|
})
|
||||||
setItems([...updatedItems]);
|
setItems([...updatedItems]);
|
||||||
}, [watchFile]);
|
}, [watchFile]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('items', items);
|
updateFn(items);
|
||||||
}, [items]);
|
}, [items]);
|
||||||
|
|
||||||
//console.log('items', items, chosen);
|
useEffect(() => {
|
||||||
|
setItems(defaultValue);
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
console.log('items', items, chosen);
|
||||||
return (
|
return (
|
||||||
<div className="fieldsRepeater">
|
<div className="fieldsRepeater">
|
||||||
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
||||||
{items
|
{items
|
||||||
? items.map(o => <div key={o.fieldId} className="fieldsRepeater__panel p-panel p-component">
|
? items.map(o => <div key={o.fieldId} className="fieldsRepeater__panel p-panel p-component">
|
||||||
<div className="fieldsRepeater__heading p-panel p-panel-header">
|
<div className="fieldsRepeater__heading p-panel p-panel-header">
|
||||||
<span>{o.name}</span>
|
<span onClick={() => setNewChosen(o.fieldId)}>{o.nameValue}</span>
|
||||||
<Button icon="pi pi-times" severity="danger"
|
<Button icon="pi pi-times"
|
||||||
|
outlined
|
||||||
|
severity="danger"
|
||||||
className="actionBtn"
|
className="actionBtn"
|
||||||
type="button"
|
type="button"
|
||||||
aria-label={__('Cancella', 'gepafin')}
|
aria-label={__('Cancella', 'gepafin')}
|
||||||
onClick={() => console.log(o)}/>
|
onClick={() => removeItem(o.fieldId)}/>
|
||||||
</div>
|
</div>
|
||||||
{chosen === o.fieldId
|
{chosen === o.fieldId
|
||||||
? <div className="fieldsRepeater__fields p-panel-content">
|
? <div className="fieldsRepeater__fields p-panel-content">
|
||||||
@@ -102,23 +129,25 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
|
|||||||
label={__('Titolo del file', 'gepafin')}
|
label={__('Titolo del file', 'gepafin')}
|
||||||
control={control}
|
control={control}
|
||||||
errors={errors}
|
errors={errors}
|
||||||
defaultValue={formInitialData['nameValue']}
|
defaultValue={o.nameValue}
|
||||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||||
/>
|
/>
|
||||||
<FormField
|
<FormField
|
||||||
type="fileupload"
|
type="fileupload"
|
||||||
|
disabled={isEmpty(o.nameValue)}
|
||||||
setDataFn={setValue}
|
setDataFn={setValue}
|
||||||
saveFormCallback={doUpdateAmendment}
|
saveFormCallback={doUpdateAfterFileUploaded}
|
||||||
fieldName="fileValue"
|
fieldName="fileValue"
|
||||||
label={__('File', 'gepafin')}
|
label={__('File', 'gepafin')}
|
||||||
control={control}
|
control={control}
|
||||||
register={register}
|
register={register}
|
||||||
errors={errors}
|
errors={errors}
|
||||||
defaultValue={formInitialData['fileValue'] ? formInitialData['fileValue'] : []}
|
defaultValue={o.fileValue ? o.fileValue : []}
|
||||||
accept={[]}
|
accept={[]}
|
||||||
source={sourceName}
|
source={sourceName}
|
||||||
sourceId={sourceId}
|
sourceId={sourceId}
|
||||||
multiple={false}
|
multiple={false}
|
||||||
|
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||||
/>
|
/>
|
||||||
</div> : null}
|
</div> : null}
|
||||||
</div>
|
</div>
|
||||||
@@ -126,10 +155,11 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
|
|||||||
</form>
|
</form>
|
||||||
<Button
|
<Button
|
||||||
className="fieldsRepeater__addNew"
|
className="fieldsRepeater__addNew"
|
||||||
|
outlined
|
||||||
type="button"
|
type="button"
|
||||||
/*disabled={!isEmpty(chosen.fileId) && (isEmpty(chosen.name) || isEmpty(chosen.file))}*/
|
/*disabled={!isEmpty(chosen.fileId) && (isEmpty(chosen.name) || isEmpty(chosen.file))}*/
|
||||||
onClick={addNew}
|
onClick={addNew}
|
||||||
label={__('Aggiungi nuovo', 'gepafin')}
|
label={__('Aggiungi nuovo file', 'gepafin')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -158,6 +158,12 @@ const DomandaEditPreInstructor = () => {
|
|||||||
criteria: klona(data.criteria),
|
criteria: klona(data.criteria),
|
||||||
checklist: klona(data.checklist),
|
checklist: klona(data.checklist),
|
||||||
files: klona(data.files),
|
files: klona(data.files),
|
||||||
|
evaluationDocument: klona(data.evaluationDocument.map(o => ({
|
||||||
|
...o,
|
||||||
|
fileValue: o.fileValue[0] ? o.fileValue[0].id : ''
|
||||||
|
})
|
||||||
|
)),
|
||||||
|
amendmentDetails: klona(data.amendmentDetails),
|
||||||
note: data.note
|
note: data.note
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -540,7 +546,14 @@ const DomandaEditPreInstructor = () => {
|
|||||||
|
|
||||||
<div className="appPageSection">
|
<div className="appPageSection">
|
||||||
<h2>{__('Documenti aggiuntivi', 'gepafin')}</h2>
|
<h2>{__('Documenti aggiuntivi', 'gepafin')}</h2>
|
||||||
<RepeaterFields sourceId={id} sourceName="evaluation"/>
|
<RepeaterFields
|
||||||
|
defaultValue={data.evaluationDocument ?? []}
|
||||||
|
updateFn={(data) => updateEvaluationValue(
|
||||||
|
data,
|
||||||
|
['evaluationDocument']
|
||||||
|
)}
|
||||||
|
sourceId={data.assignedApplicationId}
|
||||||
|
sourceName="evaluation"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="appPageSection">
|
<div className="appPageSection">
|
||||||
|
|||||||
@@ -193,7 +193,7 @@ const SoccorsoAddPreInstructor = () => {
|
|||||||
<div className="appPageSection">
|
<div className="appPageSection">
|
||||||
<div className="appPageSection columns">
|
<div className="appPageSection columns">
|
||||||
<div>
|
<div>
|
||||||
<h3>{__('Note', 'gepafin')}</h3>
|
<h3>{__('Pec/Email', 'gepafin')}</h3>
|
||||||
<div style={{marginBottom: '30px'}}>
|
<div style={{marginBottom: '30px'}}>
|
||||||
<Editor
|
<Editor
|
||||||
value={formData.note}
|
value={formData.note}
|
||||||
|
|||||||
@@ -113,7 +113,7 @@ const SoccorsoEditPreInstructor = () => {
|
|||||||
const header = renderHeader();
|
const header = renderHeader();
|
||||||
|
|
||||||
const updateNewAmendmentData = (value, path) => {
|
const updateNewAmendmentData = (value, path) => {
|
||||||
const newData = wrap(data).set(path.split('.'), value).value();
|
const newData = wrap(data).set(path, value).value();
|
||||||
setData(newData);
|
setData(newData);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -136,10 +136,22 @@ const SoccorsoEditPreInstructor = () => {
|
|||||||
});
|
});
|
||||||
return acc;
|
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 submitData = {
|
const submitData = {
|
||||||
applicationFormFields: newFormValues
|
applicationFormFields: newFormValues,
|
||||||
|
amendmentDocuments: newAmendDocs
|
||||||
}
|
}
|
||||||
|
|
||||||
storeSet.main.setAsyncRequest();
|
storeSet.main.setAsyncRequest();
|
||||||
AmendmentsService.updateSoccorso(amendmentId, submitData, updateAmendmentCallback, errUpdateAmendmentCallback);
|
AmendmentsService.updateSoccorso(amendmentId, submitData, updateAmendmentCallback, errUpdateAmendmentCallback);
|
||||||
}
|
}
|
||||||
@@ -177,6 +189,7 @@ const SoccorsoEditPreInstructor = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const doCloseAmendment = () => {
|
const doCloseAmendment = () => {
|
||||||
|
doUpdateAmendment();
|
||||||
const submitData = {
|
const submitData = {
|
||||||
internalNote: data.internalNote
|
internalNote: data.internalNote
|
||||||
}
|
}
|
||||||
@@ -194,7 +207,7 @@ const SoccorsoEditPreInstructor = () => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (data.data.status) {
|
if (data.data.status) {
|
||||||
updateNewAmendmentData(data.data.status, 'status')
|
updateNewAmendmentData(data.data.status, ['status'])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
storeSet.main.unsetAsyncRequest();
|
storeSet.main.unsetAsyncRequest();
|
||||||
@@ -311,6 +324,10 @@ const SoccorsoEditPreInstructor = () => {
|
|||||||
AmendmentsService.getSoccorsoById(getCallback, errGetCallback, [['id', soccorsoEntityId]]);
|
AmendmentsService.getSoccorsoById(getCallback, errGetCallback, [['id', soccorsoEntityId]]);
|
||||||
}, [amendmentId]);
|
}, [amendmentId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log(data);
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="appPage">
|
<div className="appPage">
|
||||||
<div className="appPage__pageHeader">
|
<div className="appPage__pageHeader">
|
||||||
@@ -389,17 +406,12 @@ const SoccorsoEditPreInstructor = () => {
|
|||||||
<SoccorsoComunications amendmentId={amendmentId} soccorsoStatus={data.status}/>
|
<SoccorsoComunications amendmentId={amendmentId} soccorsoStatus={data.status}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="appPageSection">
|
{data.formFields && !isEmpty(data.formFields)
|
||||||
<h2>{__('Documenti ricevuti', 'gepafin')}</h2>
|
? <div className="appPageSection">
|
||||||
<RepeaterFields sourceId={id} sourceName="evaluation"/>
|
<h2>{__('Documenti Ricevuti', 'gepafin')}</h2>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="appPageSection">
|
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<h2>{__('Documenti Ricevuti', 'gepafin')}</h2>
|
{data.formFields.map((o, i) => {
|
||||||
|
|
||||||
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
{data.formFields
|
|
||||||
? data.formFields.map((o, i) => {
|
|
||||||
return <FormField
|
return <FormField
|
||||||
key={o.fieldId}
|
key={o.fieldId}
|
||||||
disabled={data.status === 'CLOSE'}
|
disabled={data.status === 'CLOSE'}
|
||||||
@@ -417,8 +429,20 @@ const SoccorsoEditPreInstructor = () => {
|
|||||||
sourceId={data.applicationId}
|
sourceId={data.applicationId}
|
||||||
multiple={true}
|
multiple={true}
|
||||||
/>
|
/>
|
||||||
}) : null}
|
})}
|
||||||
</form>
|
</form>
|
||||||
|
</div> : null}
|
||||||
|
|
||||||
|
<div className="appPageSection">
|
||||||
|
<h2>{__('Documenti aggiuntivi', 'gepafin')}</h2>
|
||||||
|
<RepeaterFields
|
||||||
|
defaultValue={data.amendmentDocuments ?? []}
|
||||||
|
updateFn={(data) => updateNewAmendmentData(
|
||||||
|
data,
|
||||||
|
['amendmentDocuments']
|
||||||
|
)}
|
||||||
|
sourceId={amendmentId}
|
||||||
|
sourceName="AMENDMENT"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="appForm__field">
|
<div className="appForm__field">
|
||||||
@@ -432,7 +456,7 @@ const SoccorsoEditPreInstructor = () => {
|
|||||||
headerTemplate={header}
|
headerTemplate={header}
|
||||||
onTextChange={(e) => updateNewAmendmentData(
|
onTextChange={(e) => updateNewAmendmentData(
|
||||||
e.htmlValue,
|
e.htmlValue,
|
||||||
'internalNote'
|
['internalNote']
|
||||||
)}
|
)}
|
||||||
style={{ height: 80 * 3, width: '100%' }}
|
style={{ height: 80 * 3, width: '100%' }}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user