initial commit for welsh government planning appeals application
This commit is contained in:
@@ -0,0 +1,922 @@
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function AdvancedSearch(props) {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const [query, setQuery] = useState("");
|
||||
const handleParam = (setValue) => (e) => setValue(e.target.value);
|
||||
|
||||
const advancedSearch = (event) => {
|
||||
event.preventDefault();
|
||||
console.log(query);
|
||||
// /searchresults
|
||||
|
||||
router.push({
|
||||
pathname: "/searchresults",
|
||||
query: { q: query },
|
||||
});
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={advancedSearch}>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="card" id="searchforcase-card">
|
||||
<div className="card-body">
|
||||
<div className="govuk-body-m ">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
|
||||
<h1 className="govuk-fieldset__heading govuk-heading-m">
|
||||
{t("search:search-title-label")}
|
||||
</h1>
|
||||
</legend>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-county"
|
||||
>
|
||||
{t("search:casereference-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-county"
|
||||
name="address-county"
|
||||
type="text"
|
||||
onChange={handleParam(setQuery)}
|
||||
/>
|
||||
</div>
|
||||
<fieldset className="govuk-fieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
|
||||
<h3 className="govuk-heading-m">
|
||||
{t(
|
||||
"search:sitelocation-legend"
|
||||
)}
|
||||
</h3>
|
||||
</legend>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-line-1"
|
||||
>
|
||||
{t(
|
||||
"search:address-line-one-label"
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input"
|
||||
id="address-line-1"
|
||||
name="address-line-1"
|
||||
type="text"
|
||||
autoComplete="address-line1"
|
||||
onChange={handleParam(setQuery)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-town"
|
||||
>
|
||||
{t("search:town-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-town"
|
||||
name="address-town"
|
||||
type="text"
|
||||
autoComplete="address-level2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-county"
|
||||
>
|
||||
{t("search:county-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-county"
|
||||
name="address-county"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-postcode"
|
||||
>
|
||||
{t("search:postcode-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-postcode"
|
||||
>
|
||||
{t("search:lpa-label")}{" "}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-postcode"
|
||||
>
|
||||
{t("search:lpa-reference-label")}{" "}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="sort"
|
||||
>
|
||||
{t("search:case-type-label")}{" "}
|
||||
</label>
|
||||
<select
|
||||
className="govuk-select"
|
||||
id="sort"
|
||||
name="sort"
|
||||
>
|
||||
<option value="">
|
||||
{t("search:case-type-option-1")}
|
||||
</option>
|
||||
<option value="Any/All">
|
||||
{t("search:case-type-option-2")}
|
||||
</option>
|
||||
<option value="Advertisement Appeals">
|
||||
{t("search:case-type-option-3")}
|
||||
</option>
|
||||
<option value="Called in Planning Applications">
|
||||
{t("search:case-type-option-4")}
|
||||
</option>
|
||||
<option value="Discontinuance Notice Appeals">
|
||||
{t("search:case-type-option-5")}
|
||||
</option>
|
||||
<option value="Enforcement Listed Building and Conservation Area Appeals">
|
||||
{t("search:case-type-option-6")}
|
||||
</option>
|
||||
<option value="Enforcement Appeals">
|
||||
{t("search:case-type-option-7")}
|
||||
</option>
|
||||
<option value="Householder Appeals">
|
||||
{t("search:case-type-option-8")}
|
||||
</option>
|
||||
<option value="Lawful Development Certificate Appeals">
|
||||
{t("search:case-type-option-9")}
|
||||
</option>
|
||||
<option value="Planning Appeals">
|
||||
{t(
|
||||
"search:case-type-option-10"
|
||||
)}
|
||||
</option>
|
||||
<option value="Planning Obligation Appeals">
|
||||
{t(
|
||||
"search:case-type-option-11"
|
||||
)}
|
||||
</option>
|
||||
<option value="Planning Listed Building and Conservation Area Appeals">
|
||||
{t(
|
||||
"search:case-type-option-12"
|
||||
)}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="card" id="advancedsearch-card">
|
||||
<div className="card-body">
|
||||
<div className="govuk-body-m ">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
|
||||
<h3 className="govuk-heading-m">
|
||||
{t(
|
||||
"search:advanced-search-title-label"
|
||||
)}
|
||||
</h3>
|
||||
</legend>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-line-1"
|
||||
>
|
||||
{t("search:applicant-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input"
|
||||
id="address-line-1"
|
||||
name="address-line-1"
|
||||
type="text"
|
||||
autoComplete="address-line1"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="address-town"
|
||||
>
|
||||
{t("search:other-party-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-town"
|
||||
name="address-town"
|
||||
type="text"
|
||||
autoComplete="address-level2"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t(
|
||||
"search:hearing-date-label"
|
||||
)}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t(
|
||||
"search:site-visit-date-label"
|
||||
)}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t(
|
||||
"search:callin-date-label"
|
||||
)}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t("search:date-received")}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t(
|
||||
"search:start-date-label"
|
||||
)}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group form-inline-label">
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby="passport-issued-hint"
|
||||
>
|
||||
{" "}
|
||||
<div className="inlineFieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-!-width-one-third">
|
||||
{t(
|
||||
"search:decision-date-label"
|
||||
)}
|
||||
</legend>
|
||||
<div
|
||||
className="govuk-date-input"
|
||||
id="passport-issued"
|
||||
>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-day"
|
||||
>
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-day"
|
||||
name="passport-issued-day"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-month"
|
||||
>
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-2"
|
||||
id="passport-issued-month"
|
||||
name="passport-issued-month"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label govuk-date-input__label"
|
||||
htmlFor="passport-issued-year"
|
||||
>
|
||||
Year
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-date-input__input govuk-input--width-4"
|
||||
id="passport-issued-year"
|
||||
name="passport-issued-year"
|
||||
type="text"
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-date-input__item">
|
||||
<div className="govuk-form-group"></div>
|
||||
|
||||
<div className="govuk-checkboxes__item">
|
||||
<input
|
||||
className="govuk-checkboxes__input"
|
||||
id="waste-3"
|
||||
name="waste"
|
||||
type="checkbox"
|
||||
value="farm"
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-checkboxes__label no__right_padding"
|
||||
htmlFor="waste-3"
|
||||
>
|
||||
{t(
|
||||
"search:date-margin-label"
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="govuk-form-group ">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="sort"
|
||||
>
|
||||
{t("search:procedure-type-label")}
|
||||
</label>
|
||||
<select
|
||||
className="govuk-select"
|
||||
id="sort"
|
||||
name="sort"
|
||||
>
|
||||
<option value="">
|
||||
{t(
|
||||
"search:procedure-type-option-1"
|
||||
)}
|
||||
</option>
|
||||
<option value="Hearing">
|
||||
{t(
|
||||
"search:procedure-type-option-2"
|
||||
)}
|
||||
</option>
|
||||
<option value="Inquiry">
|
||||
{t(
|
||||
"search:procedure-type-option-3"
|
||||
)}
|
||||
</option>
|
||||
<option value="Written representations">
|
||||
{t(
|
||||
"search:procedure-type-option-4"
|
||||
)}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor="sort"
|
||||
>
|
||||
{t("search:status-label")}
|
||||
</label>
|
||||
<select
|
||||
className="govuk-select"
|
||||
id="sort"
|
||||
name="sort"
|
||||
>
|
||||
<option value="">
|
||||
{t("search:status-option-1")}
|
||||
</option>
|
||||
<option value="Any">
|
||||
{t("search:status-option-2")}
|
||||
</option>
|
||||
<option value="In progress">
|
||||
{t("search:status-option-3")}
|
||||
</option>
|
||||
<option value="Complete">
|
||||
{t("search:status-option-4")}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-form-group">
|
||||
<button
|
||||
type="submit"
|
||||
name="search"
|
||||
className="govuk-button"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function SearchForCase() {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
return (
|
||||
<div className="card" id="searchforcase-card">
|
||||
<div className="card-body">
|
||||
<div className="govuk-body-m ">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
|
||||
<h1 className="govuk-fieldset__heading govuk-heading-m">
|
||||
{t("search:search-title-label")}
|
||||
</h1>
|
||||
</legend>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-county">
|
||||
{t("search:casereference-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-county"
|
||||
name="address-county"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<fieldset className="govuk-fieldset">
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
|
||||
<h3 className="govuk-heading-m">
|
||||
{t("search:sitelocation-legend")}
|
||||
</h3>
|
||||
</legend>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-line-1">
|
||||
{t("search:address-line-one-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input"
|
||||
id="address-line-1"
|
||||
name="address-line-1"
|
||||
type="text"
|
||||
autoComplete="address-line1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-town">
|
||||
{t("search:town-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-town"
|
||||
name="address-town"
|
||||
type="text"
|
||||
autoComplete="address-level2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-county">
|
||||
{t("search:county-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-!-width-two-thirds"
|
||||
id="address-county"
|
||||
name="address-county"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-postcode">
|
||||
{t("search:postcode-label")}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-postcode">
|
||||
{t("search:lpa-label")}{" "}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="address-postcode">
|
||||
{t("search:lpa-reference-label")}{" "}
|
||||
</label>
|
||||
<input
|
||||
className="govuk-input govuk-input--width-10"
|
||||
id="address-postcode"
|
||||
name="address-postcode"
|
||||
type="text"
|
||||
autoComplete="postal-code"
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label" htmlFor="sort">
|
||||
{t("search:case-type-label")}{" "}
|
||||
</label>
|
||||
<select className="govuk-select" id="sort" name="sort">
|
||||
<option value="">
|
||||
{t("search:case-type-option-1")}
|
||||
</option>
|
||||
<option value="Any/All">
|
||||
{t("search:case-type-option-2")}
|
||||
</option>
|
||||
<option value="Advertisement Appeals">
|
||||
{t("search:case-type-option-3")}
|
||||
</option>
|
||||
<option value="Called in Planning Applications">
|
||||
{t("search:case-type-option-4")}
|
||||
</option>
|
||||
<option value="Discontinuance Notice Appeals">
|
||||
{t("search:case-type-option-5")}
|
||||
</option>
|
||||
<option value="Enforcement Listed Building and Conservation Area Appeals">
|
||||
{t("search:case-type-option-6")}
|
||||
</option>
|
||||
<option value="Enforcement Appeals">
|
||||
{t("search:case-type-option-7")}
|
||||
</option>
|
||||
<option value="Householder Appeals">
|
||||
{t("search:case-type-option-8")}
|
||||
</option>
|
||||
<option value="Lawful Development Certificate Appeals">
|
||||
{t("search:case-type-option-9")}
|
||||
</option>
|
||||
<option value="Planning Appeals">
|
||||
{t("search:case-type-option-10")}
|
||||
</option>
|
||||
<option value="Planning Obligation Appeals">
|
||||
{t("search:case-type-option-11")}
|
||||
</option>
|
||||
<option value="Planning Listed Building and Conservation Area Appeals">
|
||||
{t("search:case-type-option-12")}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function SearchResults(props) {
|
||||
const { searchString, searchResultsObj } = props;
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
var resultsArr = props.searchResultsObj.searchResultsObj.value || [{}];
|
||||
const resultRow = Object.keys(resultsArr).map((key, index) => {
|
||||
<div className="govuk-summary-list__row">
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
|
||||
<Link href="/case">
|
||||
<a>
|
||||
<span className="results-visually-hidden">
|
||||
wwwwwwwCase Reference:
|
||||
</span>
|
||||
{resultsArr[key].title}
|
||||
</a>
|
||||
</Link>
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Site Address: </span>
|
||||
23 Martineau Lane
|
||||
<br /> HASTINGS
|
||||
<br />
|
||||
TN35 5DS
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Appellant/Applicant:
|
||||
</span>
|
||||
Mr J Pocknell
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Authority:</span>
|
||||
Hastings Borough Council{" "}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Case Type:</span>
|
||||
Planning (W){" "}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Status:</span>
|
||||
In Progress
|
||||
</dd>
|
||||
</div>;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
|
||||
{t("search:searchresults-title-label")}
|
||||
</h1>
|
||||
<p className="govuk-body">
|
||||
{t("search:searchresults-count-label", {
|
||||
count: props.searchResultsObj.searchResultsObj[
|
||||
"@odata.count"
|
||||
].toString(),
|
||||
})}
|
||||
. You searched for <em>"{searchString}"</em>
|
||||
</p>
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
|
||||
<div className="govuk-summary-list__row results-headings">
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14 results_wider govuk-!-padding-left-2">
|
||||
{t("search:searchresults-case-reference-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-site-address-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-applicant-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-authority-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-case-type-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-status-label")}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
{resultsArr.map((item, key) => {
|
||||
return (
|
||||
<div className="govuk-summary-list__row" key={key}>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
|
||||
<Link href="/case">
|
||||
<a>
|
||||
<span className="results-visually-hidden">
|
||||
Case Reference:
|
||||
</span>
|
||||
{item.title}
|
||||
</a>
|
||||
</Link>
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Site Address:{" "}
|
||||
</span>
|
||||
23 Martineau Lane
|
||||
<br /> HASTINGS
|
||||
<br />
|
||||
TN35 5DS
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Appellant/Applicant:
|
||||
</span>
|
||||
Mr J Pocknell
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Authority:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"_customerid_value@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Case Type:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Status:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"statuscode@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function ViewAllResults(props) {
|
||||
const { searchString, searchResultsObj } = props;
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
var resultsArr = props.searchResultsObj.searchResultsObj.value || [{}];
|
||||
const resultRow = Object.keys(resultsArr).map((key, index) => {
|
||||
<div className="govuk-summary-list__row">
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
|
||||
<Link href="/case">
|
||||
<a>
|
||||
<span className="results-visually-hidden">
|
||||
Case Reference:
|
||||
</span>
|
||||
{resultsArr[key].title}
|
||||
</a>
|
||||
</Link>
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Site Address: </span>
|
||||
23 Martineau Lane
|
||||
<br /> HASTINGS
|
||||
<br />
|
||||
TN35 5DS
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Appellant/Applicant:
|
||||
</span>
|
||||
Mr J Pocknell
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Authority:</span>
|
||||
Hastings Borough Council{" "}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Case Type:</span>
|
||||
Planning (W){" "}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">Status:</span>
|
||||
In Progress
|
||||
</dd>
|
||||
</div>;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
|
||||
Your cases
|
||||
</h1>
|
||||
|
||||
<dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
|
||||
<div className="govuk-summary-list__row results-headings">
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14 results_wider govuk-!-padding-left-2">
|
||||
{t("search:searchresults-case-reference-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-site-address-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-applicant-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-authority-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-case-type-label")}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-14">
|
||||
{t("search:searchresults-status-label")}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
{resultsArr.map((item, key) => {
|
||||
return (
|
||||
<div className="govuk-summary-list__row" key={key}>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
|
||||
<Link href="/case">
|
||||
<a>
|
||||
<span className="results-visually-hidden">
|
||||
Case Reference:
|
||||
</span>
|
||||
{item.title}
|
||||
</a>
|
||||
</Link>
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Site Address:{" "}
|
||||
</span>
|
||||
23 Martineau Lane
|
||||
<br /> HASTINGS
|
||||
<br />
|
||||
TN35 5DS
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Appellant/Applicant:
|
||||
</span>
|
||||
Mr J Pocknell
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Authority:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"_customerid_value@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Case Type:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__value govuk-!-font-size-14">
|
||||
<span className="results-visually-hidden">
|
||||
Status:
|
||||
</span>
|
||||
{
|
||||
item[
|
||||
"statuscode@OData.Community.Display.V1.FormattedValue"
|
||||
]
|
||||
}
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user