rep questionnaire nav/progress

This commit is contained in:
2023-10-26 11:59:20 +01:00
parent 48bfa5e0be
commit 2cbd2d731c
5 changed files with 1116 additions and 958 deletions
+384 -299
View File
@@ -72,6 +72,8 @@ let MakeRepresentation = (props) => {
let setCaseQueryObj = props[currentType] || {}; let setCaseQueryObj = props[currentType] || {};
var casesObj = {}; var casesObj = {};
const [showQuestionnaireSection, setShowQuestionnaireSection] = useState(1);
const isLPA = const isLPA =
props.props.accountDetails.accountDetails[ props.props.accountDetails.accountDetails[
"pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue" "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
@@ -231,6 +233,10 @@ let MakeRepresentation = (props) => {
currentView={currentView} currentView={currentView}
setSubmitBack={setSubmitBack} setSubmitBack={setSubmitBack}
props={props} props={props}
setShowQuestionnaireSection={
setShowQuestionnaireSection
}
showQuestionnaireSection={showQuestionnaireSection}
/> />
); );
break; break;
@@ -621,7 +627,7 @@ let MakeRepresentation = (props) => {
<div className="govuk-grid-column-one-quarter"> <div className="govuk-grid-column-one-quarter">
{" "} {" "}
<div className="card"> <div className="card">
<div class="card-body"> <div className="card-body">
<h4 className="govuk-heading-s"> <h4 className="govuk-heading-s">
Timetable Timetable
</h4> </h4>
@@ -670,333 +676,412 @@ let MakeRepresentation = (props) => {
formObj["representationForm"].values formObj["representationForm"].values
.representationType == .representationType ==
"Questionnaire" && ( "Questionnaire" && (
<div <nav
id="step-by-step-navigation" role="navigation"
data-module="gemstepnav" aria-labelledby="progress-list"
className="app-step-nav app-step-nav--active" className="at-nav"
data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
data-show-text="show"
data-hide-text="hide"
data-show-all-text="Show all"
data-hide-all-text="Hide all"
> >
<ol className="app-step-nav__steps"> <div
<li id="step-by-step-navigation"
className={ data-module="gemstepnav"
"app-step-nav__step js-step app-step-nav__step--active" + className="app-step-nav app-step-nav--active"
" sectionIncomplete" data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
} data-show-text="show"
aria-current="step" data-hide-text="hide"
data-show="" data-show-all-text="Show all"
id="check-youre-allowed-to-drive" data-hide-all-text="Hide all"
> >
<div <ol className="app-step-nav__steps">
className="app-step-nav__header js-toggle-panel " <li
data-position="1" className={
"app-step-nav__step js-step app-step-nav__step--active" +
(showQuestionnaireSection >=
1
? " sectionComplete"
: " sectionIncomplete")
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
> >
<h3 className="app-step-nav__title "> <div
<span className="app-step-nav__circle app-step-nav__circle--number"> className="app-step-nav__header js-toggle-panel "
<span className="app-step-nav__circle-inner"> data-position="1"
<span className="app-step-nav__circle-background"> >
<span className="app-step-nav__circle-step-label govuk-visually-hidden"> <h3 className="app-step-nav__title ">
Step <span className="app-step-nav__circle app-step-nav__circle--number">
</span>{" "} <span className="app-step-nav__circle-inner">
1 <span className="app-step-nav__circle-background">
<span <span className="app-step-nav__circle-step-label govuk-visually-hidden">
className="app-step-nav__circle-step-colon govuk-visually-hidden" Step
aria-hidden="true" </span>{" "}
>
:
</span>
</span>
</span>
</span>
<span className="js-step-title">
<a
href="#"
onClick={() => {
gotoSection(
1 1
); <span
}} className="app-step-nav__circle-step-colon govuk-visually-hidden"
className="app-step-nav__button app-step-nav__button--title js-step-title-button" aria-hidden="true"
aria-expanded="false" >
aria-controls="step-panel-check-youre-allowed-to-drive-1" :
> </span>
<span className="js-step-title-text govuk-!-font-size-16">
Appeal
procedure
and
site
visit
</span>
</a>
</span>
</h3>
</div>
</li>
<li
className={
"app-step-nav__step js-step app-step-nav__step--active" +
" sectionComplete"
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
>
<div
className="app-step-nav__header js-toggle-panel "
data-position="1"
>
<h3 className="app-step-nav__title ">
<span className="app-step-nav__circle app-step-nav__circle--number">
<span className="app-step-nav__circle-inner">
<span className="app-step-nav__circle-background">
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
Step
</span>{" "}
2
<span
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span> </span>
</span> </span>
</span> </span>
</span>
<span className="js-step-title"> <span className="js-step-title">
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
gotoSection( setShowQuestionnaireSection(
1
);
}}
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1"
>
<span className="js-step-title-text govuk-!-font-size-16">
Appeal
procedure
and
site
visit
</span>
</a>
</span>
</h3>
</div>
</li>
<li
className={
"app-step-nav__step js-step app-step-nav__step--active" +
(showQuestionnaireSection >=
2
? " sectionComplete"
: " sectionIncomplete")
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
>
<div
className="app-step-nav__header js-toggle-panel "
data-position="1"
>
<h3 className="app-step-nav__title ">
<span className="app-step-nav__circle app-step-nav__circle--number">
<span className="app-step-nav__circle-inner">
<span className="app-step-nav__circle-background">
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
Step
</span>{" "}
2 2
); <span
}} className="app-step-nav__circle-step-colon govuk-visually-hidden"
className="app-step-nav__button app-step-nav__button--title js-step-title-button" aria-hidden="true"
aria-expanded="false" >
aria-controls="step-panel-check-youre-allowed-to-drive-1" :
> </span>
<span className="js-step-title-text govuk-!-font-size-16">
Supporting
documents
</span>
</a>
</span>
</h3>
</div>
</li>
<li
className={
"app-step-nav__step js-step app-step-nav__step--active" +
" sectionIncomplete"
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
>
<div
className="app-step-nav__header js-toggle-panel "
data-position="1"
>
<h3 className="app-step-nav__title ">
<span className="app-step-nav__circle app-step-nav__circle--number">
<span className="app-step-nav__circle-inner">
<span className="app-step-nav__circle-background">
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
Step
</span>{" "}
3
<span
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span> </span>
</span> </span>
</span> </span>
</span>
<span className="js-step-title"> <span className="js-step-title">
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
gotoSection( setShowQuestionnaireSection(
2
);
}}
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1"
>
<span className="js-step-title-text govuk-!-font-size-16">
Supporting
documents
</span>
</a>
</span>
</h3>
</div>
</li>
<li
className={
"app-step-nav__step js-step app-step-nav__step--active" +
(showQuestionnaireSection >=
3
? " sectionComplete"
: " sectionIncomplete")
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
>
<div
className="app-step-nav__header js-toggle-panel "
data-position="1"
>
<h3 className="app-step-nav__title ">
<span className="app-step-nav__circle app-step-nav__circle--number">
<span className="app-step-nav__circle-inner">
<span className="app-step-nav__circle-background">
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
Step
</span>{" "}
3 3
); <span
}} className="app-step-nav__circle-step-colon govuk-visually-hidden"
className="app-step-nav__button app-step-nav__button--title js-step-title-button" aria-hidden="true"
aria-expanded="false" >
aria-controls="step-panel-check-youre-allowed-to-drive-1" :
> </span>
<span className="js-step-title-text govuk-!-font-size-16">
Statutory
considerations
</span>
</a>
</span>
</h3>
</div>
</li>
<li
className={
"app-step-nav__step js-step app-step-nav__step--active" +
" sectionIncomplete"
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
>
<div
className="app-step-nav__header js-toggle-panel "
data-position="1"
>
<h3 className="app-step-nav__title ">
<span className="app-step-nav__circle app-step-nav__circle--number">
<span className="app-step-nav__circle-inner">
<span className="app-step-nav__circle-background">
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
Step
</span>{" "}
4
<span
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span> </span>
</span> </span>
</span> </span>
</span>
<span className="js-step-title"> <span className="js-step-title">
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
gotoSection( setShowQuestionnaireSection(
3
);
}}
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1"
>
<span className="js-step-title-text govuk-!-font-size-16">
Statutory
considerations
</span>
</a>
</span>
</h3>
</div>
</li>
<li
className={
"app-step-nav__step js-step app-step-nav__step--active" +
(showQuestionnaireSection >=
4
? " sectionComplete"
: " sectionIncomplete")
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
>
<div
className="app-step-nav__header js-toggle-panel "
data-position="1"
>
<h3 className="app-step-nav__title ">
<span className="app-step-nav__circle app-step-nav__circle--number">
<span className="app-step-nav__circle-inner">
<span className="app-step-nav__circle-background">
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
Step
</span>{" "}
4 4
); <span
}} className="app-step-nav__circle-step-colon govuk-visually-hidden"
className="app-step-nav__button app-step-nav__button--title js-step-title-button" aria-hidden="true"
aria-expanded="false" >
aria-controls="step-panel-check-youre-allowed-to-drive-1" :
> </span>
<span className="js-step-title-text govuk-!-font-size-16">
Suggested
considerations
</span>
</a>
</span>
</h3>
</div>
</li>
<li
className={
"app-step-nav__step js-step app-step-nav__step--active" +
" sectionIncomplete"
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
>
<div
className="app-step-nav__header js-toggle-panel "
data-position="1"
>
<h3 className="app-step-nav__title ">
<span className="app-step-nav__circle app-step-nav__circle--number">
<span className="app-step-nav__circle-inner">
<span className="app-step-nav__circle-background">
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
Step
</span>{" "}
5
<span
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span> </span>
</span> </span>
</span> </span>
</span>
<span className="js-step-title"> <span className="js-step-title">
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
gotoSection( setShowQuestionnaireSection(
4
);
}}
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1"
>
<span className="js-step-title-text govuk-!-font-size-16">
Suggested
considerations
</span>
</a>
</span>
</h3>
</div>
</li>
<li
className={
"app-step-nav__step js-step app-step-nav__step--active" +
(showQuestionnaireSection >=
5
? " sectionComplete"
: " sectionIncomplete")
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
>
<div
className="app-step-nav__header js-toggle-panel "
data-position="1"
>
<h3 className="app-step-nav__title ">
<span className="app-step-nav__circle app-step-nav__circle--number">
<span className="app-step-nav__circle-inner">
<span className="app-step-nav__circle-background">
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
Step
</span>{" "}
5 5
); <span
}} className="app-step-nav__circle-step-colon govuk-visually-hidden"
className="app-step-nav__button app-step-nav__button--title js-step-title-button" aria-hidden="true"
aria-expanded="false" >
aria-controls="step-panel-check-youre-allowed-to-drive-1" :
> </span>
<span className="js-step-title-text govuk-!-font-size-16">
Attached
links
</span>
</a>
</span>
</h3>
</div>
</li>
<li
className={
"app-step-nav__step js-step app-step-nav__step--active" +
" sectionIncomplete"
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
>
<div
className="app-step-nav__header js-toggle-panel "
data-position="1"
>
<h3 className="app-step-nav__title ">
<span className="app-step-nav__circle app-step-nav__circle--number">
<span className="app-step-nav__circle-inner">
<span className="app-step-nav__circle-background">
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
Step
</span>{" "}
6
<span
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span> </span>
</span> </span>
</span> </span>
</span>
<span className="js-step-title"> <span className="js-step-title">
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
gotoSection( setShowQuestionnaireSection(
5
);
}}
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1"
>
<span className="js-step-title-text govuk-!-font-size-16">
Attached
links
</span>
</a>
</span>
</h3>
</div>
</li>{" "}
<li
className={
"app-step-nav__step js-step app-step-nav__step--active" +
(showQuestionnaireSection >=
6
? " sectionComplete"
: " sectionIncomplete")
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
>
<div
className="app-step-nav__header js-toggle-panel "
data-position="1"
>
<h3 className="app-step-nav__title ">
<span className="app-step-nav__circle app-step-nav__circle--number">
<span className="app-step-nav__circle-inner">
<span className="app-step-nav__circle-background">
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
Step
</span>{" "}
6 6
); <span
}} className="app-step-nav__circle-step-colon govuk-visually-hidden"
className="app-step-nav__button app-step-nav__button--title js-step-title-button" aria-hidden="true"
aria-expanded="false" >
aria-controls="step-panel-check-youre-allowed-to-drive-1" :
> </span>
<span className="js-step-title-text govuk-!-font-size-16"> </span>
Declaration
</span> </span>
</a> </span>
</span>
</h3> <span className="js-step-title">
</div> <a
</li> href="#"
</ol> onClick={() => {
</div> setShowQuestionnaireSection(
6
);
}}
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1"
>
<span className="js-step-title-text govuk-!-font-size-16">
Add
files
</span>
</a>
</span>
</h3>
</div>
</li>
<li
className={
"app-step-nav__step js-step app-step-nav__step--active" +
(showQuestionnaireSection >=
7
? " sectionComplete"
: " sectionIncomplete")
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
>
<div
className="app-step-nav__header js-toggle-panel "
data-position="1"
>
<h3 className="app-step-nav__title ">
<span className="app-step-nav__circle app-step-nav__circle--number">
<span className="app-step-nav__circle-inner">
<span className="app-step-nav__circle-background">
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
Step
</span>{" "}
7
<span
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span>
</span>
</span>
</span>
<span className="js-step-title">
<a
href="#"
onClick={() => {
setShowQuestionnaireSection(
7
);
}}
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1"
>
<span className="js-step-title-text govuk-!-font-size-16">
Declaration
</span>
</a>
</span>
</h3>
</div>
</li>
</ol>
</div>
</nav>
)} )}
</div> </div>
</div> </div>
@@ -22,7 +22,7 @@ import {
import { useDropzone } from "react-dropzone"; import { useDropzone } from "react-dropzone";
import { select } from "xpath"; import { select } from "xpath";
import jsonpath from "jsonpath"; import jsonpath from "jsonpath";
import { useState } from "react";
import Enforcement_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_enforcement"; import Enforcement_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_enforcement";
import S78_Qquestionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_s78"; import S78_Qquestionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_s78";
@@ -39,6 +39,8 @@ let RepLPA = (props) => {
currentView, currentView,
procedureTypeValue, procedureTypeValue,
onBehalfOfLPA, onBehalfOfLPA,
setShowQuestionnaireSection,
showQuestionnaireSection,
} = props; } = props;
const { acceptedFiles, getRootProps, getInputProps } = useDropzone(); const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const files = acceptedFiles.map((file) => ( const files = acceptedFiles.map((file) => (
@@ -68,6 +70,10 @@ let RepLPA = (props) => {
props.props.props.accountDetails.containerID props.props.props.accountDetails.containerID
} }
currentView={currentView} currentView={currentView}
showQuestionnaireSection={showQuestionnaireSection}
setShowQuestionnaireSection={
setShowQuestionnaireSection
}
/> />
); );
break; break;
@@ -82,6 +88,10 @@ let RepLPA = (props) => {
props.props.props.accountDetails.containerID props.props.props.accountDetails.containerID
} }
currentView={currentView} currentView={currentView}
showQuestionnaireSection={showQuestionnaireSection}
setShowQuestionnaireSection={
setShowQuestionnaireSection
}
/> />
); );
break; break;
@@ -131,7 +141,10 @@ let RepLPA = (props) => {
<> <>
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<h2 className="govuk-heading-m "> <h2 className="govuk-heading-m ">
Representation from an LPA for a{" "} {typeof props.representationType != "undefined"
? props.representationType
: "Representation"}{" "}
from an LPA for a{" "}
{ {
getFormCollectionByID( getFormCollectionByID(
currentView.caseReference.appealType currentView.caseReference.appealType
@@ -139,21 +152,23 @@ let RepLPA = (props) => {
} }
</h2> </h2>
<div className="govuk-form-group"> {typeof props.representationType == "undefined" && (
<label <div className="govuk-form-group">
className="govuk-label govuk-body-m" <label
htmlFor="representationType" className="govuk-label govuk-body-m"
> htmlFor="representationType"
What kind of representation are you making? >
</label> What kind of representation are you making?
<Field </label>
id="representationType" <Field
name="representationType" id="representationType"
component={RenderPickList} name="representationType"
datafieldname="representationType" component={RenderPickList}
optionsArr={appellantApplicantRepresentationArr} datafieldname="representationType"
/> optionsArr={appellantApplicantRepresentationArr}
</div> />
</div>
)}
</div> </div>
<div className="govuk-grid-row"> <div className="govuk-grid-row">
@@ -219,14 +234,56 @@ let RepLPA = (props) => {
</div> </div>
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-button-group"> <div className="govuk-button-group">
<button {typeof props.representationType != "undefined" &&
type="submit" props.representationType == "Questionnaire" && (
className="govuk-button" <>
data-module="govuk-button" {showQuestionnaireSection < 7 && (
> <a
Continue href="#"
</button> onClick={() => {
{/* <a setShowQuestionnaireSection(
showQuestionnaireSection + 1
);
}}
className="govuk-button"
>
Next section
</a>
)}
{showQuestionnaireSection == 7 && (
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
Continue
</button>
)}
{showQuestionnaireSection > 1 && (
<a
onClick={() => {
setShowQuestionnaireSection(
showQuestionnaireSection - 1
);
}}
className="govuk-link"
>
Back
</a>
)}
</>
)}{" "}
{typeof props.representationType != "undefined" &&
props.representationType != "Questionnaire" && (
<>
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
Continue
</button>
{/* <a
onClick={() => { onClick={() => {
setRepresentationSubmit(false); setRepresentationSubmit(false);
@@ -235,15 +292,16 @@ let RepLPA = (props) => {
> >
Continue Continue
</a> */} </a> */}
<a
<a onClick={() => {
onClick={() => { //setRepresentationCapacity();
//setRepresentationCapacity(); }}
}} className="govuk-link"
className="govuk-link" >
> Back
Back </a>
</a> </>
)}
</div> </div>
</div> </div>
</> </>
@@ -861,7 +861,7 @@ let Enforcement_Questionnaire = (props) => {
</div> </div>
<div className="govuk-form-group"> <div className="govuk-form-group">
{onBehalfOfLPA} seww {onBehalfOfLPA}
<Field <Field
className="govuk-input govuk-!-width-one-half" className="govuk-input govuk-!-width-one-half"
id="onBehalfOfLPA" id="onBehalfOfLPA"
-7
View File
@@ -69,13 +69,6 @@ const Home = (props) => {
if (status === "loading") { if (status === "loading") {
return <NoSessionWarning loading={true} />; return <NoSessionWarning loading={true} />;
} }
// console.log("unauthenticated path:", router.asPath);
// if (status === "unauthenticated") {
// console.log("unauthenticated path:", router.asPath);
// signIn("email", { callbackUrl: router.asPath });
// //router.push("/auth/signin");
// return <NoSessionWarning />;
// }
return ( return (
<div> <div>