uat fixes
This commit is contained in:
+154
-57
@@ -70,7 +70,11 @@ const RenderTextfield = ({
|
||||
: 100
|
||||
: 200
|
||||
}
|
||||
// pattern={custom.hasOwnProperty("pattern") && custom.pattern}
|
||||
pattern={
|
||||
custom.hasOwnProperty("pattern")
|
||||
? custom.pattern
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
@@ -379,24 +383,40 @@ export const RenderRichMultiline = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<label className="govuk-label" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
<ReactQuill
|
||||
modules={modules}
|
||||
theme="snow"
|
||||
value={editValue}
|
||||
onChange={changeEdit}
|
||||
/>
|
||||
<textarea
|
||||
{...input}
|
||||
id={id}
|
||||
name={name}
|
||||
rows={rows}
|
||||
className={className}
|
||||
value={editValue}
|
||||
style={{ display: "none" }}
|
||||
></textarea>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<label className="govuk-label" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
|
||||
{error && (
|
||||
<span id={id + "-error"} className="govuk-error-message">
|
||||
<span className="govuk-visually-hidden">Error:</span>{" "}
|
||||
{error}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<ReactQuill
|
||||
modules={modules}
|
||||
theme="snow"
|
||||
value={editValue}
|
||||
onChange={changeEdit}
|
||||
/>
|
||||
<textarea
|
||||
{...input}
|
||||
id={id}
|
||||
name={name}
|
||||
rows={rows}
|
||||
className={className}
|
||||
value={editValue}
|
||||
style={{ display: "none" }}
|
||||
></textarea>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -503,6 +523,7 @@ const RenderDatePicker = ({
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
|
||||
let { t } = useTranslation();
|
||||
var startDateArr =
|
||||
custom.dateStart != "0" ? custom.dateStart.split("") : custom.dateStart;
|
||||
var endDateArr =
|
||||
@@ -560,6 +581,9 @@ const RenderDatePicker = ({
|
||||
>
|
||||
{FieldsTranslations(label)}
|
||||
</label>
|
||||
{custom.hint != false && (
|
||||
<div className="govuk-hint">{t(custom.hint)}</div>
|
||||
)}
|
||||
</legend>
|
||||
{touched && error && (
|
||||
<span
|
||||
@@ -637,6 +661,7 @@ export function DateFieldPicker(props) {
|
||||
errorMsg="Select a date"
|
||||
dateStart={dateStart}
|
||||
dateEnd={dateEnd}
|
||||
hint={props.hint}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
@@ -649,6 +674,7 @@ export function DateFieldPicker(props) {
|
||||
errorMsg="Select a date"
|
||||
dateStart={dateStart}
|
||||
dateEnd={dateEnd}
|
||||
hint={props.hint}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -1230,7 +1256,7 @@ const RenderPickList = ({
|
||||
dropdownObj = dropdownObj[0];
|
||||
|
||||
const required = (value) => {
|
||||
return value || value == 0 ? undefined : "Requirewwwd";
|
||||
return value || value == 0 ? undefined : "Is required";
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -1251,13 +1277,10 @@ const RenderPickList = ({
|
||||
{error}
|
||||
</span>
|
||||
)}
|
||||
<select
|
||||
{...input}
|
||||
className="govuk-select "
|
||||
id={label}
|
||||
name={label}
|
||||
>
|
||||
<option>{t("newappeal:select-default")}</option>
|
||||
<select {...input} className="govuk-select " id={id} name={id}>
|
||||
<option value="" disabled defaultValue>
|
||||
{t("newappeal:select-default")}
|
||||
</option>
|
||||
{Object.keys(dropdownObj).map((key, index) => {
|
||||
return (
|
||||
<option key={key} value={dropdownObj[key].Value}>
|
||||
@@ -1311,7 +1334,7 @@ export function NumericField(props) {
|
||||
};
|
||||
const isNumber = (value) => {
|
||||
const regex = /^\d*\.?\d{0,1}$/;
|
||||
return regex.test(value) ? undefined : "Should be a number or decimal";
|
||||
return regex.test(value) ? undefined : "Should be a number";
|
||||
};
|
||||
|
||||
const maxLength = (max) => (value) =>
|
||||
@@ -1358,35 +1381,40 @@ export function NumericField(props) {
|
||||
) : (
|
||||
<div className="govuk-form-group">
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
type="number"
|
||||
className="govuk-input govuk-input--width-20 wwwww"
|
||||
spellCheck="false"
|
||||
aria-describedby={name}
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
parse={Number}
|
||||
validate={[required]}
|
||||
component={RenderTextfield}
|
||||
label={label}
|
||||
normalize={(value) => parseInt(value)}
|
||||
|
||||
// name={props.name}
|
||||
// id={props.name}
|
||||
// // component="input"
|
||||
// type="text"
|
||||
// className="govuk-input govuk-input--width-20 wwww"
|
||||
// className="govuk-input govuk-input--width-20 wwwww"
|
||||
// aria-describedby={name}
|
||||
// pattern="^\d*(\.\d{0,2})?$"
|
||||
// //pattern="^\d*\.?\d+$"
|
||||
// pattern="[0-9]*"
|
||||
// // inputMode="numeric"
|
||||
// // parse={Number}
|
||||
// validate={[
|
||||
// required,
|
||||
// isNumber,
|
||||
// // isNumber,
|
||||
// maxLength(props.maxFieldLength),
|
||||
// ]}
|
||||
// component={RenderTextfield}
|
||||
// label={props.label}
|
||||
// label={label}
|
||||
// // normalize={(value) => parseInt(value)}
|
||||
// maxFieldLength={props.maxFieldLength}
|
||||
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-10"
|
||||
aria-describedby={name}
|
||||
//pattern="^\d*\.?\d+$"
|
||||
pattern="[0-9]*"
|
||||
validate={[
|
||||
required,
|
||||
isNumber,
|
||||
maxLength(props.maxFieldLength),
|
||||
]}
|
||||
component={RenderTextfield}
|
||||
label={props.label}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -1460,21 +1488,18 @@ export function DecimalField(props) {
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
// component="input"
|
||||
type="number"
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-10"
|
||||
spellCheck="false"
|
||||
aria-describedby={name}
|
||||
pattern="^\d*(\.\d{0,2})?$"
|
||||
inputMode="numeric"
|
||||
parse={Number}
|
||||
validate={[
|
||||
required,
|
||||
isNumber,
|
||||
maxLength(props.maxFieldLength),
|
||||
]}
|
||||
component={RenderTextfield}
|
||||
pattern="^\d*\.?\d+$"
|
||||
// inputMode="numeric"
|
||||
// parse={Number}
|
||||
validate={validateDecimal}
|
||||
component={RenderDecimalField}
|
||||
label={props.label}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
// normalize={normalizeDecimal} // Normalizing input as float
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -1482,6 +1507,78 @@ export function DecimalField(props) {
|
||||
);
|
||||
}
|
||||
|
||||
const normalizeDecimal = (value) => {
|
||||
return value ? parseFloat(value) : value;
|
||||
};
|
||||
|
||||
const validateDecimal = (value) => {
|
||||
if (!value) return "This field is required";
|
||||
|
||||
// Regex to match whole numbers or decimal numbers (up to 7 characters including decimal)
|
||||
const regex = /^\d{1,6}(\.\d{1,2})?$/; // Up to 6 digits before the decimal, 2 after
|
||||
|
||||
// Check if the value matches the regex pattern
|
||||
if (!regex.test(value)) {
|
||||
return "Invalid number (max 7 characters, 2 decimal places)";
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const RenderDecimalField = ({
|
||||
name,
|
||||
id,
|
||||
label,
|
||||
datafieldname,
|
||||
className,
|
||||
input,
|
||||
errorMsg,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
// <div>
|
||||
// <label>{label}</label>
|
||||
// <input {...input} type="text" />
|
||||
// {touched && error && <span>{error}</span>}
|
||||
// </div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
|
||||
{FieldsTranslations(label)}
|
||||
</label>
|
||||
{touched && error && (
|
||||
<span id={id + "-error"} className="govuk-error-message">
|
||||
<span className="govuk-visually-hidden">Error:</span>{" "}
|
||||
{error}
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
{...input}
|
||||
// type={custom.type}
|
||||
className={className}
|
||||
name={name}
|
||||
id={id}
|
||||
maxLength={
|
||||
custom.hasOwnProperty("maxFieldLength")
|
||||
? custom.maxFieldLength
|
||||
? custom.maxFieldLength
|
||||
: 100
|
||||
: 200
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const RenderCaseID = {};
|
||||
|
||||
export function ReadOnlyfield(props) {
|
||||
|
||||
Reference in New Issue
Block a user