Merged PR 397: added autocomplete search
added autocomplete search Related work items: #5247
This commit is contained in:
Robert Bond
@@ -1,12 +1,89 @@
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import AutoSuggest from "react-autosuggest";
|
||||
|
||||
const dnsSites = [
|
||||
{ id: 1, name: "30MW Energy Plant - Wrexham" },
|
||||
{ id: 1, name: "Abertillery Wind Farm" },
|
||||
{ id: 1, name: "Alaw Mon Solar Farm" },
|
||||
{ id: 1, name: "Alwen Forest - Wind" },
|
||||
{ id: 1, name: "Blackberry Lane Solar Park" },
|
||||
{ id: 1, name: "Bretton Hall Solar Farm" },
|
||||
{ id: 1, name: "Brynllewelyn Farm - Renewable Energy Project" },
|
||||
{ id: 1, name: "Brynrhyd Solar Farm" },
|
||||
{ id: 1, name: "Brynwell Farm Renewable Energy Hub" },
|
||||
{ id: 1, name: "Buttington Quarry - ERF" },
|
||||
{ id: 1, name: "Coed Darcy - STOR" },
|
||||
{ id: 1, name: "Coity Road - STOR" },
|
||||
{ id: 1, name: "Craig Y Perchyll Solar" },
|
||||
{ id: 1, name: "Egnedol - Sustainable Energy" },
|
||||
{ id: 1, name: "Elwy Solar Energy" },
|
||||
{ id: 1, name: "Erebus - Floating Offshore Wind Demonstration Project" },
|
||||
{ id: 1, name: "Felindre Road - STOR" },
|
||||
{ id: 1, name: "Gaerwen Wind Farm" },
|
||||
{ id: 1, name: "Garn Fach Wind Farm" },
|
||||
{ id: 1, name: "Holyhead Harbour Revision Order" },
|
||||
{ id: 1, name: "Holyhead Marina Harbour Revision Order" },
|
||||
{ id: 1, name: "Holyhead Waterfront Regeneration Scheme HRO" },
|
||||
{ id: 1, name: "Legacy Substation Gas Peaking Plant" },
|
||||
{ id: 1, name: "Llantarnam - SToR" },
|
||||
{ id: 1, name: "Llanwern - Solar" },
|
||||
{ id: 1, name: "Lluest y Gwynt Wind Farm" },
|
||||
{ id: 1, name: "Llynfi Energy Recovery Facility" },
|
||||
{ id: 1, name: "Manmoel Wind Farm" },
|
||||
{ id: 1, name: "Môn Solar Farm" },
|
||||
{ id: 1, name: "Mor Hafren: Energy Recovery Facility" },
|
||||
{ id: 1, name: "Mynydd Carn-y-Cefn Wind Farm" },
|
||||
{ id: 1, name: "Mynydd Llanhilleth Wind Farm" },
|
||||
{ id: 1, name: "Pancross & Oaklands Solar Farm" },
|
||||
{ id: 1, name: "Parc Dyffryn Solar Park" },
|
||||
{ id: 1, name: "Parc Solar Traffwll" },
|
||||
{ id: 1, name: "Pen March Wind Farm" },
|
||||
{ id: 1, name: "Pen-y-Fan - Power Plant" },
|
||||
{ id: 1, name: "Pencaerlan Solar Farm" },
|
||||
{ id: 1, name: "Penderi Solar Farm" },
|
||||
{ id: 1, name: "Penpergwm Solar Farm" },
|
||||
{ id: 1, name: "Pentre Bach Solar Farm" },
|
||||
{ id: 1, name: "Plas Power Estate Solar Farm" },
|
||||
{ id: 1, name: "Project Valorous" },
|
||||
{ id: 1, name: "Rhoscrowther Wind Farm" },
|
||||
{ id: 1, name: "Rush Wall Solar Park Ltd" },
|
||||
{ id: 1, name: "Sudbrook - Peaking Gas" },
|
||||
{ id: 1, name: "TWA - Morlais Demonstration Zone" },
|
||||
{ id: 1, name: "Twyn Hywel Energy Park" },
|
||||
{ id: 1, name: "Tycroes Solar" },
|
||||
{ id: 1, name: "Upper Ogmore - Wind Turbines" },
|
||||
{ id: 1, name: "Valero - Cogeneration Facility" },
|
||||
{ id: 1, name: "Vattenfall - Renewable Energy" },
|
||||
{ id: 1, name: "Wauntysswg - Solar" },
|
||||
{ id: 1, name: "Wentlooge - renewable energy hub" },
|
||||
{ id: 1, name: "Y Bryn Wind Farm" },
|
||||
];
|
||||
|
||||
const lowerCasedCompanies = dnsSites.map((company) => {
|
||||
return {
|
||||
id: company.id,
|
||||
name: company.name,
|
||||
};
|
||||
});
|
||||
|
||||
const TitleContent = (props) => {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const [value, setValue] = useState("");
|
||||
const [suggestions, setSuggestions] = useState([]);
|
||||
|
||||
function getSuggestions(value) {
|
||||
return lowerCasedCompanies.filter((company) =>
|
||||
company.name.toLowerCase().includes(value.trim().toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="govuk-panel govuk-grid-column-two-thirds govuk-panel--header">
|
||||
<h1 className="govuk-panel__title">
|
||||
@@ -21,20 +98,37 @@ const TitleContent = (props) => {
|
||||
Planning Inspectorate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="govuk-form-group govuk-!-margin-bottom-0">
|
||||
<input
|
||||
className="govuk-input govuk-!-width-one-half"
|
||||
id="one-third"
|
||||
name="one-third"
|
||||
type="text"
|
||||
placeholder="Search application name"
|
||||
<div className="govuk-form-group govuk-!-margin-bottom-0 flex-container">
|
||||
<AutoSuggest
|
||||
suggestions={suggestions}
|
||||
onSuggestionsClearRequested={() => setSuggestions([])}
|
||||
onSuggestionsFetchRequested={({ value }) => {
|
||||
console.log(value);
|
||||
setValue(value);
|
||||
setSuggestions(getSuggestions(value));
|
||||
}}
|
||||
onSuggestionSelected={(_, { suggestionValue }) =>
|
||||
console.log("Selected: " + suggestionValue)
|
||||
}
|
||||
getSuggestionValue={(suggestion) => suggestion.name}
|
||||
renderSuggestion={(suggestion) => (
|
||||
<span>{suggestion.name}</span>
|
||||
)}
|
||||
inputProps={{
|
||||
className: "govuk-input govuk-!-font-size-16",
|
||||
placeholder: "Search application name",
|
||||
value: value,
|
||||
onChange: (_, { newValue, method }) => {
|
||||
setValue(newValue);
|
||||
},
|
||||
}}
|
||||
highlightFirstSuggestion={true}
|
||||
/>
|
||||
<button
|
||||
className="govuk-button govuk-!-margin-bottom-0"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
<Link href="/dns/application-view">
|
||||
<a className="govuk-button govuk-!-margin-bottom-0 govuk-!-margin-left-2">
|
||||
Go
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
+3
-2
@@ -30,6 +30,7 @@
|
||||
"pm2": "^5.1.0",
|
||||
"react": "17.0.2",
|
||||
"react-accessible-accordion": "^3.3.5",
|
||||
"react-autosuggest": "^10.1.0",
|
||||
"react-cookie-consent": "^6.2.4",
|
||||
"react-datepicker": "^4.1.1",
|
||||
"react-dom": "17.0.2",
|
||||
@@ -40,7 +41,7 @@
|
||||
"redux-form": "^8.3.7",
|
||||
"redux-persist": "^6.0.0",
|
||||
"redux-thunk": "^2.3.0",
|
||||
"sass": "^1.35.1",
|
||||
"sass": "1.32",
|
||||
"sass-loader": "^12.1.0",
|
||||
"swr": "^0.5.6",
|
||||
"webpack": "^5.40.0",
|
||||
@@ -54,4 +55,4 @@
|
||||
"eslint-config-next": "^11.0.1",
|
||||
"prettier": "2.3.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
+41
-7
@@ -1,11 +1,45 @@
|
||||
function Error({ statusCode }) {
|
||||
import Link from "next/link";
|
||||
import Head from "next/head";
|
||||
import Header from "../components/header";
|
||||
import Banner from "../components/banner";
|
||||
import CookieBanner from "../components/cookieBanner";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import Footer from "../components/footer";
|
||||
|
||||
function Error({ statusCode }, props) {
|
||||
let { t, lang } = useTranslation();
|
||||
const { footerLinks, pages } = props;
|
||||
|
||||
return (
|
||||
<p>
|
||||
An error....
|
||||
{statusCode
|
||||
? `An error ${statusCode} occurred on server`
|
||||
: "An error occurred on client"}
|
||||
</p>
|
||||
<div>
|
||||
<Head>
|
||||
<title>
|
||||
{t("case:page-title")} - {t("common:service-name")}
|
||||
</title>
|
||||
</Head>
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header courseName={t("common:service-name")} />
|
||||
<div className="govuk-width-container govuk-!-padding-bottom-9">
|
||||
<main className="govuk-main-wrapper govuk-!-padding-top-9 govuk-!-padding-bottom-9">
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds ">
|
||||
<h1>Error</h1>
|
||||
<p className="govuk-body">
|
||||
{statusCode
|
||||
? `An error ${statusCode} occurred on server`
|
||||
: "An error occurred on the client"}
|
||||
</p>
|
||||
<Link href="/">
|
||||
<a>Go back home</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
+10
-10
@@ -45,7 +45,7 @@ const Home = (props) => {
|
||||
We are located in The Welsh Government
|
||||
Building, Cathays Park in Cardiff
|
||||
</p>
|
||||
<p>
|
||||
<p className="govuk-body">
|
||||
{" "}
|
||||
The Planning Inspectorate
|
||||
<br />
|
||||
@@ -57,7 +57,7 @@ const Home = (props) => {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-row">
|
||||
<div className="govuk-row govuk-!-margin-bottom-6">
|
||||
<div className="map-responsive">
|
||||
<iframe
|
||||
width="600"
|
||||
@@ -72,13 +72,13 @@ const Home = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-row">
|
||||
<p>
|
||||
<p className="govuk-body">
|
||||
{" "}
|
||||
If you are contacting us regarding a Development
|
||||
of National Significance, please use the
|
||||
following details:
|
||||
</p>
|
||||
<p>
|
||||
<p className="govuk-body">
|
||||
Tel: <a href="tel:03034445940">03034 445 940</a>
|
||||
<br />
|
||||
E-mail:{" "}
|
||||
@@ -91,12 +91,12 @@ const Home = (props) => {
|
||||
@PINSgov
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<p className="govuk-body">
|
||||
Further information about contacting the
|
||||
Planning Inspectorate customer services can be
|
||||
viewed on GOV.Wales.
|
||||
</p>
|
||||
<p>
|
||||
<p className="govuk-body">
|
||||
The Planning Inspectorate gives advice about
|
||||
applying for a Development of National
|
||||
Significance or making representations about an
|
||||
@@ -110,7 +110,7 @@ const Home = (props) => {
|
||||
the information any longer than is necessary.
|
||||
See our Privacy notice on GOV.UK.
|
||||
</p>
|
||||
<p>
|
||||
<p className="govuk-body">
|
||||
You should note that we have a policy commitment
|
||||
to openness and transparency and you should not
|
||||
provide us with confidential or commercial
|
||||
@@ -118,7 +118,7 @@ const Home = (props) => {
|
||||
the public domain.
|
||||
</p>
|
||||
<h3>Feedback and complaints</h3>
|
||||
<p>
|
||||
<p className="govuk-body">
|
||||
The Planning Inspectorate aims to provide the
|
||||
best possible service for its customers. We try
|
||||
hard to ensure that everyone is satisfied with
|
||||
@@ -130,11 +130,11 @@ const Home = (props) => {
|
||||
contact details are on GOV.Wales.
|
||||
</p>
|
||||
<h3>Press and media</h3>
|
||||
<p>
|
||||
<p className="govuk-body">
|
||||
If you are a journalist please contact our press
|
||||
office directly:{" "}
|
||||
</p>
|
||||
<p>
|
||||
<p className="govuk-body">
|
||||
Telephone:{" "}
|
||||
<a href="tel:03034445004">0303 444 5004</a> or{" "}
|
||||
<a href="tel:03034445005">0303 444 5005</a>{" "}
|
||||
|
||||
+19
-15
@@ -20,23 +20,27 @@ const Home = (props) => {
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Developments of National Significance</title>
|
||||
</Head>
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header serviceName="Developments of National Significance" />
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<Main />
|
||||
try {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Developments of National Significance</title>
|
||||
</Head>
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header serviceName="Developments of National Significance" />
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<Main />
|
||||
</div>
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
return <h1>oooops</h1>;
|
||||
}
|
||||
};
|
||||
|
||||
export default Home; //connect(mapStateToProps)(Home);
|
||||
|
||||
+1
-1
@@ -103,7 +103,7 @@ const makeStore = ({ isServer }) => {
|
||||
const storage = require("redux-persist/lib/storage").default;
|
||||
|
||||
const persistConfig = {
|
||||
key: "acp",
|
||||
key: "acp_" + Math.floor(100000 + Math.random() * 900000),
|
||||
whitelist: [
|
||||
"currentView",
|
||||
"search",
|
||||
|
||||
@@ -1039,3 +1039,71 @@ ul#sharePageLinks.active {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// dns autocomplete search
|
||||
|
||||
.react-autosuggest__container {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.react-autosuggest__input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 10px;
|
||||
border: 1px solid lightgray;
|
||||
border-radius: 4px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.react-autosuggest__input--focused {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.react-autosuggest__input--open {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.react-autosuggest__suggestions-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.react-autosuggest__suggestions-container--open {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
width: auto;
|
||||
min-width: 160px;
|
||||
margin-left: 1px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 0 5px 5px;
|
||||
z-index: 20;
|
||||
-webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
|
||||
box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid black;
|
||||
border-top: none;
|
||||
font-size: 0.875rem;
|
||||
max-height: 400px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.react-autosuggest__suggestions-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.react-autosuggest__suggestion {
|
||||
cursor: pointer;
|
||||
padding: 10px 20px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #c3c3c3;
|
||||
}
|
||||
|
||||
.react-autosuggest__suggestion--highlighted {
|
||||
background-color: #c3c3c3;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user