forms to include FE facing only
This commit is contained in:
robert.bond@test.gov.wales
@@ -2,6 +2,7 @@ import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import jsonpath from "jsonpath";
|
||||
import BuildCheckField from "./buildCheckfield";
|
||||
import { useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
@@ -22,6 +23,7 @@ let BuildCheckRow = (props) => {
|
||||
sectionCount,
|
||||
onSubmit,
|
||||
updateCurrentSection,
|
||||
mandatoryFieldsData,
|
||||
} = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
@@ -62,41 +64,52 @@ let BuildCheckRow = (props) => {
|
||||
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">
|
||||
{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>
|
||||
const isRequiredField = jsonpath.query(
|
||||
mandatoryFieldsData,
|
||||
"$..value[?(@.LogicalName=='" +
|
||||
datafieldname[0].value +
|
||||
"')]"
|
||||
);
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
})}
|
||||
</>
|
||||
|
||||
@@ -28,6 +28,7 @@ let BuildCheckSection = (props) => {
|
||||
handleSubmit,
|
||||
formTitle,
|
||||
setCurrentSection,
|
||||
mandatoryFieldsData,
|
||||
} = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
@@ -56,32 +57,30 @@ let BuildCheckSection = (props) => {
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div>
|
||||
<h1 className="govuk-heading-m">
|
||||
Are these answers correct?
|
||||
</h1>
|
||||
{Object.keys(titles).map((key) => (
|
||||
<>
|
||||
<h2 className="govuk-heading-m">
|
||||
<dl className="govuk-summary-list ">
|
||||
{Object.keys(titles).map((key) => (
|
||||
<>
|
||||
{/* <h2 className="govuk-heading-m">
|
||||
{titles[key].value}
|
||||
</h2>
|
||||
</h2> */}
|
||||
|
||||
<dl
|
||||
className="govuk-summary-list govuk-!-margin-bottom-9"
|
||||
key={key}
|
||||
>
|
||||
<BuildCheckRow
|
||||
formXML={formXML}
|
||||
whichSection={parseInt(key) + 1}
|
||||
sectionCount={key}
|
||||
props={props}
|
||||
key={key}
|
||||
mandatoryFieldsData={mandatoryFieldsData}
|
||||
props={props}
|
||||
/>
|
||||
</dl>
|
||||
</>
|
||||
))}
|
||||
|
||||
</>
|
||||
))}
|
||||
</dl>
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list"></dl>
|
||||
</div>
|
||||
<div className="govuk-button-group">
|
||||
@@ -94,7 +93,6 @@ let BuildCheckSection = (props) => {
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-column-one-third"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,6 +2,7 @@ import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
|
||||
import {
|
||||
Textfield,
|
||||
DateField,
|
||||
@@ -20,7 +21,7 @@ export default function BuildField(props) {
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { fieldType, label, datafieldname } = props;
|
||||
const { fieldType, label, datafieldname, mandatoryFieldData } = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import BuildField from "./buildfield";
|
||||
import jsonpath from "jsonpath";
|
||||
|
||||
export default function BuildRow(props) {
|
||||
let { t } = useTranslation();
|
||||
@@ -11,7 +12,13 @@ export default function BuildRow(props) {
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { rowXML, whichSection, sectionCount, onSubmit } = props;
|
||||
const {
|
||||
rowXML,
|
||||
whichSection,
|
||||
sectionCount,
|
||||
onSubmit,
|
||||
mandatoryFieldsData,
|
||||
} = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
@@ -28,18 +35,31 @@ export default function BuildRow(props) {
|
||||
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}
|
||||
picklistData={
|
||||
props.props.props.formData.pickListData
|
||||
}
|
||||
/>
|
||||
|
||||
const isRequiredField = jsonpath.query(
|
||||
mandatoryFieldsData,
|
||||
"$..value[?(@.LogicalName=='" +
|
||||
datafieldname[0].value +
|
||||
"')]"
|
||||
);
|
||||
|
||||
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>
|
||||
|
||||
@@ -32,19 +32,21 @@ let BuildSection = (props) => {
|
||||
setCurrentSection,
|
||||
refno,
|
||||
gotoSection,
|
||||
mandatoryFieldsData,
|
||||
} = 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 titles = xpath.select(
|
||||
// "//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
|
||||
// doc
|
||||
// );
|
||||
var rowXML = xpath.select(
|
||||
"/form/tabs/tab[" +
|
||||
currentSection +
|
||||
"]/columns//sections/section/rows/row",
|
||||
// "/form/tabs/tab[" +
|
||||
// currentSection +
|
||||
// "]/columns//sections/section/rows/row",
|
||||
"/form/tabs/tab/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
|
||||
@@ -129,7 +131,8 @@ let BuildSection = (props) => {
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<h1 className="govuk-heading-m govuk-!-margin-top-5">
|
||||
{titles[0].value}{" "}
|
||||
{/* {titles[0].value}{" "} */}
|
||||
Enter your appeal information
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
{hasErrors == true ? (
|
||||
@@ -147,11 +150,12 @@ let BuildSection = (props) => {
|
||||
whichSection={props.whichSection}
|
||||
sectionCount={props.sectionCount}
|
||||
onSubmit={onSubmit}
|
||||
mandatoryFieldsData={mandatoryFieldsData}
|
||||
props={props}
|
||||
/>
|
||||
{}
|
||||
<div className="govuk-button-group">
|
||||
{props.sectionCount != currentSection ? (
|
||||
{/* {props.sectionCount != currentSection ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
@@ -163,15 +167,15 @@ let BuildSection = (props) => {
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{props.sectionCount == currentSection ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
) : (
|
||||
{props.sectionCount == currentSection ? ( */}
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
{/* ) : (
|
||||
""
|
||||
)}
|
||||
{currentSection > 1 ? (
|
||||
@@ -186,11 +190,11 @@ let BuildSection = (props) => {
|
||||
</a>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="govuk-grid-column-one-third">
|
||||
{/* <div className="govuk-grid-column-one-third">
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-labelledby="progress-list"
|
||||
@@ -239,7 +243,7 @@ let BuildSection = (props) => {
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -52,6 +52,8 @@ let CompleteAppeal = (props) => {
|
||||
setCurrentSection(currentSection + 1);
|
||||
};
|
||||
|
||||
alert(JSON.stringify(props.props.form.appealForm.values, null, 2));
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
|
||||
@@ -58,7 +58,7 @@ let Home = (props) => {
|
||||
doc
|
||||
);
|
||||
var sectionCount = xpath.select("/form/tabs/tab[*]", doc);
|
||||
sectionCount = sectionCount.length;
|
||||
sectionCount = 1; //sectionCount.length;
|
||||
|
||||
var tabs = xpath.select("//form/tabs/tab[*]", doc);
|
||||
|
||||
@@ -124,7 +124,7 @@ let Home = (props) => {
|
||||
role="main"
|
||||
>
|
||||
{props.appealType.currentSection == 9999 ? (
|
||||
<CompleteAppeal />
|
||||
<CompleteAppeal props={props} />
|
||||
) : props.appealType.currentSection ==
|
||||
sectionCount + 1 ? (
|
||||
<BuildCheckSection
|
||||
@@ -134,6 +134,9 @@ let Home = (props) => {
|
||||
formTitle={formTitle}
|
||||
appealType={props.appealType}
|
||||
props={props}
|
||||
mandatoryFieldsData={
|
||||
props.formData.mandatoryFieldsData
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<BuildSection
|
||||
@@ -141,6 +144,9 @@ let Home = (props) => {
|
||||
sectionCount={sectionCount}
|
||||
onSubmit={onSubmit}
|
||||
formTitle={formTitle}
|
||||
mandatoryFieldsData={
|
||||
props.formData.mandatoryFieldsData
|
||||
}
|
||||
props={props}
|
||||
/>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user