Merged PR 337: Added case summary and documents page

Added case summary and documents page

Related work items: #5129, #5158
This commit is contained in:
Robert Bond
2021-06-30 14:40:58 +00:00
12 changed files with 585 additions and 20 deletions
+28
View File
@@ -0,0 +1,28 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
import Summary from "./case/summary";
import Documents from "./case/documents";
export default function CaseSummary({ children, pages }) {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<main
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
id="main-content"
role="main"
>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<Summary />
<Documents />
</div>
</div>
</main>
);
}
+65
View File
@@ -0,0 +1,65 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function CaseSummary() {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h2>Documents</h2>
<dl class="govuk-summary-list govuk-!-margin-bottom-9 results">
<div class="govuk-summary-list__row results-headings">
<dd class="govuk-summary-list__key govuk-!-font-size-14 govuk-!-padding-left-2">
{t("case:documents-name-label")}
</dd>
<dd class="govuk-summary-list__key govuk-!-font-size-14">
{t("case:documents-doc-type-label")}
</dd>
<dd class="govuk-summary-list__key govuk-!-font-size-14">
{t("case:documents-date-published-label")}
</dd>
<dd class="govuk-summary-list__key govuk-!-font-size-14">
{t("case:documents-size-label")}
</dd>
</div>
<div class="govuk-summary-list__row">
<dd class="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<Link href="/case">
<a>
<span className="results-visually-hidden">
{t("case:documents-name-label")}:
</span>
3272770 Appeal Decision.pdf
</a>
</Link>
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
{t("case:documents-doc-type-label")}:
</span>
Outcome / Decision
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
{t("case:documents-date-published-label")}:
</span>
15/06/2021
</dd>
<dd class="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
{t("case:documents-size-label")}:
</span>
92
</dd>
</div>
</dl>
</div>
</div>
</div>
);
}
+274
View File
@@ -0,0 +1,274 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function CaseSummary() {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h1 class="govuk-heading-xl govuk-!-margin-bottom-7">
Reference: APP/B1415/W/20/3271702
</h1>
<dl class="govuk-summary-list govuk-!-margin-bottom-9">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t("case:summary-applicant-label")}
</dt>
<dd class="govuk-summary-list__value">
Mr J Pocknell
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t("case:summary-agent-label")}
</dt>
<dd class="govuk-summary-list__value">
Mr Cos Polito
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t("case:summary-site-address-label")}
</dt>
<dd class="govuk-summary-list__value">
72 Guild Street
<br />
London
<br />
SE23 6FH
</dd>
</div>
</dl>
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<div class="govuk-button-group">
<Link href="/advancedsearch">
<a className="govuk-button">
{t("case:summary-make-representation-label")}
</a>
</Link>
<Link href="/advancedsearch">
<a className="govuk-button govuk-button--secondary">
{t("case:summary-back-button-label")}
</a>
</Link>
</div>
</div>
</div>
<div className="govuk-grid-row">
<div className="flex-container grid-row govuk-body case">
<div className="card" id="casescomment-card">
<div className="card-body">
<div className="govuk-grid-column-full">
<h2 class="govuk-heading-m govuk-!-margin-bottom-7">
{t("case:summary-case-details-label")}
</h2>
<dl class="govuk-summary-list govuk-!-font-size-14 govuk-!-margin-bottom-9">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t("case:summary-case-type-label")}
</dt>
<dd class="govuk-summary-list__value">
Planning Appeal (W){" "}
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t("case:summary-lpa-label")}
</dt>
<dd class="govuk-summary-list__value">
Hastings Borough Council
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t(
"case:summary-case-summary-label"
)}
</dt>
<dd class="govuk-summary-list__value">
Erection of a two-storey chalet
style detached dwelling
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t(
"case:summary-case-officer-label"
)}
</dt>
<dd class="govuk-summary-list__value">
{" "}
Neale Oliver
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t("case:summary-procedure-label")}
</dt>
<dd class="govuk-summary-list__value">
Written representations
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t("case:summary-status-label")}
</dt>
<dd class="govuk-summary-list__value">
In Progress
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t("case:summary-decision-label")}
</dt>
<dd class="govuk-summary-list__value">
Allowed
<a href="/">
3272770 Appeal Decision.pdf
</a>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t(
"case:summary-case-link-status-label"
)}
</dt>
<dd class="govuk-summary-list__value">
Not Linked
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t(
"case:summary-linked-cases-label"
)}
</dt>
<dd class="govuk-summary-list__value">
0
</dd>
</div>
</dl>
</div>
</div>
</div>
<div className="card" id="casescomment-card">
<div className="card-body">
<div className="govuk-grid-column-full">
<h3 class="govuk-heading-m govuk-!-margin-bottom-7">
{t("case:summary-dates-label")}
</h3>
<dl class="govuk-summary-list govuk-!-font-size-14 govuk-!-margin-bottom-9">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t("case:summary-start-date-label")}
</dt>
<dd class="govuk-summary-list__value">
26-May-21
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t(
"case:summary-questionnaire-due-date-label"
)}
</dt>
<dd class="govuk-summary-list__value">
02-Jun-21
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t(
"case:summary-statement-due-date-label"
)}
</dt>
<dd class="govuk-summary-list__value">
30-Jun-21
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t(
"case:summary-interested-party-date-label"
)}
</dt>
<dd class="govuk-summary-list__value">
30-Jun-21
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t(
"case:summary-applicant-final-comments-date-label"
)}
</dt>
<dd class="govuk-summary-list__value">
14-Jul-21
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t(
"case:summary-inquiry-evidence-date-label"
)}
</dt>
<dd class="govuk-summary-list__value">
N/A
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t("case:summary-event-date-label")}
</dt>
<dd class="govuk-summary-list__value">
Date arranged
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
{t(
"case:summary-decision-date-label"
)}
</dt>
<dd class="govuk-summary-list__value">
Not yet decided
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
{/* <div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<div class="govuk-button-group">
<Link href="/advancedsearch">
<a className="govuk-button">
{t("case:summary-documents-button-label")}
</a>
</Link>
</div>
</div>
</div> */}
</div>
);
}
+45
View File
@@ -0,0 +1,45 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
import SearchForCase from "./search/searchforcase";
import SearchResults from "./search/searchresults";
export default function Search({ children, pages }) {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<main
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
id="main-content"
role="main"
>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<SearchResults />
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<div class="govuk-button-group">
<Link href="/advancedsearch">
<a className="govuk-button">
{t("search:searchresults-search-button-label")}
</a>
</Link>
<Link href="/advancedsearch">
<a className="govuk-button govuk-button--secondary">
{t(
"search:searchresults-new-search-button-label"
)}
</a>
</Link>
</div>
</div>
</div>
</main>
);
}
+17 -16
View File
@@ -3,22 +3,23 @@ import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
export default function WatchedCases() { export default function WatchedCases() {
let { t } = useTranslation(); let { t } = useTranslation();
const router = useRouter(); const router = useRouter();
const { locale } = router; const { locale } = router;
return ( return (
<div className="card card-3" id="casescomment-card"> <div className="card card-3" id="casescomment-card">
<div className="card-body"> <div className="card-body">
<h3 className="heading-small card-heading"> <h3 className="heading-small card-heading">
{t("myportal:watchedcases-card-title")} {t("myportal:watchedcases-card-title")}
</h3> </h3>
<div className="cardVieAll">
<Link href="/"> <div className="cardVieAll">
<a>{t("myportal:viewall-link")}</a> <Link href="/">
</Link> <a>{t("myportal:viewall-link")}</a>
</Link>
</div>
</div>
</div> </div>
</div> );
</div>
);
} }
+2 -2
View File
@@ -17,7 +17,7 @@ export default function SearchResults() {
{t("search:searchresults-count-label-part-1")} 99{" "} {t("search:searchresults-count-label-part-1")} 99{" "}
{t("search:searchresults-count-label-part-2")} {t("search:searchresults-count-label-part-2")}
</p> </p>
<dl class="govuk-summary-list govuk-!-margin-bottom-9"> <dl class="govuk-summary-list govuk-!-margin-bottom-9 results">
<div class="govuk-summary-list__row results-headings"> <div class="govuk-summary-list__row results-headings">
<dd class="govuk-summary-list__key govuk-!-font-size-14 results_wider govuk-!-padding-left-2"> <dd class="govuk-summary-list__key govuk-!-font-size-14 results_wider govuk-!-padding-left-2">
{t("search:searchresults-case-reference-label")} {t("search:searchresults-case-reference-label")}
@@ -40,7 +40,7 @@ export default function SearchResults() {
</div> </div>
<div class="govuk-summary-list__row"> <div class="govuk-summary-list__row">
<dd class="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2"> <dd class="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<Link href="/"> <Link href="/case">
<a> <a>
<span className="results-visually-hidden"> <span className="results-visually-hidden">
Case Reference: Case Reference:
+3
View File
@@ -19,6 +19,9 @@
], ],
"/searchresults": [ "/searchresults": [
"search" "search"
],
"/case": [
"case"
] ]
} }
} }
+33
View File
@@ -0,0 +1,33 @@
{
"case-card-title": "Reference: APP/B1415/W/20/3271702",
"summary-applicant-label": "Apelydd/Ymgeisydd",
"summary-agent-label": "Asiant",
"summary-site-address-label": "Cyfeiriad y Safle",
"summary-make-representation-label": "Cyflwyno cynrychiolaeth",
"summary-back-button-label": "Ewch yn ôl",
"summary-case-details-label": "Manylion yr Achos",
"summary-case-type-label": "Math o Achos",
"summary-lpa-label": "Awdurdod Cynllunio Lleol",
"summary-case-summary-label": "Crynodeb o'r Achos",
"summary-case-officer-label": "Swyddog Achos",
"summary-procedure-label": "Gweithdrefn",
"summary-status-label": "Statws",
"summary-decision-label": "Penderfyniad a chanlyniad",
"summary-case-link-status-label": "Statws cysylltiad yr Achos",
"summary-linked-cases-label": "Achosion cysylltiedig",
"summary-dates-label": "Dyddiadau",
"summary-start-date-label": "Dyddiad Dechrau",
"summary-questionnaire-due-date-label": "Holiadur i ddod",
"summary-statement-due-date-label": "Datganiad (au) i ddod",
"summary-interested-party-date-label": "Sylwadau Parti â Buddiant i ddod",
"summary-applicant-final-comments-date-label": "Sylwadau Terfynol yr Apelydd/ACLl i ddod",
"summary-inquiry-evidence-date-label": "Tystiolaeth yr Ymchwiliad i ddod",
"summary-event-date-label": "Dyddiad y Digwyddiad",
"summary-decision-date-label": "Dyddiad y Penderfyniad",
"summary-documents-button-label": "Dogfennau",
"documents-document-count-label": "Dogfennau",
"documents-name-label": "Math y Ddogfen",
"documents-doc-type-label": "Math y Ddogfen",
"documents-date-published-label": "Dyddiad cyhoeddi",
"documents-size-label": "Maint y ffeil (kb)"
}
+33
View File
@@ -0,0 +1,33 @@
{
"case-card-title": "Reference: APP/B1415/W/20/3271702",
"summary-applicant-label": "Appellant/Applicant",
"summary-agent-label": "Agent",
"summary-site-address-label": "Site Address",
"summary-make-representation-label": "Make representation",
"summary-back-button-label": "Go back",
"summary-case-details-label": "Case Details",
"summary-case-type-label": "Case Type",
"summary-lpa-label": "Local Planning Authority",
"summary-case-summary-label": "Case Summary",
"summary-case-officer-label": "Case Officer",
"summary-procedure-label": "Procedure",
"summary-status-label": "Status",
"summary-decision-label": "Decision and Outcome",
"summary-case-link-status-label": "Case Link Status",
"summary-linked-cases-label": "Linked Cases",
"summary-dates-label": "Dates",
"summary-start-date-label": "Start Date",
"summary-questionnaire-due-date-label": "Questionnaire due",
"summary-statement-due-date-label": "Statement(s) due",
"summary-interested-party-date-label": "Interested Party Comments due",
"summary-applicant-final-comments-date-label": "Appellant/LPA Final Comments due",
"summary-inquiry-evidence-date-label": "Inquiry Evidence due",
"summary-event-date-label": "Event Date",
"summary-decision-date-label": "Decision Date",
"summary-documents-button-label": "Documents",
"documents-document-count-label": "Document(s)",
"documents-name-label": "Name",
"documents-doc-type-label": "Document type",
"documents-date-published-label": "Date published",
"documents-size-label": "Size (KB)"
}
+79
View File
@@ -0,0 +1,79 @@
import _ from "lodash";
import Head from "next/head";
import Header from "../components/header";
import Banner from "../components/banner";
import CookieBanner from "../components/cookieBanner";
import Breadcrumbs from "../components/breadcrumbs";
import CaseSummary from "../components/case";
import Footer from "../components/footer";
import Errorpage from "../components/errorpage";
import styles from "../styles/Home.module.css";
import { useSelector, shallowEqual, connect } from "react-redux";
import { wrapper } from "../store/store";
import Cookies from "cookies";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import Case from "../components/case";
const Home = (props) => {
const { footerLinks, pages } = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div>
<Head>
<title>
{t("case:page-title")} - {t("common:service-name")}
</title>
</Head>
<div className="">
<CookieBanner />
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
<Banner />
<Case />
</div>
<Footer footerLinks={footerLinks} />
</div>
</div>
);
};
// export const getServerSideProps = wrapper.getServerSideProps(
// async ({ locale, store, req, res }) => {
// const token = await getToken();
// let accessToken = token.access_token;
// const apiRoot = process.browser ? window.API_ROOT : process.env.API_ROOT;
// const [pages, footerLinks, courseListContent] = await Promise.all([
// await getPages(accessToken, locale),
// await getFooterLinks(accessToken, locale),
// await getCourseList(accessToken, locale),
// ]);
// //const courseID = await getCourseID
// store.dispatch(setApiRoot(apiRoot));
// store.dispatch(setPages(pages));
// store.dispatch(setFooterLinks(footerLinks));
// store.dispatch(setCourseListContent(courseListContent));
// }
// );
// const mapStateToProps = (state) => {
// //console.log(state);
// return {
// apiroot: state.apiroot,
// courseListContent: state.courseListContent.courseListContent,
// pages: state.pages.pages,
// footerLinks: state.footerLinks.footerLinks,
// regions: state.regions,
// sectors: state.sectors,
// form: state.form,
// };
// };
export default Home; //connect(mapStateToProps)(Home);
+1 -1
View File
@@ -25,7 +25,7 @@ const Home = (props) => {
<div> <div>
<Head> <Head>
<title> <title>
{t("myportal:page-title")} - {t("common:service-name")} {t("search:page-title")} - {t("common:service-name")}
</title> </title>
</Head> </Head>
<div className=""> <div className="">
+5 -1
View File
@@ -109,7 +109,7 @@ nav {
} }
} }
div.govuk-summary-list__row:nth-child(even) { .results .govuk-summary-list__row:nth-child(even) {
background: #f3f2f1; background: #f3f2f1;
} }
@@ -130,3 +130,7 @@ div.govuk-summary-list__row:nth-child(even) {
display: none; display: none;
} }
} }
.case .govuk-grid-column-full .govuk-summary-list__key {
width: 100%;
}