Merged PR 380: added validation and updated git ignore
Related work items: #5210, #5242
This commit is contained in:
Robert Bond
+18
-2
@@ -1,3 +1,19 @@
|
||||
node_modules
|
||||
// .gitignore
|
||||
# next.js build output
|
||||
.next
|
||||
package-lock.json
|
||||
|
||||
# dotenv environment variables file - set in pipeline as environment variables
|
||||
.env
|
||||
.env.build
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
#lock files
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
@@ -72,6 +72,22 @@ const Breadcrumbs = (props) => {
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/searchresults" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href="/myportal">
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
My Portal
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
Search results
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/newappeal" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
|
||||
+214
-89
@@ -6,25 +6,77 @@ import React, { useState } from "react";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import moment from "moment";
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
errorMsg,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
|
||||
{label}
|
||||
</label>
|
||||
{touched && error && (
|
||||
<span id={id + "-error"} className="govuk-error-message">
|
||||
<span className="govuk-visually-hidden">Error:</span>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<input {...input} className={className} name={name} id={id} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function Textfield(props) {
|
||||
const { name, label } = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label " htmlFor="event-name">
|
||||
{props.label}
|
||||
</label>
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component="input"
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
/>
|
||||
</div>
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={props.label}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const RenderMultiline = ({
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<textarea {...input} rows={rows} className={className}></textarea>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function MultiLinefield(props) {
|
||||
const { name, label } = props;
|
||||
|
||||
@@ -42,13 +94,14 @@ export function MultiLinefield(props) {
|
||||
Do not include personal or financial information, like your
|
||||
National Insurance number or credit card details.
|
||||
</div>
|
||||
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component="input"
|
||||
component={RenderMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-20"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby="more-detail-hint"
|
||||
/>
|
||||
</div>
|
||||
@@ -59,48 +112,73 @@ const RenderDatePicker = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
id,
|
||||
errorMsg,
|
||||
input: { onChange, value },
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<DatePicker
|
||||
{...custom}
|
||||
autoOk={true}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
onChange={onChange}
|
||||
selected={value || null}
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="dob-hint"
|
||||
>
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
||||
<label
|
||||
className="govuk-fieldset__heading"
|
||||
id={id + "_label"}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
</legend>
|
||||
{touched && error && (
|
||||
<span
|
||||
id={id + "-error"}
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<DatePicker
|
||||
{...custom}
|
||||
autoOk={true}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
onChange={onChange}
|
||||
selected={value || null}
|
||||
|
||||
// value={!value ? null : new Date(value)}
|
||||
/>
|
||||
|
||||
{touched && error && <span>{error}</span>}
|
||||
// value={!value ? null : new Date(value)}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function DateFieldPicker(props) {
|
||||
const { name, label } = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="dob-hint"
|
||||
>
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
||||
<label className="govuk-fieldset__heading">
|
||||
{props.label}
|
||||
</label>
|
||||
</legend>
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderDatePicker}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
<Field
|
||||
name={name}
|
||||
id={name}
|
||||
label={label}
|
||||
component={RenderDatePicker}
|
||||
//validate={[required]}
|
||||
errorMsg="Select a date"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -183,47 +261,96 @@ export function DateField(props) {
|
||||
);
|
||||
}
|
||||
|
||||
const RenderYesNo = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
id,
|
||||
errorMsg,
|
||||
options,
|
||||
input: { onChange, value },
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
aria-describedby={name + "-hint"}
|
||||
>
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
||||
<label
|
||||
className="govuk-fieldset__heading govuk-body-m"
|
||||
id={id + "_label"}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
</legend>
|
||||
{touched && error && (
|
||||
<span
|
||||
id={id + "-error"}
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<div className="govuk-radios govuk-radios--inline govuk-radios--small">
|
||||
{Object.keys(options).map((key, index) => (
|
||||
<div
|
||||
className="govuk-radios__item"
|
||||
data-children-count={key}
|
||||
key={key}
|
||||
>
|
||||
<Field
|
||||
id={id + "_" + index}
|
||||
name={id}
|
||||
component="input"
|
||||
type="radio"
|
||||
className="govuk-radios__input"
|
||||
value={options[key]}
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-radios__label"
|
||||
htmlFor={id + "_" + index}
|
||||
>
|
||||
{options[key]}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function YesNofield(props) {
|
||||
const { name, label } = props;
|
||||
const yesNo = ["Yes", "No"];
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
>
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
||||
<label className="govuk-fieldset__heading govuk-body-m">
|
||||
{props.label}
|
||||
</label>
|
||||
</legend>
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
<div className="govuk-radios govuk-radios--inline govuk-radios--small">
|
||||
{Object.keys(yesNo).map((key, index) => (
|
||||
<div
|
||||
className="govuk-radios__item"
|
||||
data-children-count={key}
|
||||
key={key}
|
||||
>
|
||||
<Field
|
||||
id={props.name + "_" + index}
|
||||
name={props.name}
|
||||
component="input"
|
||||
type="radio"
|
||||
className="govuk-radios__input"
|
||||
value={yesNo[key]}
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-radios__label"
|
||||
htmlFor={props.name + "_" + index}
|
||||
>
|
||||
{yesNo[key]}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
return (
|
||||
<Field
|
||||
name={props.name}
|
||||
datafieldname={props.name}
|
||||
label={props.label}
|
||||
options={yesNo}
|
||||
id={props.name}
|
||||
className="govuk-radios__input"
|
||||
//validate={[required]}
|
||||
errorMsg="Select and option"
|
||||
component={RenderYesNo}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -232,18 +359,15 @@ const RenderPickList = ({
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
meta: { touched, error },
|
||||
meta: { touched, errorStr },
|
||||
}) => {
|
||||
const fetcher = (url) => fetch(url).then((res) => res.json());
|
||||
|
||||
const { data, errorStr } = useSWR("/api/lookups/" + datafieldname, fetcher);
|
||||
if (errorStr)
|
||||
const { data, error } = useSWR("/api/lookups/" + datafieldname, fetcher);
|
||||
if (error)
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-body-m"
|
||||
htmlFor={props.name}
|
||||
>
|
||||
<label className="govuk-label govuk-body-m" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
<select className="govuk-select" id={name} name={name}>
|
||||
@@ -257,9 +381,10 @@ const RenderPickList = ({
|
||||
<div className="govuk-form-group">{label} loading...</div>
|
||||
</div>
|
||||
);
|
||||
console.log(JSON.stringify(data.GlobalOptionSet.Options));
|
||||
//console.log(JSON.stringify(data.GlobalOptionSet.Options));
|
||||
|
||||
const dropdownObj = data.GlobalOptionSet.Options;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<select {...input} className="govuk-select" id={name} name={name}>
|
||||
@@ -279,7 +404,7 @@ const RenderPickList = ({
|
||||
})}
|
||||
</select>
|
||||
|
||||
{touched && error && <span>{error}</span>}
|
||||
{touched && errorStr && <span>{errorStr}</span>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -351,7 +476,7 @@ const RenderCaseID = {};
|
||||
|
||||
export function ReadOnlyfield(props) {
|
||||
const { name, label, value } = props;
|
||||
console.log(props.value.refno);
|
||||
//console.log(props.value.refno);
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label " htmlFor={props.name}>
|
||||
|
||||
+10
-9
@@ -61,16 +61,17 @@ export default function Header({ courseName }) {
|
||||
</div>
|
||||
|
||||
<div className="govuk-header__content govuk-!-width-two-thirds govuk-!-margin-top-3">
|
||||
<a
|
||||
href="/"
|
||||
onClick={() => {
|
||||
window.localStorage.clear();
|
||||
}}
|
||||
className="govuk-header__link
|
||||
<Link href="/">
|
||||
<a
|
||||
onClick={() => {
|
||||
window.localStorage.clear();
|
||||
}}
|
||||
className="govuk-header__link
|
||||
govuk-header__link--service-name"
|
||||
>
|
||||
{t("common:service-name")}
|
||||
</a>
|
||||
>
|
||||
{t("common:service-name")}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="languageSwitch">
|
||||
{router.path}
|
||||
|
||||
@@ -9,17 +9,24 @@ export default function CaseSearch() {
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const [query, setQuery] = useState("");
|
||||
const [validationError, setValidationError] = useState("");
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const basicSearch = (event) => {
|
||||
event.preventDefault();
|
||||
console.log(query);
|
||||
// /searchresults
|
||||
|
||||
router.push({
|
||||
pathname: "/searchresults",
|
||||
query: { q: query },
|
||||
});
|
||||
if (query == "" || query == null) {
|
||||
setValidationError(true);
|
||||
} else {
|
||||
setValidationError(false);
|
||||
console.log(query);
|
||||
// /searchresults
|
||||
|
||||
router.push({
|
||||
pathname: "/searchresults",
|
||||
query: { q: query },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -29,8 +36,14 @@ export default function CaseSearch() {
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("home:casesearch-card-title")}
|
||||
</h3>
|
||||
<div className="govuk-form-group">
|
||||
<div id="event-name-hint" className="govuk-hint ">
|
||||
<div
|
||||
className={
|
||||
validationError
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<div id="basicSearch-hint" className="govuk-hint ">
|
||||
{t("home:casesearch-card-search-hint")}:
|
||||
<br />
|
||||
<span className="govuk-body-s">
|
||||
@@ -41,15 +54,26 @@ export default function CaseSearch() {
|
||||
)}
|
||||
:
|
||||
</span>{" "}
|
||||
APP/A1234/A/99/1234567
|
||||
CAS-00009-W8N6W4
|
||||
</span>
|
||||
</div>
|
||||
{validationError && (
|
||||
<span
|
||||
id="basicSearch-error"
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
Case reference is required
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
className="govuk-input"
|
||||
id="event-name"
|
||||
name="event-name"
|
||||
id="basicSearch"
|
||||
name="basicSearch"
|
||||
type="text"
|
||||
aria-describedby="event-name-hint"
|
||||
aria-describedby="basicSearch-hint"
|
||||
onChange={handleParam(setQuery)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -9,17 +9,24 @@ export default function SearchCases() {
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const [query, setQuery] = useState("");
|
||||
const [validationError, setValidationError] = useState("");
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const basicSearch = (event) => {
|
||||
event.preventDefault();
|
||||
console.log(query);
|
||||
// /searchresults
|
||||
|
||||
router.push({
|
||||
pathname: "/searchresults",
|
||||
query: { q: query },
|
||||
});
|
||||
if (query == "" || query == null) {
|
||||
setValidationError(true);
|
||||
} else {
|
||||
setValidationError(false);
|
||||
console.log(query);
|
||||
// /searchresults
|
||||
|
||||
router.push({
|
||||
pathname: "/searchresults",
|
||||
query: { q: query },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -29,7 +36,13 @@ export default function SearchCases() {
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("myportal:searchcases-card-title")}
|
||||
</h3>
|
||||
<div className="govuk-form-group">
|
||||
<div
|
||||
className={
|
||||
validationError
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<div id="event-name-hint" className="govuk-hint ">
|
||||
{t("myportal:searchcases-card-search-hint")}:
|
||||
<br />
|
||||
@@ -41,9 +54,20 @@ export default function SearchCases() {
|
||||
)}
|
||||
:
|
||||
</span>{" "}
|
||||
APP/A1234/A/99/1234567
|
||||
CAS-00009-W8N6W4
|
||||
</span>
|
||||
</div>
|
||||
{validationError && (
|
||||
<span
|
||||
id="basicSearch-error"
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
Case reference is required
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
className="govuk-input"
|
||||
id="event-name"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -22,7 +22,7 @@ import {
|
||||
setCaseReference,
|
||||
} from "../../store/appealType/action";
|
||||
import { setForm, getFormObj } from "../../store/formData/action";
|
||||
import { getFormData, getAppealsTypes } from "../../actions";
|
||||
import { getFormData, getAppealsTypes, createCase } from "../../actions";
|
||||
|
||||
import xpath from "xpath";
|
||||
import { reduxForm, FormName } from "redux-form";
|
||||
@@ -40,9 +40,10 @@ let Home = (props) => {
|
||||
const { appealtypes } = router.query;
|
||||
|
||||
useEffect(() => {
|
||||
props.setFormTitle(formTitle);
|
||||
props.setCaseReference(router.query.refno);
|
||||
}, []);
|
||||
//setFormTitle(formTitle);
|
||||
setCaseReference(router.query.refno);
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const formXML = props.formData.formData;
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(formXML, "text/xml");
|
||||
@@ -78,7 +79,7 @@ let Home = (props) => {
|
||||
(key) => optionsTitleObj[key] === appealtypes
|
||||
);
|
||||
|
||||
console.log(formTitle);
|
||||
//console.log(formTitle);
|
||||
|
||||
// crm api query for looking up picklist fields/drop downs
|
||||
// <url path to >/api/data/v8.2/EntityDefinitions(LogicalName='{appeal type form}')/Attributes(LogicalName='{drop down datafield name}')/Microsoft.Dynamics.CRM.PicklistAttributeMetadata?$select=LogicalName&$expand=GlobalOptionSet($select=Options)
|
||||
@@ -110,31 +111,38 @@ let Home = (props) => {
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header courseName={t("common:service-name")} />
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<Breadcrumbs slug={appealtypes} formTitle={formTitle} />
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<Breadcrumbs slug={appealtypes} formTitle={formTitle} />
|
||||
|
||||
{props.appealType.currentSection == 9999 ? (
|
||||
<CompleteAppeal />
|
||||
) : props.appealType.currentSection == sectionCount + 1 ? (
|
||||
<BuildCheckSection
|
||||
formXML={formXML}
|
||||
sectionCount={sectionCount}
|
||||
onSubmit={onSubmit}
|
||||
formTitle={formTitle}
|
||||
appealType={props.appealType}
|
||||
props={props}
|
||||
/>
|
||||
) : (
|
||||
<BuildSection
|
||||
formXML={formXML}
|
||||
sectionCount={sectionCount}
|
||||
onSubmit={onSubmit}
|
||||
formTitle={formTitle}
|
||||
props={props}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{props.appealType.currentSection == 9999 ? (
|
||||
<CompleteAppeal />
|
||||
) : props.appealType.currentSection ==
|
||||
sectionCount + 1 ? (
|
||||
<BuildCheckSection
|
||||
formXML={formXML}
|
||||
sectionCount={sectionCount}
|
||||
onSubmit={onSubmit}
|
||||
formTitle={formTitle}
|
||||
appealType={props.appealType}
|
||||
props={props}
|
||||
/>
|
||||
) : (
|
||||
<BuildSection
|
||||
formXML={formXML}
|
||||
sectionCount={sectionCount}
|
||||
onSubmit={onSubmit}
|
||||
formTitle={formTitle}
|
||||
props={props}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -144,14 +152,17 @@ let Home = (props) => {
|
||||
export const getServerSideProps = wrapper.getServerSideProps(
|
||||
(store) =>
|
||||
async ({ query, req, res }) => {
|
||||
console.log("the query", query);
|
||||
//console.log("the query", query);
|
||||
store.dispatch(setAppealTypeID(query.appealtypes));
|
||||
const appealTypeData = await getAppealsTypes();
|
||||
const formdata = (await getFormData(query.appealtypes)) || null;
|
||||
|
||||
const caseReference = createCase("asasa", "asasa");
|
||||
|
||||
let xmlStr = formdata;
|
||||
xmlStr = formdata.value[0].formxml;
|
||||
xmlStr = xmlStr.replace(/\\"/g, "");
|
||||
store.dispatch(setCaseReference(caseReference));
|
||||
store.dispatch(setForm(xmlStr));
|
||||
store.dispatch(setAppealType(appealTypeData));
|
||||
}
|
||||
|
||||
+17
-13
@@ -49,22 +49,26 @@ const Home = (props) => {
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header courseName={t("common:service-name")} />
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<Breadcrumbs slug={appealtypes} />
|
||||
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<Breadcrumbs slug={appealtypes} />
|
||||
|
||||
<h1>New Appeal</h1>
|
||||
<CreateCase
|
||||
LPAData={props.LPAData}
|
||||
appealType={props.setAppealType}
|
||||
/>
|
||||
<h1>New Appeal</h1>
|
||||
<CreateCase
|
||||
LPAData={props.LPAData}
|
||||
appealType={props.setAppealType}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -68,45 +68,49 @@ const Home = (props) => {
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header courseName={t("common:service-name")} />
|
||||
<main
|
||||
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
|
||||
id="main-content"
|
||||
role="main"
|
||||
>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<Breadcrumbs slug={appealtypes} />
|
||||
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<Breadcrumbs slug={appealtypes} />
|
||||
<h1>New Appeal</h1>
|
||||
|
||||
<h1>New Appeal</h1>
|
||||
|
||||
<form onSubmit={selectAppealType}>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="sort"
|
||||
<form onSubmit={selectAppealType}>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="sort"
|
||||
>
|
||||
Select an appeal Type
|
||||
</label>
|
||||
<select
|
||||
className="govuk-select"
|
||||
id="appealTypes"
|
||||
name="appealTypes"
|
||||
onChange={(e) =>
|
||||
props.onChangeSelect(e)
|
||||
}
|
||||
>
|
||||
{appealOptions}
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Select an appeal Type
|
||||
</label>
|
||||
<select
|
||||
className="govuk-select"
|
||||
id="appealTypes"
|
||||
name="appealTypes"
|
||||
onChange={(e) =>
|
||||
props.onChangeSelect(e)
|
||||
}
|
||||
>
|
||||
{appealOptions}
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</form>
|
||||
Continue
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user