- added uploading files for evaluation;

- added  uploading files for amendment for instructor; (need more tests)

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

@@ -1,7 +1,6 @@
-import React, { useMemo, useState, useEffect } from 'react';
-import { klona } from 'klona';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { useForm } from 'react-hook-form';
-import { isEmpty } from 'ramda';
+import { isEmpty, head } from 'ramda';
 import { __ } from '@wordpress/i18n';
 
 // tools
@@ -11,7 +10,12 @@ import uniqid from '../../../../helpers/uniqid';
 import FormField from '../../../../components/FormField';
 import { Button } from 'primereact/button';
 
-const RepeaterFields = ({ sourceId, sourceName }) => {
+const RepeaterFields = ({
+                            sourceId,
+                            sourceName,
+                            updateFn = () => {},
+                            defaultValue = []
+}) => {
     const [items, setItems] = useState([]);
     const [chosen, setChosen] = useState('');
     const [formInitialData, setFormInitialData] = useState({});
@@ -22,7 +26,7 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
         setValue,
         register,
         trigger,
-        getValues,
+        reset,
         watch
     } = useForm({
         defaultValues: useMemo(() => {
@@ -35,32 +39,49 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
     const onSubmit = () => {
     };
 
-    const doUpdateAmendment = () => {
+    const doUpdateAfterFileUploaded = () => {
         trigger();
-        let formValues = klona(getValues());
-        console.log('formValues', formValues);
     }
 
-    const addNew = () => {
+    const addNew = useCallback(() => {
         setValue('nameValue', '');
-        setValue('fileValue', {});
+        setValue('fileValue', []);
         trigger();
         const uid = uniqid('f');
         const newItem = {
             fieldId: uid,
-            name: '',
-            file: {},
+            nameValue: '',
+            fileValue: [],
+            valid: true
         }
         setItems([...items, newItem]);
         setChosen(uid);
         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(() => {
         const updatedItems = items.map((o) => {
             return o.fieldId === chosen ? {
                 ...o,
-                name: watchName
+                nameValue: watchName
             } : o;
         })
         setItems([...updatedItems]);
@@ -70,29 +91,35 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
         const updatedItems = items.map((o) => {
             return o.fieldId === chosen ? {
                 ...o,
-                file: watchFile
+                fileValue: watchFile
             } : o;
         })
         setItems([...updatedItems]);
     }, [watchFile]);
 
     useEffect(() => {
-        console.log('items', items);
+        updateFn(items);
     }, [items]);
 
-    //console.log('items', items, chosen);
+    useEffect(() => {
+        setItems(defaultValue);
+    }, [])
+
+    console.log('items', items, 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">
                             <div className="fieldsRepeater__heading p-panel p-panel-header">
-                                <span>{o.name}</span>
-                                <Button icon="pi pi-times" severity="danger"
+                                <span onClick={() => setNewChosen(o.fieldId)}>{o.nameValue}</span>
+                                <Button icon="pi pi-times"
+                                        outlined
+                                        severity="danger"
                                         className="actionBtn"
                                         type="button"
                                         aria-label={__('Cancella', 'gepafin')}
-                                        onClick={() => console.log(o)}/>
+                                        onClick={() => removeItem(o.fieldId)}/>
                             </div>
                             {chosen === o.fieldId
                                 ? <div className="fieldsRepeater__fields p-panel-content">
@@ -102,23 +129,25 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
                                         label={__('Titolo del file', 'gepafin')}
                                         control={control}
                                         errors={errors}
-                                        defaultValue={formInitialData['nameValue']}
+                                        defaultValue={o.nameValue}
                                         config={{ required: __('È obbligatorio', 'gepafin') }}
                                     />
                                     <FormField
                                         type="fileupload"
+                                        disabled={isEmpty(o.nameValue)}
                                         setDataFn={setValue}
-                                        saveFormCallback={doUpdateAmendment}
+                                        saveFormCallback={doUpdateAfterFileUploaded}
                                         fieldName="fileValue"
                                         label={__('File', 'gepafin')}
                                         control={control}
                                         register={register}
                                         errors={errors}
-                                        defaultValue={formInitialData['fileValue'] ? formInitialData['fileValue'] : []}
+                                        defaultValue={o.fileValue ? o.fileValue : []}
                                         accept={[]}
                                         source={sourceName}
                                         sourceId={sourceId}
                                         multiple={false}
+                                        config={{ required: __('È obbligatorio', 'gepafin') }}
                                     />
                                 </div> : null}
                         </div>
@@ -126,10 +155,11 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
             </form>
             <Button
                 className="fieldsRepeater__addNew"
+                outlined
                 type="button"
                 /*disabled={!isEmpty(chosen.fileId) && (isEmpty(chosen.name) || isEmpty(chosen.file))}*/
                 onClick={addNew}
-                label={__('Aggiungi nuovo', 'gepafin')}
+                label={__('Aggiungi nuovo file', 'gepafin')}
             />
         </div>
     )