Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
da611c7
commit 9cd6dd4
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,185 @@ | ||
| import { type Subgoal as Benchmark } from "@/types/global"; | ||
| import Box from "@mui/material/Box"; | ||
| import Button from "@mui/material/Button"; | ||
| import Divider from "@mui/material/Divider"; | ||
| import ContentPasteIcon from "@mui/icons-material/ContentPaste"; | ||
| import { useState, type ReactNode } from "react"; | ||
| import { BenchmarkAssignmentModal } from "./BenchmarkAssignmentModal"; | ||
| import $button from "@/components/design_system/button/Button.module.css"; | ||
| import { format } from "date-fns"; | ||
| import Typography from "@mui/material/Typography"; | ||
| interface BenchmarkProps { | ||
| benchmark: Benchmark; | ||
| index?: number; | ||
| } | ||
|
|
||
| interface InfoProps { | ||
| description: string; | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| const Info = ({ description, children }: InfoProps) => { | ||
| return ( | ||
| <Box | ||
| sx={{ | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| textAlign: "center", | ||
| }} | ||
| > | ||
| <Typography | ||
| sx={{ marginBottom: "0.5em" }} | ||
| variant="overline" | ||
| display="block" | ||
| gutterBottom | ||
| > | ||
| {description} | ||
| </Typography> | ||
| {children} | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| const BenchmarkListElement = ({ benchmark, index }: BenchmarkProps) => { | ||
| const [isAssignmentModalOpen, setIsAssignmentModalOpen] = useState(false); | ||
| return ( | ||
| <Box | ||
| sx={{ | ||
| marginBottom: "2rem", | ||
| }} | ||
| > | ||
| <Box | ||
| sx={{ | ||
| display: "flex-col", | ||
| justifyContent: "space-between", | ||
| backgroundColor: "var(--grey-100)", | ||
| padding: "1rem", | ||
| }} | ||
| > | ||
| <Typography | ||
| sx={{ color: "var(--primary-40)" }} | ||
| variant="overline" | ||
| display="block" | ||
| gutterBottom | ||
| > | ||
| #{(index ?? 0) + 1} created on {format(benchmark.created_at, "P")} | ||
| </Typography> | ||
| <Box sx={{ display: "flex", justifyContent: "space-between" }}> | ||
| <Box sx={{ display: "flex" }}> | ||
| <ContentPasteIcon | ||
| sx={{ | ||
| color: "var(--grey-10)", | ||
| fontSize: 12, | ||
| margin: "1.25rem", | ||
| marginLeft: "0.5rem", | ||
| marginRight: "0.5rem", | ||
| }} | ||
| /> | ||
|
|
||
| <Box sx={{ margin: "1rem", marginLeft: ".5rem" }}> | ||
| {benchmark.description} | ||
| </Box> | ||
| </Box> | ||
| <Box sx={{ margin: "1rem" }}> | ||
| <Button | ||
| className={$button.tertiary} | ||
| onClick={() => alert("To be implemented")} | ||
| > | ||
| {" "} | ||
| Edit | ||
| </Button> | ||
| </Box> | ||
| </Box> | ||
| <Divider sx={{ marginTop: "1rem", marginBottom: "1rem" }} /> | ||
| <Box | ||
| sx={{ | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| }} | ||
| > | ||
| <Info description={"BASELINE LEVEL"}> | ||
| {" "} | ||
| {benchmark?.baseline_level}%{" "} | ||
| </Info> | ||
| <Info description={"TARGET LEVEL"}> {benchmark?.target_level}% </Info> | ||
| <Info description={"CURRENT LEVEL"}> | ||
| {" "} | ||
| {benchmark?.current_level || "N/A"}{" "} | ||
| </Info> | ||
| <Info description={"# OF TRIALS"}> | ||
| {" "} | ||
| {benchmark?.number_of_trials || "N/A"} | ||
| </Info> | ||
| <Info description="DATA"> | ||
| <Box | ||
| sx={{ | ||
| display: "flex", | ||
| flexDirection: { xs: "column", lg: "row" }, | ||
| }} | ||
| > | ||
| <Box | ||
| sx={{ | ||
| marginRight: { xs: "0rem", lg: "0.5rem" }, | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| textAlign: "center", | ||
| }} | ||
| > | ||
| {/* Placeholder href to replace with actual path */} | ||
| <Button | ||
| onClick={() => { | ||
| alert("To be implemented"); | ||
| }} | ||
| className={$button.tertiary} | ||
| > | ||
| Collect Data | ||
| </Button> | ||
| </Box> | ||
| <Box | ||
| sx={{ | ||
| marginLeft: { xs: "0rem", lg: "0.5rem" }, | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| textAlign: "center", | ||
| }} | ||
| > | ||
| {/* Placeholder href to replace with actual path */} | ||
| <Button | ||
| onClick={() => { | ||
| alert("To be implemented"); | ||
| }} | ||
| className={$button.tertiary} | ||
| > | ||
| View Data | ||
| </Button> | ||
| </Box> | ||
| </Box> | ||
| </Info> | ||
| <Info description={"STAFF"}> | ||
| <Button | ||
| className={$button.secondary} | ||
| onClick={() => setIsAssignmentModalOpen(true)} | ||
| sx={{ | ||
| paddingTop: ".4rem !important", | ||
| paddingBottom: ".4rem !important", | ||
| paddingLeft: ".4rem !important", | ||
| paddingRight: ".4rem !important", | ||
| }} | ||
| > | ||
| Assign | ||
| </Button> | ||
| </Info> | ||
| </Box> | ||
| </Box> | ||
| <BenchmarkAssignmentModal | ||
| isOpen={isAssignmentModalOpen} | ||
| onClose={() => setIsAssignmentModalOpen(false)} | ||
| benchmark_id={benchmark.subgoal_id} | ||
| /> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default BenchmarkListElement; |
Oops, something went wrong.