Merged PR 2278: mocked design for status tab
mocked design for status tab Related work items: #22805
This commit is contained in:
Robert Bond
@@ -0,0 +1,166 @@
|
||||
import { setEventDetails } from "../../store/searchOutput/action";
|
||||
import { setCurrentPage } from "../../store/currentView/action";
|
||||
import { connect } from "react-redux";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { formatDates } from "../utils";
|
||||
import { useState } from "react";
|
||||
|
||||
const statusClassMap = {
|
||||
complete: "govuk-tag govuk-!-margin-top-2",
|
||||
"in-progress": "govuk-tag govuk-tag--yellow govuk-!-margin-top-2",
|
||||
"not-started": "govuk-tag govuk-tag--grey govuk-!-margin-top-2",
|
||||
blocked: "govuk-tag govuk-tag--red govuk-!-margin-top-2"
|
||||
};
|
||||
|
||||
const statusTextMap = {
|
||||
complete: "Complete",
|
||||
"in-progress": "In progress",
|
||||
"not-started": "Not started",
|
||||
blocked: "Blocked"
|
||||
};
|
||||
|
||||
const StatusDetails = (props) => {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const stages = [
|
||||
{
|
||||
id: "application-received",
|
||||
title: "Application received",
|
||||
status: "complete",
|
||||
href: "#",
|
||||
description:
|
||||
"We have received the case and checked that the initial information has been provided."
|
||||
},
|
||||
{
|
||||
id: "consultation",
|
||||
title: "Consultation period",
|
||||
status: "in-progress",
|
||||
href: "#",
|
||||
description:
|
||||
"People can view the case documents and submit comments during this stage."
|
||||
},
|
||||
{
|
||||
id: "decision",
|
||||
title: "Decision",
|
||||
status: "not-started",
|
||||
href: "#",
|
||||
description:
|
||||
"The decision will be published once the case has been reviewed and completed."
|
||||
}
|
||||
];
|
||||
|
||||
const EventView = (eventsArr) => {
|
||||
eventsArr = eventsArr.value;
|
||||
|
||||
return eventsArr.map((item, key) => {
|
||||
<div>{item.pinswg_name}</div>;
|
||||
});
|
||||
};
|
||||
|
||||
const eventsArr = props.eventsObj?.value || [];
|
||||
|
||||
// event publishiing flag set to true displa
|
||||
|
||||
function hasOwnPropertyAndNotNull(obj, property) {
|
||||
return obj.hasOwnProperty(property) && obj[property] !== null;
|
||||
}
|
||||
|
||||
const [expandAll, setExpandAll] = useState(null);
|
||||
// null = use default (in-progress open)
|
||||
// true = force open all
|
||||
// false = force close all
|
||||
|
||||
const handleToggleAll = () => {
|
||||
setExpandAll((prev) => (prev === true ? false : true));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<h2 className="govuk-heading-m ">
|
||||
{t("case:status-title")}
|
||||
</h2>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="govuk-!-margin-bottom-3 govuk-link watchCase govuk-!-font-size-16 "
|
||||
onClick={handleToggleAll}
|
||||
>
|
||||
{expandAll === true
|
||||
? t("case:status-show-all-label")
|
||||
: t("case:status-hide-all-label")}
|
||||
</button>
|
||||
<ul className="govuk-task-list">
|
||||
{stages.map((stage) => {
|
||||
const isDefaultOpen =
|
||||
stage.status === "in-progress";
|
||||
|
||||
const isOpen =
|
||||
expandAll === null ? isDefaultOpen : expandAll;
|
||||
|
||||
return (
|
||||
<li
|
||||
className="govuk-task-list__item"
|
||||
key={stage.id}
|
||||
>
|
||||
<div className="govuk-task-list__name-and-hint">
|
||||
{stage.description && (
|
||||
<details
|
||||
className="govuk-details govuk-!-margin-top-2 govuk-!-margin-bottom-2"
|
||||
open={isOpen}
|
||||
>
|
||||
<summary className="govuk-details__summary">
|
||||
<span className="govuk-details__summary-text">
|
||||
{stage.title}
|
||||
</span>
|
||||
</summary>
|
||||
<div className="govuk-details__text">
|
||||
{stage.description}
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="govuk-task-list__status "
|
||||
id={`${stage.id}-status`}
|
||||
>
|
||||
<strong
|
||||
className={
|
||||
statusClassMap[stage.status] ||
|
||||
"govuk-tag govuk-tag--grey govuk-!-margin-top-2"
|
||||
}
|
||||
>
|
||||
{statusTextMap[stage.status] ||
|
||||
"Not started"}
|
||||
</strong>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
...state
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setEventDetails: (eventsObj) => {
|
||||
dispatch(setEventDetails(eventsObj));
|
||||
},
|
||||
setCurrentPage: (currentPage) => {
|
||||
dispatch(setCurrentPage(currentPage));
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(StatusDetails);
|
||||
@@ -9,6 +9,7 @@ import transLookup from "../../data/lookuptranslations.json";
|
||||
import Documents from "./documents";
|
||||
import EventsDetails from "./events";
|
||||
import MediaDetails from "./media";
|
||||
import StatusDetails from "./status";
|
||||
|
||||
import {
|
||||
createWatchedCases,
|
||||
@@ -563,6 +564,21 @@ const CaseSummary = (props) => {
|
||||
{t("case:summary-tab-documents-label")}
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
whichTab == "case-status"
|
||||
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
|
||||
: "govuk-tabs__list-item "
|
||||
}
|
||||
>
|
||||
<a
|
||||
className="govuk-tabs__tab"
|
||||
href="#case-status"
|
||||
onClick={() => setWhichTab("case-status")}
|
||||
>
|
||||
{t("case:status-title")}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
className={
|
||||
@@ -1986,6 +2002,16 @@ const CaseSummary = (props) => {
|
||||
showFilteredDocs={props.showFilteredDocs}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
whichTab == "case-status"
|
||||
? "govuk-tabs__panel "
|
||||
: "govuk-tabs__panel govuk-tabs__panel--hidden"
|
||||
}
|
||||
id="case-status"
|
||||
>
|
||||
<StatusDetails />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -38,8 +38,6 @@ const Pinswg_sipscase = (props) => {
|
||||
new Date(a.pinswg_datedeadlineextended)
|
||||
)[0];
|
||||
|
||||
console.log(latest);
|
||||
|
||||
return (
|
||||
<>
|
||||
{detailsObj.pinswg_projectdescription != null ? (
|
||||
|
||||
Reference in New Issue
Block a user