- saving progress;

src/components/FormFieldRepeaterCriteria/index.js

@@ -1,7 +1,7 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
-import { head } from 'ramda';
+import { head, isNil, pluck } from 'ramda';
 
 // components
 import { InputText } from 'primereact/inputtext';
@@ -23,20 +23,21 @@ const FormFieldRepeaterCriteria = ({
                                    }) => {
     const forMenu = useRef(null);
     const [stateFieldData, setStateFieldData] = useState([]);
+    const [stateOptionsData, setStateOptionsData] = useState([]);
     const [threshold, setThreshold] = useState(0);
     const menuItems = [
         {
             type: 'existing',
             label: __('Esistente', 'gepafin'),
             command: (data) => {
-                setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
+                setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: 0 }]);
             }
         },
         {
             type: 'new',
             label: __('Nuovo', 'gepafin'),
             command: (data) => {
-                setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
+                setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: null }]);
             }
         }
     ]
@@ -47,17 +48,12 @@ const FormFieldRepeaterCriteria = ({
     }
 
     const selectItem = (e, index) => {
-        const targetedOption = head(options.filter(o => o.value === e.value));
+        const targetedOption = head(stateOptionsData.filter(o => o.value === e.value));
+
         if (targetedOption) {
             const newData = stateFieldData.map((o, i) => {
-                if (i === index) {
-                    o.value = targetedOption.value;
-                    o.score = targetedOption.score;
-                    o.id = targetedOption.id;
-                }
-                return o;
-            });
-            console.log('newData', newData)
+                return i === index ? targetedOption : o;
+            })
             setStateFieldData(newData);
         }
     }
@@ -78,32 +74,38 @@ const FormFieldRepeaterCriteria = ({
     }
 
     const properField = (item, i) => {
-        return item.status === 'new'
-            ? <InputText value={item.value} onInput={(e) => onInputChange(e.target.value, i, 'value')}/>
-            : <Dropdown value={item.value}
+        return !isNil(item.lookUpDataId)
+            ? <Dropdown value={item.value}
                         onChange={(e) => selectItem(e, i)}
-                        optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
-                        options={options} optionLabel="value"/>
+                        optionDisabled={(opt) => usedExistingValues().includes(opt.value)}
+                        options={stateOptionsData} optionLabel="value"/>
+            : <InputText value={item.value} onInput={(e) => onInputChange(e.target.value, i, 'value')}/>
     }
 
-    const usedExistingValues = stateFieldData
-        .filter(o => o.status === 'existing')
-        .map(o => o.value);
+    const usedExistingValues = useCallback(() => {
+        return stateFieldData
+            .filter(o => o.lookUpDataId > 0)
+            .map(o => o.value)
+    }, [stateFieldData]);
 
     useEffect(() => {
         const storeFieldData = data[fieldName] ?? [];
-        const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }));
-        setStateFieldData(newData);
+        setStateFieldData(storeFieldData);
+        setStateOptionsData([...options, ...storeFieldData]);
         setThreshold(data['threshold'])
         register(fieldName, config)
         register('threshold', {
             required: __('È obbligatorio', 'gepafin')
         })
-    }, [])
+    }, []);
+
+    useEffect(() => {
+        setStateOptionsData([...options]);
+    }, [options]);
 
     useEffect(() => {
         setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
-    }, [stateFieldData])
+    }, [stateFieldData]);
 
     return (
         <div className={classNames(['appForm__field', 'formfieldrepeater'])}>
@@ -126,7 +128,7 @@ const FormFieldRepeaterCriteria = ({
                         {properField(o, i)}
                             <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
                         </div>
-                        {o.status === 'new' && infoText ? <small>{infoText}</small> : null}
+                        {isNil(o.lookUpDataId) && infoText ? <small>{infoText}</small> : null}
                     </div>
                     <div>
                         <label htmlFor="criterionMin">{__('Punteggio', 'gepafin')}</label>