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

View File

@@ -64,6 +64,13 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
onTextChange={(e) => changeFn(e.htmlValue, setting.name)}
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') {
return <ElementSettingTableColumns
value={is(Object, setting.value) ? setting.value : {}}

View File

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