max 5 owners or tenants in field arry

This commit is contained in:
2024-12-02 18:49:15 +00:00
parent f9310d655b
commit 7c95f679ba
4 changed files with 67 additions and 24 deletions
+59 -22
View File
@@ -51,12 +51,20 @@ const RenderTextfield = ({
<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>
)}
{!custom.hasOwnProperty("showErrorBottom")
? touched &&
error && (
<span
id={id + "-error"}
className="govuk-error-message"
>
<span className="govuk-visually-hidden">
Error:
</span>{" "}
{error}
</span>
)
: ""}
<input
{...input}
type={custom.type}
@@ -76,6 +84,20 @@ const RenderTextfield = ({
: undefined
}
/>
{custom.hasOwnProperty("showErrorBottom")
? touched &&
error && (
<span
id={id + "-error"}
className="govuk-error-message"
>
<span className="govuk-visually-hidden">
Error:
</span>{" "}
{error}
</span>
)
: ""}
</div>
</>
);
@@ -2037,7 +2059,7 @@ const renderField = ({ input, label, type, meta: { touched, error } }) => (
</div>
);
const RenderSubFields = ({ fields }) => {
const RenderSubFields = ({ fields, meta: { touched, error }, ...custom }) => {
let { t } = useTranslation();
let subTitle = fields.name.split("pinswg_")[1];
@@ -2045,12 +2067,16 @@ const RenderSubFields = ({ fields }) => {
const checkValue = (value) => {
let errors;
// Check for emojis using a regular expression
const emojiRegex =
/[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2300}-\u{23FF}\u{2B50}\u{1F004}-\u{1F0CF}\u{1F0A0}-\u{1F0A5}\u{1F170}-\u{1F251}]/gu;
if (!value) {
errors = t("newappeal:is-required-label");
} else {
// Check for emojis using a regular expression
const emojiRegex =
/[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2300}-\u{23FF}\u{2B50}\u{1F004}-\u{1F0CF}\u{1F0A0}-\u{1F0A5}\u{1F170}-\u{1F251}]/gu;
if (emojiRegex.test(value)) {
errors = "Emojis are not allowed";
if (emojiRegex.test(value)) {
errors = "Emojis are not allowed";
}
}
return errors;
@@ -2065,6 +2091,7 @@ const RenderSubFields = ({ fields }) => {
{subTitle == "owners" ? "Owners" : "Tenant"} #
{index + 1}
</h4>
<div className="fieldArrayContainer">
<Field
id={`${member}.${fields.name}`}
@@ -2078,6 +2105,7 @@ const RenderSubFields = ({ fields }) => {
: "Tenant name"
}
className="govuk-input govuk-input--width-10"
showErrorBottom={true}
/>
<Field
name={`${member}.dateserved`}
@@ -2088,6 +2116,7 @@ const RenderSubFields = ({ fields }) => {
dateEnd={"0"}
className="govuk-input govuk-input--width-10"
/>
<button
type="button"
title="Remove"
@@ -2100,15 +2129,18 @@ const RenderSubFields = ({ fields }) => {
</div>
))}
</div>
<button
type="button"
className="govuk-link fieldArrayLink"
onClick={() => fields.push({})}
>
{subTitle == "owners"
? "Add Owners"
: t("newappeal:new-appeal-add-tenant-label")}
</button>
<br />
{fields.length < custom.maxSubField && (
<button
type="button"
className="govuk-link fieldArrayLink"
onClick={() => fields.push({})}
>
{subTitle == "owners"
? "Add Owners"
: t("newappeal:new-appeal-add-tenant-label")}
</button>
)}
</ul>
);
};
@@ -2123,6 +2155,7 @@ export const FieldArrayForm = (props) => {
parentFieldShowOnValue,
parentField,
maxFieldLength,
maxSubField,
} = props;
var showIfHasParentShowValue =
@@ -2143,7 +2176,11 @@ export const FieldArrayForm = (props) => {
<>
{" "}
{showIfHasParentShowValue && (
<FieldArray name={name} component={RenderSubFields} />
<FieldArray
name={name}
component={RenderSubFields}
maxSubField={maxSubField}
/>
)}
</>
);
+1
View File
@@ -227,6 +227,7 @@ export default function BuildField(props) {
formProps={props.props.props.props.form}
parentField={props.parentField}
parentFieldShowOnValue={props.parentFieldShowOnValue}
maxSubField={props.maxSubField}
/>
);
case "{9EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
+5
View File
@@ -34,6 +34,7 @@ export default function BuildRow(props) {
var fieldtype = xpath.select("//@classid", doc);
var validation = xpath.select("//@validation", doc);
var maxFieldLength = xpath.select("//@maxFieldLength", doc);
var maxSubField = xpath.select("//@maxsubfield", doc);
var datafieldname = xpath.select("//@datafieldname", doc);
var datafieldcontent = xpath.select(
"//@datafieldcontent",
@@ -74,6 +75,9 @@ export default function BuildRow(props) {
maxFieldLength =
!_.isEmpty(maxFieldLength) && maxFieldLength[0].value;
maxSubField =
!_.isEmpty(maxSubField) && maxSubField[0].value;
parentField =
!_.isEmpty(parentField) && parentField[0].value;
@@ -164,6 +168,7 @@ export default function BuildRow(props) {
setFilesForAppeal={
props.props.setFilesForAppeal
}
maxSubField={maxSubField}
/>
);
// } else {
+2 -2
View File
@@ -148,7 +148,7 @@
<labels>
<label description="Owners" />
</labels>
<control id="pinswg_owners" parentField="pinswg_ownershipcertificate" parentFieldShowOnValue="846040002" classid="{0273EDBD-AC1D-40d3-9FB2-095C621B552D}" datafieldname="pinswg_owners" disabled="false" />
<control id="pinswg_owners" parentField="pinswg_ownershipcertificate" parentFieldShowOnValue="846040002" classid="{0273EDBD-AC1D-40d3-9FB2-095C621B552D}" datafieldname="pinswg_owners" disabled="false" maxsubfield="5" />
</row>
<row>
<labels>
@@ -160,7 +160,7 @@
<labels>
<label description="Tenants name" />
</labels>
<control id="pinswg_agriculturaltenant" parentField="pinswg_agriculturalholding" parentFieldShowOnValue="846040000" classid="{0273EDBD-AC1D-40d3-9FB2-095C621B552D}" datafieldname="pinswg_agriculturaltenantname" disabled="false" />
<control id="pinswg_agriculturaltenant" parentField="pinswg_agriculturalholding" parentFieldShowOnValue="846040000" classid="{0273EDBD-AC1D-40d3-9FB2-095C621B552D}" datafieldname="pinswg_agriculturaltenantname" disabled="false" maxsubfield="5" />
</row>
</rows>
</section>