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>
);
}