Added description to assign to benchmark flow (#241)

Co-authored-by: Max Isom <[email protected]>

src/backend/routers/iep.ts

@@ -215,6 +215,23 @@ export const iep = router({
       return result;
     }),
 
+  getSubgoal: authenticatedProcedure
+    .input(
+      z.object({
+        subgoal_id: z.string(),
+      })
+    )
+    .query(async (req) => {
+      const { subgoal_id } = req.input;
+
+      const result = await req.ctx.db
+        .selectFrom("subgoal")
+        .where("subgoal.subgoal_id", "=", subgoal_id)
+        .selectAll()
+        .execute();
+      return result;
+    }),
+
   getSubgoalsByAssignee: authenticatedProcedure
     .input(
       z.object({

src/components/subgoal/Subgoal-Assignment-Modal.module.css

@@ -0,0 +1,34 @@
+/* Styles for Assign Subgoal Modal Component */
+.assignSubgoalModal {
+  max-width: 360px;
+  width: 360px;
+  max-height: 580px;
+  height: 800px;
+  margin: auto;
+  font-size: 16px;
+  text-align: left;
+}
+
+.assignSubgoalModalTitle {
+  font-size: 24px;
+}
+
+.subgoalDescriptionBox {
+  border-radius: 8px;
+  background-color: #f6f5ff;
+  padding: 8px 16px;
+}
+
+.subgoalTitle {
+  font-size: 20px;
+}
+
+.subgoalDescription,
+.staffListItemText {
+  font-size: 16px;
+}
+
+/* We may have to set up a theme to override the MUI styles so we can achieve our design systems setups since this does not work, or build our own global buttons and use those */
+.button {
+  background-color: #20159e;
+}

src/components/subgoal/Subgoal-Assignment-Modal.tsx

@@ -3,8 +3,6 @@ import {
   Box,
   Dialog,
   DialogTitle,
-  Alert,
-  AlertTitle,
   Button,
   List,
   ListItem,
@@ -14,15 +12,21 @@ import {
   ListItemText,
 } from "@mui/material";
 import { useState } from "react";
+import $subgoal from "./Subgoal-Assignment-Modal.module.css";
 
 interface SubgoalAssignmentModalProps {
   isOpen: boolean;
   onClose: () => void;
+  subgoal_id: string;
 }
 
 export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
   const [selectedParaIds, setSelectedParaIds] = useState<string[]>([]);
+  const [currentModalSelection, setCurrentModalSelection] = useState(1);
   const myParasQuery = trpc.case_manager.getMyParas.useQuery();
+  const { data: subgoal } = trpc.iep.getSubgoal.useQuery({
+    subgoal_id: props.subgoal_id,
+  });
 
   const handleParaToggle = (paraId: string) => () => {
     setSelectedParaIds((prev) => {
@@ -37,51 +41,78 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
   const handleClose = () => {
     props.onClose();
     setSelectedParaIds([]);
+    setCurrentModalSelection(1);
   };
 
   return (
-    <Dialog open={props.isOpen} onClose={handleClose}>
-      <DialogTitle>Assign to benchmark</DialogTitle>
+    <Dialog
+      open={props.isOpen}
+      onClose={handleClose}
+      className={$subgoal.assignSubgoalModal}
+    >
+      <DialogTitle className={$subgoal.assignSubgoalModalTitle}>
+        Assign to benchmark
+      </DialogTitle>
 
       <Box sx={{ px: 2, pb: 2 }}>
-        <Alert severity="info" sx={{ mb: 2 }}>
-          <AlertTitle>Benchmark</AlertTitle>
-          By October, when given a list of 20 unfamiliar words that contain
-          short-vowel sounds, the student will correctly pronounce 18 of the 20
-          words with 90% accuracy in 3 out of 4 trials.
-        </Alert>
-        Select one or more paras:
-        <Box
-          sx={{
-            my: 2,
-            maxHeight: "10rem",
-            overflow: "scroll",
-            border: "1px solid #d6dde1",
-            borderRadius: 1,
-          }}
-        >
-          <List sx={{ p: 0 }}>
-            {myParasQuery.data?.map((para) => (
-              <ListItem key={para.para_id} sx={{ px: 0, py: 0 }}>
-                <ListItemButton dense onClick={handleParaToggle(para.para_id)}>
-                  <ListItemIcon sx={{ minWidth: "auto" }}>
-                    <Checkbox
-                      edge="start"
-                      disableRipple
-                      tabIndex={-1}
-                      checked={selectedParaIds.includes(para.para_id)}
-                    />
-                  </ListItemIcon>
-                  <ListItemText>
-                    {para.first_name} {para.last_name}
-                  </ListItemText>
-                </ListItemButton>
-              </ListItem>
-            ))}
-          </List>
+        <Box className={$subgoal.subgoalDescriptionBox}>
+          <p className={$subgoal.subgoalTitle}>Benchmark</p>
+          {subgoal?.map((thisSubgoal) => (
+            <p
+              className={$subgoal.subgoalDescription}
+              key="thisSubgoal.description"
+            >
+              {thisSubgoal.description}
+            </p>
+          ))}
         </Box>
+        {/* we could make this and the 2nd selection process with a reusable component, e.g. labels in the <p> below could be from rendering {selectionLabel} but this is one solution to start */}
+        {currentModalSelection === 1 && (
+          <Box>
+            <p>Select one or more paras:</p>
+            <Box
+              sx={{
+                my: 2,
+                maxHeight: "10rem",
+                overflow: "auto",
+                border: "1px solid #d6dde1",
+                borderRadius: 1,
+              }}
+            >
+              <List sx={{ p: 0 }} className={$subgoal.staffListItemText}>
+                {myParasQuery.data?.map((para) => (
+                  // CSS ask is to reorder the mapped staff so that the selected staff are moved to the top of the list
+                  <ListItem key={para.para_id} sx={{ px: 0, py: 0 }}>
+                    <ListItemButton
+                      dense
+                      onClick={handleParaToggle(para.para_id)}
+                    >
+                      <ListItemIcon sx={{ minWidth: "auto" }}>
+                        <Checkbox
+                          edge="start"
+                          disableRipple
+                          tabIndex={-1}
+                          checked={selectedParaIds.includes(para.para_id)}
+                        />
+                      </ListItemIcon>
+                      <ListItemText>
+                        {para.first_name} {para.last_name}
+                      </ListItemText>
+                    </ListItemButton>
+                  </ListItem>
+                ))}
+              </List>
+            </Box>
+          </Box>
+        )}
+        {/* Enter 2nd selection process here, utilizing selected staff at the end of the process */}
+        {currentModalSelection === 2 && <Box></Box>}
         <Box sx={{ display: "flex", justifyContent: "end" }}>
-          <Button variant="contained" onClick={handleClose}>
+          <Button
+            variant="contained"
+            onClick={() => setCurrentModalSelection(2)} //hide first selection process and open second
+            className={$subgoal.button}
+          >
             Next
           </Button>
         </Box>

src/components/subgoal/Subgoal.tsx

@@ -74,6 +74,7 @@ const Subgoals = ({ subgoal }: SubgoalProps) => {
       <SubgoalAssignmentModal
         isOpen={isAssignmentModalOpen}
         onClose={() => setIsAssignmentModalOpen(false)}
+        subgoal_id={subgoal.subgoal_id}
       />
     </>
   );