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] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: NV <[email protected]> Co-authored-by: Katrina Connors <[email protected]> Co-authored-by: mrabbitt <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Run prettier * Run 'npm run format' --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: NV <[email protected]> Co-authored-by: Katrina Connors <[email protected]> Co-authored-by: mrabbitt <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
sfbrigade · Aug 28, 2024 · 6f1c66d · 6f1c66d
1 parent dd22791
commit 6f1c66d
Show file tree

Hide file tree

Showing 12 changed files with 548 additions and 290 deletions.
diff --git a/...bgoal/Subgoal-Assignment-Modal.module.css → ...marks/BenchmarkAssignmentModal.module.css b/...bgoal/Subgoal-Assignment-Modal.module.css → ...marks/BenchmarkAssignmentModal.module.css
@@ -1,25 +1,25 @@
-/* Styles for Assign Subgoal Modal Component */
-.assignSubgoalModal {
+/* Styles for Assign Benchmark Modal Component */
+.assignBenchmarkModal {
   margin: auto;
   font-size: 16px;
   text-align: left;
 }
 
-.assignSubgoalModalTitle {
+.assignBenchmarkModalTitle {
   font-size: 24px;
 }
 
-.subgoalDescriptionBox {
+.benchmarkDescriptionBox {
   border-radius: 8px;
   background-color: var(--primary-container);
   padding: 8px 16px;
 }
 
-.subgoalTitle {
+.benchmarkTitle {
   font-size: 20px;
 }
 
-.subgoalDescription,
+.benchmarkDescription,
 .staffListItemText {
   font-size: 16px;
 }

diff --git a/...ents/subgoal/Subgoal-Assignment-Modal.tsx → ...s/benchmarks/BenchmarkAssignmentModal.tsx b/...ents/subgoal/Subgoal-Assignment-Modal.tsx → ...s/benchmarks/BenchmarkAssignmentModal.tsx
@@ -10,7 +10,7 @@ import {
   DialogActions,
 } from "@mui/material";
 import { useState, useRef } from "react";
-import $subgoal from "./Subgoal-Assignment-Modal.module.css";
+import $benchmark from "./BenchmarkAssignmentModal.module.css";
 import $button from "@/components/design_system/button/Button.module.css";
 
 import {
@@ -19,10 +19,10 @@ import {
 } from "./Duration-Selection-Step";
 import DS_Checkbox from "../design_system/checkbox/Checkbox";
 
-interface SubgoalAssignmentModalProps {
+interface BenchmarkAssignmentModalProps {
   isOpen: boolean;
   onClose: () => void;
-  subgoal_id: string;
+  benchmark_id: string;
 }
 
 interface ParaProps {
@@ -40,16 +40,18 @@ interface ParaProps {
 const STEPS = ["PARA_SELECTION", "DURATION_SELECTION"];
 type Step = (typeof STEPS)[number];
 
-export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
+export const BenchmarkAssignmentModal = (
+  props: BenchmarkAssignmentModalProps
+) => {
   const [selectedParaIds, setSelectedParaIds] = useState<string[]>([]);
   const nextButtonRef = useRef<HTMLButtonElement>(null);
   const [assignmentDuration, setAssignmentDuration] =
     useState<AssignmentDuration>({ type: "forever" });
   const [currentModalSelection, setCurrentModalSelection] =
     useState<Step>("PARA_SELECTION");
   const { data: myParas } = trpc.case_manager.getMyParas.useQuery();
-  const { data: subgoal } = trpc.iep.getSubgoal.useQuery({
-    subgoal_id: props.subgoal_id,
+  const { data: benchmark } = trpc.iep.getSubgoal.useQuery({
+    subgoal_id: props.benchmark_id,
   });
 
   const assignTaskToPara = trpc.iep.assignTaskToParas.useMutation();
@@ -89,7 +91,7 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
     } else {
       // Reached end, save
       await assignTaskToPara.mutateAsync({
-        subgoal_id: props.subgoal_id,
+        subgoal_id: props.benchmark_id,
         para_ids: selectedParaIds,
         due_date:
           assignmentDuration.type === "until_date"
@@ -108,23 +110,23 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
     <Dialog
       open={props.isOpen}
       onClose={handleClose}
-      className={$subgoal.assignSubgoalModal}
+      className={$benchmark.assignBenchmarkModal}
       maxWidth="sm"
       fullWidth
     >
-      <DialogTitle className={$subgoal.assignSubgoalModalTitle}>
+      <DialogTitle className={$benchmark.assignBenchmarkModalTitle}>
         Assign to benchmark
       </DialogTitle>
 
       <DialogContent>
-        <Box className={$subgoal.subgoalDescriptionBox}>
-          <p className={$subgoal.subgoalTitle}>Benchmark</p>
-          {subgoal?.map((thisSubgoal) => (
+        <Box className={$benchmark.benchmarkDescriptionBox}>
+          <p className={$benchmark.benchmarkTitle}>Benchmark</p>
+          {benchmark?.map((thisBenchmark) => (
             <p
-              className={$subgoal.subgoalDescription}
-              key="thisSubgoal.description"
+              className={$benchmark.benchmarkDescription}
+              key="thisBenchmark.description"
             >
-              {thisSubgoal.description}
+              {thisBenchmark.description}
             </p>
           ))}
         </Box>
@@ -140,7 +142,7 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
                 borderRadius: 1,
               }}
             >
-              <List sx={{ p: 0 }} className={$subgoal.staffListItemText}>
+              <List sx={{ p: 0 }} className={$benchmark.staffListItemText}>
                 {myParas
                   ?.filter((para): para is ParaProps => para !== undefined)
                   .map((para) => (

diff --git a/src/components/benchmarks/BenchmarkListElement.tsx b/src/components/benchmarks/BenchmarkListElement.tsx
@@ -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;