Skip to content

Commit 311d647

Browse files
MapleSyrupyMarianaESfrancisli
authored
[Closes #521, Closes #527] Redesign/data entry page (#543)
* Redesign goal header WIP * DataEntryPage update * fixing breaks * testing * Revert "fixing breaks" This reverts commit 7feba60. * Revert "testing" This reverts commit 009ee99. * testing2 * hopefullyfixestesterrors * forgot package.json * Check Commit * Check test * Tweak styles * Rename function to match filename --------- Co-authored-by: MarianaES <mariana.enriquez.s@gmail.com> Co-authored-by: Francis Li <mail@francisli.com>
1 parent a4b2c3b commit 311d647

File tree

15 files changed

+557
-19359
lines changed

15 files changed

+557
-19359
lines changed

‎package-lock.json‎

Lines changed: 196 additions & 19286 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,14 @@
5050
"gcp-metadata": "^6.1.0",
5151
"kysely": "^0.27.4",
5252
"ms": "^2.1.3",
53+
"mustache": "^4.2.0",
5354
"next": "^14.2.18",
5455
"next-auth": "4.24.10",
5556
"nodemailer": "^6.9.16",
5657
"pg": "^8.13.1",
5758
"pg-connection-string": "^2.7.0",
5859
"postgres-migrations": "^5.3.0",
59-
"puppeteer": "24.16.0",
60+
"puppeteer": "^24.16.0",
6061
"react": "^18.3.1",
6162
"react-dom": "^18.3.1",
6263
"react-timer-hook": "^3.0.8",

‎src/backend/routers/para.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,9 @@ export const para = router({
7575
"task.task_id",
7676
"student.first_name",
7777
"student.last_name",
78+
"student.student_id",
7879
"goal.category",
80+
"goal.goal_id",
7981
"benchmark.benchmark_id",
8082
"benchmark.description",
8183
"benchmark.instructions",

‎src/components/benchmarks/BenchmarkListElement.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,9 @@ const BenchmarkListElement = ({
172172
textAlign: "center",
173173
}}
174174
>
175-
<Link href={`/benchmarks/${benchmark.benchmark_id}`}>
175+
<Link
176+
href={`${router.asPath}/benchmarks/${benchmark.benchmark_id}/dataEntry`}
177+
>
176178
<Button
177179
variant="tertiary"
178180
startIcon={<ContentPasteOutlinedIcon fontSize="medium" />}

‎src/components/data-entry/GoalCard.module.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.GridItems {
2+
background-color: var(--primary-99);
3+
border-radius: 8px;
4+
padding: 16px;
5+
gap: 16px;
6+
text-align: start;
7+
8+
@media (max-width: 600px) {
9+
width: 100%;
10+
}
11+
}
12+
.GridItems > h1 {
13+
color: var(--primary-20);
14+
font-weight: 600;
15+
font-size: 20px;
16+
17+
font-family: var(--quicksand);
18+
}
19+
20+
.GridItems > p {
21+
margin-top: 5px;
22+
font-family: var(--inter);
23+
font-weight: 400;
24+
font-size: 16px;
25+
line-height: 150%;
26+
color: var(--primary-20);
27+
}

‎src/components/data-entry/GoalCard.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Card, CardContent, Grid2, Stack } from "@mui/material";
2+
3+
import Chip from "../design_system/chip/Chip";
4+
5+
import Button from "@/components/design_system/button/Button";
6+
7+
import type { Benchmark } from "@/types/global";
8+
9+
import styles from "./GoalCard.module.css";
10+
11+
import { useRouter } from "next/router";
12+
13+
export default function GoalCard({
14+
benchmarks,
15+
}: {
16+
benchmarks: Benchmark | undefined;
17+
}) {
18+
const router = useRouter();
19+
return (
20+
<Card>
21+
<CardContent>
22+
<Chip
23+
variant="task"
24+
label={`Benchmark #${benchmarks ? benchmarks?.number.toString() : ""}`}
25+
sx={{ marginTop: "10px", marginBottom: "10px" }}
26+
/>
27+
<p>{benchmarks?.description}</p>
28+
<Grid2
29+
container
30+
spacing={2}
31+
columnSpacing={{ xs: 1, sm: 2, md: 3 }}
32+
direction={{ xs: "column", sm: "row" }}
33+
sx={{ marginTop: "30px", width: "100%", marginBottom: "1.5rem" }}
34+
>
35+
<Grid2 size={6} className={styles.GridItems}>
36+
<h1>Frequency</h1>
37+
<p>{benchmarks?.frequency}</p>
38+
</Grid2>
39+
<Grid2 size={6} className={styles.GridItems}>
40+
<h1>Instructions</h1>
41+
<p>{benchmarks?.instructions}</p>
42+
</Grid2>
43+
<Grid2 size={6} className={styles.GridItems}>
44+
<h1>Materials</h1>
45+
<p>{benchmarks?.materials}</p>
46+
</Grid2>
47+
<Grid2 size={6} className={styles.GridItems}>
48+
<h1>Activity Setup</h1>
49+
<p>{benchmarks?.setup}</p>
50+
</Grid2>
51+
</Grid2>
52+
<Stack alignItems="center">
53+
<Button
54+
onClick={() =>
55+
router.push(`/benchmarks/${benchmarks?.benchmark_id}`)
56+
}
57+
>
58+
Start Trial
59+
</Button>
60+
</Stack>
61+
</CardContent>
62+
</Card>
63+
);
64+
}

‎src/components/design_system/chip/Chip.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ReactElement } from "react";
44

55
import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
66
import ContentPasteIcon from "@mui/icons-material/ContentPaste";
7+
import AdsClickOutlinedIcon from "@mui/icons-material/AdsClickOutlined";
78

89
interface ChipProps {
910
clickable?: boolean;
@@ -25,7 +26,8 @@ interface ChipProps {
2526
| "primary"
2627
| "secondary"
2728
| "calendar"
28-
| "task";
29+
| "task"
30+
| "target";
2931
icon?: ReactElement;
3032
className?: string;
3133
}
@@ -60,6 +62,14 @@ function Chip({
6062
gap: "8px",
6163
}}
6264
/>
65+
) : variant === "target" ? (
66+
<AdsClickOutlinedIcon
67+
style={{
68+
color: "black",
69+
width: "16px",
70+
gap: "8px",
71+
}}
72+
/>
6373
) : (
6474
icon
6575
)

‎src/components/goal-header/goal-header.tsx‎

Lines changed: 111 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import {
22
Stack,
33
Typography,
4-
Grid,
54
Container,
65
TextareaAutosize,
6+
Box,
77
} from "@mui/material";
88
import { format } from "date-fns";
99
import { useState } from "react";
1010

11+
import Chip from "@/components/design_system/chip/Chip";
1112
import Button from "@/components/design_system/button/Button";
1213
import { trpc } from "@/client/lib/trpc";
1314
import $GoalPage from "@/styles/GoalPage.module.css";
15+
1416
type GoalHeaderProps = {
1517
goalId: string;
1618
name: string;
@@ -29,6 +31,7 @@ export const GoalHeader = ({
2931
const [editGoal, setEditGoal] = useState(false);
3032
const [editGoalInput, setEditGoalInput] = useState("");
3133
const utils = trpc.useContext();
34+
3235
const showEditGoal = () => {
3336
setEditGoal(true);
3437
setEditGoalInput(description || "");
@@ -53,80 +56,120 @@ export const GoalHeader = ({
5356
setEditGoal(false);
5457
setEditGoalInput("");
5558
};
59+
5660
return (
5761
<Container className={$GoalPage.goalDescriptionContainer}>
58-
<Grid container justifyContent="space-between">
59-
<Stack spacing={2} sx={{ marginBottom: "28px" }}>
60-
<Stack direction="row" alignItems="center" spacing={1}>
61-
<Typography variant="h3" color="var(--primary-40)">
62-
{name}
63-
</Typography>
64-
<Typography variant="h3">|</Typography>
65-
<Typography variant="h3" color="#788591">
66-
Added: {format(new Date(createdAt), "MM/dd/yyyy")}
67-
</Typography>
62+
<Box
63+
sx={{
64+
display: "flex",
65+
flexDirection: "column",
66+
gap: 2,
67+
}}
68+
>
69+
<Box
70+
sx={{
71+
display: "flex",
72+
flexDirection: { xs: "column", md: "row" },
73+
justifyContent: "space-between",
74+
alignItems: { xs: "flex-start", md: "center" },
75+
gap: 2,
76+
}}
77+
>
78+
<Stack
79+
direction={{ xs: "column", md: "row" }}
80+
spacing={1.5}
81+
alignItems="flex-start"
82+
sx={{ flexShrink: 0 }}
83+
>
84+
<Chip label={name} variant="target" />
85+
<Chip
86+
label={`Created on: ${format(new Date(createdAt), "MMM, dd, yyyy")}`}
87+
variant="calendar"
88+
/>
6889
</Stack>
69-
</Stack>
70-
{editable && (
71-
<Grid
90+
{editable && (
91+
<Box
92+
sx={{
93+
display: "flex",
94+
flexDirection: { xs: "column", sm: "row" },
95+
gap: 1,
96+
width: { xs: "100%", md: "auto" },
97+
}}
98+
>
99+
{!editGoal && (
100+
<Box sx={{ display: "flex", justifyContent: "right" }}>
101+
<Button
102+
variant="tertiary"
103+
onClick={showEditGoal}
104+
sx={{ width: { md: "auto" } }}
105+
>
106+
Edit goal
107+
</Button>
108+
<Button
109+
variant="secondary"
110+
onClick={() => alert("to be implemented")}
111+
sx={{ width: { md: "auto" } }}
112+
>
113+
View all goals
114+
</Button>
115+
</Box>
116+
)}
117+
{editGoal && (
118+
<>
119+
<Button
120+
variant="tertiary"
121+
onClick={cancelEditGoal}
122+
sx={{ width: { xs: "100%", md: "auto" } }}
123+
>
124+
Cancel
125+
</Button>
126+
<Button
127+
onClick={submitEditGoal}
128+
sx={{ width: { xs: "100%", md: "auto" } }}
129+
>
130+
Save
131+
</Button>
132+
</>
133+
)}
134+
</Box>
135+
)}
136+
</Box>
137+
{editGoal && editable ? (
138+
<TextareaAutosize
139+
className={$GoalPage.editGoalFormTextArea}
140+
value={editGoalInput}
141+
name="description"
142+
onChange={(e) => {
143+
setEditGoalInput(e.target.value);
144+
}}
145+
style={{
146+
width: "100%",
147+
padding: "24px",
148+
fontSize: "0.95rem",
149+
lineHeight: "1.6",
150+
borderRadius: "8px",
151+
border: "1px solid var(--outline)",
152+
fontFamily: "inherit",
153+
minHeight: "100px",
154+
backgroundColor: "var(--on-primary)",
155+
}}
156+
/>
157+
) : (
158+
<Typography
159+
variant="body1"
72160
sx={{
73-
display: "flex",
74-
flexDirection: "start",
75-
justifyContent: "start",
76-
justifyItems: "start",
77-
height: "100%",
78-
pb: 1,
161+
fontSize: "16px",
162+
lineHeight: "150%",
163+
color: "var(--on-background)",
164+
fontFamily: "var(--inter)",
165+
fontWeight: 400,
166+
letterSpacing: "0%",
79167
}}
80-
item
81168
>
82-
{!editGoal && (
83-
<>
84-
<Button
85-
variant="tertiary"
86-
onClick={showEditGoal}
87-
sx={{
88-
margin: "auto",
89-
}}
90-
>
91-
Edit Goal
92-
</Button>
93-
<Button
94-
variant="secondary"
95-
onClick={() => alert("to be implemented")}
96-
>
97-
View all goals
98-
</Button>
99-
</>
100-
)}
101-
{editGoal && (
102-
<>
103-
<Button
104-
variant="tertiary"
105-
form="editGoalForm"
106-
onClick={cancelEditGoal}
107-
>
108-
Cancel
109-
</Button>
110-
<Button form="editGoalForm" onClick={submitEditGoal}>
111-
Save
112-
</Button>
113-
</>
114-
)}
115-
</Grid>
169+
{description}
170+
</Typography>
116171
)}
117-
</Grid>
118-
{editGoal && editable && (
119-
<TextareaAutosize
120-
className={$GoalPage.editGoalFormTextArea}
121-
value={editGoalInput}
122-
name="description"
123-
onChange={(e) => {
124-
setEditGoalInput(e.target.value);
125-
}}
126-
/>
127-
)}
128-
129-
{!editGoal && <Typography variant="body1">{description}</Typography>}
172+
</Box>
130173
</Container>
131174
);
132175
};

0 commit comments

Comments
 (0)