- added proper fields for amendment note and documents;

- rewritten logic for repeater field;

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 {

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);
+            }
         }
     }
 

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 (
+            <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
+                    <div className="appPageSection">
-                            defaultValue={data.amendmentDocuments ?? []}
+                        <h3>{__('Notes', 'gepafin')}</h3>
-                            updateFn={(data) => updateNewAmendmentData(
+                        <div style={{ marginBottom: '30px', width: '100%' }}>
-                                data,
+                            <Editor
-                                ['amendmentDocuments']
+                                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"/>
+                            multiple={true}
-                    </div> : null}
+                        />
+                    </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>

src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js

@@ -1,7 +1,8 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
-import { useForm } from 'react-hook-form';
+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,
+        getValues,
-        watch,
+        watch
-        getValues
     } = useForm({
         defaultValues: useMemo(() => {
-            return formInitialData;
+            return {
-        }, [formInitialData]), mode: 'onChange'
+                items: defaultValue || []
+            };
+        }, [defaultValue]), mode: 'onChange'
     });
-    const watchName = watch('nameValue');
+    const { fields, append, remove } = useFieldArray({
-    const watchFile = watch('fileValue');
+        control,
+        name: 'items'
+    });
+
+    const watchFields = watch('items');
 
     const onSubmit = () => {
-    };
-
-    const doUpdateAfterFileUploaded = () => {
-        trigger();
     }
 
-    const addNew = useCallback(() => {
+    const doUpdateAfterFileUploaded = () => {
-        setValue('nameValue', '');
+        const formData = getValues();
-        setValue('fileValue', []);
+        updateFn(formData.items);
-        trigger();
+        updateCallbackFn(formData.items);
+    }
+
+    const addNew = () => {
         const uid = uniqid('f');
         const newItem = {
             fieldId: uid,
             nameValue: '',
             fileValue: []
         }
-        setItems([...items, newItem]);
+        append(newItem);
-        setChosen(uid);
+        setChosen(newItem.fieldId);
         trigger();
-    }, [items]);
+    };
 
     const setNewChosen = useCallback((id) => {
-        const chosenObj = head(items.filter(o => id === o.fieldId));
+        const chosenObj = head(fields.filter(o => id === o.fieldId));
-        setChosen(chosen === id ? '' : id);
-        reset();
         if (chosenObj) {
-            setValue('nameValue', chosenObj.nameValue);
+            setChosen(chosen === id ? '' : id);
-            setValue('fileValue', chosenObj.fileValue);
         }
-    }, [items]);
+    }, [fields, chosen]);
 
-    const removeItem = useCallback((id) => {
+    const removeItem = useCallback((index) => {
-        setItems([...items.filter(o => id !== o.fieldId)]);
+        const chosenObj = klona(fields[index]);
-        if (chosen === id) {
+        remove(index);
+        if (chosen === chosenObj.fieldId) {
             setChosen('');
-            reset();
         }
-    }, [items, chosen]);
+        const formData = getValues();
-
+        updateFn(formData.items);
-    useEffect(() => {
+        updateCallbackFn(formData.items);
-        const updatedItems = items.map((o) => {
+    }, [fields, chosen]);
-            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);
-    }, [])
 
     return (
         <div className="fieldsRepeater">
             <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
-                {items
+                {watchFields
-                    ? items.map(o => <div key={o.fieldId} className="fieldsRepeater__panel p-panel p-component">
+                    ? 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" data-hide={chosen !== o.fieldId}>
-                                ? <div className="fieldsRepeater__fields p-panel-content">
                                 <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')}
             />

src/pages/DomandaEditPreInstructor/index.js

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

src/pages/SoccorsoEditPreInstructor/index.js

@@ -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
+        const newAmendDocs = formValues.amendmentDocuments.map(o => o.id).join(',');
-            .reduce((acc, cur) => {
-                const newObj = {
-                    ...klona(cur),
-                    fileValue: cur.fileValue[0] ? cur.fileValue[0].id : ''
-                }
-
-                acc.push(newObj);
-                return acc;
-            }, []);
 
         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
+                    <div className="appPageSection columns">
-                        ? <RepeaterFields
+                        {data.amendmentNotes
-                        defaultValue={data.amendmentDocuments ?? []}
+                            ? <>
-                        updateFn={(data) => updateNewAmendmentData(
+                                <h3>{__('Notes', 'gepafin')}</h3>
-                            data,
+                                <div className="ql-editor" style={{ marginBottom: '30px', width: '100%' }}>
-                            ['amendmentDocuments']
+                                    {renderHtmlContent(data.amendmentNotes)}
-                        )}
-                        sourceId={amendmentId}
-                        sourceName="AMENDMENT"/> : null}
                                 </div>
-
+                            </> : null}
-                <div className="appForm__field">
+                        <FormField
-                    <label>{__('Motivazioni / Note Interne', 'gepafin')}</label>
+                            type="fileupload"
-                    <div style={{ position: 'relative' }}>
+                            setDataFn={setValue}
-                        <BlockingOverlay shouldDisplay={data.status === 'CLOSE'}/>
+                            saveFormCallback={doUpdateAmendment}
-                        <Editor
+                            fieldName="amendmentDocuments"
-                            value={data.internalNote}
+                            label={__('I file', 'gepafin')}
-                            readOnly={data.status === 'CLOSE'}
+                            control={control}
-                            placeholder={__('Digita qui il messagio', 'gepafin')}
+                            register={register}
-                            headerTemplate={header}
+                            errors={errors}
-                            onTextChange={(e) => updateNewAmendmentData(
+                            defaultValue={formInitialData.amendmentDocuments ? formInitialData.amendmentDocuments : []}
-                                e.htmlValue,
+                            accept={[]}
-                                ['internalNote']
+                            source="amendment"
-                            )}
+                            sourceId={amendmentId}
-                            style={{ height: 80 * 3, width: '100%' }}
+                            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>
     )