- saving progress;

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

@@ -1,18 +1,19 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import { klona } from 'klona';
 import { useForm } from 'react-hook-form';
+import { isEmpty } from 'ramda';
+import { __ } from '@wordpress/i18n';
 
 // tools
 import uniqid from '../../../../helpers/uniqid';
 
 // components
 import FormField from '../../../../components/FormField';
-import { __ } from '@wordpress/i18n';
 import { Button } from 'primereact/button';
 
 const RepeaterFields = ({ sourceId, sourceName }) => {
     const [items, setItems] = useState([]);
-    const [chosen, setChosen] = useState({});
+    const [chosen, setChosen] = useState('');
     const [formInitialData, setFormInitialData] = useState({});
     const {
         control,
@@ -29,6 +30,7 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
         }, [formInitialData]), mode: 'onChange'
     });
     const watchName = watch('name');
+    const watchFile = watch('file');
 
     const onSubmit = () => {
     };
@@ -40,6 +42,9 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
     }
 
     const addNew = () => {
+        setValue('name', '');
+        setValue('file', {});
+        trigger();
         const uid = uniqid('f');
         const newItem = {
             fieldId: uid,
@@ -47,23 +52,49 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
             file: {},
         }
         setItems([...items, newItem]);
-        setChosen(newItem);
+        setChosen(uid);
+        trigger();
     }
 
     useEffect(() => {
-        trigger();
-    }, [chosen]);
+        const updatedItems = items.map((o) => {
+            return o.fieldId === chosen ? {
+                ...o,
+                name: watchName
+            } : o;
+        })
+        setItems([...updatedItems]);
+    }, [watchName]);
 
-    console.log('items', items);
+    useEffect(() => {
+        const updatedItems = items.map((o) => {
+            return o.fieldId === chosen ? {
+                ...o,
+                file: watchFile
+            } : o;
+        })
+        setItems([...updatedItems]);
+    }, [watchFile]);
+
+    useEffect(() => {
+        console.log('items', items);
+    }, [items]);
+
+    //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>{chosen.fieldId === o.fieldId ? watchName : o.name}</span>
+                                <span>{o.name}</span>
+                                <Button icon="pi pi-times" severity="danger"
+                                        className="actionBtn"
+                                        type="button"
+                                        aria-label={__('Cancella', 'gepafin')}
+                                        onClick={() => console.log(o)}/>
                             </div>
-                            {chosen.fieldId === o.fieldId
+                            {chosen === o.fieldId
                                 ? <div className="fieldsRepeater__fields p-panel-content">
                                     <FormField
                                         type="textinput"
@@ -96,7 +127,7 @@ const RepeaterFields = ({ sourceId, sourceName }) => {
             <Button
                 className="fieldsRepeater__addNew"
                 type="button"
-                disabled={false}
+                /*disabled={!isEmpty(chosen.fileId) && (isEmpty(chosen.name) || isEmpty(chosen.file))}*/
                 onClick={addNew}
                 label={__('Aggiungi nuovo', 'gepafin')}
             />