robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added default list views for myportal linked cases

Browse Source
This commit is contained in:
robbond
2021-07-14 16:57:18 +01:00
parent d3beb33a41
commit 42a9d51ed2
21 changed files with 648 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/breadcrumbs.js
+43
View File
@@ -8,6 +8,7 @@ const Breadcrumbs = (props) => {
const {
courseContent,
slug,
formTitle,
activitysub,
activity,
applicant_id,
@@ -110,6 +111,45 @@ const Breadcrumbs = (props) => {
) : (
""
)}
{router.pathname == "/viewall" ? (
<>
<li className="govuk-breadcrumbs__list-item">
<Link href="/myportal">
<a className="govuk-breadcrumbs__link">
My Portal
</a>
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
Your cases
</li>
</>
) : (
""
)}
{router.pathname == "/case" ? (
<>
<li className="govuk-breadcrumbs__list-item">
<Link href="/myportal">
<a className="govuk-breadcrumbs__link">
My Portal
</a>
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
<Link href="/viewall">
<a className="govuk-breadcrumbs__link">
Your cases{" "}
</a>
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
Case Reference: CAS-00010-J9W6L5
</li>
</>
) : (
""
)}
{!_.isEmpty(slug) ? (
<>
<li className="govuk-breadcrumbs__list-item">
@@ -126,6 +166,9 @@ const Breadcrumbs = (props) => {
</a>
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
{props.formTitle}
</li>
</>
) : (
""
components/case/summary.js
+1 -1
View File
@@ -12,7 +12,7 @@ export default function CaseSummary() {
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
Reference: APP/B1415/W/20/3271702
Reference: CAS-00010-J9W6L5
</h1>
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
components/elements/index.js
+17 -34
View File
@@ -6,7 +6,7 @@ export function Textfield(props) {
return (
<div className="govuk-form-group">
<label className="govuk-label govuk-label--m " htmlFor="event-name">
<label className="govuk-label " htmlFor="event-name">
{props.label}
</label>
<Field
@@ -26,14 +26,14 @@ export function MultiLinefield(props) {
return (
<div className="govuk-form-group">
<h1 className="govuk-label-wrapper">
<label
className="govuk-label govuk-label--l"
htmlFor="more-detail"
>
<label className="govuk-label" htmlFor="more-detail">
{props.label}
</label>
</h1>
<div id="more-detail-hint" className="govuk-hint">
<div
id="more-detail-hint"
className="govuk-hint govuk-!-font-size-14"
>
Do not include personal or financial information, like your
National Insurance number or credit card details.
</div>
@@ -60,19 +60,16 @@ export function DateField(props) {
role="group"
aria-describedby="dob-hint"
>
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
<label className="govuk-fieldset__heading">
{props.label}
</label>
</legend>
<div id="dob-hint" className="govuk-hint">
For example, 31 3 1980
</div>
<div className="govuk-date-input" id="dob">
<div className="govuk-date-input__item">
<div className="govuk-form-group">
<label
className="govuk-label govuk-date-input__label"
className="govuk-label govuk-date-input__label govuk-!-font-size-14"
htmlFor={props.name + "-day"}
>
Day
@@ -91,7 +88,7 @@ export function DateField(props) {
<div className="govuk-date-input__item">
<div className="govuk-form-group">
<label
className="govuk-label govuk-date-input__label"
className="govuk-label govuk-date-input__label govuk-!-font-size-14"
htmlFor={props.name + "-month"}
>
Month
@@ -110,7 +107,7 @@ export function DateField(props) {
<div className="govuk-date-input__item">
<div className="govuk-form-group">
<label
className="govuk-label govuk-date-input__label"
className="govuk-label govuk-date-input__label govuk-!-font-size-14"
htmlFor={props.name + "-year"}
>
Year
@@ -139,15 +136,15 @@ export function YesNofield(props) {
<div className="govuk-form-group">
<fieldset
className="govuk-fieldset"
aria-describedby="changed-name-hint"
aria-describedby={props.name + "-hint"}
>
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s">
<label className="govuk-fieldset__heading">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
<label className="govuk-fieldset__heading govuk-body-m">
{props.label}
</label>
</legend>
<div className="govuk-radios govuk-radios--inline">
<div className="govuk-radios govuk-radios--inline govuk-radios--small">
{Object.keys(yesNo).map((key, index) => (
<div
className="govuk-radios__item"
@@ -236,16 +233,9 @@ export function NumericField(props) {
return (
<div className="govuk-form-group">
<label
className="govuk-label govuk-label--m"
htmlFor="account-number"
>
<label className="govuk-label" htmlFor="account-number">
{props.label}
</label>
<div id="account-number-hint" className="govuk-hint">
Must be between 6 and 8 digits long
</div>
<Field
name={props.name}
id={props.name}
@@ -266,16 +256,9 @@ export function DecimalField(props) {
return (
<div className="govuk-form-group">
<label
className="govuk-label govuk-label--m"
htmlFor="account-number"
>
<label className="govuk-label" htmlFor="account-number">
{props.label}
</label>
<div id="account-number-hint" className="govuk-hint">
Must be between 6 and 8 digits long
</div>
<Field
name={props.name}
id={props.name}
@@ -296,7 +279,7 @@ export function ReadOnlyfield(props) {
return (
<div className="govuk-form-group">
<label className="govuk-label govuk-label--m " htmlFor="event-name">
<label className="govuk-label " htmlFor="event-name">
{props.label}
</label>
<Field
components/myportal/awaitingsubmission.js
+20 -16
View File
@@ -1,24 +1,28 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import TopThree from "./topthree";
export default function AwaitingSubmission() {
let { t } = useTranslation();
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:awatitingsubmission-card-title")}
</h3>
<div className="cardVieAll">
<Link href="/">
<a>{t("myportal:viewall-link")}</a>
</Link>
const router = useRouter();
const { locale } = router;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:awatitingsubmission-card-title")}
</h3>
<div className="cardModuleContainer">
<TopThree />
</div>
<div className="cardVieAll">
<Link href="/viewall">
<a>{t("myportal:viewall-link")}</a>
</Link>
</div>
</div>
</div>
</div>
</div>
);
);
}
components/myportal/mycases.js
+21 -17
View File
@@ -1,24 +1,28 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import TopThree from "./topthree";
export default function MyCases() {
let { t } = useTranslation();
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:mycases-card-title")}
</h3>
<div className="cardVieAll">
<Link href="/">
<a>{t("myportal:viewall-link")}</a>
</Link>
const router = useRouter();
const { locale } = router;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:mycases-card-title")}
</h3>
<div className="cardModuleContainer">
<TopThree />
</div>
<div className="cardVieAll">
<Link href="/viewall">
<a>{t("myportal:viewall-link")}</a>
</Link>
</div>
</div>
</div>
</div>
</div>
);
);
}
components/myportal/myrepresentations.js
+21 -17
View File
@@ -1,24 +1,28 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import TopThree from "./topthree";
export default function MyRepresentations() {
let { t } = useTranslation();
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:myrepresentations-card-title")}
</h3>
<div className="cardVieAll">
<Link href="/">
<a>{t("myportal:viewall-link")}</a>
</Link>
const router = useRouter();
const { locale } = router;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:myrepresentations-card-title")}
</h3>
<div className="cardModuleContainer">
<TopThree />{" "}
</div>
<div className="cardVieAll">
<Link href="/viewall">
<a>{t("myportal:viewall-link")}</a>
</Link>
</div>
</div>
</div>
</div>
</div>
);
);
}
components/myportal/topthree.js
+56
View File
@@ -0,0 +1,56 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function TopThree() {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<>
<div className="cardModuleItem">
<div className="cardModuleDetails">
<div className="cardModuleReference">
<b>Case reference:</b>{" "}
<Link href="/case">
<a>CAS-00010-J9W6L5</a>
</Link>
</div>
<div className="carModuleAddress">
<b>Address: </b> Beggars Lane
</div>
</div>
<div className="cardModuleRemoveCase"> &mdash;</div>
</div>
<div className="cardModuleItem">
<div className="cardModuleDetails">
<div className="cardModuleReference">
<b>Case reference:</b>{" "}
<Link href="/case">
<a>CAS-00010-J9W6L5</a>
</Link>
</div>
<div className="carModuleAddress">
<b>Address: </b> Beggars Lane
</div>
</div>
<div className="cardModuleRemoveCase"> &mdash;</div>
</div>
<div className="cardModuleItem">
<div className="cardModuleDetails">
<div className="cardModuleReference">
<b>Case reference:</b>{" "}
<Link href="/case">
<a>CAS-00010-J9W6L5</a>
</Link>
</div>
<div className="carModuleAddress">
<b>Address: </b> Beggars Lane
</div>
</div>
<div className="cardModuleRemoveCase"> &mdash;</div>
</div>
</>
);
}
components/myportal/watchedcases.js
+5 -2
View File
@@ -1,7 +1,7 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import TopThree from "./topthree";
export default function WatchedCases() {
let { t } = useTranslation();
@@ -13,9 +13,12 @@ export default function WatchedCases() {
<h3 className="heading-small card-heading">
{t("myportal:watchedcases-card-title")}
</h3>
<div className="cardModuleContainer">
<TopThree />
</div>
<div className="cardVieAll">
<Link href="/">
<Link href="/viewall">
<a>{t("myportal:viewall-link")}</a>
</Link>
</div>
components/newappeal/buildsection.js
+6 -3
View File
@@ -53,7 +53,9 @@ let BuildSection = (props) => {
return (
<div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds">
<h2>{titles[0].value} </h2>
<h1 className="govuk-heading-m govuk-!-margin-top-5">
{titles[0].value}{" "}
</h1>
<form onSubmit={handleSubmit(onHandleSubmit)}>
<BuildRow
rowXML={rowXML}
@@ -96,9 +98,10 @@ let BuildSection = (props) => {
aria-labelledby="progress-list"
className="at-nav"
>
<h3 className="govuk-heading-s govuk-!-font-weight-regular gov-font-dark-grey">
{props.formTitle}
<h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
Progress:
</h3>
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
<ol className="govuk-list">
<ul className="govuk-list ">
components/search/viewall.js
+147
View File
@@ -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>
);
}
components/viewall.js
+40
View File
@@ -0,0 +1,40 @@
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 ViewAllResults from "./search/viewall";
export default function ViewAll(props) {
const { searchString, searchResultsObj } = props;
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">
<ViewAllResults
searchString={searchString}
searchResultsObj={searchResultsObj}
/>
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<div className="govuk-button-group">
<Link href="/myportal">
<a className="govuk-button">Back</a>
</Link>
</div>
</div>
</div>
</main>
);
}
i18n.json
+3
View File
@@ -20,6 +20,9 @@
"/searchresults": [
"search"
],
"/viewall": [
"search"
],
"/case": [
"case"
],
locales/cy/common.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"service-name": "Porth Gwaith Achos Apeliadau",
"service-name": "Cynllunio gwaith achos",
"breadcrumb-back-link": "Yn ôl",
"error-radio": "Dewiswch opsiwn",
"error-checkbox": "Enter a value",
locales/en/common.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"service-name": "Appeals Casework Portal",
"service-name": "Planning casework",
"breadcrumb-back-link": "Back",
"error-radio": "Choose an option",
"error-checkbox": "Choose an option",
pages/api/viewall.js
+101
View File
@@ -0,0 +1,101 @@
const ApiResponse = (req, res) => {
res.statusCode = 200;
res.json({
"@odata.context":
"https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/$metadata#incidents(_accountid_value,_customerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title)",
"@odata.count": 9,
"value": [
{
"@odata.etag": 'W/"704047"',
"_accountid_value": null,
"_customerid_value": "56e7ef63-7e64-eb11-aaba-00224800be9c",
"pinswg_appealcasetype": 846040000,
"statuscode": 1,
"ticketnumber": "CAS-00009-W8N6W4",
"title": "CAS-00009-W8N6W4",
"incidentid": "9919eac3-21af-eb11-aac3-00224800be9c",
},
{
"@odata.etag": 'W/"704095"',
"_accountid_value": null,
"_customerid_value": "56e7ef63-7e64-eb11-aaba-00224800be9c",
"pinswg_appealcasetype": 846040011,
"statuscode": 1,
"ticketnumber": "CAS-00010-J9W6L5",
"title": "CAS-00010-J9W6L5",
"incidentid": "55f4fc74-33af-eb11-aac3-00224800be9c",
},
{
"@odata.etag": 'W/"709250"',
"_accountid_value": null,
"_customerid_value": "41fead24-29ba-eb11-aac4-00224800be9c",
"pinswg_appealcasetype": 846040001,
"statuscode": 1,
"ticketnumber": "CAS-00011-K1N0J8",
"title": "CAS-00011-K1N0J8",
"incidentid": "6bd04d33-29ba-eb11-aac4-00224800be9c",
},
{
"@odata.etag": 'W/"710463"',
"_accountid_value": null,
"_customerid_value": "56e7ef63-7e64-eb11-aaba-00224800be9c",
"pinswg_appealcasetype": 846040000,
"statuscode": 1,
"ticketnumber": "CAS-00012-D9W6S8",
"title": "CAS-00012-D9W6S8",
"incidentid": "b9c9cbe4-6abc-eb11-aac4-00224800be9c",
},
{
"@odata.etag": 'W/"746096"',
"_accountid_value": null,
"_customerid_value": "80d99a34-82ad-eb11-aac3-00224800be9c",
"pinswg_appealcasetype": 846040025,
"statuscode": 1,
"ticketnumber": "CAS-00013-Z0B5Z9",
"title": "CAS-00013-Z0B5Z9",
"incidentid": "34071ec4-54d3-eb11-aac5-00224800be9c",
},
{
"@odata.etag": 'W/"749764"',
"_accountid_value": null,
"_customerid_value": "56e7ef63-7e64-eb11-aaba-00224800be9c",
"pinswg_appealcasetype": 846040021,
"statuscode": 1,
"ticketnumber": "CAS-00014-S3L9B4",
"title": "CAS-00014-S3L9B4",
"incidentid": "2230700b-ebd7-eb11-aac5-00224800be9c",
},
{
"@odata.etag": 'W/"750875"',
"_accountid_value": null,
"_customerid_value": "cfb7b446-a7d8-eb11-aac5-00224800be9c",
"pinswg_appealcasetype": 846040000,
"statuscode": 1,
"ticketnumber": "CAS-00015-L7J9H1",
"title": "CAS-00015-L7J9H1",
"incidentid": "d5b7b446-a7d8-eb11-aac5-00224800be9c",
},
{
"@odata.etag": 'W/"755001"',
"_accountid_value": null,
"_customerid_value": "cfb7b446-a7d8-eb11-aac5-00224800be9c",
"pinswg_appealcasetype": 846040004,
"statuscode": 1,
"ticketnumber": "CAS-00016-Y9K9Q0",
"title": "CAS-00016-Y9K9Q0",
"incidentid": "cc6f93ea-bdd9-eb11-aac5-00224800be9c",
},
{
"@odata.etag": 'W/"755216"',
"_accountid_value": null,
"_customerid_value": "243c0009-49da-eb11-aac5-00224800be9c",
"pinswg_appealcasetype": 846040004,
"statuscode": 1,
"ticketnumber": "CAS-00017-B8X7N0",
"title": "CAS-00017-B8X7N0",
"incidentid": "73895a1b-68dd-eb11-aac5-00224800be9c",
},
],
});
};
export default ApiResponse;
pages/case.js
+2
View File
@@ -21,6 +21,7 @@ const Home = (props) => {
const router = useRouter();
const { locale } = router;
const { appealtypes } = router.query;
return (
<div>
@@ -34,6 +35,7 @@ const Home = (props) => {
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
<Banner />
<Breadcrumbs slug={appealtypes} />
<Case />
</div>
<Footer footerLinks={footerLinks} />
pages/newappeal/[appealtypes].js
+1 -1
View File
@@ -109,7 +109,7 @@ let Home = (props) => {
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
<Banner />
<Breadcrumbs slug={appealtypes} />
<Breadcrumbs slug={appealtypes} formTitle={formTitle} />
<BuildSection
formXML={formXML}
pages/newappeal/selectappeal.js
+2 -2
View File
@@ -33,8 +33,8 @@ const Home = (props) => {
const { appealType } = props;
const optionsObj =
props.appealType.appealTypeOptions.GlobalOptionSet.Options;
const optionsObj = props.appealType.appealTypeOptions.GlobalOptionSet
.Options || [{}];
const appealOptions = Object.keys(optionsObj).map((key, index) => (
<option
pages/viewall.js
+97
View File
@@ -0,0 +1,97 @@
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 ViewAll from "../components/viewall";
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 { setSearch, getSearchObj } from "../store/search/action";
import {
setSearchResults,
getSearchResultsObj,
} from "../store/searchOutput/action";
import { getBasicSearch } from "../actions";
const Home = (props) => {
const { footerLinks, pages } = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
const { appealtypes } = router.query;
return (
<div>
<Head>
<title>
{t("search:page-title")} - {t("common:service-name")}
</title>
</Head>
<div id="page_wrapper">
<CookieBanner />
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
<Banner />
<Breadcrumbs slug={appealtypes} />
<ViewAll
searchString={"View All"}
searchResultsObj={props.searchResultsObj}
/>
</div>
<Footer footerLinks={footerLinks} />
</div>
</div>
);
};
export const getServerSideProps = wrapper.getServerSideProps(
(store) =>
async ({ req, res }) => {
const searchResultsObj = (await getBasicSearch("View All")) || null;
store.dispatch(setSearchResults(searchResultsObj));
store.dispatch(setSearch("View All"));
}
);
// export const getServerSideProps = wrapper.getServerSideProps(
// async ({ locale, store, query, 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));
// console.log(query);
// //store.dispatch(setSearch(query.search));
// }
// );
const mapStateToProps = (state) => {
console.log("mapstate", state);
return {
search: state.search,
searchResultsObj: state.searchResultsObj,
form: state.form,
};
};
export default connect(mapStateToProps)(Home);
styles/sass/patterns/_card.scss
+61
View File
@@ -209,3 +209,64 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
margin-top: auto;
}
}
.card-body {
width: 93%;
}
div.cardModuleItem:last-of-type {
margin-bottom: 20px !important;
}
.cardModuleItem {
display: flex;
padding: 10px 10px 10px 0;
border-bottom: 1px solid lightgrey;
.cardModuleDetails {
width: 95%;
}
.cardModuleReference a {
display: block;
}
.cardModuleRemoveCase {
border: 1px solid $red;
padding: 5px;
height: 20px;
padding-top: 0px;
padding-bottom: 0px;
border-radius: 5px;
width: auto;
color: white;
font-weight: bold;
background-color: $red;
font-size: 15px;
cursor: pointer;
&:active {
top: 2px;
}
&:hover {
background-color: $lightred;
color: $white;
}
&:focus {
border-color: #ffdd00;
outline: 3px solid transparent;
-webkit-box-shadow: inset 0 0 0 1px #ffdd00;
box-shadow: inset 0 0 0 1px #ffdd00;
}
&:focus:not(:active):not(:hover) {
border-color: #ffdd00;
color: #0b0c0c;
background-color: #ffdd00;
-webkit-box-shadow: 0 2px 0 #0b0c0c;
box-shadow: 0 2px 0 #0b0c0c;
}
}
}
styles/sass/welshgov/_application.scss
+2 -1
View File
@@ -9,13 +9,14 @@ html {
.govuk-heading-xl,
.govuk-heading-l,
.govuk-heading-m,
.govuk-header-l,
s .govuk-header-l,
.govuk-header-m,
.govuk-header__link,
.govuk-button,
.govuk-label,
.govuk-select,
.govuk-breadcrumbs__link,
.govuk-fieldset__legend--s,
h1,
h2,
h3,