- added registartion page;
- implemented validation helper-functions; - fixed form fields datepicker and datepicker range; - updated routes logic; - fixed FAQ items editing/submission;
This commit is contained in:
@@ -4,6 +4,9 @@ import { __ } from '@wordpress/i18n';
|
||||
// components
|
||||
import ElementSettingRepeater from '../ElementSettingRepeater';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { MultiSelect } from 'primereact/multiselect';
|
||||
|
||||
import { mimeTypes } from '../../../../../../configData';
|
||||
|
||||
const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
|
||||
|
||||
@@ -19,7 +22,15 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
|
||||
<label htmlFor={setting.name}>{settingLabels[setting.name]}</label>
|
||||
{setting.name === 'options'
|
||||
? <ElementSettingRepeater value={setting.value} name={setting.name} setDataFn={updateDataFn}/>
|
||||
: <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
|
||||
: setting.name === 'mime'
|
||||
? <MultiSelect
|
||||
value={setting.value}
|
||||
onChange={(e) => updateDataFn(setting.name, e.value)}
|
||||
options={mimeTypes}
|
||||
optionLabel="name"
|
||||
display="chip"
|
||||
placeholder={__('Scegli', 'gepafin')} />
|
||||
: <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
|
||||
value={setting.value}
|
||||
onChange={(e) => changeFn(e.target.value, setting.name)}/>}
|
||||
</div>
|
||||
|
||||
@@ -56,7 +56,7 @@ const ElementSettingRepeater = ({
|
||||
<Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
|
||||
</div>
|
||||
</div>)}
|
||||
<Button type="button" label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
|
||||
<Button type="button" outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { head, isNil } from 'ramda';
|
||||
import { head, isEmpty, isNil } from 'ramda';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { klona } from 'klona';
|
||||
|
||||
@@ -13,6 +13,7 @@ import { Tag } from 'primereact/tag';
|
||||
import { TabView, TabPanel } from 'primereact/tabview';
|
||||
import { InputSwitch } from 'primereact/inputswitch';
|
||||
import ElementSetting from './components/ElementSetting';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
|
||||
const BuilderElementSettings = ({ closeSettings }) => {
|
||||
const elements = useStore().main.formElements();
|
||||
@@ -20,7 +21,17 @@ const BuilderElementSettings = ({ closeSettings }) => {
|
||||
const [activeElementData, setActiveElementData] = useState({});
|
||||
const [settings, setSettings] = useState([]);
|
||||
const [validators, setValidators] = useState({});
|
||||
const textBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength', 'pattern', 'custom'];
|
||||
const textBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength', 'pattern'];
|
||||
const customValidationOptions = [
|
||||
{value: 'isPIVA', label: 'isPIVA'},
|
||||
{value: 'isCodiceFiscale', label: 'isCodiceFiscale'},
|
||||
{value: 'isCAP', label: 'isCAP'},
|
||||
{value: 'isIBAN', label: 'isIBAN'},
|
||||
{value: 'isEmail', label: 'isEmail'},
|
||||
{value: 'isEmailPEC', label: 'isEmailPEC'},
|
||||
{value: 'isUrl', label: 'isUrl'},
|
||||
{value: 'isMarcaDaBollo', label: 'isMarcaDaBollo'}
|
||||
]
|
||||
|
||||
const onChange = (value, name) => {
|
||||
const newSettings = settings
|
||||
@@ -89,7 +100,7 @@ const BuilderElementSettings = ({ closeSettings }) => {
|
||||
setSettings([]);
|
||||
setValidators({})
|
||||
}
|
||||
}, [activeElement])
|
||||
}, [activeElement]);
|
||||
|
||||
return (activeElementData
|
||||
? <div className="formElementSettings">
|
||||
@@ -110,13 +121,13 @@ const BuilderElementSettings = ({ closeSettings }) => {
|
||||
className="formElementSettings__field" key={k}>
|
||||
{k === 'isRequired'
|
||||
? <div className="formElementSettings__field">
|
||||
<label htmlFor={k}>{__('Required?', 'gepafin')}</label>
|
||||
<label htmlFor={k}>{__('Obligatorio?', 'gepafin')}</label>
|
||||
<InputSwitch
|
||||
checked={validators[k]}
|
||||
onChange={(e) => toggleRequired(e.value, k)}/>
|
||||
</div>
|
||||
: null}
|
||||
{textBasedValidatorFields.includes(k)
|
||||
{textBasedValidatorFields.includes(k) || 'custom' === k
|
||||
? <div className="formElementSettings__field">
|
||||
<label htmlFor={`enable_${k}`}>{sprintf(__('Set %s', 'gepafin'), k)}</label>
|
||||
<InputSwitch
|
||||
@@ -124,6 +135,19 @@ const BuilderElementSettings = ({ closeSettings }) => {
|
||||
onChange={(e) => showField(e.value, k)}/>
|
||||
</div>
|
||||
: null}
|
||||
{k === 'custom' && !isNil(validators[k])
|
||||
? <div className="formElementSettings__field">
|
||||
<label htmlFor={k}>{__('Personalizzato', 'gepafin')}</label>
|
||||
<Dropdown
|
||||
id={`enable_${k}`}
|
||||
value={validators[k]}
|
||||
onChange={(e) => onChangeValidator(e.value, k)}
|
||||
options={customValidationOptions}
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder={__('Scegli', 'gepafin')}/>
|
||||
</div>
|
||||
: null}
|
||||
{textBasedValidatorFields.includes(k) && !isNil(validators[k])
|
||||
? <div className="formElementSettings__field">
|
||||
<label htmlFor={k}>{k}</label>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback } from 'react'
|
||||
import React, { useCallback, useEffect } from 'react'
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { isEmpty } from 'ramda';
|
||||
|
||||
@@ -47,6 +47,12 @@ const FormBuilder = () => {
|
||||
storeSet.main.activeElement('');
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
storeSet.main.activeElement('');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
|
||||
|
||||
Reference in New Issue
Block a user