diff --git a/src/assets/scss/components/fieldsRepeater.scss b/src/assets/scss/components/fieldsRepeater.scss index dd4b4ba..dddc5ba 100644 --- a/src/assets/scss/components/fieldsRepeater.scss +++ b/src/assets/scss/components/fieldsRepeater.scss @@ -29,10 +29,16 @@ color: var(--menuitem-active-background); } } + + &[data-hide="true"] { + display: none; + } } .fieldsRepeater__fields { - + &[data-hide="true"] { + display: none; + } } .fieldsRepeater__addNew { diff --git a/src/components/FormField/components/Fileupload/index.js b/src/components/FormField/components/Fileupload/index.js index 70d716d..0bdcfeb 100644 --- a/src/components/FormField/components/Fileupload/index.js +++ b/src/components/FormField/components/Fileupload/index.js @@ -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); + } } } diff --git a/src/pages/DomandaBeneficiario/index.js b/src/pages/DomandaBeneficiario/index.js index c7fc5d5..f35a2b7 100644 --- a/src/pages/DomandaBeneficiario/index.js +++ b/src/pages/DomandaBeneficiario/index.js @@ -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 ( + + + + + + + + + + + + + + ); + }; + + const header = renderHeader(); + useEffect(() => { if (formInitialData) { //reset(); @@ -189,7 +218,7 @@ const DomandaBeneficiario = () => { {data.id ?
{data.callEmail}
diff --git a/src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js b/src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js index 32983d3..7a24f29 100644 --- a/src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js +++ b/src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js @@ -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 (