rep questionnaire nav/progress
This commit is contained in:
@@ -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,6 +676,11 @@ let MakeRepresentation = (props) => {
|
||||
formObj["representationForm"].values
|
||||
.representationType ==
|
||||
"Questionnaire" && (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-labelledby="progress-list"
|
||||
className="at-nav"
|
||||
>
|
||||
<div
|
||||
id="step-by-step-navigation"
|
||||
data-module="gemstepnav"
|
||||
@@ -684,7 +695,10 @@ let MakeRepresentation = (props) => {
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
" sectionIncomplete"
|
||||
(showQuestionnaireSection >=
|
||||
1
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
@@ -716,7 +730,7 @@ let MakeRepresentation = (props) => {
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
setShowQuestionnaireSection(
|
||||
1
|
||||
);
|
||||
}}
|
||||
@@ -739,7 +753,10 @@ let MakeRepresentation = (props) => {
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
" sectionComplete"
|
||||
(showQuestionnaireSection >=
|
||||
2
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
@@ -771,7 +788,7 @@ let MakeRepresentation = (props) => {
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
setShowQuestionnaireSection(
|
||||
2
|
||||
);
|
||||
}}
|
||||
@@ -791,7 +808,10 @@ let MakeRepresentation = (props) => {
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
" sectionIncomplete"
|
||||
(showQuestionnaireSection >=
|
||||
3
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
@@ -823,7 +843,7 @@ let MakeRepresentation = (props) => {
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
setShowQuestionnaireSection(
|
||||
3
|
||||
);
|
||||
}}
|
||||
@@ -843,7 +863,10 @@ let MakeRepresentation = (props) => {
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
" sectionIncomplete"
|
||||
(showQuestionnaireSection >=
|
||||
4
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
@@ -875,7 +898,7 @@ let MakeRepresentation = (props) => {
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
setShowQuestionnaireSection(
|
||||
4
|
||||
);
|
||||
}}
|
||||
@@ -895,7 +918,10 @@ let MakeRepresentation = (props) => {
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
" sectionIncomplete"
|
||||
(showQuestionnaireSection >=
|
||||
5
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
@@ -927,7 +953,7 @@ let MakeRepresentation = (props) => {
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
setShowQuestionnaireSection(
|
||||
5
|
||||
);
|
||||
}}
|
||||
@@ -943,11 +969,14 @@ let MakeRepresentation = (props) => {
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
</li>{" "}
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
" sectionIncomplete"
|
||||
(showQuestionnaireSection >=
|
||||
6
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
@@ -979,13 +1008,68 @@ let MakeRepresentation = (props) => {
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
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
|
||||
@@ -997,6 +1081,7 @@ let MakeRepresentation = (props) => {
|
||||
</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,6 +152,7 @@ let RepLPA = (props) => {
|
||||
}
|
||||
</h2>
|
||||
|
||||
{typeof props.representationType == "undefined" && (
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-body-m"
|
||||
@@ -154,6 +168,7 @@ let RepLPA = (props) => {
|
||||
optionsArr={appellantApplicantRepresentationArr}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="govuk-grid-row">
|
||||
@@ -219,6 +234,48 @@ let RepLPA = (props) => {
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<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
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
@@ -235,7 +292,6 @@ let RepLPA = (props) => {
|
||||
>
|
||||
Continue
|
||||
</a> */}
|
||||
|
||||
<a
|
||||
onClick={() => {
|
||||
//setRepresentationCapacity();
|
||||
@@ -244,6 +300,8 @@ let RepLPA = (props) => {
|
||||
>
|
||||
Back
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
+1
-1
@@ -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"
|
||||
|
||||
+47
-25
@@ -36,6 +36,7 @@ let S78_Questionnaire = (props) => {
|
||||
currentView,
|
||||
procedureTypeValue,
|
||||
onBehalfOfLPA,
|
||||
showQuestionnaireSection,
|
||||
} = props;
|
||||
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
|
||||
const files = acceptedFiles.map((file) => (
|
||||
@@ -72,7 +73,13 @@ let S78_Questionnaire = (props) => {
|
||||
|
||||
resultsObj = jsonpath.query(
|
||||
setCaseResultssObj,
|
||||
'$..[?(@.ticketnumber=="' +
|
||||
"$..[?(@." +
|
||||
(router.query.hasOwnProperty("state")
|
||||
? router.query.state == "edit"
|
||||
? "caseRef"
|
||||
: "ticketnumber"
|
||||
: "ticketnumber") +
|
||||
'=="' +
|
||||
currentView.caseReference.currentReference +
|
||||
'")]'
|
||||
);
|
||||
@@ -84,7 +91,7 @@ let S78_Questionnaire = (props) => {
|
||||
<>
|
||||
{props.representationTypeValue}
|
||||
{props.procedureTypeValue}
|
||||
|
||||
{showQuestionnaireSection == 1 && (
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
aria-describedby="commentBox-hint"
|
||||
@@ -240,6 +247,8 @@ let S78_Questionnaire = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
)}
|
||||
{showQuestionnaireSection == 2 && (
|
||||
<fieldset
|
||||
className="govuk-fieldset govuk-!-margin-top-9"
|
||||
aria-describedby="commentBox-hint"
|
||||
@@ -299,12 +308,15 @@ let S78_Questionnaire = (props) => {
|
||||
aria-describedby={props.name + "-hint"}
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
)}
|
||||
{showQuestionnaireSection == 3 && (
|
||||
<fieldset
|
||||
className="govuk-fieldset govuk-!-margin-top-9"
|
||||
aria-describedby="commentBox-hint"
|
||||
>
|
||||
<h3 className="govuk-heading-s ">Statutory considerations</h3>
|
||||
<h3 className="govuk-heading-s ">
|
||||
Statutory considerations
|
||||
</h3>
|
||||
<Field
|
||||
label="15. Is all or part of the site within an Area of Outstanding Natural Beauty?"
|
||||
name="AONB"
|
||||
@@ -462,6 +474,8 @@ let S78_Questionnaire = (props) => {
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
)}
|
||||
{showQuestionnaireSection == 4 && (
|
||||
<fieldset
|
||||
className="govuk-fieldset govuk-!-margin-top-9"
|
||||
aria-describedby="commentBox-hint"
|
||||
@@ -470,7 +484,8 @@ let S78_Questionnaire = (props) => {
|
||||
<div className="govuk-form-group govuk-body-m">
|
||||
24. Review the following standard conditions and advise
|
||||
whether they would be necessary if permission/consent is
|
||||
granted (not applicable to Advertisement consent proposals):
|
||||
granted (not applicable to Advertisement consent
|
||||
proposals):
|
||||
</div>
|
||||
|
||||
<Field
|
||||
@@ -550,12 +565,15 @@ Reason: To support the roll-out of digital communications infrastructure across
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
)}
|
||||
{showQuestionnaireSection == 5 && (
|
||||
<fieldset
|
||||
className="govuk-fieldset govuk-!-margin-top-9"
|
||||
aria-describedby="commentBox-hint"
|
||||
>
|
||||
<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>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
@@ -711,6 +729,27 @@ Reason: To support the roll-out of digital communications infrastructure across
|
||||
/>
|
||||
</div>
|
||||
</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
|
||||
className="govuk-fieldset govuk-!-margin-top-9"
|
||||
aria-describedby="commentBox-hint"
|
||||
@@ -730,7 +769,7 @@ Reason: To support the roll-out of digital communications infrastructure across
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
{onBehalfOfLPA} seww
|
||||
{onBehalfOfLPA}
|
||||
<Field
|
||||
className="govuk-input govuk-!-width-one-half"
|
||||
id="onBehalfOfLPA"
|
||||
@@ -753,24 +792,7 @@ Reason: To support the roll-out of digital communications infrastructure across
|
||||
dateEnd="1-y"
|
||||
/>
|
||||
</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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user