Skip to content

Commit

Permalink
refactor: Unify summary list tables (#2881)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianjon3s
ianjon3s authored Mar 13, 2024
1 parent 8c7978c commit da79ab9
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 102 deletions.
36 changes: 9 additions & 27 deletions editor.planx.uk/src/@planx/components/Confirmation/Public.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import Check from "@mui/icons-material/Check";
import Box from "@mui/material/Box";
import { styled } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import { QuestionAndResponses } from "@opensystemslab/planx-core/types";
import Card from "@planx/components/shared/Preview/Card";
import { SummaryListTable } from "@planx/components/shared/Preview/SummaryList";
import { PublicProps } from "@planx/components/ui";
import { useStore } from "pages/FlowEditor/lib/store";
import React, { useEffect, useState } from "react";
Expand All @@ -14,20 +14,6 @@ import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";

import type { Confirmation } from "./model";

const Table = styled("table")(({ theme }) => ({
width: "100%",
borderCollapse: "collapse",
"& tr": {
borderBottom: `1px solid ${theme.palette.grey[400]}`,
"&:last-of-type": {
border: "none",
},
"& td": {
padding: theme.spacing(1.5, 1),
},
},
}));

export type Props = PublicProps<Confirmation>;

export default function ConfirmationComponent(props: Props) {
Expand Down Expand Up @@ -70,18 +56,14 @@ export default function ConfirmationComponent(props: Props) {
</Banner>
<Card>
{props.details && (
<Table>
<tbody>
{Object.entries(props.details).map((item, i) => (
<tr key={i}>
<td>{item[0]}</td>
<td>
<b>{item[1]}</b>
</td>
</tr>
))}
</tbody>
</Table>
<SummaryListTable>
{Object.entries(props.details).map((item) => (
<>
<Box component="dt">{item[0]}</Box>
<Box component="dd">{item[1]}</Box>
</>
))}
</SummaryListTable>
)}

{<FileDownload data={data} filename={sessionId || "application"} />}
Expand Down
39 changes: 4 additions & 35 deletions editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Typography from "@mui/material/Typography";
import { visuallyHidden } from "@mui/utils";
import Card from "@planx/components/shared/Preview/Card";
import QuestionHeader from "@planx/components/shared/Preview/QuestionHeader";
import { SummaryListTable } from "@planx/components/shared/Preview/SummaryList";
import type { PublicProps } from "@planx/components/ui";
import { Feature } from "@turf/helpers";
import { useFormik } from "formik";
Expand All @@ -15,7 +16,6 @@ import { useAnalyticsTracking } from "pages/FlowEditor/lib/analyticsProvider";
import { useStore } from "pages/FlowEditor/lib/store";
import { handleSubmit } from "pages/Preview/Node";
import React from "react";
import { FONT_WEIGHT_SEMI_BOLD } from "theme";

import type { SiteAddress } from "../FindProperty/model";
import { FETCH_BLPU_CODES } from "../FindProperty/Public";
Expand Down Expand Up @@ -201,41 +201,10 @@ interface PropertyDetail {
interface PropertyDetailsProps {
data: PropertyDetail[];
showPropertyTypeOverride?: boolean;
showChangeButton?: boolean;
overrideAnswer: (fn: string) => void;
}

// Borrows and tweaks grid style from Review page's `SummaryList`
const PropertyDetailsList = styled(Box)(({ theme }) => ({
display: "grid",
gridTemplateColumns: "1fr 2fr 100px",
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
"& > *": {
borderBottom: `1px solid ${theme.palette.border.main}`,
paddingBottom: theme.spacing(1.5),
paddingTop: theme.spacing(1.5),
verticalAlign: "top",
margin: 0,
},
"& ul": {
listStylePosition: "inside",
padding: 0,
margin: 0,
},
"& dt": {
// left column
fontWeight: FONT_WEIGHT_SEMI_BOLD,
},
"& dd:nth-of-type(n)": {
// middle column
paddingLeft: "10px",
},
"& dd:nth-of-type(2n)": {
// right column
textAlign: "right",
},
}));

function PropertyDetails(props: PropertyDetailsProps) {
const { data, showPropertyTypeOverride, overrideAnswer } = props;
const filteredData = data.filter((d) => Boolean(d.detail));
Expand All @@ -248,7 +217,7 @@ function PropertyDetails(props: PropertyDetailsProps) {
};

return (
<PropertyDetailsList component="dl">
<SummaryListTable showChangeButton={true}>
{filteredData.map(({ heading, detail, fn }: PropertyDetail) => (
<React.Fragment key={heading}>
<Box component="dt">{heading}</Box>
Expand All @@ -275,6 +244,6 @@ function PropertyDetails(props: PropertyDetailsProps) {
</Box>
</React.Fragment>
))}
</PropertyDetailsList>
</SummaryListTable>
);
}
84 changes: 44 additions & 40 deletions editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default SummaryListsBySections;
const FIND_PROPERTY_DT = "Property address";
const DRAW_BOUNDARY_DT = "Location plan";

const Grid = styled("dl", {
export const SummaryListTable = styled("dl", {
shouldForwardProp: (prop) => prop !== "showChangeButton",
})<{ showChangeButton?: boolean }>(({ theme, showChangeButton }) => ({
display: "grid",
Expand Down Expand Up @@ -49,7 +49,7 @@ const Grid = styled("dl", {
},
"& dd:nth-of-type(2n)": {
// right column
textAlign: "right",
textAlign: showChangeButton ? "right" : "left",
},
}));

Expand Down Expand Up @@ -235,7 +235,7 @@ function SummaryList(props: SummaryListProps) {

return (
<>
<Grid showChangeButton={props.showChangeButton}>
<SummaryListTable showChangeButton={props.showChangeButton}>
{props.summaryBreadcrumbs.map(
({ component: Component, nodeId, node, userData }, i) => (
<React.Fragment key={i}>
Expand All @@ -247,7 +247,7 @@ function SummaryList(props: SummaryListProps) {
passport={props.passport}
/>
{props.showChangeButton && (
<dd>
<Box component="dd">
<Link
onClick={() => handleChange(nodeId)}
component="button"
Expand All @@ -263,12 +263,12 @@ function SummaryList(props: SummaryListProps) {
"this answer"}
</span>
</Link>
</dd>
</Box>
)}
</React.Fragment>
),
)}
</Grid>
</SummaryListTable>
<ConfirmationDialog
open={isDialogOpen}
onClose={handleCloseDialog}
Expand Down Expand Up @@ -300,8 +300,8 @@ interface ComponentProps {
function Question(props: ComponentProps) {
return (
<>
<dt>{props.node.data.text}</dt>
<dd>{getNodeText()}</dd>
<Box component="dt">{props.node.data.text}</Box>
<Box component="dd">{getNodeText()}</Box>
</>
);

Expand All @@ -323,26 +323,26 @@ function FindProperty(props: ComponentProps) {
props.passport.data?._address;
return (
<>
<dt>{FIND_PROPERTY_DT}</dt>
<dd>
<Box component="dt">{FIND_PROPERTY_DT}</Box>
<Box component="dd">
{`${single_line_address.split(`, ${town}`)[0]}`}
<br />
{town}
<br />
{postcode}
</dd>
</Box>
</>
);
} else {
const { x, y, title } = props.passport.data?._address;
return (
<>
<dt>{FIND_PROPERTY_DT}</dt>
<dd>
<Box component="dt">{FIND_PROPERTY_DT}</Box>
<Box component="dd">
{`${title}`}
<br />
{`${Math.round(x)} Easting (X), ${Math.round(y)} Northing (Y)`}
</dd>
</Box>
</>
);
}
Expand All @@ -351,49 +351,51 @@ function FindProperty(props: ComponentProps) {
function Checklist(props: ComponentProps) {
return (
<>
<dt>{props.node.data.text}</dt>
<dd>
<Box component="dt">{props.node.data.text}</Box>
<Box component="dd">
<ul>
{getAnswers(props).map((nodeId, i: number) => (
<li key={i}>{props.flow[nodeId].data.text}</li>
))}
</ul>
</dd>
</Box>
</>
);
}

function TextInput(props: ComponentProps) {
return (
<>
<dt>{props.node.data.title}</dt>
<dd>{getAnswersByNode(props)}</dd>
<Box component="dt">{props.node.data.title}</Box>
<Box component="dd">{getAnswersByNode(props)}</Box>
</>
);
}

function FileUpload(props: ComponentProps) {
return (
<>
<dt>{props.node.data.title}</dt>
<dd>
<Box component="dt">{props.node.data.title}</Box>
<Box component="dd">
<ul>
{getAnswersByNode(props)?.map((file: any, i: number) => (
<li key={i}>
<span data-testid="file-upload-name">{file.filename}</span>
</li>
))}
</ul>
</dd>
</Box>
</>
);
}

function DateInput(props: ComponentProps) {
return (
<>
<dt>{props.node.data.title}</dt>
<dd>{format(new Date(getAnswersByNode(props)), "d MMMM yyyy")}</dd>
<Box component="dt">{props.node.data.title}</Box>
<Box component="dd">
{format(new Date(getAnswersByNode(props)), "d MMMM yyyy")}
</Box>
</>
);
}
Expand All @@ -413,8 +415,8 @@ function DrawBoundary(props: ComponentProps) {

return (
<>
<dt>{DRAW_BOUNDARY_DT}</dt>
<dd>
<Box component="dt">{DRAW_BOUNDARY_DT}</Box>
<Box component="dd">
{fileName && (
<span data-testid="uploaded-plan-name">
Your uploaded file: <b>{fileName}</b>
Expand Down Expand Up @@ -443,16 +445,18 @@ function DrawBoundary(props: ComponentProps) {
!geodata &&
props.node.data?.hideFileUpload &&
"Not provided"}
</dd>
</Box>
</>
);
}

function NumberInput(props: ComponentProps) {
return (
<>
<dt>{props.node.data.title}</dt>
<dd>{`${getAnswersByNode(props)} ${props.node.data.units ?? ""}`}</dd>
<Box component="dt">{props.node.data.title}</Box>
<Box component="dd">{`${getAnswersByNode(props)} ${
props.node.data.units ?? ""
}`}</Box>
</>
);
}
Expand All @@ -463,8 +467,8 @@ function AddressInput(props: ComponentProps) {

return (
<>
<dt>{props.node.data.title}</dt>
<dd>
<Box component="dt">{props.node.data.title}</Box>
<Box component="dd">
{line1}
<br />
{line2}
Expand All @@ -480,7 +484,7 @@ function AddressInput(props: ComponentProps) {
{country}
</>
) : null}
</dd>
</Box>
</>
);
}
Expand All @@ -492,8 +496,8 @@ function ContactInput(props: ComponentProps) {

return (
<>
<dt>{props.node.data.title}</dt>
<dd>
<Box component="dt">{props.node.data.title}</Box>
<Box component="dd">
{[title, firstName, lastName].filter(Boolean).join(" ").trim()}
<br />
{organisation ? (
Expand All @@ -505,7 +509,7 @@ function ContactInput(props: ComponentProps) {
{phone}
<br />
{email}
</dd>
</Box>
</>
);
}
Expand All @@ -520,25 +524,25 @@ function FileUploadAndLabel(props: ComponentProps) {

return (
<>
<dt>{props.node.data.title}</dt>
<dd>
<Box component="dt">{props.node.data.title}</Box>
<Box component="dd">
<ul>
{uniqueFilenames.length
? uniqueFilenames.map((filename, index) => (
<li key={index}>{filename}</li>
))
: "No files uploaded"}
</ul>
</dd>
</Box>
</>
);
}

function Debug(props: ComponentProps) {
return (
<>
<dt>{JSON.stringify(props.node.data)}</dt>
<dd>{JSON.stringify(props.userData?.answers)}</dd>
<Box component="dt">{JSON.stringify(props.node.data)}</Box>
<Box component="dd">{JSON.stringify(props.userData?.answers)}</Box>
</>
);
}
Expand Down

0 comments on commit da79ab9

Please sign in to comment.