add bando page form;

2024-08-20 08:17:42 +02:00
parent 8616ae04b3
commit b4522f1580
14 changed files with 952 additions and 81 deletions
--- a/src/components/FormFieldRepeaterFaq/index.js
+++ b/src/components/FormFieldRepeaterFaq/index.js
@@ -0,0 +1,122 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { classNames } from 'primereact/utils';
+import { __ } from '@wordpress/i18n';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { Dropdown } from 'primereact/dropdown';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { ToggleButton } from 'primereact/togglebutton';
+
+const FormFieldRepeaterFaq = ({
+                                  data,
+                                  setDataFn,
+                                  fieldName,
+                                  options = [],
+                                  errors,
+                                  register,
+                                  label,
+                                  infoText
+                              }) => {
+    const [stateFieldData, setStateFieldData] = useState([]);
+
+    const removeItem = (index) => {
+        const newData = stateFieldData.toSpliced(index, 1);
+        setStateFieldData(newData);
+    }
+
+    const selectItem = () => {
+        setStateFieldData([...stateFieldData, { id: 0, status: 'new', question: '', answer: '', visible: true }]);
+    }
+
+    const onInputChange = (e, index) => {
+        const { value } = e.target;
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.value = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const addNewItem = () => {
+
+    }
+
+    const setChecked = (e, index) => {
+        e.preventDefault();
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.visible = e.value;
+            }
+            return o;
+        });
+        setStateFieldData(newData);
+    }
+
+    const editItem = (e, index) => {
+        e.stopPropagation();
+        console.log('editItem')
+    }
+
+    const usedExistingValues = stateFieldData
+        .filter(o => o.status === 'existing')
+        .map(o => o.question);
+
+    useEffect(() => {
+        const storeFieldData = data[fieldName] ?? [];
+        const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }))
+        setStateFieldData(newData);
+        register(fieldName)
+    }, [])
+
+    useEffect(() => {
+        setDataFn(fieldName, [...stateFieldData]);
+    }, [stateFieldData])
+
+    return (
+        <div className={classNames(['appForm__field', 'formfieldrepeater'])}>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}
+            </label>
+            <div className="appForm__faqHeaderControls">
+                <Button type="button" iconPos="left" label={__('Aggiungi', 'gepafin')}
+                        icon="pi pi-plus" onClick={addNewItem}/>
+                <Dropdown onChange={(e) => selectItem(e)}
+                          optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
+                          options={options} optionLabel="question"/>
+            </div>
+            <Accordion activeIndex={0}>
+                {stateFieldData.map((o, i) => <AccordionTab key={i}
+                                                            header={
+                                                                <div className="appForm__faqTab">
+                                                                    <div className="appForm__faqTabItem">
+                                                                        <ToggleButton
+                                                                            onIcon="pi pi-eye"
+                                                                            offIcon="pi pi-eye-slash"
+                                                                            onLabel=""
+                                                                            offLabel=""
+                                                                            checked={o.visible}
+                                                                            onChange={(e) => setChecked(e, i)}/>
+                                                                        {o.question}
+                                                                    </div>
+                                                                    <div className="appForm__faqTabItem">
+                                                                        <Button icon="pi pi-pencil" severity="success"
+                                                                                aria-label="Edit" onClick={(e) => editItem(e, i)}/>
+                                                                        <Button icon="pi pi-times" severity="danger"
+                                                                                aria-label="Cancel"
+                                                                                onClick={() => removeItem(i)}/>
+                                                                    </div>
+                                                                </div>
+                                                            }
+                >
+                    <p className="m-0">
+                        {o.answer}
+                    </p>
+                </AccordionTab>)}
+            </Accordion>
+        </div>
+    )
+}
+
+export default FormFieldRepeaterFaq;