initial commit for welsh government planning appeals application
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function MakeAdvertApplication() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body appealModule">
|
||||
<p className="govuk-body-s">
|
||||
An appeal relating to an advertisement application or a
|
||||
discontinuance notice.
|
||||
</p>
|
||||
<div className="appealCTA">
|
||||
<Link href="/newappeal/selectappeal">
|
||||
<a className="govuk-button">
|
||||
An advert application/Discontinuance Notice (DN)
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import {
|
||||
Textfield,
|
||||
DateField,
|
||||
DateFieldPicker,
|
||||
YesNofield,
|
||||
PickList,
|
||||
MultiLinefield,
|
||||
NumericField,
|
||||
ReadOnlyfield,
|
||||
DecimalField,
|
||||
} from "../elements";
|
||||
import moment from "moment";
|
||||
|
||||
export default function BuildField(props) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { fieldType, label, datafieldname, fieldValue } = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
const whichFieldType = (classid) => {
|
||||
switch (classid) {
|
||||
case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
|
||||
return (
|
||||
<>
|
||||
<span>hello</span>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
|
||||
return <>{fieldValue}</>;
|
||||
break;
|
||||
default:
|
||||
return <>{fieldValue}</>;
|
||||
}
|
||||
};
|
||||
|
||||
return <>{whichFieldType(props.fieldType)}</>;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import BuildCheckField from "./buildCheckfield";
|
||||
import { useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
setCaseReference,
|
||||
setCurrentSection,
|
||||
setFormComplete,
|
||||
} from "../../store/appealType/action";
|
||||
|
||||
let BuildCheckRow = (props) => {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const {
|
||||
formXML,
|
||||
whichSection,
|
||||
sectionCount,
|
||||
onSubmit,
|
||||
updateCurrentSection,
|
||||
} = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
|
||||
var rowXML = xpath.select(
|
||||
"/form/tabs/tab[" +
|
||||
whichSection +
|
||||
"]/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{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 (
|
||||
<div className="govuk-summary-list__row" key={key}>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{rows[0].value}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
props.props.form["appealForm"].values[
|
||||
datafieldname[0].value
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
updateCurrentSection(whichSection);
|
||||
}}
|
||||
>
|
||||
Change
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
name
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
updateCurrentSection: (whichSection) => {
|
||||
dispatch(setCurrentSection(whichSection));
|
||||
dispatch(setFormComplete("true"));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
count: state.count,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckRow);
|
||||
@@ -0,0 +1,125 @@
|
||||
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 BuildCheckRow from "./buildcheckrow";
|
||||
import { reduxForm, formValueSelector } from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
setCurrentSection,
|
||||
setFormComplete,
|
||||
} from "../../store/appealType/action";
|
||||
|
||||
let BuildCheckSection = (props) => {
|
||||
useEffect(() => {
|
||||
setFormComplete();
|
||||
}, []);
|
||||
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const {
|
||||
formXML,
|
||||
sectionCount,
|
||||
onSubmit,
|
||||
handleSubmit,
|
||||
formTitle,
|
||||
setCurrentSection,
|
||||
} = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
var titles = xpath.select(
|
||||
"//form/tabs/tab[*]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
var rowXML = xpath.select(
|
||||
"/form/tabs/tab[*]/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
|
||||
var titleList = xpath.select(
|
||||
"//form/tabs/tab[*]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const basicSearch = (event) => {
|
||||
event.preventDefault();
|
||||
console.log(query);
|
||||
// /searchresults
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<div>
|
||||
<h1 className="govuk-heading-m">
|
||||
Are these answers correct?
|
||||
</h1>
|
||||
{Object.keys(titles).map((key) => (
|
||||
<>
|
||||
<h2 className="govuk-heading-m">
|
||||
{titles[key].value}
|
||||
</h2>
|
||||
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
|
||||
<BuildCheckRow
|
||||
formXML={formXML}
|
||||
whichSection={parseInt(key) + 1}
|
||||
sectionCount={key}
|
||||
props={props}
|
||||
key={key}
|
||||
/>
|
||||
</dl>
|
||||
</>
|
||||
))}
|
||||
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list"></dl>
|
||||
</div>
|
||||
<div className="govuk-button-group">
|
||||
<a
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
onClick={() => setCurrentSection(9999)}
|
||||
>
|
||||
Submit appeal
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-column-one-third"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setCurrentSection: (currentSection) => {
|
||||
dispatch(setCurrentSection(currentSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// BuildCheckSection = reduxForm({
|
||||
// // a unique name for the form
|
||||
// form: "sssappealForm",
|
||||
// destroyOnUnmount: false,
|
||||
// })(BuildCheckSection);
|
||||
|
||||
const selector = formValueSelector("appealForm"); // <-- same as form name
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckSection);
|
||||
@@ -0,0 +1,102 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import {
|
||||
Textfield,
|
||||
DateField,
|
||||
DateFieldPicker,
|
||||
YesNofield,
|
||||
PickList,
|
||||
MultiLinefield,
|
||||
NumericField,
|
||||
ReadOnlyfield,
|
||||
DecimalField,
|
||||
} from "../elements";
|
||||
|
||||
export default function BuildField(props) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { fieldType, label, datafieldname } = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
const whichFieldType = (classid) => {
|
||||
switch (classid) {
|
||||
case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
|
||||
return (
|
||||
<ReadOnlyfield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
value={props.props.props.appealType.caseReference}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
|
||||
return (
|
||||
<PickList
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
datafieldname={props.datafieldname}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
|
||||
return (
|
||||
<YesNofield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
|
||||
return (
|
||||
<Textfield name={props.datafieldname} label={props.label} />
|
||||
);
|
||||
break;
|
||||
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
|
||||
return (
|
||||
<DateFieldPicker
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
|
||||
return (
|
||||
<MultiLinefield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
|
||||
return (
|
||||
<NumericField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
|
||||
return (
|
||||
<DecimalField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
return (
|
||||
<Textfield name={props.datafieldname} label={props.label} />
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">{whichFieldType(props.fieldType)}</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import BuildField from "./buildfield";
|
||||
|
||||
export default function BuildRow(props) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { rowXML, whichSection, sectionCount, onSubmit } = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,278 @@
|
||||
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, getFormSubmitErrors } from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
setCaseReference,
|
||||
setCurrentSection,
|
||||
} from "../../store/appealType/action";
|
||||
import { query } from "jsonpath";
|
||||
|
||||
let BuildSection = (props) => {
|
||||
// useEffect(() => {
|
||||
// window.scrollTo(0, 0);
|
||||
// });
|
||||
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const {
|
||||
formXML,
|
||||
sectionCount,
|
||||
onSubmit,
|
||||
handleSubmit,
|
||||
formTitle,
|
||||
setCurrentSection,
|
||||
refno,
|
||||
gotoSection,
|
||||
} = props;
|
||||
|
||||
const currentSection = props.appealType.currentSection;
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
var titles = xpath.select(
|
||||
"//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
var rowXML = xpath.select(
|
||||
"/form/tabs/tab[" +
|
||||
currentSection +
|
||||
"]/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
|
||||
var titleList = xpath.select(
|
||||
"//form/tabs/tab[*]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
setCurrentSection(currentSection + 1);
|
||||
};
|
||||
|
||||
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">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<h1 className="govuk-heading-m govuk-!-margin-top-5">
|
||||
{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}
|
||||
sectionCount={props.sectionCount}
|
||||
onSubmit={onSubmit}
|
||||
props={props}
|
||||
/>
|
||||
{}
|
||||
<div className="govuk-button-group">
|
||||
{props.sectionCount != currentSection ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
onClick={() => getErrors()}
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{props.sectionCount == currentSection ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{currentSection > 1 ? (
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() =>
|
||||
setCurrentSection(currentSection - 1)
|
||||
}
|
||||
>
|
||||
Back
|
||||
</a>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="govuk-grid-column-one-third">
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-labelledby="progress-list"
|
||||
className="at-nav"
|
||||
>
|
||||
<h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
|
||||
Progress:
|
||||
</h3>
|
||||
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
|
||||
|
||||
<ol className="govuk-list">
|
||||
<ul className="govuk-list ">
|
||||
<li className="at-nav__page">
|
||||
<ol className="govuk-list">
|
||||
{Object.keys(titleList).map((key) =>
|
||||
parseInt(key) + 1 == currentSection ? (
|
||||
<li key={key}>
|
||||
<b>{titleList[key].value} </b>
|
||||
</li>
|
||||
) : (
|
||||
<li key={key}>
|
||||
{props.appealType
|
||||
.formComplete == "true" ||
|
||||
parseInt(key) + 1 <
|
||||
currentSection ? (
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
parseInt(key) +
|
||||
1
|
||||
);
|
||||
}}
|
||||
>
|
||||
{titleList[key].value}
|
||||
</a>
|
||||
) : (
|
||||
titleList[key].value
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setCurrentSection: (currentSection) => {
|
||||
dispatch(setCurrentSection(currentSection));
|
||||
},
|
||||
gotoSection: (thisSection) => {
|
||||
dispatch(setCurrentSection(thisSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const selector = formValueSelector("appealForm"); // <-- same as form name
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(
|
||||
reduxForm({
|
||||
form: "appealForm",
|
||||
destroyOnUnmount: false,
|
||||
})(BuildSection)
|
||||
);
|
||||
@@ -0,0 +1,124 @@
|
||||
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 } from "redux-form";
|
||||
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import { setCurrentSection } from "../../store/appealType/action";
|
||||
|
||||
let CompleteAppeal = (props) => {
|
||||
// useEffect(() => {
|
||||
// window.scrollTo(0, 0);
|
||||
// });
|
||||
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const {
|
||||
formXML,
|
||||
sectionCount,
|
||||
onSubmit,
|
||||
handleSubmit,
|
||||
formTitle,
|
||||
setCurrentSection,
|
||||
} = props;
|
||||
|
||||
const currentSection = props.appealType.currentSection;
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
var titles = xpath.select(
|
||||
"//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
var rowXML = xpath.select(
|
||||
"/form/tabs/tab[" +
|
||||
currentSection +
|
||||
"]/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
|
||||
var titleList = xpath.select(
|
||||
"//form/tabs/tab[*]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
setCurrentSection(currentSection + 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<div className="govuk-panel govuk-panel--confirmation">
|
||||
<h1 className="govuk-panel__title">Appeal complete</h1>
|
||||
<div className="govuk-panel__body">
|
||||
Your reference number
|
||||
<br />
|
||||
<strong>{props.appealType.caseReference}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="govuk-body">
|
||||
We have sent you a confirmation email.
|
||||
</p>
|
||||
|
||||
<h2 className="govuk-heading-m">What happens next</h2>
|
||||
|
||||
<p className="govuk-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Morbi a metus non quam mollis egestas. Integer ac leo
|
||||
cursus, laoreet nulla sed, tempus tellus. Mauris condimentum
|
||||
erat arcu.
|
||||
</p>
|
||||
<p className="govuk-body">
|
||||
Sed imperdiet dignissim ipsum. Orci varius natoque penatibus
|
||||
et magnis dis parturient montes, nascetur ridiculus mus. In
|
||||
id leo in turpis aliquam venenatis ut non erat. Ut est arcu,
|
||||
luctus sit amet pretium sed, iaculis non purus. Etiam dictum
|
||||
tortor commodo luctus rhoncus.
|
||||
</p>
|
||||
|
||||
<p className="govuk-body">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-link">Back to My Portal</a>
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<p className="govuk-body">
|
||||
<a href="#" className="govuk-link">
|
||||
What did you think of this service?
|
||||
</a>
|
||||
(takes 30 seconds)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setCurrentSection: (currentSection) => {
|
||||
dispatch(setCurrentSection(currentSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const selector = formValueSelector("appealForm"); // <-- same as form name
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(CompleteAppeal);
|
||||
@@ -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)
|
||||
);
|
||||
@@ -0,0 +1,24 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function MakeEnforcementNotice() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body appealModule">
|
||||
<p className="govuk-body-s">
|
||||
Including an enforcement listed building notice.
|
||||
</p>
|
||||
<div className="appealCTA">
|
||||
<Link href="/newappeal/selectappeal">
|
||||
<a className="govuk-button">A enforcement notice</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function MakeLDC() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body appealModule">
|
||||
<p className="govuk-body-s">
|
||||
An appeal relating to an application for a certificate of
|
||||
lawful use or development.
|
||||
</p>
|
||||
<div className="appealCTA">
|
||||
<Link href="/newappeal/selectappeal">
|
||||
<a className="govuk-button">
|
||||
A Lawful Development Certificate (LDC)
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function MakeNewAppeal() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="casescomment-card">
|
||||
<div className="card-body appealModule">
|
||||
<p className="govuk-body-s">
|
||||
This includes all householder applications, full planning
|
||||
applications, outline planning applications, planning listed
|
||||
building (LB) applications.
|
||||
</p>
|
||||
<div className="appealCTA">
|
||||
<Link href="./newappeal/selectappeal">
|
||||
<a className="govuk-button">A planning application</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user