added validation methods
This commit is contained in:
@@ -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