- updated version;

src/components/FormFieldRepeaterFaq/index.js

@@ -27,6 +27,7 @@ const FormFieldRepeaterFaq = ({
     const [stateOptionsData, setStateOptionsData] = useState([]);
     const [question, setQuestion] = useState('');
     const [answer, setAnswer] = useState('');
+    const [title, setTitle] = useState('');
     const [editDataIndex, setEditDataIndex] = useState(null);
     const [isVisibleEditDialog, setIsVisibleEditDialog] = useState(false);
 
@@ -37,14 +38,13 @@ const FormFieldRepeaterFaq = ({
 
     const selectItem = (e) => {
         const targetedOption = head(stateOptionsData.filter(o => o.value === e.value));
-        console.log('selected:', e, stateOptionsData, targetedOption)
         if (targetedOption) {
-            setStateFieldData([...stateFieldData, targetedOption]);
+            setStateFieldData([...stateFieldData, {...targetedOption, isVisible: true}]);
         }
     }
 
     const addNewItem = () => {
-        const newItem = { id: null, lookUpDataId: null, title: '', value: '', isVisible: true };
+        const newItem = { id: null, lookUpDataId: null, title: '', value: '', response: '', isVisible: true };
         setStateFieldData([...stateFieldData, newItem]);
     }
 
@@ -76,6 +76,8 @@ const FormFieldRepeaterFaq = ({
 
     const onChangeEditItem = (value, key) => {
         if (key === 'title') {
+            setTitle(value);
+        } else if (key === 'value') {
             setQuestion(value);
         } else {
             setAnswer(value)
@@ -85,8 +87,9 @@ const FormFieldRepeaterFaq = ({
     const saveEditDialog = () => {
         const newData = stateFieldData.map((o, i) => {
             if (i === editDataIndex) {
-                o.title = question;
-                o.value = answer;
+                o.title = title;
+                o.value = question;
+                o.response = answer;
                 return o
             } else {
                 return o;
@@ -106,7 +109,10 @@ const FormFieldRepeaterFaq = ({
     const footerEditDialog = () => {
         return <div>
             <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined/>
-            <Button type="button" label={__('Salva', 'gepafin')} onClick={saveEditDialog}/>
+            <Button
+                type="button"
+                disabled={isEmpty(title) || isEmpty(question) || isEmpty(answer)}
+                label={__('Salva', 'gepafin')} onClick={saveEditDialog}/>
         </div>
     }
 
@@ -151,6 +157,7 @@ const FormFieldRepeaterFaq = ({
                 <Dropdown onChange={(e) => selectItem(e)}
                           optionDisabled={(opt) => usedExistingValues().includes(opt.title)}
                           options={stateOptionsData}
+                          placeholder={__('Scegli tra quelli pre-creati', 'gepafin')}
                           optionLabel="title"/>
             </div>
             <Accordion activeIndex={0}>
@@ -164,8 +171,13 @@ const FormFieldRepeaterFaq = ({
                                                                             onLabel=""
                                                                             offLabel=""
                                                                             checked={o.isVisible}
-                                                                            onChange={(e) => setChecked(e, i)}/>
-                                                                        {o.title}
+                                                                            onChange={(e) => {
+                                                                                console.log('e', e);
+                                                                                e.preventDefault();
+                                                                                e.stopPropagation();
+                                                                                setChecked(e, i);
+                                                                            }}/>
+                                                                        {o.value}
                                                                     </div>
                                                                     <div className="appForm__faqTabItem">
                                                                         <Button icon="pi pi-pencil" severity="success"
@@ -179,7 +191,7 @@ const FormFieldRepeaterFaq = ({
                                                             }
                 >
                     <p className="m-0">
-                        {o.value}
+                        {o.response}
                     </p>
                 </AccordionTab>)}
             </Accordion>
@@ -192,11 +204,15 @@ const FormFieldRepeaterFaq = ({
                 <div className="appPage__spacer"></div>
                 <div className="appForm__field">
                     <label>{__('Titolo FAQ', 'gepafin')}</label>
-                    <InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'title')}/>
+                    <InputText value={title} onChange={(e) => onChangeEditItem(e.target.value, 'title')}/>
+                </div>
+                <div className="appForm__field">
+                    <label>{__('Domanda', 'gepafin')}</label>
+                    <InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'value')}/>
                 </div>
                 <div className="appForm__field">
                     <label>{__('Risposta', 'gepafin')}</label>
-                    <InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'value')}
+                    <InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'response')}
                                    rows={5}
                                    cols={30}/>
                 </div>