- added Table field;

2024-10-02 16:06:21 +02:00
parent 0634cd2305
commit cb9327a740
14 changed files with 565 additions and 30 deletions
--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js
@@ -9,6 +9,7 @@ import { MultiSelect } from 'primereact/multiselect';
 import { Editor } from 'primereact/editor';

 import { mimeTypes } from '../../../../../../configData';
+import ElementSettingTableColumns from '../ElementSettingTableColumns';

 const ElementSetting = ({ setting, changeFn, updateDataFn }) => {

@@ -18,7 +19,8 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
        step: __('Numero Decimali', 'gepafin'),
        options: __('Opzioni', 'gepafin'),
        mime: __('Tipo di file', 'gepafin'),
-        text: __('Testo formattato', 'gepafin')
+        text: __('Testo formattato', 'gepafin'),
+        table_columns: __('Colonne', 'gepafin'),
    }

    const renderHeader = () => {
@@ -41,31 +43,42 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {

    const header = renderHeader();

-    return <div className="formElementSettings__field" key={setting.name}>
-        <label htmlFor={setting.name}>{settingLabels[setting.name]}</label>
-        {setting.name === 'options'
-            ? <ElementSettingRepeater
+    const getProperField = (setting) => {
+        if (setting.name === 'options') {
+            return <ElementSettingRepeater
                value={is(Array, setting.value) ? setting.value : []}
                name={setting.name}
                setDataFn={updateDataFn}/>
-            : setting.name === 'mime'
-                ? <MultiSelect
-                    value={is(Array, setting.value) ? setting.value : []}
-                    onChange={(e) => updateDataFn(setting.name, e.value)}
-                    options={mimeTypes}
-                    optionLabel="name"
-                    display="chip"
-                    placeholder={__('Scegli', 'gepafin')} />
-                : setting.name === 'text'
-                    ? <Editor
-                        value={setting.value}
-                        headerTemplate={header}
-                        onTextChange={(e) => changeFn(e.htmlValue, setting.name)}
-                        style={{ height: 80 * 4 }}
-                    />
-                    : <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
-                                 value={setting.value}
-                                 onChange={(e) => changeFn(e.target.value, setting.name)}/>}
+        } else if (setting.name === 'mime') {
+            return <MultiSelect
+                value={is(Array, setting.value) ? setting.value : []}
+                onChange={(e) => updateDataFn(setting.name, e.value)}
+                options={mimeTypes}
+                optionLabel="name"
+                display="chip"
+                placeholder={__('Scegli', 'gepafin')} />
+        } else if (setting.name === 'text') {
+            return <Editor
+                value={setting.value}
+                headerTemplate={header}
+                onTextChange={(e) => changeFn(e.htmlValue, setting.name)}
+                style={{ height: 80 * 4 }}
+            />
+        } else if (setting.name === 'table_columns') {
+            return <ElementSettingTableColumns
+                value={is(Object, setting.value) ? setting.value : {}}
+                name={setting.name}
+                setDataFn={updateDataFn}/>
+        } else {
+            return <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
+                              value={setting.value}
+                              onChange={(e) => changeFn(e.target.value, setting.name)}/>
+        }
+    }
+
+    return <div className="formElementSettings__field" key={setting.name}>
+        <label htmlFor={setting.name}>{settingLabels[setting.name]}</label>
+        {getProperField(setting)}
    </div>
 }

--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingRepeater/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingRepeater/index.js
@@ -45,10 +45,9 @@ const ElementSettingRepeater = ({
    }, []);

    useEffect(() => {
-        console.log('useEffect', [...stateFieldData])
        setDataFn(name, [...stateFieldData]);
    }, [stateFieldData])
-console.log('stateFieldData', stateFieldData, value)
+
    return (
        <div className="formElementSettings__repeater">
            {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns-old/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns-old/index.js
@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { wrap } from 'object-path-immutable';
+import { findIndex, propEq } from 'ramda';
+
+// components
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { InputSwitch } from 'primereact/inputswitch';
+
+// tools
+import uniqid from '../../../../../../helpers/uniqid';
+
+const ElementSettingTableColumns = ({
+                                        value,
+                                        name,
+                                        setDataFn
+                                    }) => {
+    const [stateFieldData, setStateFieldData] = useState([]);
+    const [rowsData, setRowsData] = useState([]);
+
+    const removeItem = (index) => {
+        const newData = stateFieldData.toSpliced(index, 1);
+        setStateFieldData(newData);
+    }
+
+    const addNewItem = () => {
+        setStateFieldData([...stateFieldData, { name: uniqid('o'), label: '', predefined: false }]);
+    }
+
+    const addNewRow = (index) => {
+        const newStateFieldData = wrap(stateFieldData)
+            .insert([index, 'rows'], { label: '' }, stateFieldData[index].rows.length)
+            .value();
+        setStateFieldData(newStateFieldData);
+    }
+
+    const removeRow = (index, indexK) => {
+        const newStateFieldData = wrap(stateFieldData)
+            .del([index, 'rows', indexK])
+            .value();
+        setStateFieldData(newStateFieldData);
+    }
+
+    const onInputChange = (e, index) => {
+        const { value } = e.target;
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.label = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const onSubInputChange = (e, index, indexK) => {
+        const { value } = e.target;
+        const newStateFieldData = wrap(stateFieldData)
+            .set([index, 'rows', indexK, 'label'], value)
+            .value();
+        setStateFieldData(newStateFieldData);
+    }
+
+    const setChecked = (value, index) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.predefined = value;
+                if (value === false) {
+                    o.rows = [];
+                }
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const properField = (item, i) => {
+        return <>
+            <InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
+            <div className="flex-1">
+                <span>{__('Predefinito?', 'gepafin')}</span>
+                <InputSwitch checked={item.predefined} onChange={(e) => setChecked(e.value, i)}/>
+            </div>
+        </>
+    }
+
+    const properSubField = (item, i, k) => {
+        return <InputText value={item.label} onInput={(e) => onSubInputChange(e, i, k)}/>
+    }
+
+    useEffect(() => {
+        const storeFieldData = value ?? [];
+        setStateFieldData(storeFieldData);
+    }, []);
+
+    useEffect(() => {
+        setDataFn(name, [...stateFieldData]);
+    }, [stateFieldData]);
+
+    stateFieldData.filter(o => o.predefined)
+
+    return (
+        <>
+            <div className="formElementSettings__repeater">
+                {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
+                    <div className="p-inputgroup flex-1">
+                        {properField(o, i)}
+                        <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
+                    </div>
+                </div>)}
+                <Button type="button" outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
+            </div>
+            {stateFieldData
+                .filter(o => o.predefined)
+                .map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
+                    <div className="formElementSettings__repeater formElementSettings__subRepeater">
+                        <label>{__('Righe per colonna:', 'gepafin')} <strong>{o.label}</strong></label>
+                        <div className="formElementSettings__repeater">
+                            {o.rows.map((c, k) => {
+                                const properIndex = findIndex(propEq(o.name, 'name'))(stateFieldData);
+                                return <div key={k} className="formElementSettings__repeaterItem">
+                                    <div className="p-inputgroup flex-1">
+                                        {properSubField(c, properIndex, k)}
+                                        <Button icon="pi pi-times" className="p-button-danger"
+                                                onClick={() => removeRow(properIndex, k)}/>
+                                    </div>
+                                </div>
+                            })}
+                            <Button type="button" outlined
+                                    label={__('Aggiungi una righa', 'gepafin')}
+                                    onClick={() => addNewRow(findIndex(propEq(o.name, 'name'))(stateFieldData))}/>
+                        </div>
+                    </div>
+                </div>)}
+        </>
+    )
+}
+
+export default ElementSettingTableColumns;
--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js
@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { wrap } from 'object-path-immutable';
+import { pathOr } from 'ramda';
+
+// components
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { InputSwitch } from 'primereact/inputswitch';
+
+// tools
+import uniqid from '../../../../../../helpers/uniqid';
+
+const ElementSettingTableColumns = ({
+                                        value,
+                                        name,
+                                        setDataFn
+                                    }) => {
+    const [stateFieldData, setStateFieldData] = useState([]);
+    const [rowsData, setRowsData] = useState([]);
+
+    const removeItem = (index) => {
+        const newData = stateFieldData.toSpliced(index, 1);
+        setStateFieldData(newData);
+    }
+
+    const addNewItem = () => {
+        setStateFieldData([...stateFieldData, { name: uniqid('o'), label: '', predefined: false }]);
+    }
+
+    const addNewRow = () => {
+        const obj = stateFieldData
+            .filter(o => o.predefined)
+            .reduce((acc, cur) => {
+                acc[cur.name] = ''
+                return acc;
+        }, {});
+        setRowsData([...rowsData, obj]);
+    }
+
+    const removeRow = (index) => {
+        const newRowsData = wrap(rowsData).del([index]).value();
+        setRowsData(newRowsData);
+    }
+
+    const onInputChange = (e, index) => {
+        const { value } = e.target;
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.label = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const onSubInputChange = (e, name, index) => {
+        const { value } = e.target;
+        const newRowsData = wrap(rowsData).set([index, name], value).value();
+        setRowsData(newRowsData);
+    }
+
+    const setChecked = (value, index) => {
+        let name = '';
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.predefined = value;
+                name = o.name;
+            }
+            return o;
+        });
+
+        let newRowsData = [];
+
+        if (value === false) {
+            newRowsData = rowsData.map(o => wrap(o).set([name], '').value());
+        } else {
+            newRowsData = rowsData.map(o => wrap(o).set([name], '').value());
+        }
+
+        setRowsData(newRowsData);
+        setStateFieldData(newData);
+    }
+
+    const properField = (item, i) => {
+        return <>
+            <InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
+            <div className="flex-1">
+                <span>{__('Predefinito?', 'gepafin')}</span>
+                <InputSwitch checked={item.predefined} onChange={(e) => setChecked(e.value, i)}/>
+            </div>
+        </>
+    }
+
+    const properSubField = (item, i, name) => {
+        return <InputText value={item[name]} onInput={(e) => onSubInputChange(e, name, i)}/>
+    }
+
+    useEffect(() => {
+        const stateFieldData = pathOr([], ['stateFieldData'], value);
+        setStateFieldData(stateFieldData);
+        const rowsData = pathOr([], ['rowsData'], value);
+        setRowsData(rowsData);
+    }, []);
+
+    useEffect(() => {
+        setDataFn(name, {
+            stateFieldData,
+            rowsData
+        });
+    }, [stateFieldData, rowsData]);
+
+    stateFieldData.filter(o => o.predefined)
+
+    return (
+        <>
+            <div className="formElementSettings__repeater">
+                {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
+                    <div className="p-inputgroup flex-1">
+                        {properField(o, i)}
+                        <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
+                    </div>
+                </div>)}
+                <Button type="button" outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
+            </div>
+            {stateFieldData
+                .filter(o => o.predefined)
+                .map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
+                    <div className="formElementSettings__repeater formElementSettings__subRepeater">
+                        <label>{__('Righe per colonna:', 'gepafin')} <strong>{o.label}</strong></label>
+                        <div className="formElementSettings__repeater">
+                            {rowsData.map((c, k) => {
+                                return <div key={k} className="formElementSettings__repeaterItem">
+                                    <div className="p-inputgroup flex-1">
+                                        {properSubField(c, k, o.name)}
+                                        <Button icon="pi pi-times" className="p-button-danger"
+                                                onClick={() => removeRow(k)}/>
+                                    </div>
+                                </div>
+                            })}
+                            <Button type="button" outlined
+                                    label={__('Aggiungi una righa', 'gepafin')}
+                                    onClick={addNewRow}/>
+                        </div>
+                    </div>
+                </div>)}
+        </>
+    )
+}
+
+export default ElementSettingTableColumns;