Skip to content

Commit

Permalink
feat: Styling for submissions table (#2975)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianjon3s
ianjon3s authored Apr 3, 2024
1 parent 97e1330 commit 708ac8d
Show file tree
Hide file tree
Showing 8 changed files with 179 additions and 150 deletions.
22 changes: 13 additions & 9 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/DataManagerSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import React from "react";
import EditorRow from "ui/editor/EditorRow";
import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";

const DataManagerSettings: React.FC = () => {
return (
<Box>
<Typography variant="h2" component="h3" gutterBottom>
Data Manager
</Typography>
<Typography variant="body1">
Manage the data that your service uses and makes available via its API
</Typography>
<Box py={5}>
<Box maxWidth="formWrap" mx="auto">
<EditorRow>
<Typography variant="h2" component="h3" gutterBottom>
Data Manager
</Typography>
<Typography variant="body1">
Manage the data that your service uses and makes available via its
API.
</Typography>
</EditorRow>
<EditorRow>
<FeaturePlaceholder title="Feature in development" />
</Box>
</EditorRow>
</Box>
);
};
Expand Down
6 changes: 3 additions & 3 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,13 +133,13 @@ const DesignSettings: React.FC = () => {
const onSuccess = () => setOpen(true);

return (
<>
<Box maxWidth="formWrap" mx="auto">
<EditorRow>
<Typography variant="h2" component="h3" gutterBottom>
Design
</Typography>
<Typography variant="body1">
How your service appears to public users
How your service appears to public users.
</Typography>
</EditorRow>
{formikConfig && (
Expand All @@ -155,7 +155,7 @@ const DesignSettings: React.FC = () => {
Theme updated successfully
</Alert>
</Snackbar>
</>
</Box>
);
};

Expand Down
23 changes: 13 additions & 10 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import React from "react";
import EditorRow from "ui/editor/EditorRow";
import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";

const ServiceFlags: React.FC = () => {
return (
<Box>
<Typography variant="h2" component="h3" gutterBottom>
Service flags
</Typography>
<Typography variant="body1">
Manage the flag sets that this service uses. Flags at the top of a set
override flags below.
</Typography>
<Box py={5}>
<Box maxWidth="formWrap" mx="auto">
<EditorRow>
<Typography variant="h2" component="h3" gutterBottom>
Service flags
</Typography>
<Typography variant="body1">
Manage the flag sets that this service uses. Flags at the top of a set
override flags below.
</Typography>
</EditorRow>
<EditorRow>
<FeaturePlaceholder title="Feature in development" />
</Box>
</EditorRow>
</Box>
);
};
Expand Down
202 changes: 104 additions & 98 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,105 +115,111 @@ const ServiceSettings: React.FC = () => {
});

return (
<form onSubmit={formik.handleSubmit}>
<EditorRow>
<Typography variant="h2" component="h3" gutterBottom>
Elements
</Typography>
<Typography variant="body1">
Manage the features that users will be able to see
</Typography>
</EditorRow>
<EditorRow background>
<TextInput
title="Legal Disclaimer"
description="Displayed before a user submits their application"
switchProps={{
name: "elements.legalDisclaimer.show",
checked: formik.values.elements?.legalDisclaimer?.show,
onChange: formik.handleChange,
}}
headingInputProps={{
name: "elements.legalDisclaimer.heading",
value: formik.values.elements?.legalDisclaimer?.heading,
onChange: formik.handleChange,
}}
contentInputProps={{
name: "elements.legalDisclaimer.content",
value: formik.values.elements?.legalDisclaimer?.content,
onChange: formik.handleChange,
}}
/>
</EditorRow>
<EditorRow background>
<InputGroup flowSpacing>
<InputLegend>Footer Links</InputLegend>
<InputRow>
<TextInput
title="Help Page"
richText
description="A place to communicate FAQs, useful tips, or contact information"
switchProps={{
name: "elements.help.show",
checked: formik.values.elements?.help?.show,
onChange: formik.handleChange,
}}
headingInputProps={{
name: "elements.help.heading",
value: formik.values.elements?.help?.heading,
onChange: formik.handleChange,
}}
contentInputProps={{
name: "elements.help.content",
value: formik.values.elements?.help?.content,
onChange: formik.handleChange,
}}
/>
</InputRow>
<InputRow>
<TextInput
title="Privacy Page"
richText
description="Your privacy policy"
switchProps={{
name: "elements.privacy.show",
checked: formik.values.elements?.privacy?.show,
onChange: formik.handleChange,
}}
headingInputProps={{
name: "elements.privacy.heading",
value: formik.values.elements?.privacy?.heading,
onChange: formik.handleChange,
}}
contentInputProps={{
name: "elements.privacy.content",
value: formik.values.elements?.privacy?.content,
onChange: formik.handleChange,
}}
/>
</InputRow>
</InputGroup>
</EditorRow>
<EditorRow>
<Button
type="submit"
variant="contained"
color="primary"
disabled={!formik.dirty}
<Box maxWidth="formWrap" mx="auto">
<form onSubmit={formik.handleSubmit}>
<EditorRow>
<Typography variant="h2" component="h3" gutterBottom>
Elements
</Typography>
<Typography variant="body1">
Manage the features that users will be able to see.
</Typography>
</EditorRow>
<EditorRow background>
<TextInput
title="Legal Disclaimer"
description="Displayed before a user submits their application"
switchProps={{
name: "elements.legalDisclaimer.show",
checked: formik.values.elements?.legalDisclaimer?.show,
onChange: formik.handleChange,
}}
headingInputProps={{
name: "elements.legalDisclaimer.heading",
value: formik.values.elements?.legalDisclaimer?.heading,
onChange: formik.handleChange,
}}
contentInputProps={{
name: "elements.legalDisclaimer.content",
value: formik.values.elements?.legalDisclaimer?.content,
onChange: formik.handleChange,
}}
/>
</EditorRow>
<EditorRow background>
<InputGroup flowSpacing>
<InputLegend>Footer Links</InputLegend>
<InputRow>
<TextInput
title="Help Page"
richText
description="A place to communicate FAQs, useful tips, or contact information"
switchProps={{
name: "elements.help.show",
checked: formik.values.elements?.help?.show,
onChange: formik.handleChange,
}}
headingInputProps={{
name: "elements.help.heading",
value: formik.values.elements?.help?.heading,
onChange: formik.handleChange,
}}
contentInputProps={{
name: "elements.help.content",
value: formik.values.elements?.help?.content,
onChange: formik.handleChange,
}}
/>
</InputRow>
<InputRow>
<TextInput
title="Privacy Page"
richText
description="Your privacy policy"
switchProps={{
name: "elements.privacy.show",
checked: formik.values.elements?.privacy?.show,
onChange: formik.handleChange,
}}
headingInputProps={{
name: "elements.privacy.heading",
value: formik.values.elements?.privacy?.heading,
onChange: formik.handleChange,
}}
contentInputProps={{
name: "elements.privacy.content",
value: formik.values.elements?.privacy?.content,
onChange: formik.handleChange,
}}
/>
</InputRow>
</InputGroup>
</EditorRow>
<EditorRow>
<Button
type="submit"
variant="contained"
color="primary"
disabled={!formik.dirty}
>
Update elements
</Button>
</EditorRow>
<Snackbar
open={isAlertOpen}
autoHideDuration={6000}
onClose={handleClose}
>
Update elements
</Button>
</EditorRow>
<Snackbar
open={isAlertOpen}
autoHideDuration={6000}
onClose={handleClose}
>
<Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
Service settings updated successfully
</Alert>
</Snackbar>
</form>
<Alert
onClose={handleClose}
severity="success"
sx={{ width: "100%" }}
>
Service settings updated successfully
</Alert>
</Snackbar>
</form>
</Box>
);
};

Expand Down
25 changes: 18 additions & 7 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/SubmissionsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,31 @@ import { SubmissionData } from "./submissionData";

const StyledTableContainer = styled(TableContainer)(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`,
overflow: "auto",
maxHeight: "70vh",
"&:focus": {
outline: `2px solid ${theme.palette.primary.main}`,
},
}));

const StyledTable = styled(Table)({
const StyledTable = styled(Table)(({ theme }) => ({
borderCollapse: "collapse",
});
"& th": {
background: theme.palette.text.primary,
color: theme.palette.common.white,
fontWeight: 600,
},
"& td": {
borderBottomColor: theme.palette.border.main,
borderBottomWidth: "2px",
},
"& tr:nth-child(odd) td": {
background: theme.palette.background.paper,
},
}));

const StyledTableCell = styled(TableCell)(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`,
lineHeight: "1.35",
}));

