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

forms to include FE facing only

Browse Source
This commit is contained in:
robert.bond@test.gov.wales
2021-09-08 12:34:40 +01:00
parent 991d067091
commit 2825ab5a7d
7 changed files with 128 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/newappeal/buildcheckrow.js
+47 -34
View File
@@ -2,6 +2,7 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import xpath from "xpath"; import xpath from "xpath";
import jsonpath from "jsonpath";
import BuildCheckField from "./buildCheckfield"; import BuildCheckField from "./buildCheckfield";
import { useSelector, shallowEqual, connect } from "react-redux"; import { useSelector, shallowEqual, connect } from "react-redux";
import { import {
@@ -22,6 +23,7 @@ let BuildCheckRow = (props) => {
sectionCount, sectionCount,
onSubmit, onSubmit,
updateCurrentSection, updateCurrentSection,
mandatoryFieldsData,
} = props; } = props;
const parser = new DOMParser(); const parser = new DOMParser();
@@ -62,41 +64,52 @@ let BuildCheckRow = (props) => {
var rows = xpath.select("//label/@description", doc); var rows = xpath.select("//label/@description", doc);
var fieldtype = xpath.select("//@classid", doc); var fieldtype = xpath.select("//@classid", doc);
var datafieldname = xpath.select("//@datafieldname", doc); var datafieldname = xpath.select("//@datafieldname", doc);
const isRequiredField = jsonpath.query(
return ( mandatoryFieldsData,
<div className="govuk-summary-list__row" key={key}> "$..value[?(@.LogicalName=='" +
<dt className="govuk-summary-list__key"> datafieldname[0].value +
{rows[0].value} "')]"
</dt>
<dd className="govuk-summary-list__value">
{fieldtype[0].value ==
"{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
? formatDate(
props.props.form["appealForm"].values[
datafieldname[0].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>
); );
if (isRequiredField[0].RequiredLevel.Value != "None") {
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">
{fieldtype[0].value ==
"{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
? formatDate(
props.props.form["appealForm"]
.values[
datafieldname[0].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>
);
} else {
return null;
}
} }
})} })}
</> </>
components/newappeal/buildchecksection.js
+12 -14
View File
@@ -28,6 +28,7 @@ let BuildCheckSection = (props) => {
handleSubmit, handleSubmit,
formTitle, formTitle,
setCurrentSection, setCurrentSection,
mandatoryFieldsData,
} = props; } = props;
const parser = new DOMParser(); const parser = new DOMParser();
@@ -56,32 +57,30 @@ let BuildCheckSection = (props) => {
return ( return (
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds"> <div className="govuk-grid-column-full">
<div> <div>
<h1 className="govuk-heading-m"> <h1 className="govuk-heading-m">
Are these answers correct? Are these answers correct?
</h1> </h1>
{Object.keys(titles).map((key) => ( <dl className="govuk-summary-list ">
<> {Object.keys(titles).map((key) => (
<h2 className="govuk-heading-m"> <>
{/* <h2 className="govuk-heading-m">
{titles[key].value} {titles[key].value}
</h2> </h2> */}
<dl
className="govuk-summary-list govuk-!-margin-bottom-9"
key={key}
>
<BuildCheckRow <BuildCheckRow
formXML={formXML} formXML={formXML}
whichSection={parseInt(key) + 1} whichSection={parseInt(key) + 1}
sectionCount={key} sectionCount={key}
props={props} props={props}
key={key} key={key}
mandatoryFieldsData={mandatoryFieldsData}
props={props}
/> />
</dl> </>
</> ))}
))} </dl>
<dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list"></dl> <dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list"></dl>
</div> </div>
<div className="govuk-button-group"> <div className="govuk-button-group">
@@ -94,7 +93,6 @@ let BuildCheckSection = (props) => {
</a> </a>
</div> </div>
</div> </div>
<div className="govuk-grid-column-one-third"></div>
</div> </div>
); );
}; };
components/newappeal/buildfield.js
+2 -1
View File
@@ -2,6 +2,7 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import xpath from "xpath"; import xpath from "xpath";
import { import {
Textfield, Textfield,
DateField, DateField,
@@ -20,7 +21,7 @@ export default function BuildField(props) {
const router = useRouter(); const router = useRouter();
const { locale } = router; const { locale } = router;
const { fieldType, label, datafieldname } = props; const { fieldType, label, datafieldname, mandatoryFieldData } = props;
const parser = new DOMParser(); const parser = new DOMParser();
components/newappeal/buildrow.js
+32 -12
View File
@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import xpath from "xpath"; import xpath from "xpath";
import BuildField from "./buildfield"; import BuildField from "./buildfield";
import jsonpath from "jsonpath";
export default function BuildRow(props) { export default function BuildRow(props) {
let { t } = useTranslation(); let { t } = useTranslation();
@@ -11,7 +12,13 @@ export default function BuildRow(props) {
const router = useRouter(); const router = useRouter();
const { locale } = router; const { locale } = router;
const { rowXML, whichSection, sectionCount, onSubmit } = props; const {
rowXML,
whichSection,
sectionCount,
onSubmit,
mandatoryFieldsData,
} = props;
const parser = new DOMParser(); const parser = new DOMParser();
@@ -28,18 +35,31 @@ export default function BuildRow(props) {
var rows = xpath.select("//label/@description", doc); var rows = xpath.select("//label/@description", doc);
var fieldtype = xpath.select("//@classid", doc); var fieldtype = xpath.select("//@classid", doc);
var datafieldname = xpath.select("//@datafieldname", doc); var datafieldname = xpath.select("//@datafieldname", doc);
return (
<BuildField const isRequiredField = jsonpath.query(
fieldType={fieldtype[0].value} mandatoryFieldsData,
label={rows[0].value} "$..value[?(@.LogicalName=='" +
datafieldname={datafieldname[0].value} datafieldname[0].value +
key={key} "')]"
props={props}
picklistData={
props.props.props.formData.pickListData
}
/>
); );
if (isRequiredField[0].RequiredLevel.Value != "None") {
return (
<BuildField
fieldType={fieldtype[0].value}
label={rows[0].value}
datafieldname={datafieldname[0].value}
key={key}
props={props}
picklistData={
props.props.props.formData.pickListData
}
mandatoryFieldsData={mandatoryFieldsData}
/>
);
} else {
return null;
}
} }
})} })}
</div> </div>
components/newappeal/buildsection.js
+25 -21
View File
@@ -32,19 +32,21 @@ let BuildSection = (props) => {
setCurrentSection, setCurrentSection,
refno, refno,
gotoSection, gotoSection,
mandatoryFieldsData,
} = props; } = props;
const currentSection = props.appealType.currentSection; const currentSection = props.appealType.currentSection;
const parser = new DOMParser(); const parser = new DOMParser();
var doc = parser.parseFromString(props.formXML, "text/xml"); var doc = parser.parseFromString(props.formXML, "text/xml");
var titles = xpath.select( // var titles = xpath.select(
"//form/tabs/tab[" + currentSection + " ]/labels/label/@description", // "//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
doc // doc
); // );
var rowXML = xpath.select( var rowXML = xpath.select(
"/form/tabs/tab[" + // "/form/tabs/tab[" +
currentSection + // currentSection +
"]/columns//sections/section/rows/row", // "]/columns//sections/section/rows/row",
"/form/tabs/tab/columns//sections/section/rows/row",
doc doc
); );
@@ -129,7 +131,8 @@ let BuildSection = (props) => {
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds"> <div className="govuk-grid-column-two-thirds">
<h1 className="govuk-heading-m govuk-!-margin-top-5"> <h1 className="govuk-heading-m govuk-!-margin-top-5">
{titles[0].value}{" "} {/* {titles[0].value}{" "} */}
Enter your appeal information
</h1> </h1>
<form onSubmit={handleSubmit(onHandleSubmit)}> <form onSubmit={handleSubmit(onHandleSubmit)}>
{hasErrors == true ? ( {hasErrors == true ? (
@@ -147,11 +150,12 @@ let BuildSection = (props) => {
whichSection={props.whichSection} whichSection={props.whichSection}
sectionCount={props.sectionCount} sectionCount={props.sectionCount}
onSubmit={onSubmit} onSubmit={onSubmit}
mandatoryFieldsData={mandatoryFieldsData}
props={props} props={props}
/> />
{} {}
<div className="govuk-button-group"> <div className="govuk-button-group">
{props.sectionCount != currentSection ? ( {/* {props.sectionCount != currentSection ? (
<button <button
type="submit" type="submit"
className="govuk-button" className="govuk-button"
@@ -163,15 +167,15 @@ let BuildSection = (props) => {
) : ( ) : (
"" ""
)} )}
{props.sectionCount == currentSection ? ( {props.sectionCount == currentSection ? ( */}
<button <button
type="submit" type="submit"
className="govuk-button" className="govuk-button"
data-module="govuk-button" data-module="govuk-button"
> >
Submit Submit
</button> </button>
) : ( {/* ) : (
"" ""
)} )}
{currentSection > 1 ? ( {currentSection > 1 ? (
@@ -186,11 +190,11 @@ let BuildSection = (props) => {
</a> </a>
) : ( ) : (
"" ""
)} )} */}
</div> </div>
</form> </form>
</div> </div>
<div className="govuk-grid-column-one-third"> {/* <div className="govuk-grid-column-one-third">
<nav <nav
role="navigation" role="navigation"
aria-labelledby="progress-list" aria-labelledby="progress-list"
@@ -239,7 +243,7 @@ let BuildSection = (props) => {
</ul> </ul>
</ol> </ol>
</nav> </nav>
</div> </div> */}
</div> </div>
); );
}; };
components/newappeal/complete.js
+2
View File
@@ -52,6 +52,8 @@ let CompleteAppeal = (props) => {
setCurrentSection(currentSection + 1); setCurrentSection(currentSection + 1);
}; };
alert(JSON.stringify(props.props.form.appealForm.values, null, 2));
return ( return (
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds"> <div className="govuk-grid-column-two-thirds">
pages/newappeal/[appealtypes].js
+8 -2
View File
@@ -58,7 +58,7 @@ let Home = (props) => {
doc doc
); );
var sectionCount = xpath.select("/form/tabs/tab[*]", doc); var sectionCount = xpath.select("/form/tabs/tab[*]", doc);
sectionCount = sectionCount.length; sectionCount = 1; //sectionCount.length;
var tabs = xpath.select("//form/tabs/tab[*]", doc); var tabs = xpath.select("//form/tabs/tab[*]", doc);
@@ -124,7 +124,7 @@ let Home = (props) => {
role="main" role="main"
> >
{props.appealType.currentSection == 9999 ? ( {props.appealType.currentSection == 9999 ? (
<CompleteAppeal /> <CompleteAppeal props={props} />
) : props.appealType.currentSection == ) : props.appealType.currentSection ==
sectionCount + 1 ? ( sectionCount + 1 ? (
<BuildCheckSection <BuildCheckSection
@@ -134,6 +134,9 @@ let Home = (props) => {
formTitle={formTitle} formTitle={formTitle}
appealType={props.appealType} appealType={props.appealType}
props={props} props={props}
mandatoryFieldsData={
props.formData.mandatoryFieldsData
}
/> />
) : ( ) : (
<BuildSection <BuildSection
@@ -141,6 +144,9 @@ let Home = (props) => {
sectionCount={sectionCount} sectionCount={sectionCount}
onSubmit={onSubmit} onSubmit={onSubmit}
formTitle={formTitle} formTitle={formTitle}
mandatoryFieldsData={
props.formData.mandatoryFieldsData
}
props={props} props={props}
/> />
)} )}