- added validation for some settings releated to form fields;

This commit is contained in:
Vitalii Kiiko
2024-10-22 16:07:38 +02:00
parent f118450847
commit a3b9ab0d25
3 changed files with 25 additions and 7 deletions

View File

@@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import { classNames } from 'primereact/utils'; import { classNames } from 'primereact/utils';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
import { InputNumber } from 'primereact/inputnumber'; import { is } from 'ramda';
import { InputNumber } from 'primereact/inputnumber';
const NumberInput = ({ const NumberInput = ({
fieldName, fieldName,
@@ -25,7 +26,7 @@ const NumberInput = ({
const input = <Controller const input = <Controller
name={fieldName} name={fieldName}
control={control} control={control}
defaultValue={defaultValue} defaultValue={is(Number, defaultValue) ? defaultValue : 0}
rules={config} rules={config}
render={({ field, fieldState }) => ( render={({ field, fieldState }) => (
<InputNumber inputId={field.name} <InputNumber inputId={field.name}
@@ -36,8 +37,8 @@ const NumberInput = ({
max={max} max={max}
locale={locale} locale={locale}
useGrouping={useGrouping} useGrouping={useGrouping}
maxFractionDigits={maxFractionDigits} maxFractionDigits={!isNaN(parseInt(maxFractionDigits)) ? parseInt(maxFractionDigits) : 0}
minFractionDigits={minFractionDigits} minFractionDigits={!isNaN(parseInt(minFractionDigits)) ? parseInt(minFractionDigits) : 0}
className={classNames({ 'p-invalid': fieldState.invalid })}/> className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/> )}/>
return ( return (

View File

@@ -64,6 +64,13 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
onTextChange={(e) => changeFn(e.htmlValue, setting.name)} onTextChange={(e) => changeFn(e.htmlValue, setting.name)}
style={{ height: 80 * 4 }} style={{ height: 80 * 4 }}
/> />
} else if (setting.name === 'step') {
return <InputText id={setting.name}
keyfilter="int"
aria-describedby={`${setting.name}-help`}
placeholder="0"
value={setting.value}
onChange={(e) => changeFn(e.target.value, setting.name)}/>
} else if (setting.name === 'table_columns') { } else if (setting.name === 'table_columns') {
return <ElementSettingTableColumns return <ElementSettingTableColumns
value={is(Object, setting.value) ? setting.value : {}} value={is(Object, setting.value) ? setting.value : {}}

View File

@@ -21,7 +21,7 @@ const BuilderElementSettings = ({ closeSettings }) => {
const [activeElementData, setActiveElementData] = useState({}); const [activeElementData, setActiveElementData] = useState({});
const [settings, setSettings] = useState([]); const [settings, setSettings] = useState([]);
const [validators, setValidators] = useState({}); const [validators, setValidators] = useState({});
const textBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength', 'pattern']; const numberBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength'];
const customValidationOptions = [ const customValidationOptions = [
{ value: 'isPIVA', label: 'isPIVA' }, { value: 'isPIVA', label: 'isPIVA' },
{ value: 'isCodiceFiscale', label: 'isCodiceFiscale' }, { value: 'isCodiceFiscale', label: 'isCodiceFiscale' },
@@ -132,7 +132,7 @@ const BuilderElementSettings = ({ closeSettings }) => {
onChange={(e) => toggleRequired(e.value, k)}/> onChange={(e) => toggleRequired(e.value, k)}/>
</div> </div>
: null} : null}
{textBasedValidatorFields.includes(k) || 'custom' === k {numberBasedValidatorFields.includes(k) || 'pattern' === k || 'custom' === k
? <div className="formElementSettings__field"> ? <div className="formElementSettings__field">
<label htmlFor={`enable_${k}`}>{sprintf(__('Set %s', 'gepafin'), k)}</label> <label htmlFor={`enable_${k}`}>{sprintf(__('Set %s', 'gepafin'), k)}</label>
<InputSwitch <InputSwitch
@@ -153,13 +153,23 @@ const BuilderElementSettings = ({ closeSettings }) => {
placeholder={__('Scegli', 'gepafin')}/> placeholder={__('Scegli', 'gepafin')}/>
</div> </div>
: null} : null}
{textBasedValidatorFields.includes(k) && !isNil(validators[k]) {'pattern' === k && !isNil(validators[k])
? <div className="formElementSettings__field"> ? <div className="formElementSettings__field">
<label htmlFor={k}>{k}</label> <label htmlFor={k}>{k}</label>
<InputText id={k} aria-describedby={`${k}-help`} <InputText id={k} aria-describedby={`${k}-help`}
value={validators[k]} value={validators[k]}
onChange={(e) => onChangeValidator(e.target.value, k)}/> onChange={(e) => onChangeValidator(e.target.value, k)}/>
</div> : null} </div> : null}
{numberBasedValidatorFields.includes(k) && !isNil(validators[k])
? <div className="formElementSettings__field">
<label htmlFor={k}>{k}</label>
<InputText id={k}
aria-describedby={`${k}-help`}
value={validators[k]}
keyfilter="int"
placeholder="0"
onChange={(e) => onChangeValidator(e.target.value, k)}/>
</div> : null}
</div>) : null} </div>) : null}
</TabPanel> : null} </TabPanel> : null}
</TabView> </TabView>