const DividerStyled = styled(Box)({
Expand Down Expand Up @@ -51,7 +64,7 @@ const SubmissionsTable: React.FC<SubmissionsTableProps> = ({
}) => {
return (
<StyledTableContainer>
<StyledTable stickyHeader aria-label="sticky table">
<StyledTable stickyHeader>
<TableHead>
<TableRow>
{[
Expand All @@ -70,9 +83,7 @@ const SubmissionsTable: React.FC<SubmissionsTableProps> = ({
<TableBody>
{applications.map((row) => (
<TableRow key={row.sessionId}>
<StyledTableCell component="th" scope="row">
{row.sessionId}
</StyledTableCell>
<StyledTableCell scope="row">{row.sessionId}</StyledTableCell>
<StyledTableCell>{formatDate(row.submittedAt)}</StyledTableCell>
<StyledTableCell>
{row.paymentRequests && row.paymentRequests.length > 0
Expand Down
19 changes: 11 additions & 8 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import React from "react";
import EditorRow from "ui/editor/EditorRow";

import { useStore } from "../../../lib/store";
import { useSubmittedApplications } from "./submissionData";
Expand All @@ -18,19 +19,21 @@ const Submissions: React.FC = () => {

return (
<Box>
<Typography variant="h2" component="h3" gutterBottom>
Submissions
</Typography>
<Typography variant="body1">
View data on the user submitted applications for this service.
</Typography>
<Box py={5}>
<EditorRow>
<Typography variant="h2" component="h3" gutterBottom>
Submissions
</Typography>
<Typography variant="body1">
View data on the user submitted applications for this service.
</Typography>
</EditorRow>
<EditorRow>
<SubmissionsView
applications={applications}
loading={loading}
error={error}
/>
</Box>
</EditorRow>
</Box>
);
};
Expand Down
Loading

0 comments on commit 708ac8d

Please sign in to comment.