- saving progress;

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>