breacrumb change & form styling
This commit is contained in:
+82
-16
@@ -8,8 +8,10 @@ import { connect } from "react-redux";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { setCurrentView } from "../store/currentView/action";
|
||||
|
||||
import { setCurrentSection } from "../store/appealType/action";
|
||||
|
||||
const Breadcrumbs = (props) => {
|
||||
const { currentView, setCurrentView } = props;
|
||||
const { currentView, setCurrentView, setCurrentSection } = props;
|
||||
const router = useRouter();
|
||||
let { t } = useTranslation();
|
||||
|
||||
@@ -24,14 +26,18 @@ const Breadcrumbs = (props) => {
|
||||
>
|
||||
<div className="govuk-breadcrumbs ">
|
||||
<ol className="govuk-breadcrumbs__list">
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={"/"}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t("common:service-name-breadcrumb")}
|
||||
</Link>
|
||||
</li>
|
||||
{router.pathname != "/myportal/[appealtypes]" &&
|
||||
router.pathname != "/newappeal/[appealtypes]" && (
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={"/"}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t("common:service-name-breadcrumb")}
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
|
||||
{router.pathname == "/myportal" && (
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("myportal:page-title")}
|
||||
@@ -244,7 +250,7 @@ const Breadcrumbs = (props) => {
|
||||
)}
|
||||
{router.pathname == "/newappeal" && (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{/* <li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
router.locale != "en"
|
||||
@@ -260,12 +266,12 @@ const Breadcrumbs = (props) => {
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("newappeal:page-title")}
|
||||
</li>
|
||||
</li> */}
|
||||
</>
|
||||
)}
|
||||
{router.pathname == "/newappeal/[appealtypes]" && (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{/* <li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
router.locale != "en"
|
||||
@@ -281,12 +287,41 @@ const Breadcrumbs = (props) => {
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("newappeal:page-title")}
|
||||
</li>
|
||||
</li> */}
|
||||
|
||||
{props.appealType.currentSection > 1 &&
|
||||
(props.appealType.currentSection == 9999 ? (
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={"/"}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t(
|
||||
"common:service-name-breadcrumb"
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
) : (
|
||||
<li className="govuk-breadcrumbs__link-item">
|
||||
<a
|
||||
className="govuk-breadcrumbs__link"
|
||||
href="#"
|
||||
onClick={() =>
|
||||
setCurrentSection(
|
||||
props.appealType
|
||||
.currentSection - 1
|
||||
)
|
||||
}
|
||||
>
|
||||
{t("common:back-link")}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{router.pathname == "/myportal/[appealtypes]" && (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{/* <li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
router.locale != "en"
|
||||
@@ -304,8 +339,36 @@ const Breadcrumbs = (props) => {
|
||||
{t("newappeal:page-title")}
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{props.formTitle}
|
||||
</li>
|
||||
{t("common:back-link")} {props.formTitle}
|
||||
</li> */}
|
||||
{props.appealType.currentSection > 1 &&
|
||||
(props.appealType.currentSection == 9999 ? (
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={"/"}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t(
|
||||
"common:service-name-breadcrumb"
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
) : (
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<a
|
||||
className="govuk-breadcrumbs__link"
|
||||
href="#"
|
||||
onClick={() =>
|
||||
setCurrentSection(
|
||||
props.appealType
|
||||
.currentSection - 1
|
||||
)
|
||||
}
|
||||
>
|
||||
{t("common:back-link")}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{router.pathname == "/newappeal/selectappeal" && (
|
||||
@@ -942,6 +1005,9 @@ const mapDispatchToProps = (dispatch) => {
|
||||
setCurrentView: (currentView) => {
|
||||
dispatch(setCurrentView(currentView));
|
||||
},
|
||||
setCurrentSection: (currentSection) => {
|
||||
dispatch(setCurrentSection(currentSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -47,7 +47,13 @@ const Header = (props) => {
|
||||
"/newappeal",
|
||||
"/myportal/dnsapplications",
|
||||
"/myportal/dnsdetails",
|
||||
"/myportal/addresssearch",
|
||||
"/myportal/addresssearchresults",
|
||||
"/myportal/advancedsearch",
|
||||
"/myportal/advancedsearchresults",
|
||||
"/myportal/case/[ticketnumber]",
|
||||
];
|
||||
|
||||
const hasContactLink = [
|
||||
"/dns/application-process",
|
||||
"/dns/help",
|
||||
|
||||
@@ -15,41 +15,41 @@ const ServiceBanner = (props) => {
|
||||
)}&error=EmailSignin`
|
||||
);
|
||||
};
|
||||
return (
|
||||
// <div className="servicebanner">
|
||||
// <h1>
|
||||
// <img
|
||||
// className="govuk-!-margin-top-4"
|
||||
// src={
|
||||
// router.locale == "cy"
|
||||
// ? "/assets/images/planning-casework-cy.svg"
|
||||
// : "/assets/images/planning-casework-en.svg"
|
||||
// }
|
||||
// alt="Planning casework"
|
||||
// />
|
||||
// </h1>
|
||||
// <div className="serviceBanner_userDetails">
|
||||
// <button
|
||||
// onClick={() => signInButton()}
|
||||
// className="govuk-header__link "
|
||||
// >
|
||||
// {t("common:signin-label")}
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
const portalLogoLink = [
|
||||
"/myportal/[appealtypes]",
|
||||
"/newappeal",
|
||||
"/newappeal/[appealtypes]",
|
||||
];
|
||||
return (
|
||||
<div className="servicebanner myportal govuk-!-margin-bottom-4">
|
||||
<h1>
|
||||
<img
|
||||
src={
|
||||
router.locale == "cy"
|
||||
? "/assets/images/planning-casework-cy.svg"
|
||||
: "/assets/images/planning-casework-en.svg"
|
||||
}
|
||||
alt={router.locale == "cy" ? "Fy mhorth" : "My Portal"}
|
||||
/>
|
||||
{portalLogoLink.includes(router.pathname) ? (
|
||||
<Link href={"/myportal"}>
|
||||
<img
|
||||
src={
|
||||
router.locale == "cy"
|
||||
? "/assets/images/planning-casework-cy.svg"
|
||||
: "/assets/images/planning-casework-en.svg"
|
||||
}
|
||||
alt={
|
||||
router.locale == "cy"
|
||||
? "Fy mhorth"
|
||||
: "My Portal"
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<img
|
||||
src={
|
||||
router.locale == "cy"
|
||||
? "/assets/images/planning-casework-cy.svg"
|
||||
: "/assets/images/planning-casework-en.svg"
|
||||
}
|
||||
alt={router.locale == "cy" ? "Fy mhorth" : "My Portal"}
|
||||
/>
|
||||
)}
|
||||
</h1>
|
||||
|
||||
<div className="serviceBanner_userDetails">
|
||||
<img
|
||||
className="user_logo"
|
||||
|
||||
@@ -388,8 +388,8 @@ let BuildSection = (props) => {
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<h1 className="govuk-heading-m govuk-!-margin-top-5">
|
||||
<div className="govuk-grid-column-two-thirds wgForm ">
|
||||
<h1 className="govuk-heading-m ">
|
||||
{FieldsTranslations(titles[0].value)}
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
@@ -413,45 +413,142 @@ let BuildSection = (props) => {
|
||||
|
||||
<div className="govuk-button-group">
|
||||
{props.sectionCount != currentSection ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
onClick={() => {
|
||||
getErrors();
|
||||
let valuesObj = _.has(
|
||||
props.props.form[props.form],
|
||||
"values"
|
||||
)
|
||||
? props.props.form[props.form].values
|
||||
: {};
|
||||
<>
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
onClick={() => {
|
||||
getErrors();
|
||||
let valuesObj = _.has(
|
||||
props.props.form[props.form],
|
||||
"values"
|
||||
)
|
||||
? props.props.form[props.form]
|
||||
.values
|
||||
: {};
|
||||
|
||||
//console.log("valuesobj:", valuesObj);
|
||||
//console.log("valuesobj:", valuesObj);
|
||||
|
||||
delete valuesObj["_pinswg_appellant_value"];
|
||||
delete valuesObj[
|
||||
"_pinswg_appellant_value"
|
||||
];
|
||||
|
||||
//console.log("on save:", valuesObj);
|
||||
updateCaseProgress(valuesObj, false, false);
|
||||
}}
|
||||
>
|
||||
{t("common:continue-button")}
|
||||
</button>
|
||||
//console.log("on save:", valuesObj);
|
||||
updateCaseProgress(
|
||||
valuesObj,
|
||||
false,
|
||||
false
|
||||
);
|
||||
}}
|
||||
>
|
||||
{t("common:continue-button")}
|
||||
</button>
|
||||
{savingStatus ? (
|
||||
<span className=" progress-save-active">
|
||||
{router.locale == "cy"
|
||||
? "Nôl data"
|
||||
: "Saving data"}
|
||||
<img
|
||||
className="data-loading-icon"
|
||||
src="/assets/images/loading.gif"
|
||||
alt={
|
||||
router.locale == "cy"
|
||||
? "Nôl data"
|
||||
: "Saving data"
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
className="govuk-button progress-save "
|
||||
onClick={() => {
|
||||
let valuesObj =
|
||||
props.props.form[props.form]
|
||||
.values || {};
|
||||
|
||||
console.log(
|
||||
"valuesobj:",
|
||||
valuesObj
|
||||
);
|
||||
|
||||
delete valuesObj[
|
||||
"_pinswg_appellant_value"
|
||||
];
|
||||
|
||||
console.log("on save:", valuesObj);
|
||||
updateCaseProgress(
|
||||
valuesObj,
|
||||
true,
|
||||
true
|
||||
);
|
||||
}}
|
||||
>
|
||||
{t("common:save-exit-button")}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{props.sectionCount == currentSection ? (
|
||||
<button
|
||||
disabled={!isProgressComplete(progObj)}
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
{t("common:submit-button")}
|
||||
</button>
|
||||
<>
|
||||
<button
|
||||
disabled={!isProgressComplete(progObj)}
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
{t("common:submit-button")}
|
||||
</button>
|
||||
{savingStatus ? (
|
||||
<span className=" progress-save-active">
|
||||
{router.locale == "cy"
|
||||
? "Nôl data"
|
||||
: "Saving data"}
|
||||
<img
|
||||
className="data-loading-icon"
|
||||
src="/assets/images/loading.gif"
|
||||
alt={
|
||||
router.locale == "cy"
|
||||
? "Nôl data"
|
||||
: "Saving data"
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
className="govuk-button progress-save "
|
||||
onClick={() => {
|
||||
let valuesObj =
|
||||
props.props.form[props.form]
|
||||
.values || {};
|
||||
|
||||
console.log(
|
||||
"valuesobj:",
|
||||
valuesObj
|
||||
);
|
||||
|
||||
delete valuesObj[
|
||||
"_pinswg_appellant_value"
|
||||
];
|
||||
|
||||
console.log("on save:", valuesObj);
|
||||
updateCaseProgress(
|
||||
valuesObj,
|
||||
true,
|
||||
true
|
||||
);
|
||||
}}
|
||||
>
|
||||
{t("common:save-exit-button")}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{currentSection > 1 ? (
|
||||
{/* {currentSection > 1 ? (
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
@@ -463,7 +560,7 @@ let BuildSection = (props) => {
|
||||
</a>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -486,6 +583,8 @@ let BuildSection = (props) => {
|
||||
|
||||
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
|
||||
|
||||
{/*
|
||||
Mpved save and exit button from progess section
|
||||
{savingStatus ? (
|
||||
<span className=" progress-save-active">
|
||||
{router.locale == "cy" ? "Nôl data" : "Saving data"}
|
||||
@@ -501,7 +600,7 @@ let BuildSection = (props) => {
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
className="govuk-button govuk-button--secondary progress-save "
|
||||
className="govuk-button progress-save "
|
||||
onClick={() => {
|
||||
let valuesObj =
|
||||
props.props.form[props.form].values || {};
|
||||
@@ -516,7 +615,7 @@ let BuildSection = (props) => {
|
||||
>
|
||||
{t("common:save-exit-button")}
|
||||
</button>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user