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] || {};
var casesObj = {};
const [showQuestionnaireSection, setShowQuestionnaireSection] = useState(1);
const isLPA =
props.props.accountDetails.accountDetails[
"pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
@@ -231,6 +233,10 @@ let MakeRepresentation = (props) => {
currentView={currentView}
setSubmitBack={setSubmitBack}
props={props}
setShowQuestionnaireSection={
setShowQuestionnaireSection
}
showQuestionnaireSection={showQuestionnaireSection}
/>
);
break;
@@ -621,7 +627,7 @@ let MakeRepresentation = (props) => {
<div className="govuk-grid-column-one-quarter">
{" "}
<div className="card">
<div class="card-body">
<div className="card-body">
<h4 className="govuk-heading-s">
Timetable
</h4>
@@ -670,333 +676,412 @@ let MakeRepresentation = (props) => {
formObj["representationForm"].values
.representationType ==
"Questionnaire" && (
<div
id="step-by-step-navigation"
data-module="gemstepnav"
className="app-step-nav app-step-nav--active"
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"
<nav
role="navigation"
aria-labelledby="progress-list"
className="at-nav"
>
<ol className="app-step-nav__steps">
<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"
<div
id="step-by-step-navigation"
data-module="gemstepnav"
className="app-step-nav app-step-nav--active"
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">
<li
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 ">
<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>{" "}
1
<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={() => {
gotoSection(
<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>{" "}
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" +
" 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
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span>
</span>
</span>
</span>
</span>
<span className="js-step-title">
<a
href="#"
onClick={() => {
gotoSection(
<span className="js-step-title">
<a
href="#"
onClick={() => {
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
);
}}
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" +
" 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
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span>
</span>
</span>
</span>
</span>
<span className="js-step-title">
<a
href="#"
onClick={() => {
gotoSection(
<span className="js-step-title">
<a
href="#"
onClick={() => {
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
);
}}
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" +
" 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
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span>
</span>
</span>
</span>
</span>
<span className="js-step-title">
<a
href="#"
onClick={() => {
gotoSection(
<span className="js-step-title">
<a
href="#"
onClick={() => {
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
);
}}
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" +
" 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
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span>
</span>
</span>
</span>
</span>
<span className="js-step-title">
<a
href="#"
onClick={() => {
gotoSection(
<span className="js-step-title">
<a
href="#"
onClick={() => {
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
);
}}
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" +
" 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
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span>
</span>
</span>
</span>
</span>
<span className="js-step-title">
<a
href="#"
onClick={() => {
gotoSection(
<span className="js-step-title">
<a
href="#"
onClick={() => {
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
);
}}
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
className="app-step-nav__circle-step-colon govuk-visually-hidden"
aria-hidden="true"
>
:
</span>
</span>
</span>
</a>
</span>
</h3>
</div>
</li>
</ol>
</div>
</span>
<span className="js-step-title">
<a
href="#"
onClick={() => {
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>
@@ -22,7 +22,7 @@ import {
import { useDropzone } from "react-dropzone";
import { select } from "xpath";
import jsonpath from "jsonpath";
import { useState } from "react";
import Enforcement_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_enforcement";
import S78_Qquestionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_s78";
@@ -39,6 +39,8 @@ let RepLPA = (props) => {
currentView,
procedureTypeValue,
onBehalfOfLPA,
setShowQuestionnaireSection,
showQuestionnaireSection,
} = props;
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const files = acceptedFiles.map((file) => (
@@ -68,6 +70,10 @@ let RepLPA = (props) => {
props.props.props.accountDetails.containerID
}
currentView={currentView}
showQuestionnaireSection={showQuestionnaireSection}
setShowQuestionnaireSection={
setShowQuestionnaireSection
}
/>
);
break;
@@ -82,6 +88,10 @@ let RepLPA = (props) => {
props.props.props.accountDetails.containerID
}
currentView={currentView}
showQuestionnaireSection={showQuestionnaireSection}
setShowQuestionnaireSection={
setShowQuestionnaireSection
}
/>
);
break;
@@ -131,7 +141,10 @@ let RepLPA = (props) => {
<>
<div className="govuk-grid-row">
<h2 className="govuk-heading-m ">
Representation from an LPA for a{" "}
{typeof props.representationType != "undefined"
? props.representationType
: "Representation"}{" "}
from an LPA for a{" "}
{
getFormCollectionByID(
currentView.caseReference.appealType
@@ -139,21 +152,23 @@ let RepLPA = (props) => {
}
</h2>
<div className="govuk-form-group">
<label
className="govuk-label govuk-body-m"
htmlFor="representationType"
>
What kind of representation are you making?
</label>
<Field
id="representationType"
name="representationType"
component={RenderPickList}
datafieldname="representationType"
optionsArr={appellantApplicantRepresentationArr}
/>
</div>
{typeof props.representationType == "undefined" && (
<div className="govuk-form-group">
<label
className="govuk-label govuk-body-m"
htmlFor="representationType"
>
What kind of representation are you making?
</label>
<Field
id="representationType"
name="representationType"
component={RenderPickList}
datafieldname="representationType"
optionsArr={appellantApplicantRepresentationArr}
/>
</div>
)}
</div>
<div className="govuk-grid-row">
@@ -219,14 +234,56 @@ let RepLPA = (props) => {
</div>
<div className="govuk-grid-row">
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
Continue
</button>
{/* <a
{typeof props.representationType != "undefined" &&
props.representationType == "Questionnaire" && (
<>
{showQuestionnaireSection < 7 && (
<a
href="#"
onClick={() => {
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={() => {
setRepresentationSubmit(false);
@@ -235,15 +292,16 @@ let RepLPA = (props) => {
>
Continue
</a> */}
<a
onClick={() => {
//setRepresentationCapacity();
}}
className="govuk-link"
>
Back
</a>
<a
onClick={() => {
//setRepresentationCapacity();
}}
className="govuk-link"
>
Back
</a>
</>
)}
</div>
</div>
</>
@@ -861,7 +861,7 @@ let Enforcement_Questionnaire = (props) => {
</div>
<div className="govuk-form-group">
{onBehalfOfLPA} seww
{onBehalfOfLPA}
<Field
className="govuk-input govuk-!-width-one-half"
id="onBehalfOfLPA"
-7
View File
@@ -69,13 +69,6 @@ const Home = (props) => {
if (status === "loading") {
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 (
<div>