added validation methods
This commit is contained in:
@@ -45,8 +45,6 @@ let BuildCheckRow = (props) => {
|
||||
var fieldtype = xpath.select("//@classid", doc);
|
||||
var datafieldname = xpath.select("//@datafieldname", doc);
|
||||
|
||||
console.log(props.form);
|
||||
|
||||
return (
|
||||
<div className="govuk-summary-list__row" key={key}>
|
||||
<dt className="govuk-summary-list__key">
|
||||
|
||||
@@ -73,6 +73,7 @@ let BuildCheckSection = (props) => {
|
||||
whichSection={parseInt(key) + 1}
|
||||
sectionCount={key}
|
||||
props={props}
|
||||
key={key}
|
||||
/>
|
||||
</dl>
|
||||
</>
|
||||
|
||||
@@ -97,10 +97,6 @@ export default function BuildField(props) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
{whichFieldType(props.fieldType)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">{whichFieldType(props.fieldType)}</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,27 +15,25 @@ export default function BuildRow(props) {
|
||||
const parser = new DOMParser();
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
{Object.keys(rowXML).map((key, index) => {
|
||||
var doc = parser.parseFromString(
|
||||
rowXML[key].outerHTML,
|
||||
"text/xml"
|
||||
);
|
||||
var rows = xpath.select("//label/@description", doc);
|
||||
var fieldtype = xpath.select("//@classid", doc);
|
||||
var datafieldname = xpath.select("//@datafieldname", doc);
|
||||
return (
|
||||
<BuildField
|
||||
fieldType={fieldtype[0].value}
|
||||
label={rows[0].value}
|
||||
datafieldname={datafieldname[0].value}
|
||||
key={key}
|
||||
props={props}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="govuk-grid-column-full">
|
||||
{Object.keys(rowXML).map((key, index) => {
|
||||
var doc = parser.parseFromString(
|
||||
rowXML[key].outerHTML,
|
||||
"text/xml"
|
||||
);
|
||||
var rows = xpath.select("//label/@description", doc);
|
||||
var fieldtype = xpath.select("//@classid", doc);
|
||||
var datafieldname = xpath.select("//@datafieldname", doc);
|
||||
return (
|
||||
<BuildField
|
||||
fieldType={fieldtype[0].value}
|
||||
label={rows[0].value}
|
||||
datafieldname={datafieldname[0].value}
|
||||
key={key}
|
||||
props={props}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import Link from "next/link";
|
||||
import _, { has } from "lodash";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { useState, useEffect } from "react";
|
||||
import xpath from "xpath";
|
||||
import BuildRow from "./buildrow";
|
||||
import { reduxForm, formValueSelector } from "redux-form";
|
||||
import { reduxForm, formValueSelector, getFormSubmitErrors } from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
setCaseReference,
|
||||
@@ -56,12 +57,73 @@ let BuildSection = (props) => {
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
setCurrentSection(currentSection + 1);
|
||||
setCaseReference(router.query.refno);
|
||||
};
|
||||
|
||||
// const initialValues = {
|
||||
// email: router.query.refno,
|
||||
// };
|
||||
const [hasErrors, setHasErrors] = useState("");
|
||||
|
||||
const getErrors = () => {
|
||||
let errorsobj = props.props.form["appealForm"];
|
||||
setHasErrors(errorsobj.hasOwnProperty("syncErrors"));
|
||||
window.scrollTo(0, 0);
|
||||
};
|
||||
|
||||
let errorsobj = {};
|
||||
const ShowErrorHeader = (props) => {
|
||||
errorsobj = props.props.appealForm.syncErrors;
|
||||
errorsobj = _.keys(errorsobj);
|
||||
|
||||
const getErrorLabel = (whichField) => {
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
var errorFieldLabel = xpath.select(
|
||||
"//*[control/@id='" + whichField + "']//@description",
|
||||
doc
|
||||
);
|
||||
|
||||
return errorFieldLabel[0].value;
|
||||
};
|
||||
|
||||
const ShowErrors = () => {
|
||||
let errorList = [];
|
||||
for (let i = 0; i < errorsobj.length; ++i) {
|
||||
//get label from error key - search rowxml for id = errorobj
|
||||
|
||||
errorList.push(
|
||||
<li>
|
||||
<a href={"#" + errorsobj[i] + "_label"}>
|
||||
{" "}
|
||||
{getErrorLabel(errorsobj[i])}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return errorList;
|
||||
};
|
||||
|
||||
return !_.isEmpty(errorsobj) ? (
|
||||
<div
|
||||
className="govuk-error-summary"
|
||||
aria-labelledby="error-summary-title"
|
||||
role="alert"
|
||||
tabIndex="-1"
|
||||
data-module="govuk-error-summary"
|
||||
>
|
||||
<h2
|
||||
className="govuk-error-summary__title"
|
||||
id="error-summary-title"
|
||||
>
|
||||
The following fields have a problem :
|
||||
</h2>
|
||||
<div className="govuk-error-summary__body">
|
||||
<ul className="govuk-list govuk-error-summary__list">
|
||||
<ShowErrors />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
@@ -70,6 +132,16 @@ let BuildSection = (props) => {
|
||||
{titles[0].value}{" "}
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
{hasErrors == true ? (
|
||||
<ShowErrorHeader
|
||||
hasErrors={hasErrors}
|
||||
props={props.props.form}
|
||||
formXML={formXML}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
<BuildRow
|
||||
rowXML={rowXML}
|
||||
whichSection={props.whichSection}
|
||||
@@ -84,6 +156,7 @@ let BuildSection = (props) => {
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
onClick={() => getErrors()}
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
|
||||
@@ -15,8 +15,6 @@ import {
|
||||
getAppealTypeObj,
|
||||
} from "../../store/appealType/action";
|
||||
|
||||
import { createCase } from "../../actions";
|
||||
|
||||
let CreateCase = (props) => {
|
||||
// useEffect(() => {
|
||||
// window.scrollTo(0, 0);
|
||||
@@ -29,37 +27,85 @@ let CreateCase = (props) => {
|
||||
|
||||
const { LPAData, onSubmit, handleSubmit } = props;
|
||||
|
||||
const appealOptionsObj = props.appealType.appealTypeOptions.GlobalOptionSet
|
||||
.Options || [{}];
|
||||
const appealOptionsObj = _.isEmpty(props)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions.GlobalOptionSet)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions.GlobalOptionSet.Options)
|
||||
? [{}]
|
||||
: props.appealType.appealTypeOptions.GlobalOptionSet.Options;
|
||||
|
||||
let lpaOptionsObj = jsonpath.query(props.LPAData.LPAData, "$..name");
|
||||
let lpaOptionsObj = _.isEmpty(props)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData.LPAData)
|
||||
? [{}]
|
||||
: jsonpath.query(props.LPAData.LPAData, "$..name");
|
||||
|
||||
const RenderLPAList = ({
|
||||
name,
|
||||
input,
|
||||
optionsObj,
|
||||
meta: { touched, error },
|
||||
label,
|
||||
errorMsg,
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<select
|
||||
{...input}
|
||||
className="govuk-select"
|
||||
id="lpatypes"
|
||||
name={name}
|
||||
//onChange={(e) => props.onChangeSelectLPA(e)}
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<option>Select...</option>
|
||||
{Object.keys(optionsObj).map((key, index) => {
|
||||
return (
|
||||
<option key={key} value={optionsObj[key]}>
|
||||
{optionsObj[key]}
|
||||
{" "}
|
||||
<label className="govuk-label" htmlFor="sort">
|
||||
{label}
|
||||
</label>
|
||||
{touched && error && (
|
||||
<span
|
||||
id="passport-issued-error"
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<div>
|
||||
<select
|
||||
{...input}
|
||||
className="govuk-select govuk-input--error"
|
||||
id="lpatypes"
|
||||
name={name}
|
||||
//onChange={(e) => props.onChangeSelectLPA(e)}
|
||||
>
|
||||
<option value="" disabled defaultValue>
|
||||
Select...
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
{touched && error && <span>{error}</span>}
|
||||
</div>
|
||||
{_.isEmpty(optionsObj)
|
||||
? ""
|
||||
: Object.keys(optionsObj).map((key, index) => {
|
||||
return (
|
||||
<option
|
||||
key={key}
|
||||
value={optionsObj[key]}
|
||||
>
|
||||
{optionsObj[key]}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -68,97 +114,99 @@ let CreateCase = (props) => {
|
||||
input,
|
||||
optionsObj,
|
||||
meta: { touched, error },
|
||||
label,
|
||||
errorMsg,
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<select
|
||||
{...input}
|
||||
className="govuk-select"
|
||||
id="appealTypes"
|
||||
name={name}
|
||||
//onChange={(e) => props.onChangeSelectAppealType(e)}
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<option>Select...</option>
|
||||
{Object.keys(optionsObj).map((key, index) => {
|
||||
return (
|
||||
<option
|
||||
key={key}
|
||||
value={optionsObj[
|
||||
key
|
||||
].Label.LocalizedLabels[0].Label.replace(
|
||||
/[\s\-\+\(\)\,]/g,
|
||||
""
|
||||
).toLowerCase()}
|
||||
>
|
||||
{optionsObj[key].Label.LocalizedLabels[0].Label}
|
||||
<label className="govuk-label" htmlFor="sort">
|
||||
{label}
|
||||
</label>
|
||||
{touched && error && (
|
||||
<span
|
||||
id="passport-issued-error"
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<div>
|
||||
<select
|
||||
{...input}
|
||||
className="govuk-select"
|
||||
id="appealTypes"
|
||||
name={name}
|
||||
//onChange={(e) => props.onChangeSelectAppealType(e)}
|
||||
>
|
||||
<option value="" disabled defaultValue>
|
||||
Select...
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
{touched && error && <span>{error}</span>}
|
||||
</div>
|
||||
{_.isEmpty(optionsObj)
|
||||
? ""
|
||||
: Object.keys(optionsObj).map((key, index) => {
|
||||
return (
|
||||
<option
|
||||
key={key}
|
||||
value={optionsObj[
|
||||
key
|
||||
].Label.LocalizedLabels[0].Label.replace(
|
||||
/[\s\-\+\(\)\,]/g,
|
||||
""
|
||||
).toLowerCase()}
|
||||
>
|
||||
{
|
||||
optionsObj[key].Label
|
||||
.LocalizedLabels[0].Label
|
||||
}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
event.preventDefault();
|
||||
|
||||
console.log(createCase("asasa", "asasa"));
|
||||
|
||||
const caseReference = createCase("123123", "213132");
|
||||
|
||||
router.replace(
|
||||
"/newappeal/" + values.appealTypes + "?refno=" + caseReference,
|
||||
null,
|
||||
{
|
||||
shallow: true,
|
||||
}
|
||||
);
|
||||
console.log(values);
|
||||
router.replace("/newappeal/" + values.appealTypes, null, {
|
||||
shallow: true,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="sort">
|
||||
Select your local planning authority
|
||||
</label>
|
||||
<Field
|
||||
name="lpaTypes"
|
||||
component={RenderLPAList}
|
||||
optionsObj={lpaOptionsObj}
|
||||
/>
|
||||
{/* <select
|
||||
className="govuk-select"
|
||||
id="appealTypes"
|
||||
name="appealTypes"
|
||||
onChange={(e) => props.onChangeSelectLPA(e)}
|
||||
>
|
||||
{" "}
|
||||
<option>Select...</option>
|
||||
{lpaOptions}
|
||||
</select> */}
|
||||
</div>
|
||||
<Field
|
||||
name="lpaTypes"
|
||||
component={RenderLPAList}
|
||||
optionsObj={lpaOptionsObj}
|
||||
validate={[required]}
|
||||
label="Select your local planning authority"
|
||||
errorMsg="Local authority is required"
|
||||
/>
|
||||
|
||||
<Field
|
||||
name="appealTypes"
|
||||
component={RenderAppealTypeList}
|
||||
optionsObj={appealOptionsObj}
|
||||
validate={[required]}
|
||||
label="Select an appeal type"
|
||||
errorMsg="Appeal type is required"
|
||||
/>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="sort">
|
||||
Select an appeal type
|
||||
</label>
|
||||
<Field
|
||||
name="appealTypes"
|
||||
component={RenderAppealTypeList}
|
||||
optionsObj={appealOptionsObj}
|
||||
/>
|
||||
{/* <select
|
||||
className="govuk-select"
|
||||
id="appealTypes"
|
||||
name="appealTypes"
|
||||
onChange={(e) => props.onChangeSelectAppealType(e)}
|
||||
>
|
||||
<option>Select...</option>
|
||||
{appealOptions}
|
||||
</select> */}
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
|
||||
Reference in New Issue
Block a user