From b96aa3acbef5324121cf1bdbc0063ef1e4928136 Mon Sep 17 00:00:00 2001 From: rdbsolutions Date: Tue, 10 Aug 2021 17:17:39 +0100 Subject: [PATCH] added dns record view with tabs --- components/breadcrumbs.js | 25 ++ .../dns/applications/applicationSideBar.js | 106 +++++ .../dns/applications/applicationSummary.js | 63 +++ .../dns/applications/applicationTabs.js | 151 +++++++ .../applications/applicationTabsComments.js | 30 ++ .../applications/applicationTabsDocuments.js | 385 ++++++++++++++++++ .../applicationTabsRegistrationForm.js | 23 ++ .../applications/applicationTabsTimeline.js | 145 +++++++ .../dns/applications/applicationsIntro.js | 13 +- .../dns/applications/applicationsList.js | 204 ++++++---- .../dns/homepage/applicationsForComment.js | 8 +- components/dns/homepage/dnsLinks.js | 12 +- components/dns/homepage/latestApplications.js | 20 +- components/header.js | 2 + components/search/searchresults.js | 6 +- package.json | 1 + pages/_document.js | 2 +- pages/dns/application-view.js | 81 ++++ pages/dns/contact-us.js | 36 +- public/assets/images/dns/milestone.png | Bin 0 -> 901 bytes public/assets/images/dns/notice.png | Bin 0 -> 1554 bytes styles/sass/styles.scss | 2 +- styles/sass/welshgov/_application.scss | 297 +++++++++++++- 23 files changed, 1497 insertions(+), 115 deletions(-) create mode 100644 components/dns/applications/applicationSideBar.js create mode 100644 components/dns/applications/applicationSummary.js create mode 100644 components/dns/applications/applicationTabs.js create mode 100644 components/dns/applications/applicationTabsComments.js create mode 100644 components/dns/applications/applicationTabsDocuments.js create mode 100644 components/dns/applications/applicationTabsRegistrationForm.js create mode 100644 components/dns/applications/applicationTabsTimeline.js create mode 100644 pages/dns/application-view.js create mode 100644 public/assets/images/dns/milestone.png create mode 100644 public/assets/images/dns/notice.png diff --git a/components/breadcrumbs.js b/components/breadcrumbs.js index 36c914f9..1187d45f 100644 --- a/components/breadcrumbs.js +++ b/components/breadcrumbs.js @@ -284,6 +284,31 @@ const Breadcrumbs = (props) => { ) : ( "" )} + {router.pathname == "/dns/applications" ? ( + <> +
  • + Applications +
    • + + ) : ( + "" + )} + {router.pathname == "/dns/application-view" ? ( + <> +
  • + + + Applications{" "} + + +
    • +
  • + TWA - Morlais Demonstration Zone +
    • + + ) : ( + "" + )} {!_.isEmpty(slug) ? ( <>
  • diff --git a/components/dns/applications/applicationSideBar.js b/components/dns/applications/applicationSideBar.js new file mode 100644 index 00000000..94e1c210 --- /dev/null +++ b/components/dns/applications/applicationSideBar.js @@ -0,0 +1,106 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useContext } from "react"; +import useTranslation from "next-translate/useTranslation"; + +const ApplicationSideBar = (props) => { + let { t } = useTranslation(); + + const router = useRouter(); + const { locale } = router; + + return ( + <> +
    +
    +

    About this application

    +

    + The Project will provide a consented area for the + installation and commercial demonstration of multiple + arrays of tidal energy devices, to a maximum installed + capacity of 240 Megawatts (MW). +

    +
    +
    +
    +
    +
    +

    Application location

    +
    + +
    +

    + The location shown on the map is approximate at this + stage +

    +
    +
    +
    +
    +
    +

    Contact Information

    +

    + Planning Inspectorate case team: +
    + + TWA.morlaistidalarray@planninginspectorate.gov.uk + +

    +

    + Tel: 0303 444 5940 +

    +

    + Developer:
    + Graham Morley +
    + Tel: +44 (0) 1248 725 713 +

    +
    +
    +
    +
    +
    +

    Email updates

    +

    + Sign up using email address to receive updates about + this application +

    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + + ); +}; + +export default ApplicationSideBar; diff --git a/components/dns/applications/applicationSummary.js b/components/dns/applications/applicationSummary.js new file mode 100644 index 00000000..45346c29 --- /dev/null +++ b/components/dns/applications/applicationSummary.js @@ -0,0 +1,63 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useContext } from "react"; +import useTranslation from "next-translate/useTranslation"; + +const ApplicationSummary = (props) => { + let { t } = useTranslation(); + + const router = useRouter(); + const { locale } = router; + + return ( + <> +
    +
    +

    TWA - Morlais Demonstration Zone

    +
    +
    +
    +
    +

    + by Menter Mon
    + Type: Generating Stations +

    +
    + + + + Information + + The Inspector’s report into the above has now been + formally submitted to the Welsh Government for + consideration. +
    + + 05 October 2020 + +     +
    +
    +
    +

    + Stage:
    + Next Stage: Decision +
    + Reference: TWA/3234121 +
    + Developer: Menter Mon +
    + Procedure: Inquiry +

    +
    +
    + + ); +}; + +export default ApplicationSummary; diff --git a/components/dns/applications/applicationTabs.js b/components/dns/applications/applicationTabs.js new file mode 100644 index 00000000..64de5c2c --- /dev/null +++ b/components/dns/applications/applicationTabs.js @@ -0,0 +1,151 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useContext } from "react"; +import { useState } from "react"; +import useTranslation from "next-translate/useTranslation"; +import ApplicationTabsTimeLine from "./applicationTabsTimeline"; +import ApplicationSideBar from "./applicationSideBar"; +import ApplicationTabsDocuments from "./applicationTabsDocuments"; +import ApplicationTabsComments from "./applicationTabsComments"; +import ApplicationTabsRegistrationForm from "./applicationTabsRegistrationForm"; + +const ApplicationTabs = (props) => { + let { t } = useTranslation(); + + const router = useRouter(); + const { locale } = router; + + const [showTab, setShowTab] = useState(1); + + let selectTab = (tabID) => { + setShowTab(tabID); + console.log(showTab); + }; + + return ( + <> +
    +

    Contents

    + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + ); +}; + +export default ApplicationTabs; diff --git a/components/dns/applications/applicationTabsComments.js b/components/dns/applications/applicationTabsComments.js new file mode 100644 index 00000000..9f015862 --- /dev/null +++ b/components/dns/applications/applicationTabsComments.js @@ -0,0 +1,30 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useContext } from "react"; +import useTranslation from "next-translate/useTranslation"; + +const ApplicationTabsComments = (props) => { + let { t } = useTranslation(); + + const router = useRouter(); + const { locale } = router; + + return ( + <> +
    +
    +

    + Representations received regarding XXXXXXXX XXXXXXXX + XXXXXXX Order +

    +

    + No comments have been received as yet. Any we receive + will be published on this page. +

    +
    +
    + + ); +}; + +export default ApplicationTabsComments; diff --git a/components/dns/applications/applicationTabsDocuments.js b/components/dns/applications/applicationTabsDocuments.js new file mode 100644 index 00000000..98a9675c --- /dev/null +++ b/components/dns/applications/applicationTabsDocuments.js @@ -0,0 +1,385 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useContext } from "react"; +import useTranslation from "next-translate/useTranslation"; +import { + Accordion, + AccordionItem, + AccordionItemHeading, + AccordionItemButton, + AccordionItemPanel, +} from "react-accessible-accordion"; +// import "react-accessible-accordion/dist/fancy-example.css"; + +const ApplicationTabsDocuments = (props) => { + let { t } = useTranslation(); + + const router = useRouter(); + const { locale } = router; + + return ( + <> +
    +
    +

    + Filter documents by Application stage +

    + + + + + Pre Application (0) + + + + All documents +
    +     +     + + + + Developer's Application (174) + + + + All documents + + + + + Pre Application{" "} + + + + All documents +
    +     +     + + + + Developer's Application + + + + All documents + + + + + + Pre Application{" "} + + + + All documents + + +     +     +     + + + + Acceptance (0) + + + + All documents + + + + + + Examination (0) + + + + All documents + + + + + + Decision (0) + + + + All documents + + + + + + Decided (0) + + + + All documents + + +     +
    +
    +
    +
    +

    + Showing 1 to 10 of 54 entries +

    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    + + Core Documents List v14 + + (Document Size: 715 KB) +
    +
    +
    + Examination > Inquiry Documents + > Administration +
    +
    + Published: 17/05/2021 +
    +
    +
    +
    +
    + + Core Documents List v14 + + (Document Size: 715 KB) +
    +
    +
    + Examination > Inquiry Documents + > Administration +
    +
    + Published: 17/05/2021 +
    +
    +
    + +
    +
    + + Core Documents List v14 + + (Document Size: 715 KB) +
    +
    +
    + Examination > Inquiry Documents + > Administration +
    +
    + Published: 17/05/2021 +
    +
    +
    +
    +
    + + Core Documents List v14 + + (Document Size: 715 KB) +
    +
    +
    + Examination > Inquiry Documents + > Administration +
    +
    + Published: 17/05/2021 +
    +
    +
    +
    +
    + + Core Documents List v14 + + (Document Size: 715 KB) +
    +
    +
    + Examination > Inquiry Documents + > Administration +
    +
    + Published: 17/05/2021 +
    +
    +
    +
    +
    + + Core Documents List v14 + + (Document Size: 715 KB) +
    +
    +
    + Examination > Inquiry Documents + > Administration +
    +
    + Published: 17/05/2021 +
    +
    +
    +
    +
    + + Core Documents List v14 + + (Document Size: 715 KB) +
    +
    +
    + Examination > Inquiry Documents + > Administration +
    +
    + Published: 17/05/2021 +
    +
    +
    +
    +
    + + Core Documents List v14 + + (Document Size: 715 KB) +
    +
    +
    + Examination > Inquiry Documents + > Administration +
    +
    + Published: 17/05/2021 +
    +
    +
    +
    +
    + + Core Documents List v14 + + (Document Size: 715 KB) +
    +
    +
    + Examination > Inquiry Documents + > Administration +
    +
    + Published: 17/05/2021 +
    +
    +
    +
    +
    + + Core Documents List v14 + + (Document Size: 715 KB) +
    +
    +
    + Examination > Inquiry Documents + > Administration +
    +
    + Published: 17/05/2021 +
    +
    +
    +
    +
    +
    +
    +
    +

    + Previous 1{" "} + + 2 + {" "} + + 3 + {" "} + + 4 + {" "} + + 5 + {" "} + Next +

    +
    +
    +
    +
    + + ); +}; + +export default ApplicationTabsDocuments; diff --git a/components/dns/applications/applicationTabsRegistrationForm.js b/components/dns/applications/applicationTabsRegistrationForm.js new file mode 100644 index 00000000..ac8fa71f --- /dev/null +++ b/components/dns/applications/applicationTabsRegistrationForm.js @@ -0,0 +1,23 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useContext } from "react"; +import useTranslation from "next-translate/useTranslation"; + +const ApplicationTabsRegistrationForm = (props) => { + let { t } = useTranslation(); + + const router = useRouter(); + const { locale } = router; + + return ( + <> +
    +
    +

    Registration form

    +
    +
    + + ); +}; + +export default ApplicationTabsRegistrationForm; diff --git a/components/dns/applications/applicationTabsTimeline.js b/components/dns/applications/applicationTabsTimeline.js new file mode 100644 index 00000000..19160f81 --- /dev/null +++ b/components/dns/applications/applicationTabsTimeline.js @@ -0,0 +1,145 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useContext } from "react"; +import useTranslation from "next-translate/useTranslation"; + +const ApplicationTabsTimeLine = (props) => { + let { t } = useTranslation(); + + const router = useRouter(); + const { locale } = router; + + return ( + <> +
    +
    +

    Transport & Works Act

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Integer in malesuada ligula, sit amet placerat enim. + Suspendisse porta velit auctor enim pretium, et interdum + lectus mollis. Fusce et consectetur nisl. Donec viverra + lectus massa, nec tincidunt orci euismod vel. +

    +
    +
    +
    +
    +
    +

    Timeline

    +
    + +

    + The Inspector’s report into the above has now + been formally submitted to the Welsh Government + for consideration. +

    +

    + 05 October 2020 +

    +
    +
    + +

    + The Procedure for this Transport and Works Act + Application was formally determined, on the + 07/08/2020, as an Inquiry.
    +
    + Statements of Case from the Applicant, each + Statutory Objector and each other person or body + who have indicated that they wish to provide + oral evidence at the Inquiry are required by + 18/09/2020. +

    +

    + 05 October 2020 +

    +
    +
    + +

    + The Inspector’s report into the above has now + been formally submitted to the Welsh Government + for consideration. +

    +

    + 05 October 2020 +

    +
    +
    + +

    + The Inspector’s report into the above has now + been formally submitted to the Welsh Government + for consideration. +

    +

    + 05 October 2020 +

    +
    +
    + +

    + The Procedure for this Transport and Works Act + Application was formally determined, on the + 07/08/2020, as an Inquiry.
    +
    + Statements of Case from the Applicant, each + Statutory Objector and each other person or body + who have indicated that they wish to provide + oral evidence at the Inquiry are required by + 18/09/2020. +

    +

    + 05 October 2020 +

    +
    +
    + +

    + The Inspector’s report into the above has now + been formally submitted to the Welsh Government + for consideration. +

    +

    + 05 October 2020 +

    +
    +
    +
    +
    + + ); +}; + +export default ApplicationTabsTimeLine; diff --git a/components/dns/applications/applicationsIntro.js b/components/dns/applications/applicationsIntro.js index e38f235d..d49deb10 100644 --- a/components/dns/applications/applicationsIntro.js +++ b/components/dns/applications/applicationsIntro.js @@ -35,7 +35,18 @@ const ApplicationIntro = (props) => {

    - +
    + +
    ); diff --git a/components/dns/applications/applicationsList.js b/components/dns/applications/applicationsList.js index e830e983..cf98f5d1 100644 --- a/components/dns/applications/applicationsList.js +++ b/components/dns/applications/applicationsList.js @@ -12,31 +12,37 @@ const ApplicationList = (props) => { return ( <>
    -
    - +
    +
    + +
    -

    Showing 1 to 10 of 54 entries

    +
    +

    + Showing 1 to 10 of 54 entries +

    +
    -
    +
    -
    +
    Reference
    @@ -53,19 +59,21 @@ const ApplicationList = (props) => {
    -
    +
    Reference: CAS-00009-W8N6W4
    - - - Application:{" "} - - TWA - Morlais Demonstration Zone - + + + + Application:{" "} + + TWA - Morlais Demonstration Zone + +
    @@ -87,19 +95,21 @@ const ApplicationList = (props) => {
    -
    +
    Reference: CAS-00009-W8N6W4
    - - - Application:{" "} - - TWA - Morlais Demonstration Zone - + + + + Application:{" "} + + TWA - Morlais Demonstration Zone + +
    @@ -121,19 +131,21 @@ const ApplicationList = (props) => {
    -
    +
    Reference: CAS-00009-W8N6W4
    - - - Application:{" "} - - TWA - Morlais Demonstration Zone - + + + + Application:{" "} + + TWA - Morlais Demonstration Zone + +
    @@ -155,19 +167,21 @@ const ApplicationList = (props) => {
    -
    +
    Reference: CAS-00009-W8N6W4
    - - - Application:{" "} - - TWA - Morlais Demonstration Zone - + + + + Application:{" "} + + TWA - Morlais Demonstration Zone + +
    @@ -189,19 +203,21 @@ const ApplicationList = (props) => {
    -
    +
    Reference: CAS-00009-W8N6W4
    - - - Application:{" "} - - TWA - Morlais Demonstration Zone - + + + + Application:{" "} + + TWA - Morlais Demonstration Zone + +
    @@ -223,19 +239,21 @@ const ApplicationList = (props) => {
    -
    +
    Reference: CAS-00009-W8N6W4
    - - - Application:{" "} - - TWA - Morlais Demonstration Zone - + + + + Application:{" "} + + TWA - Morlais Demonstration Zone + +
    @@ -257,19 +275,21 @@ const ApplicationList = (props) => {
    -
    +
    Reference: CAS-00009-W8N6W4
    - - - Application:{" "} - - TWA - Morlais Demonstration Zone - + + + + Application:{" "} + + TWA - Morlais Demonstration Zone + +
    @@ -291,19 +311,21 @@ const ApplicationList = (props) => {
    -
    +
    Reference: CAS-00009-W8N6W4
    - - - Application:{" "} - - TWA - Morlais Demonstration Zone - + + + + Application:{" "} + + TWA - Morlais Demonstration Zone + +
    @@ -328,22 +350,24 @@ const ApplicationList = (props) => {
    -

    - Previous 1{" "} - - 2 - {" "} - - 3 - {" "} - - 4 - {" "} - - 5 - {" "} - Next -

    +
    +

    + Previous 1{" "} + + 2 + {" "} + + 3 + {" "} + + 4 + {" "} + + 5 + {" "} + Next +

    +
    ); diff --git a/components/dns/homepage/applicationsForComment.js b/components/dns/homepage/applicationsForComment.js index 7385adc2..c5873591 100644 --- a/components/dns/homepage/applicationsForComment.js +++ b/components/dns/homepage/applicationsForComment.js @@ -13,9 +13,11 @@ const ApplicationsForComment = (props) => { diff --git a/components/dns/homepage/dnsLinks.js b/components/dns/homepage/dnsLinks.js index e2712b4e..6312b375 100644 --- a/components/dns/homepage/dnsLinks.js +++ b/components/dns/homepage/dnsLinks.js @@ -57,12 +57,12 @@ const DNSLinks = (props) => {

  • - - Contact us{" "} - + + + Contact us{" "} + + +

    How to get in touch with The Planning Inspectorate. diff --git a/components/dns/homepage/latestApplications.js b/components/dns/homepage/latestApplications.js index e17261ec..b031da27 100644 --- a/components/dns/homepage/latestApplications.js +++ b/components/dns/homepage/latestApplications.js @@ -13,18 +13,30 @@ const LatestApplications = (props) => {

    diff --git a/components/header.js b/components/header.js index eb9ddf8d..d45e79c5 100644 --- a/components/header.js +++ b/components/header.js @@ -17,6 +17,7 @@ const Header = (props) => { "/dns/help", "/dns/contact-us", "/dns/applications", + "/dns/application-view", ]; const hasContactLink = [ "/dns", @@ -24,6 +25,7 @@ const Header = (props) => { "/dns/help", "/dns/contact-us", "/dns/applications", + "/dns/application-view", ]; return ( diff --git a/components/search/searchresults.js b/components/search/searchresults.js index 5ace7173..ebbfb932 100644 --- a/components/search/searchresults.js +++ b/components/search/searchresults.js @@ -14,7 +14,7 @@ const SearchResults = (props) => { var resultsArr = searchResultsObj.value || [{}]; const resultRow = Object.keys(resultsArr).map((key, index) => {
    -
    +
    @@ -66,7 +66,7 @@ const SearchResults = (props) => {

    -
    +
    {t("search:searchresults-case-reference-label")}
    @@ -89,7 +89,7 @@ const SearchResults = (props) => { {resultsArr.map((item, key) => { return (
    -
    +
    { diff --git a/package.json b/package.json index 2445837c..74e63f1d 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "next-translate": "^1.0.7", "pm2": "^5.1.0", "react": "17.0.2", + "react-accessible-accordion": "^3.3.5", "react-cookie-consent": "^6.2.4", "react-datepicker": "^4.1.1", "react-dom": "17.0.2", diff --git a/pages/_document.js b/pages/_document.js index 237f4716..8338c6fe 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -22,7 +22,7 @@ class MyDocument extends Document { return ( - + {!process.browser && (