Skip to content

Commit e7964fd

Browse files
MapleSyrupyMapleSyrupy
committed
DataEntryPage update
1 parent 1a06923 commit e7964fd

12 files changed

Lines changed: 484 additions & 229 deletions

File tree

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"pg": "^8.13.1",
5757
"pg-connection-string": "^2.7.0",
5858
"postgres-migrations": "^5.3.0",
59-
"puppeteer": "24.16.0",
59+
"puppeteer": "^24.16.0",
6060
"react": "^18.3.1",
6161
"react-dom": "^18.3.1",
6262
"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:(--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: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import Box from "@mui/material/Box";
2+
import Grid2 from "@mui/material/Grid2";
3+
4+
import Chip from "../design_system/chip/Chip";
5+
6+
import Button from "@/components/design_system/button/Button";
7+
import { Typography } from "@mui/material";
8+
9+
import type { Benchmark } from "@/types/global";
10+
11+
import styles from "./GoalCard.module.css";
12+
13+
export default function BenchmarksContainer({
14+
benchmarks,
15+
}: {
16+
benchmarks: Benchmark | undefined;
17+
}) {
18+
return (
19+
<Box
20+
sx={{
21+
marginBottom: "2rem",
22+
width: "100%",
23+
}}
24+
>
25+
<Box
26+
sx={{
27+
display: "flex-col",
28+
justifyContent: "space-between",
29+
backgroundColor: "var(--grey-100)",
30+
padding: "24px",
31+
gap: "24px",
32+
borderRadius: "8px",
33+
}}
34+
>
35+
<Typography
36+
sx={{ color: "var(--primary-40)" }}
37+
variant="overline"
38+
display="block"
39+
gutterBottom
40+
></Typography>
41+
<Chip
42+
variant="task"
43+
label={`Benchmark ${benchmarks?.number.toString()}`}
44+
sx={{ marginTop: "10px", marginBottom: "10px" }}
45+
/>
46+
<p>{benchmarks?.description}</p>
47+
<Grid2
48+
container
49+
spacing={2}
50+
columnSpacing={{ xs: 1, sm: 2, md: 3 }}
51+
direction={{ xs: "column", sm: "row" }}
52+
sx={{ marginTop: "30px", width: "100%" }}
53+
>
54+
<Grid2 size={6} className={styles.GridItems}>
55+
<h1>Frequency</h1>
56+
<p>{benchmarks?.frequency}</p>
57+
</Grid2>
58+
<Grid2 size={6} className={styles.GridItems}>
59+
<h1>Instructions</h1>
60+
<p>{benchmarks?.instructions}</p>
61+
</Grid2>
62+
<Grid2 size={6} className={styles.GridItems}>
63+
<h1>Materials</h1>
64+
<p>{benchmarks?.materials}</p>
65+
</Grid2>
66+
<Grid2 size={6} className={styles.GridItems}>
67+
<h1>Activity Setup</h1>
68+
<p>{benchmarks?.setup}</p>
69+
</Grid2>
70+
</Grid2>
71+
<Box
72+
sx={{ display: "flex", justifyContent: "center", marginTop: "20px" }}
73+
>
74+
<Button>Start Trial</Button>
75+
</Box>
76+
</Box>
77+
</Box>
78+
);
79+
}

‎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: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@ import {
33
Typography,
44
Container,
55
TextareaAutosize,
6-
Chip,
76
Box,
87
} from "@mui/material";
98
import { format } from "date-fns";
109
import { useState } from "react";
11-
import { AdjustOutlined, CalendarMonthOutlined } from "@mui/icons-material";
1210

11+
import Chip from "@/components/design_system/chip/Chip";
1312
import Button from "@/components/design_system/button/Button";
1413
import { trpc } from "@/client/lib/trpc";
1514
import $GoalPage from "@/styles/GoalPage.module.css";
@@ -82,11 +81,10 @@ export const GoalHeader = ({
8281
alignItems="flex-start"
8382
sx={{ flexShrink: 0 }}
8483
>
85-
<Chip icon={<AdjustOutlined />} label={name} variant="outlined" />
84+
<Chip label={name} variant="target" />
8685
<Chip
87-
icon={<CalendarMonthOutlined />}
8886
label={`Created on: ${format(new Date(createdAt), "MMM, dd, yyyy")}`}
89-
variant="outlined"
87+
variant="calendar"
9088
/>
9189
</Stack>
9290
{editable && (
@@ -99,22 +97,22 @@ export const GoalHeader = ({
9997
}}
10098
>
10199
{!editGoal && (
102-
<>
100+
<Box sx={{ display: "flex", justifyContent: "right" }}>
103101
<Button
104102
variant="tertiary"
105103
onClick={showEditGoal}
106-
sx={{ width: { xs: "100%", md: "auto" } }}
104+
sx={{ width: { md: "auto" } }}
107105
>
108106
Edit goal
109107
</Button>
110108
<Button
111109
variant="secondary"
112110
onClick={() => alert("to be implemented")}
113-
sx={{ width: { xs: "100%", md: "auto" } }}
111+
sx={{ width: { md: "auto" } }}
114112
>
115113
View all goals
116114
</Button>
117-
</>
115+
</Box>
118116
)}
119117
{editGoal && (
120118
<>
@@ -146,22 +144,26 @@ export const GoalHeader = ({
146144
}}
147145
style={{
148146
width: "100%",
149-
padding: "12px",
147+
padding: "24px",
150148
fontSize: "0.95rem",
151149
lineHeight: "1.6",
152-
borderRadius: "4px",
153-
border: "1px solid #e0e0e0",
150+
borderRadius: "8px",
151+
border: "1px solid var(--outline)",
154152
fontFamily: "inherit",
155153
minHeight: "100px",
154+
backgroundColor: "var(--on-primary)",
156155
}}
157156
/>
158157
) : (
159158
<Typography
160159
variant="body1"
161160
sx={{
162-
fontSize: "0.95rem",
163-
lineHeight: "1.6",
164-
color: "#1a1a1a",
161+
fontSize: "16px",
162+
lineHeight: "150%",
163+
color: "var(--on-background)",
164+
fontFamily: "var(--inter)",
165+
fontWeight: 400,
166+
letterSpacing: "0%",
165167
}}
166168
>
167169
{description}

‎src/components/taskCard/TaskCard.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ interface ParaTaskCard {
99
task_id: string;
1010
first_name: string;
1111
last_name: string;
12+
student_id: string;
1213
category: string;
14+
goal_id: string;
1315
description: string;
1416
instructions: string | null;
1517
number_of_trials: number | null;
@@ -48,7 +50,11 @@ const TaskCard = ({ task }: TaskCardProps) => {
4850
}`
4951
}
5052
header={`${task.first_name} ${task.last_name}`}
51-
onClick={() => router.push(`/benchmarks/${task.benchmark_id}`)}
53+
onClick={() =>
54+
router.push(
55+
`/students/${task.student_id}/goals/${task.goal_id}/benchmarks/${task.benchmark_id}/dataEntry`
56+
)
57+
}
5258
sx={{ mb: "1.5rem" }}
5359
>
5460
{task?.description}

0 commit comments

Comments
 (0)