Skip to content

Commit 6f1c66d

Browse files
chengtchris1nickvisutkatconnorsmrabbittdependabot[bot]
authored
Created benchmark view new design (#395)
* Started redesigning subgoal list element. * Added data section to subgoal list element * Change description text to overline style * Move 'Add benchmark' button to the right of the benchmark status tabs * Change color of created on blurb * 'Added clipboard icon before the description text in tile element' * Improve appearence on mobile * Improve appearence of "Add benchmark" button on mobile * Add an All Tab, add filtering by status * Center No subgoals yet text * Fix type script issue * Add placeholder graphic when theres no benchmarks * Move benchmark section into its own component * Fix TS Check error * Fix TS check error * Create a white goal page container * Fix TSC error * change padding between benchmark goal tile * Seperate benchmark description into own component, add "view all goals" button, change button styling * Fix tsc * prettier * Remove unneeded comment * Fix centering on "No Benchmarks Yet" screen by adding margin * Change the text color for 'Goal #X' label, removeunderline from 'View all Goals' button, change text from 'Add benchmark' to 'Create benchmark' to allign with figma * Add placeholder links for collect/view Data * Add button.tertiary class to Collect/View Data * Replace Link component with buttons * Remove edit goal and view all goals from BenchmarkGoalHeader to goal-header * Rename benchmarks to benchmarks container, move child benchmarks into seperate component to allign with naming scheme * typescript fixes * typescript fixes * typescript fixes, check for showEditGoal * Remove 'subgoal' and merge files to benchmarks. Reduce props used for BenchmarksGoalHeader by moving logic to parent. Revert change to CSS. * Remove unneeded comments and import statements * Further clean up unused import statements * Remove BenchmarkGoalHeader and move its logic into [goal_id].tsx * Fix type check error for "submittedEditGoal()" * Remove benchmarks file, combine with BenchmarkContainer. Simpify logic for displaying "NoBenchmarkGraphic" * Try to replace references to subgoal to benchmark where possible * Replace 'button' elements with MUI 'Button' elements, change a Link component with button classname to a button component wraped in Link * Remove unused export * Change buttons to MUI Button eelement on remaining benchmark fikes * Move logic edit goal logic to goal header, change design to match Figma * Edit button style on edit goal form * Modify create.tsx to remove the wrapper element, remove unneeded white padding * replace textarea with MUI textfield * replace textarea with MUI TextareaAutosize * Remove unneeded grid * Merge main to Created-benchmark-view-new-design (#398) * change `npm i --ci` to `npm ci` to help ensure reproducible builds (#353) * Chore/upgrade NextJS (#361) * update NextJS to 14 along with react, react-dom, other deps * adjust min node version to NextJS 14's requirement * Create dependabot.yml (#354) configure dependabot for npm and Github Actions * Closes #365: Added Seed Script (#386) * structure for seeding db * added seed.ts * seed script functionality addded * resolved seed data visualization, added student data * seed data for staff * update readme to include new script * removed unused name * cleanup, typo fixes * Chore/fix lint warnings (#383) * fix linting issues * address remaining lint warnings * fix type error in theme * undo color changes * Fix #369: Fixed Javascript console warnings on Create Benchmark page (#385) Fixed warnings related to handling null for textarea values, custom Stepper icons. * Created benchmark view new design (#347) * Started redesigning subgoal list element. * Added data section to subgoal list element * Change description text to overline style * Move 'Add benchmark' button to the right of the benchmark status tabs * Change color of created on blurb * 'Added clipboard icon before the description text in tile element' * Improve appearence on mobile * Improve appearence of "Add benchmark" button on mobile * Add an All Tab, add filtering by status * Center No subgoals yet text * Fix type script issue * Add placeholder graphic when theres no benchmarks * Move benchmark section into its own component * Fix TS Check error * Fix TS check error * Create a white goal page container * Fix TSC error * change padding between benchmark goal tile * Seperate benchmark description into own component, add "view all goals" button, change button styling * Fix tsc * prettier * Remove unneeded comment * Fix centering on "No Benchmarks Yet" screen by adding margin * Change the text color for 'Goal #X' label, removeunderline from 'View all Goals' button, change text from 'Add benchmark' to 'Create benchmark' to allign with figma * Add placeholder links for collect/view Data * Add button.tertiary class to Collect/View Data * Replace Link component with buttons * Remove edit goal and view all goals from BenchmarkGoalHeader to goal-header * Rename benchmarks to benchmarks container, move child benchmarks into seperate component to allign with naming scheme * typescript fixes * typescript fixes * typescript fixes, check for showEditGoal * Remove 'subgoal' and merge files to benchmarks. Reduce props used for BenchmarksGoalHeader by moving logic to parent. Revert change to CSS. * Remove unneeded comments and import statements * Further clean up unused import statements * Remove BenchmarkGoalHeader and move its logic into [goal_id].tsx * Fix type check error for "submittedEditGoal()" * Remove benchmarks file, combine with BenchmarkContainer. Simpify logic for displaying "NoBenchmarkGraphic" * Try to replace references to subgoal to benchmark where possible * Replace 'button' elements with MUI 'Button' elements, change a Link component with button classname to a button component wraped in Link * Remove unused export * Change buttons to MUI Button eelement on remaining benchmark fikes * Move logic edit goal logic to goal header, change design to match Figma * Edit button style on edit goal form * Modify create.tsx to remove the wrapper element, remove unneeded white padding * replace textarea with MUI textfield * replace textarea with MUI TextareaAutosize * Remove unneeded grid * Bump axios from 1.6.8 to 1.7.5 (#393) Bumps [axios](https://github.com/axios/axios) from 1.6.8 to 1.7.5. - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](axios/axios@v1.6.8...v1.7.5) --- updated-dependencies: - dependency-name: axios dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: NV <2823112+nickvisut@users.noreply.github.com> Co-authored-by: Katrina Connors <32425204+katconnors@users.noreply.github.com> Co-authored-by: mrabbitt <284825+mrabbitt@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Run prettier * Run 'npm run format' --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: NV <2823112+nickvisut@users.noreply.github.com> Co-authored-by: Katrina Connors <32425204+katconnors@users.noreply.github.com> Co-authored-by: mrabbitt <284825+mrabbitt@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
1 parent dd22791 commit 6f1c66d

File tree

12 files changed

+548
-290
lines changed

12 files changed

+548
-290
lines changed

‎src/components/subgoal/Subgoal-Assignment-Modal.module.css renamed to ‎src/components/benchmarks/BenchmarkAssignmentModal.module.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
/* Styles for Assign Subgoal Modal Component */
2-
.assignSubgoalModal {
1+
/* Styles for Assign Benchmark Modal Component */
2+
.assignBenchmarkModal {
33
margin: auto;
44
font-size: 16px;
55
text-align: left;
66
}
77

8-
.assignSubgoalModalTitle {
8+
.assignBenchmarkModalTitle {
99
font-size: 24px;
1010
}
1111

12-
.subgoalDescriptionBox {
12+
.benchmarkDescriptionBox {
1313
border-radius: 8px;
1414
background-color: var(--primary-container);
1515
padding: 8px 16px;
1616
}
1717

18-
.subgoalTitle {
18+
.benchmarkTitle {
1919
font-size: 20px;
2020
}
2121

22-
.subgoalDescription,
22+
.benchmarkDescription,
2323
.staffListItemText {
2424
font-size: 16px;
2525
}

‎src/components/subgoal/Subgoal-Assignment-Modal.tsx renamed to ‎src/components/benchmarks/BenchmarkAssignmentModal.tsx

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
DialogActions,
1111
} from "@mui/material";
1212
import { useState, useRef } from "react";
13-
import $subgoal from "./Subgoal-Assignment-Modal.module.css";
13+
import $benchmark from "./BenchmarkAssignmentModal.module.css";
1414
import $button from "@/components/design_system/button/Button.module.css";
1515

1616
import {
@@ -19,10 +19,10 @@ import {
1919
} from "./Duration-Selection-Step";
2020
import DS_Checkbox from "../design_system/checkbox/Checkbox";
2121

22-
interface SubgoalAssignmentModalProps {
22+
interface BenchmarkAssignmentModalProps {
2323
isOpen: boolean;
2424
onClose: () => void;
25-
subgoal_id: string;
25+
benchmark_id: string;
2626
}
2727

2828
interface ParaProps {
@@ -40,16 +40,18 @@ interface ParaProps {
4040
const STEPS = ["PARA_SELECTION", "DURATION_SELECTION"];
4141
type Step = (typeof STEPS)[number];
4242

43-
export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
43+
export const BenchmarkAssignmentModal = (
44+
props: BenchmarkAssignmentModalProps
45+
) => {
4446
const [selectedParaIds, setSelectedParaIds] = useState<string[]>([]);
4547
const nextButtonRef = useRef<HTMLButtonElement>(null);
4648
const [assignmentDuration, setAssignmentDuration] =
4749
useState<AssignmentDuration>({ type: "forever" });
4850
const [currentModalSelection, setCurrentModalSelection] =
4951
useState<Step>("PARA_SELECTION");
5052
const { data: myParas } = trpc.case_manager.getMyParas.useQuery();
51-
const { data: subgoal } = trpc.iep.getSubgoal.useQuery({
52-
subgoal_id: props.subgoal_id,
53+
const { data: benchmark } = trpc.iep.getSubgoal.useQuery({
54+
subgoal_id: props.benchmark_id,
5355
});
5456

5557
const assignTaskToPara = trpc.iep.assignTaskToParas.useMutation();
@@ -89,7 +91,7 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
8991
} else {
9092
// Reached end, save
9193
await assignTaskToPara.mutateAsync({
92-
subgoal_id: props.subgoal_id,
94+
subgoal_id: props.benchmark_id,
9395
para_ids: selectedParaIds,
9496
due_date:
9597
assignmentDuration.type === "until_date"
@@ -108,23 +110,23 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
108110
<Dialog
109111
open={props.isOpen}
110112
onClose={handleClose}
111-
className={$subgoal.assignSubgoalModal}
113+
className={$benchmark.assignBenchmarkModal}
112114
maxWidth="sm"
113115
fullWidth
114116
>
115-
<DialogTitle className={$subgoal.assignSubgoalModalTitle}>
117+
<DialogTitle className={$benchmark.assignBenchmarkModalTitle}>
116118
Assign to benchmark
117119
</DialogTitle>
118120

119121
<DialogContent>
120-
<Box className={$subgoal.subgoalDescriptionBox}>
121-
<p className={$subgoal.subgoalTitle}>Benchmark</p>
122-
{subgoal?.map((thisSubgoal) => (
122+
<Box className={$benchmark.benchmarkDescriptionBox}>
123+
<p className={$benchmark.benchmarkTitle}>Benchmark</p>
124+
{benchmark?.map((thisBenchmark) => (
123125
<p
124-
className={$subgoal.subgoalDescription}
125-
key="thisSubgoal.description"
126+
className={$benchmark.benchmarkDescription}
127+
key="thisBenchmark.description"
126128
>
127-
{thisSubgoal.description}
129+
{thisBenchmark.description}
128130
</p>
129131
))}
130132
</Box>
@@ -140,7 +142,7 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
140142
borderRadius: 1,
141143
}}
142144
>
143-
<List sx={{ p: 0 }} className={$subgoal.staffListItemText}>
145+
<List sx={{ p: 0 }} className={$benchmark.staffListItemText}>
144146
{myParas
145147
?.filter((para): para is ParaProps => para !== undefined)
146148
.map((para) => (

‎src/components/benchmarks/BenchmarkListElement.tsx

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import { type Subgoal as Benchmark } from "@/types/global";
2+
import Box from "@mui/material/Box";
3+
import Button from "@mui/material/Button";
4+
import Divider from "@mui/material/Divider";
5+
import ContentPasteIcon from "@mui/icons-material/ContentPaste";
6+
import { useState, type ReactNode } from "react";
7+
import { BenchmarkAssignmentModal } from "./BenchmarkAssignmentModal";
8+
import $button from "@/components/design_system/button/Button.module.css";
9+
import { format } from "date-fns";
10+
import Typography from "@mui/material/Typography";
11+
interface BenchmarkProps {
12+
benchmark: Benchmark;
13+
index?: number;
14+
}
15+
16+
interface InfoProps {
17+
description: string;
18+
children: ReactNode;
19+
}
20+
21+
const Info = ({ description, children }: InfoProps) => {
22+
return (
23+
<Box
24+
sx={{
25+
display: "flex",
26+
flexDirection: "column",
27+
alignItems: "center",
28+
justifyContent: "center",
29+
textAlign: "center",
30+
}}
31+
>
32+
<Typography
33+
sx={{ marginBottom: "0.5em" }}
34+
variant="overline"
35+
display="block"
36+
gutterBottom
37+
>
38+
{description}
39+
</Typography>
40+
{children}
41+
</Box>
42+
);
43+
};
44+
45+
const BenchmarkListElement = ({ benchmark, index }: BenchmarkProps) => {
46+
const [isAssignmentModalOpen, setIsAssignmentModalOpen] = useState(false);
47+
return (
48+
<Box
49+
sx={{
50+
marginBottom: "2rem",
51+
}}
52+
>
53+
<Box
54+
sx={{
55+
display: "flex-col",
56+
justifyContent: "space-between",
57+
backgroundColor: "var(--grey-100)",
58+
padding: "1rem",
59+
}}
60+
>
61+
<Typography
62+
sx={{ color: "var(--primary-40)" }}
63+
variant="overline"
64+
display="block"
65+
gutterBottom
66+
>
67+
#{(index ?? 0) + 1} created on {format(benchmark.created_at, "P")}
68+
</Typography>
69+
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
70+
<Box sx={{ display: "flex" }}>
71+
<ContentPasteIcon
72+
sx={{
73+
color: "var(--grey-10)",
74+
fontSize: 12,
75+
margin: "1.25rem",
76+
marginLeft: "0.5rem",
77+
marginRight: "0.5rem",
78+
}}
79+
/>
80+
81+
<Box sx={{ margin: "1rem", marginLeft: ".5rem" }}>
82+
{benchmark.description}
83+
</Box>
84+
</Box>
85+
<Box sx={{ margin: "1rem" }}>
86+
<Button
87+
className={$button.tertiary}
88+
onClick={() => alert("To be implemented")}
89+
>
90+
{" "}
91+
Edit
92+
</Button>
93+
</Box>
94+
</Box>
95+
<Divider sx={{ marginTop: "1rem", marginBottom: "1rem" }} />
96+
<Box
97+
sx={{
98+
display: "flex",
99+
justifyContent: "space-between",
100+
}}
101+
>
102+
<Info description={"BASELINE LEVEL"}>
103+
{" "}
104+
{benchmark?.baseline_level}%{" "}
105+
</Info>
106+
<Info description={"TARGET LEVEL"}> {benchmark?.target_level}% </Info>
107+
<Info description={"CURRENT LEVEL"}>
108+
{" "}
109+
{benchmark?.current_level || "N/A"}{" "}
110+
</Info>
111+
<Info description={"# OF TRIALS"}>
112+
{" "}
113+
{benchmark?.number_of_trials || "N/A"}
114+
</Info>
115+
<Info description="DATA">
116+
<Box
117+
sx={{
118+
display: "flex",
119+
flexDirection: { xs: "column", lg: "row" },
120+
}}
121+
>
122+
<Box
123+
sx={{
124+
marginRight: { xs: "0rem", lg: "0.5rem" },
125+
alignItems: "center",
126+
justifyContent: "center",
127+
textAlign: "center",
128+
}}
129+
>
130+
{/* Placeholder href to replace with actual path */}
131+
<Button
132+
onClick={() => {
133+
alert("To be implemented");
134+
}}
135+
className={$button.tertiary}
136+
>
137+
Collect Data
138+
</Button>
139+
</Box>
140+
<Box
141+
sx={{
142+
marginLeft: { xs: "0rem", lg: "0.5rem" },
143+
alignItems: "center",
144+
justifyContent: "center",
145+
textAlign: "center",
146+
}}
147+
>
148+
{/* Placeholder href to replace with actual path */}
149+
<Button
150+
onClick={() => {
151+
alert("To be implemented");
152+
}}
153+
className={$button.tertiary}
154+
>
155+
View Data
156+
</Button>
157+
</Box>
158+
</Box>
159+
</Info>
160+
<Info description={"STAFF"}>
161+
<Button
162+
className={$button.secondary}
163+
onClick={() => setIsAssignmentModalOpen(true)}
164+
sx={{
165+
paddingTop: ".4rem !important",
166+
paddingBottom: ".4rem !important",
167+
paddingLeft: ".4rem !important",
168+
paddingRight: ".4rem !important",
169+
}}
170+
>
171+
Assign
172+
</Button>
173+
</Info>
174+
</Box>
175+
</Box>
176+
<BenchmarkAssignmentModal
177+
isOpen={isAssignmentModalOpen}
178+
onClose={() => setIsAssignmentModalOpen(false)}
179+
benchmark_id={benchmark.subgoal_id}
180+
/>
181+
</Box>
182+
);
183+
};
184+
185+
export default BenchmarkListElement;

0 commit comments

Comments
 (0)