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

add mock api calls for modules viewall component

Browse Source
This commit is contained in:
robbond
2021-07-29 14:46:09 +01:00
parent 777df3f907
commit 2b14eaaf1f
30 changed files with 884 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/breadcrumbs.js
+17 -10
View File
@@ -5,16 +5,7 @@ import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
const Breadcrumbs = (props) => {
const {
courseContent,
slug,
formTitle,
activitysub,
activity,
applicant_id,
course_id,
applicant_ref,
} = props;
const { courseContent, slug, currentView } = props;
const router = useRouter();
const { appealType, section } = router.query;
@@ -143,6 +134,22 @@ const Breadcrumbs = (props) => {
) : (
""
)}
{router.pathname == "/myportal/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">
{currentView.viewName}
</li>
</>
) : (
""
)}
{router.pathname == "/case" ? (
<>
<li className="govuk-breadcrumbs__list-item">
components/myportal.js
+12 -6
View File
@@ -10,7 +10,7 @@ import MyRepresentations from "./myportal/myrepresentations";
import WatchedCases from "./myportal/watchedcases";
import YourAccount from "./myportal/youraccount";
export default function MyPortal({ children, pages }) {
const MyPortal = (props) => {
let { t } = useTranslation();
const router = useRouter();
@@ -26,11 +26,15 @@ export default function MyPortal({ children, pages }) {
<div className="govuk-grid-column-full">
<div className="flex-container grid-row govuk-body ">
<MakeNewAppeal />
<MyCases />
<MyCases myCases={props.myCases} />
<SearchCases />
<AwaitingSubmission />
<MyRepresentations />
<WatchedCases />
<AwaitingSubmission
awaitingSubmission={props.awaitingSubmission}
/>
<MyRepresentations
myRepresentations={props.myRepresentations}
/>
<WatchedCases watchedCases={props.watchedCases} />
</div>
<div className="flex-container grid-row govuk-body ">
<YourAccount />
@@ -39,4 +43,6 @@ export default function MyPortal({ children, pages }) {
</div>
</main>
);
}
};
export default MyPortal;
components/myportal/awaitingsubmission.js
+32 -5
View File
@@ -2,12 +2,16 @@ import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import TopThree from "./topthree";
import { connect } from "react-redux";
import { setCurrentView } from "../../store/currentView/action";
export default function AwaitingSubmission() {
const AwaitingSubmission = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const { setCurrentView } = props;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
@@ -15,14 +19,37 @@ export default function AwaitingSubmission() {
{t("myportal:awatitingsubmission-card-title")}
</h3>
<div className="cardModuleContainer">
<TopThree />
<TopThree
showTopThree={
props.awaitingSubmission.awaitingSubmission
}
/>
</div>
<div className="cardVieAll">
<Link href="/viewall">
<a>{t("myportal:viewall-link")}</a>
<Link href="/myportal/viewall">
<a
onClick={() => {
setCurrentView({
"viewName": "Awaiting Submission",
"viewKey": "awaitingSubmission",
});
}}
>
{t("myportal:viewall-link")}
</a>
</Link>
</div>
</div>
</div>
);
}
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentView: (currentView) => {
dispatch(setCurrentView(currentView));
},
};
};
export default connect(null, mapDispatchToProps)(AwaitingSubmission);
components/myportal/mycases.js
+28 -5
View File
@@ -2,11 +2,15 @@ import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import TopThree from "./topthree";
export default function MyCases() {
import { connect } from "react-redux";
import { setCurrentView } from "../../store/currentView/action";
const MyCases = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const { setCurrentView } = props;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
@@ -14,15 +18,34 @@ export default function MyCases() {
{t("myportal:mycases-card-title")}
</h3>
<div className="cardModuleContainer">
<TopThree />
<TopThree showTopThree={props.myCases.myCases} />
</div>
<div className="cardVieAll">
<Link href="/viewall">
<a>{t("myportal:viewall-link")}</a>
<Link href="/myportal/viewall" shallow>
<a
onClick={() => {
setCurrentView({
"viewName": "My Cases",
"viewKey": "myCases",
});
}}
>
{t("myportal:viewall-link")}
</a>
</Link>
</div>
</div>
</div>
);
}
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentView: (currentView) => {
dispatch(setCurrentView(currentView));
},
};
};
export default connect(null, mapDispatchToProps)(MyCases);
components/myportal/myrepresentations.js
+31 -5
View File
@@ -2,11 +2,16 @@ import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import TopThree from "./topthree";
export default function MyRepresentations() {
import { connect } from "react-redux";
import { setCurrentView } from "../../store/currentView/action";
const MyRepresentations = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const { setCurrentView } = props;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
@@ -14,15 +19,36 @@ export default function MyRepresentations() {
{t("myportal:myrepresentations-card-title")}
</h3>
<div className="cardModuleContainer">
<TopThree />{" "}
<TopThree
showTopThree={props.myRepresentations.myRepresentations}
/>
</div>
<div className="cardVieAll">
<Link href="/viewall">
<a>{t("myportal:viewall-link")}</a>
<Link href="/myportal/viewall">
<a
onClick={() => {
setCurrentView({
"viewName": "My Representations",
"viewKey": "myRepresentations",
});
}}
>
{t("myportal:viewall-link")}
</a>
</Link>
</div>
</div>
</div>
);
}
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentView: (currentView) => {
dispatch(setCurrentView(currentView));
},
};
};
export default connect(null, mapDispatchToProps)(MyRepresentations);
components/myportal/topthree.js
+16 -37
View File
@@ -2,55 +2,34 @@ import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function TopThree() {
const TopThree = (props) => {
let { t } = useTranslation();
const { showTopThree } = props;
const router = useRouter();
const { locale } = router;
return (
<>
<div className="cardModuleItem">
let topthreeRow = [];
for (var i = 0; i < 3; i++)
topthreeRow.push(
<div className="cardModuleItem" key={i}>
<div className="cardModuleDetails">
<div className="cardModuleReference">
<b>Case reference:</b>{" "}
<Link href="/case">
<a>CAS-00010-J9W6L5</a>
<a>{props.showTopThree.value[i].reference}</a>
</Link>
</div>
<div className="carModuleAddress">
<b>Address: </b> Beggars Lane
<b>Address: </b> {props.showTopThree.value[i].address}
</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>
</>
);
}
);
return <>{topthreeRow}</>;
};
export default TopThree;
components/myportal/viewall.js
+113
View File
@@ -0,0 +1,113 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function ViewAllResults(props) {
const { searchString, searchResultsObj, currentView } = props;
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
var resultsArr = props[currentView.viewKey][currentView.viewKey].value || [
{},
];
let resultsRowArr = [];
Object.keys(resultsArr).map((key, index) => {
resultsRowArr.push(
<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>
{resultsArr[index].reference}
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Site Address:{" "}
</span>
{resultsArr[index].address1}
<br /> {resultsArr[index].town}
<br />
{resultsArr[index].postcode}
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
Appellant/Applicant:
</span>
{resultsArr[index].appellantApplicant}
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">Authority:</span>
{resultsArr[index].lpaname}
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">Case Type:</span>
{
resultsArr[index][
"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>
{
resultsArr[index][
"statuscode@OData.Community.Display.V1.FormattedValue"
]
}
</dd>
</div>
);
});
return (
<>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
{currentView.viewName}
</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>
{resultsRowArr}
</dl>
</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>
</>
);
}
components/myportal/watchedcases.js
+30 -5
View File
@@ -2,11 +2,16 @@ import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import TopThree from "./topthree";
export default function WatchedCases() {
import { connect } from "react-redux";
import { setCurrentView } from "../../store/currentView/action";
const WatchedCases = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const { setCurrentView } = props;
return (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
@@ -14,15 +19,35 @@ export default function WatchedCases() {
{t("myportal:watchedcases-card-title")}
</h3>
<div className="cardModuleContainer">
<TopThree />
<TopThree showTopThree={props.watchedCases.watchedCases} />
</div>
<div className="cardVieAll">
<Link href="/viewall">
<a>{t("myportal:viewall-link")}</a>
<Link href="/myportal/viewall">
<a
onClick={() => {
setCurrentView({
"viewName": "Watched Cases",
"viewKey": "watchedCases",
});
}}
>
{t("myportal:viewall-link")}
</a>
</Link>
</div>
</div>
</div>
);
}
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentView: (currentView) => {
console.log(currentView);
dispatch(setCurrentView(currentView));
},
};
};
export default connect(null, mapDispatchToProps)(WatchedCases);
components/newappeal/createCase.js
+2 -2
View File
@@ -82,7 +82,7 @@ let CreateCase = (props) => {
<div>
<select
{...input}
className="govuk-select govuk-!-width-one-half"
className="govuk-select govuk-input--error"
id="lpatypes"
name={name}
//onChange={(e) => props.onChangeSelectLPA(e)}
@@ -143,7 +143,7 @@ let CreateCase = (props) => {
<div>
<select
{...input}
className="govuk-select govuk-!-width-one-half"
className="govuk-select"
id="appealTypes"
name={name}
//onChange={(e) => props.onChangeSelectAppealType(e)}