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

rep questionnaire nav/progress

Browse Source
This commit is contained in:
robbond
2023-10-26 11:59:20 +01:00
parent 48bfa5e0be
commit 2cbd2d731c
5 changed files with 1116 additions and 958 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/case/representation/index.js
+99 -14
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,6 +676,11 @@ let MakeRepresentation = (props) => {
formObj["representationForm"].values formObj["representationForm"].values
.representationType == .representationType ==
"Questionnaire" && ( "Questionnaire" && (
<nav
role="navigation"
aria-labelledby="progress-list"
className="at-nav"
>
<div <div
id="step-by-step-navigation" id="step-by-step-navigation"
data-module="gemstepnav" data-module="gemstepnav"
@@ -684,7 +695,10 @@ let MakeRepresentation = (props) => {
<li <li
className={ className={
"app-step-nav__step js-step app-step-nav__step--active" + "app-step-nav__step js-step app-step-nav__step--active" +
" sectionIncomplete" (showQuestionnaireSection >=
1
? " sectionComplete"
: " sectionIncomplete")
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
@@ -716,7 +730,7 @@ let MakeRepresentation = (props) => {
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
gotoSection( setShowQuestionnaireSection(
1 1
); );
}} }}
@@ -739,7 +753,10 @@ let MakeRepresentation = (props) => {
<li <li
className={ className={
"app-step-nav__step js-step app-step-nav__step--active" + "app-step-nav__step js-step app-step-nav__step--active" +
" sectionComplete" (showQuestionnaireSection >=
2
? " sectionComplete"
: " sectionIncomplete")
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
@@ -771,7 +788,7 @@ let MakeRepresentation = (props) => {
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
gotoSection( setShowQuestionnaireSection(
2 2
); );
}} }}
@@ -791,7 +808,10 @@ let MakeRepresentation = (props) => {
<li <li
className={ className={
"app-step-nav__step js-step app-step-nav__step--active" + "app-step-nav__step js-step app-step-nav__step--active" +
" sectionIncomplete" (showQuestionnaireSection >=
3
? " sectionComplete"
: " sectionIncomplete")
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
@@ -823,7 +843,7 @@ let MakeRepresentation = (props) => {
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
gotoSection( setShowQuestionnaireSection(
3 3
); );
}} }}
@@ -843,7 +863,10 @@ let MakeRepresentation = (props) => {
<li <li
className={ className={
"app-step-nav__step js-step app-step-nav__step--active" + "app-step-nav__step js-step app-step-nav__step--active" +
" sectionIncomplete" (showQuestionnaireSection >=
4
? " sectionComplete"
: " sectionIncomplete")
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
@@ -875,7 +898,7 @@ let MakeRepresentation = (props) => {
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
gotoSection( setShowQuestionnaireSection(
4 4
); );
}} }}
@@ -895,7 +918,10 @@ let MakeRepresentation = (props) => {
<li <li
className={ className={
"app-step-nav__step js-step app-step-nav__step--active" + "app-step-nav__step js-step app-step-nav__step--active" +
" sectionIncomplete" (showQuestionnaireSection >=
5
? " sectionComplete"
: " sectionIncomplete")
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
@@ -927,7 +953,7 @@ let MakeRepresentation = (props) => {
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
gotoSection( setShowQuestionnaireSection(
5 5
); );
}} }}
@@ -943,11 +969,14 @@ let MakeRepresentation = (props) => {
</span> </span>
</h3> </h3>
</div> </div>
</li> </li>{" "}
<li <li
className={ className={
"app-step-nav__step js-step app-step-nav__step--active" + "app-step-nav__step js-step app-step-nav__step--active" +
" sectionIncomplete" (showQuestionnaireSection >=
6
? " sectionComplete"
: " sectionIncomplete")
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
@@ -979,13 +1008,68 @@ let MakeRepresentation = (props) => {
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
gotoSection( setShowQuestionnaireSection(
6 6
); );
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" 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"> <span className="js-step-title-text govuk-!-font-size-16">
Declaration Declaration
@@ -997,6 +1081,7 @@ let MakeRepresentation = (props) => {
</li> </li>
</ol> </ol>
</div> </div>
</nav>
)} )}
</div> </div>
</div> </div>
components/case/representation/representationLPA.js
+61 -3
View File
@@ -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,6 +152,7 @@ let RepLPA = (props) => {
} }
</h2> </h2>
{typeof props.representationType == "undefined" && (
<div className="govuk-form-group"> <div className="govuk-form-group">
<label <label
className="govuk-label govuk-body-m" className="govuk-label govuk-body-m"
@@ -154,6 +168,7 @@ let RepLPA = (props) => {
optionsArr={appellantApplicantRepresentationArr} optionsArr={appellantApplicantRepresentationArr}
/> />
</div> </div>
)}
</div> </div>
<div className="govuk-grid-row"> <div className="govuk-grid-row">
@@ -219,6 +234,48 @@ 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">
{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 <button
type="submit" type="submit"
className="govuk-button" className="govuk-button"
@@ -235,7 +292,6 @@ let RepLPA = (props) => {
> >
Continue Continue
</a> */} </a> */}
<a <a
onClick={() => { onClick={() => {
//setRepresentationCapacity(); //setRepresentationCapacity();
@@ -244,6 +300,8 @@ let RepLPA = (props) => {
> >
Back Back
</a> </a>
</>
)}
</div> </div>
</div> </div>
</> </>
components/case/representation/representationQuestionnaires/representationLPAQuestionnaire_enforcement.js
+1 -1
View File
@@ -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"
components/case/representation/representationQuestionnaires/representationLPAQuestionnaire_s78.js
+47 -25
View File
@@ -36,6 +36,7 @@ let S78_Questionnaire = (props) => {
currentView, currentView,
procedureTypeValue, procedureTypeValue,
onBehalfOfLPA, onBehalfOfLPA,
showQuestionnaireSection,
} = props; } = props;
const { acceptedFiles, getRootProps, getInputProps } = useDropzone(); const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const files = acceptedFiles.map((file) => ( const files = acceptedFiles.map((file) => (
@@ -72,7 +73,13 @@ let S78_Questionnaire = (props) => {
resultsObj = jsonpath.query( resultsObj = jsonpath.query(
setCaseResultssObj, setCaseResultssObj,
'$..[?(@.ticketnumber=="' + "$..[?(@." +
(router.query.hasOwnProperty("state")
? router.query.state == "edit"
? "caseRef"
: "ticketnumber"
: "ticketnumber") +
'=="' +
currentView.caseReference.currentReference + currentView.caseReference.currentReference +
'")]' '")]'
); );
@@ -84,7 +91,7 @@ let S78_Questionnaire = (props) => {
<> <>
{props.representationTypeValue} {props.representationTypeValue}
{props.procedureTypeValue} {props.procedureTypeValue}
{showQuestionnaireSection == 1 && (
<fieldset <fieldset
className="govuk-fieldset" className="govuk-fieldset"
aria-describedby="commentBox-hint" aria-describedby="commentBox-hint"
@@ -240,6 +247,8 @@ let S78_Questionnaire = (props) => {
</div> </div>
</div> </div>
</fieldset> </fieldset>
)}
{showQuestionnaireSection == 2 && (
<fieldset <fieldset
className="govuk-fieldset govuk-!-margin-top-9" className="govuk-fieldset govuk-!-margin-top-9"
aria-describedby="commentBox-hint" aria-describedby="commentBox-hint"
@@ -299,12 +308,15 @@ let S78_Questionnaire = (props) => {
aria-describedby={props.name + "-hint"} aria-describedby={props.name + "-hint"}
/> />
</fieldset> </fieldset>
)}
{showQuestionnaireSection == 3 && (
<fieldset <fieldset
className="govuk-fieldset govuk-!-margin-top-9" className="govuk-fieldset govuk-!-margin-top-9"
aria-describedby="commentBox-hint" aria-describedby="commentBox-hint"
> >
<h3 className="govuk-heading-s ">Statutory considerations</h3> <h3 className="govuk-heading-s ">
Statutory considerations
</h3>
<Field <Field
label="15. Is all or part of the site within an Area of Outstanding Natural Beauty?" label="15. Is all or part of the site within an Area of Outstanding Natural Beauty?"
name="AONB" name="AONB"
@@ -462,6 +474,8 @@ let S78_Questionnaire = (props) => {
/> />
</div> </div>
</fieldset> </fieldset>
)}
{showQuestionnaireSection == 4 && (
<fieldset <fieldset
className="govuk-fieldset govuk-!-margin-top-9" className="govuk-fieldset govuk-!-margin-top-9"
aria-describedby="commentBox-hint" aria-describedby="commentBox-hint"
@@ -470,7 +484,8 @@ let S78_Questionnaire = (props) => {
<div className="govuk-form-group govuk-body-m"> <div className="govuk-form-group govuk-body-m">
24. Review the following standard conditions and advise 24. Review the following standard conditions and advise
whether they would be necessary if permission/consent is whether they would be necessary if permission/consent is
granted (not applicable to Advertisement consent proposals): granted (not applicable to Advertisement consent
proposals):
</div> </div>
<Field <Field
@@ -550,12 +565,15 @@ Reason: To support the roll-out of digital communications infrastructure across
/> />
</div> </div>
</fieldset> </fieldset>
)}
{showQuestionnaireSection == 5 && (
<fieldset <fieldset
className="govuk-fieldset govuk-!-margin-top-9" className="govuk-fieldset govuk-!-margin-top-9"
aria-describedby="commentBox-hint" aria-describedby="commentBox-hint"
> >
<h3 className="govuk-heading-s "> <h3 className="govuk-heading-s ">
Before sending, have you attached or provided a web link to: Before sending, have you attached or provided a web link
to:
</h3> </h3>
<div className="govuk-form-group"> <div className="govuk-form-group">
@@ -711,6 +729,27 @@ Reason: To support the roll-out of digital communications infrastructure across
/> />
</div> </div>
</fieldset> </fieldset>
)}
{showQuestionnaireSection == 6 && (
<fieldset
className="govuk-fieldset govuk-!-margin-top-9"
aria-describedby="commentBox-hint"
>
{" "}
<div className="govuk-form-group govuk-!-margin-bottom-9">
<FileUploadField
name={"representationDocuments"}
label={"Add your files"}
ticketnumber={props.props.caseReference}
hint={"sdsd"}
fileList={[]}
setFilesForRepresentation={[]}
containerID={props.containerID}
/>
</div>
</fieldset>
)}
{showQuestionnaireSection == 7 && (
<fieldset <fieldset
className="govuk-fieldset govuk-!-margin-top-9" className="govuk-fieldset govuk-!-margin-top-9"
aria-describedby="commentBox-hint" aria-describedby="commentBox-hint"
@@ -730,7 +769,7 @@ Reason: To support the roll-out of digital communications infrastructure across
</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"
@@ -753,24 +792,7 @@ Reason: To support the roll-out of digital communications infrastructure across
dateEnd="1-y" dateEnd="1-y"
/> />
</fieldset> </fieldset>
)}
<fieldset
className="govuk-fieldset govuk-!-margin-top-9"
aria-describedby="commentBox-hint"
>
{" "}
<div className="govuk-form-group govuk-!-margin-bottom-9">
<FileUploadField
name={"representationDocuments"}
label={"Add your files"}
ticketnumber={props.props.caseReference}
hint={"sdsd"}
fileList={[]}
setFilesForRepresentation={[]}
containerID={props.containerID}
/>
</div>
</fieldset>
</> </>
); );
}; };
pages/myportal/representation.js
-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>