robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit for welsh government planning appeals application

Browse Source
This commit is contained in:
robbond
2021-07-26 16:53:32 +01:00
parent 58f468c275
commit f0f15b4f6e
163 changed files with 15097 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/newappeal/createCase.js
+257
View File
@@ -0,0 +1,257 @@
import Link from "next/link";
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, Field } from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import jsonpath from "jsonpath";
import {
setAppealType,
setAppealTypeTitle,
setAppealTypeID,
setAppealLPA,
getAppealTypeObj,
} from "../../store/appealType/action";
let CreateCase = (props) => {
// useEffect(() => {
// window.scrollTo(0, 0);
// });
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const { LPAData, onSubmit, handleSubmit } = props;
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 = _.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
className={
touched && error
? "govuk-form-group govuk-form-group--error"
: "govuk-form-group "
}
>
{" "}
<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>
{_.isEmpty(optionsObj)
? ""
: Object.keys(optionsObj).map((key, index) => {
return (
<option
key={key}
value={optionsObj[key]}
>
{optionsObj[key]}
</option>
);
})}
</select>
</div>
</div>
</>
);
};
const RenderAppealTypeList = ({
name,
input,
optionsObj,
meta: { touched, error },
label,
errorMsg,
}) => {
return (
<>
<div
className={
touched && error
? "govuk-form-group govuk-form-group--error"
: "govuk-form-group "
}
>
<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>
{_.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();
router.replace("/newappeal/" + values.appealTypes, null, {
shallow: true,
});
};
return (
<form onSubmit={handleSubmit(onHandleSubmit)}>
<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"
/>
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
Continue
</button>
</form>
);
};
const mapStateToProps = (state) => {
return {
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
//form: state.form,
};
};
const mapDispatchToProps = (dispatch) => {
return {
onChangeSelectAppealType: (event) => {
dispatch(
setAppealTypeTitle(
event.target.options[event.target.selectedIndex].text
)
);
dispatch(setAppealTypeID(event.target.value));
},
onChangeSelectLPA: (event) => {
dispatch(setAppealLPA(event.target.value));
},
};
};
const selector = formValueSelector("caseForm"); // <-- same as form name
export default connect(
mapStateToProps,
mapDispatchToProps
)(
reduxForm({
form: "caseForm",
destroyOnUnmount: false,
})(CreateCase)
);