- added login page;

- added file upload;
- added faq item edit modal;

src/components/FormFieldRepeaterFaq/index.js

@@ -1,11 +1,16 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
-import { InputText } from 'primereact/inputtext';
+import { isEmpty } from 'ramda';
+
+// components
 import { Button } from 'primereact/button';
 import { Dropdown } from 'primereact/dropdown';
 import { Accordion, AccordionTab } from 'primereact/accordion';
 import { ToggleButton } from 'primereact/togglebutton';
+import { Dialog } from 'primereact/dialog';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
 
 const FormFieldRepeaterFaq = ({
                                   data,
@@ -15,17 +20,24 @@ const FormFieldRepeaterFaq = ({
                                   errors,
                                   register,
                                   label,
-                                  infoText
+                                  config = {},
+                                  setError,
+                                  clearErrors
                               }) => {
     const [stateFieldData, setStateFieldData] = useState([]);
+    const [question, setQuestion] = useState('');
+    const [answer, setAnswer] = useState('');
+    const [editDataIndex, setEditDataIndex] = useState(null);
+    const [isVisibleEditDialog, setIsVisibleEditDialog] = useState(false);
 
     const removeItem = (index) => {
         const newData = stateFieldData.toSpliced(index, 1);
         setStateFieldData(newData);
     }
 
-    const selectItem = () => {
-        setStateFieldData([...stateFieldData, { id: 0, status: 'new', question: '', answer: '', visible: true }]);
+    const selectItem = (e) => {
+        const chosen = {...e.value};
+        setStateFieldData([...stateFieldData, chosen]);
     }
 
     const onInputChange = (e, index) => {
@@ -40,7 +52,8 @@ const FormFieldRepeaterFaq = ({
     }
 
     const addNewItem = () => {
-
+        const newItem = { id: 0, status: 'new', question: '', answer: '', visible: true };
+        setStateFieldData([...stateFieldData, newItem]);
     }
 
     const setChecked = (e, index) => {
@@ -56,7 +69,53 @@ const FormFieldRepeaterFaq = ({
 
     const editItem = (e, index) => {
         e.stopPropagation();
-        console.log('editItem')
+        setQuestion(stateFieldData[index].question);
+        setAnswer(stateFieldData[index].answer);
+        setEditDataIndex(index);
+        setIsVisibleEditDialog(true);
+    }
+
+    const hideEditDialog = () => {
+        setIsVisibleEditDialog(false);
+        setQuestion('');
+        setAnswer('');
+        setEditDataIndex(null);
+    }
+
+    const onChangeEditItem = (value, key) => {
+        if (key === 'question') {
+            setQuestion(value);
+        } else {
+            setAnswer(value)
+        }
+    }
+
+    const saveEditDialog = () => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === editDataIndex) {
+                o.question = question;
+                o.answer = answer;
+                return o
+            } else {
+                return o;
+            }
+        });
+        setStateFieldData(newData);
+        setIsVisibleEditDialog(false);
+        setQuestion('');
+        setAnswer('');
+        setEditDataIndex(null);
+    }
+
+    const headerEditDialog = () => {
+        return <span>{__('Aggiungi/modifica FAQ', 'gepafin')}</span>
+    }
+
+    const footerEditDialog = () => {
+        return <div>
+            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined />
+            <Button type="button" label={__('Salva', 'gepafin')} onClick={saveEditDialog} />
+        </div>
     }
 
     const usedExistingValues = stateFieldData
@@ -67,11 +126,11 @@ const FormFieldRepeaterFaq = ({
         const storeFieldData = data[fieldName] ?? [];
         const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }))
         setStateFieldData(newData);
-        register(fieldName)
+        register(fieldName, config)
     }, [])
 
     useEffect(() => {
-        setDataFn(fieldName, [...stateFieldData]);
+        setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
     }, [stateFieldData])
 
     return (
@@ -102,7 +161,8 @@ const FormFieldRepeaterFaq = ({
                                                                     </div>
                                                                     <div className="appForm__faqTabItem">
                                                                         <Button icon="pi pi-pencil" severity="success"
-                                                                                aria-label="Edit" onClick={(e) => editItem(e, i)}/>
+                                                                                aria-label="Edit"
+                                                                                onClick={(e) => editItem(e, i)}/>
                                                                         <Button icon="pi pi-times" severity="danger"
                                                                                 aria-label="Cancel"
                                                                                 onClick={() => removeItem(i)}/>
@@ -115,6 +175,21 @@ const FormFieldRepeaterFaq = ({
                     </p>
                 </AccordionTab>)}
             </Accordion>
+            <Dialog
+                visible={isVisibleEditDialog}
+                modal header={headerEditDialog}
+                footer={footerEditDialog}
+                style={{ maxWidth: '50rem' }}
+                onHide={hideEditDialog}>
+                <div className="appForm__field">
+                    <label>{__('Titolo FAQ', 'gepafin')}</label>
+                    <InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'question')}/>
+                </div>
+                <div className="appForm__field">
+                    <label>{__('Risposta', 'gepafin')}</label>
+                    <InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'answer')} rows={5} cols={30} />
+                </div>
+            </Dialog>
         </div>
     )
 }