- updated form element settings;

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { head, isEmpty, isNil } from 'ramda';
 import { __, sprintf } from '@wordpress/i18n';
 import { klona } from 'klona';
+import { wrap } from 'object-path-immutable';
 
 // store
 import { storeSet, useStore } from '../../../../store';
@@ -21,6 +22,7 @@ const BuilderElementSettings = ({ closeSettings }) => {
     const [activeElementData, setActiveElementData] = useState({});
     const [settings, setSettings] = useState([]);
     const [validators, setValidators] = useState({});
+    const [dynamicData, setDynamicData] = useState({});
     const textBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength', 'pattern'];
     const customValidationOptions = [
         { value: 'isPIVA', label: 'isPIVA' },
@@ -63,9 +65,11 @@ const BuilderElementSettings = ({ closeSettings }) => {
     }
 
     const saveSettings = () => {
-        activeElementData.settings = settings;
+        let newActiveElementData = klona(activeElementData);
-        activeElementData.validators = validators;
+        newActiveElementData = wrap(newActiveElementData).set(['settings'], settings).value();
-        const newElements = elements.map(o => o.id === activeElementData.id ? activeElementData : o);
+        newActiveElementData = wrap(newActiveElementData).set(['validators'], validators).value();
+        newActiveElementData = wrap(newActiveElementData).set(['dynamicData'], dynamicData).value();
+        const newElements = elements.map(o => o.id === newActiveElementData.id ? newActiveElementData : o);
         storeSet.main.formElements(newElements);
         closeSettings();
     }
@@ -92,17 +96,49 @@ const BuilderElementSettings = ({ closeSettings }) => {
         setValidators(newValidators);
     }
 
+    const dynamicDataOptions = (type) => {
+        switch (type) {
+            case 'datepicker' :
+                return [
+                    {label: 'user dateOfBirth', value: 'user.dateOfBirth'}
+                ]
+            default :
+                return [
+                    {label: 'company name', value: 'company.companyName'},
+                    {label: 'company vatNumber', value: 'company.vatNumber'},
+                    {label: 'company codiceFiscale', value: 'company.codiceFiscale'},
+                    {label: 'company address', value: 'company.address'},
+                    {label: 'company phoneNumber', value: 'company.phoneNumber'},
+                    {label: 'company city', value: 'company.city'},
+                    {label: 'company province', value: 'company.province'},
+                    {label: 'company cap', value: 'company.cap'},
+                    {label: 'company country', value: 'company.country'},
+                    {label: 'company pec', value: 'company.pec'},
+                    {label: 'company email', value: 'company.email'},
+                    {label: 'company contactName', value: 'company.contactName'},
+                    {label: 'company contactEmail', value: 'company.contactEmail'},
+                    {label: 'user email', value: 'user.email'},
+                    {label: 'user firstName', value: 'user.firstName'},
+                    {label: 'user lastName', value: 'user.lastName'},
+                    {label: 'user phoneNumber', value: 'user.phoneNumber'},
+                    {label: 'user codiceFiscale', value: 'user.codiceFiscale'}
+                ]
+        }
+    }
+
     useEffect(() => {
         const chosen = head(elements.filter(o => o.id === activeElement));
 
         if (chosen) {
             setActiveElementData(klona(chosen));
             setSettings(klona(chosen.settings));
-            setValidators(klona(chosen.validators))
+            setValidators(klona(chosen.validators));
+            setDynamicData(chosen.dynamicData ? chosen.dynamicData : '');
         } else {
             setActiveElementData({});
             setSettings([]);
-            setValidators({})
+            setValidators({});
+            setDynamicData('');
         }
     }, [activeElement]);
 
@@ -118,6 +154,18 @@ const BuilderElementSettings = ({ closeSettings }) => {
                                 changeFn={onChange}
                                 updateDataFn={onUpdateOptions}/>)
                             : null}
+                        {['textinput', 'datepicker'].includes(activeElementData.name)
+                            ? <div className="formElementSettings__field">
+                            <label htmlFor="dynamicData">{__('Dati dinamici', 'gepafin')}</label>
+                            <Dropdown
+                                id="dynamicData"
+                                value={dynamicData}
+                                onChange={(e) => setDynamicData(e.value)}
+                                options={dynamicDataOptions(activeElementData.name)}
+                                optionLabel="label"
+                                optionValue="value"
+                                placeholder={__('Scegli', 'gepafin')}/>
+                        </div> : null}
                     </TabPanel>
                     {!isEmpty(validators)
                         ? <TabPanel header={__('Validation', 'gepafin')}>
@@ -162,6 +210,20 @@ const BuilderElementSettings = ({ closeSettings }) => {
                                         </div> : null}
                                 </div>) : null}
                         </TabPanel> : null}
+                    {/*{['textinput', 'datepicker'].includes(activeElementData.name)
+                        ? <TabPanel header={__('Dati', 'gepafin')}>
+                            <div className="formElementSettings__field">
+                                <label htmlFor="dynamicData">{__('Dati dinamici', 'gepafin')}</label>
+                                <Dropdown
+                                    id="dynamicData"
+                                    value={[]}
+                                    onChange={(e) => onChangeDynamicData(e.value, 'dynamicData')}
+                                    options={customValidationOptions}
+                                    optionLabel="label"
+                                    optionValue="value"
+                                    placeholder={__('Scegli', 'gepafin')}/>
+                            </div>
+                    </TabPanel> : null}*/}
                 </TabView>
 
                 <Button label={__('Salva', 'gepafin')} onClick={saveSettings}/>