- saving progress;

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingRepeater/index.js

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+
+// components
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+
+// tools
+import uniqid from '../../../../../../helpers/uniqid';
+
+const ElementSettingRepeater = ({
+                                    value,
+                                    name,
+                                    setDataFn
+                                }) => {
+    const [stateFieldData, setStateFieldData] = useState([]);
+
+    const removeItem = (index) => {
+        const newData = stateFieldData.toSpliced(index, 1);
+        setStateFieldData(newData);
+    }
+
+    const addNewItem = () => {
+        setStateFieldData([...stateFieldData, { name: uniqid('o'), label: '' }]);
+    }
+
+    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 properField = (item, i) => {
+        return <InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
+    }
+
+    useEffect(() => {
+        const storeFieldData = value ?? [];
+        setStateFieldData(storeFieldData);
+    }, []);
+
+    useEffect(() => {
+        setDataFn(name, [...stateFieldData]);
+    }, [stateFieldData])
+
+    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" label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
+        </div>
+    )
+}
+
+export default ElementSettingRepeater;

src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { head } from 'ramda';
-import { __ } from '@wordpress/i18n';
+import { head, isNil } from 'ramda';
+import { __, sprintf } from '@wordpress/i18n';
 import { klona } from 'klona';
 
 // store
@@ -10,12 +10,17 @@ import { storeSet, useStore } from '../../../../store';
 import { InputText } from 'primereact/inputtext';
 import { Button } from 'primereact/button';
 import { Tag } from 'primereact/tag';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { InputSwitch } from 'primereact/inputswitch';
+import ElementSettingRepeater from './components/ElementSettingRepeater';
 
-const BuilderElementSettings = () => {
-    const elements = useStore().main.elements();
+const BuilderElementSettings = ({ closeSettings }) => {
+    const elements = useStore().main.formElements();
     const activeElement = useStore().main.activeElement();
     const [activeElementData, setActiveElementData] = useState({});
     const [settings, setSettings] = useState([]);
+    const [validators, setValidators] = useState({});
+    const textBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength', 'pattern', 'custom'];
 
     const onChange = (value, name) => {
         const newSettings = settings
@@ -30,10 +35,47 @@ const BuilderElementSettings = () => {
         setSettings(newSettings);
     }
 
+    const onUpdateOptions = (name, value) => {
+        const newSettings = settings
+            .map(o => {
+                if (o.name === name) {
+                    o.value = value;
+                }
+
+                return o;
+            });
+
+        setSettings(newSettings);
+    }
+
     const saveSettings = () => {
         activeElementData.settings = settings;
+        activeElementData.validators = validators;
         const newElements = elements.map(o => o.id === activeElementData.id ? activeElementData : o);
-        storeSet.main.elements(newElements);
+        storeSet.main.formElements(newElements);
+        closeSettings();
+    }
+
+    const showField = (value, key) => {
+        let newValidators = klona(validators);
+        if (value) {
+            newValidators[key] = '';
+        } else {
+            newValidators[key] = null;
+        }
+        setValidators(newValidators);
+    }
+
+    const toggleRequired = (value, key) => {
+        let newValidators = klona(validators);
+        newValidators[key] = value;
+        setValidators(newValidators);
+    }
+
+    const onChangeValidator = (value, name) => {
+        let newValidators = klona(validators);
+        newValidators[name] = value;
+        setValidators(newValidators);
     }
 
     useEffect(() => {
@@ -41,22 +83,59 @@ const BuilderElementSettings = () => {
         if (chosen) {
             setActiveElementData(klona(chosen));
             setSettings(klona(chosen.settings));
+            setValidators(klona(chosen.validators))
         } else {
             setActiveElementData({});
             setSettings([]);
+            setValidators({})
         }
     }, [activeElement])
 
     return (activeElementData
             ? <div className="formElementSettings">
                 <Tag value={activeElementData.name} severity="info"/>
-                {settings
-                    ? settings.map((o) => <div className="formElementSettings__field" key={o.name}>
-                    <label htmlFor={o.name}>{o.name}</label>
-                    <InputText id={o.name} aria-describedby={`${o.name}-help`}
-                               value={o.value}
-                               onChange={(e) => onChange(e.target.value, o.name)}/>
-                </div>) : null}
+                <TabView className="formElementSettings__tabs">
+                    <TabPanel header={__('Presentation', 'gepafin')}>
+                        {settings
+                            ? settings.map((o) => <div className="formElementSettings__field" key={o.name}>
+                                <label htmlFor={o.name}>{o.name}</label>
+                                {o.name === 'options'
+                                    ? <ElementSettingRepeater value={o.value} name={o.name} setDataFn={onUpdateOptions} />
+                                    : <InputText id={o.name} aria-describedby={`${o.name}-help`}
+                                           value={o.value}
+                                           onChange={(e) => onChange(e.target.value, o.name)}/>}
+                            </div>) : null}
+                    </TabPanel>
+                    <TabPanel header={__('Validation', 'gepafin')}>
+                        {validators
+                            ? Object.keys(validators).map((k) => <div
+                                className="formElementSettings__field" key={k}>
+                                {k === 'isRequired'
+                                    ? <div className="formElementSettings__field">
+                                        <label htmlFor={k}>{__('Required?', 'gepafin')}</label>
+                                        <InputSwitch
+                                            checked={validators[k]}
+                                            onChange={(e) => toggleRequired(e.value, k)}/>
+                                    </div>
+                                    : null}
+                                {textBasedValidatorFields.includes(k)
+                                    ? <div className="formElementSettings__field">
+                                        <label htmlFor={`enable_${k}`}>{sprintf(__('Set %s', 'gepafin'), k)}</label>
+                                        <InputSwitch
+                                            checked={!isNil(validators[k])}
+                                            onChange={(e) => showField(e.value, k)}/>
+                                    </div>
+                                    : null}
+                                {textBasedValidatorFields.includes(k) && !isNil(validators[k])
+                                    ? <div className="formElementSettings__field">
+                                    <label htmlFor={k}>{k}</label>
+                                    <InputText id={k} aria-describedby={`${k}-help`}
+                                               value={validators[k]}
+                                               onChange={(e) => onChangeValidator(e.target.value, k)}/>
+                                </div> : null}
+                            </div>) : null}
+                    </TabPanel>
+                </TabView>
 
                 <Button label={__('Salva', 'gepafin')} onClick={saveSettings}/>
             </div>

src/pages/BandoFormsEdit/components/FormBuilder/index.js

@@ -48,7 +48,7 @@ const FormBuilder = () => {
         <>
             <Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
                 <h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
-                {!isEmpty(activeElement) ? <BuilderElementSettings/> : null}
+                {!isEmpty(activeElement) ? <BuilderElementSettings closeSettings={closeSettings}/> : null}
             </Sidebar>
             <div className="formBuilder">
                 <div className="formBuilder__main">