Add para assignment dialog (#239)

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

@@ -0,0 +1,91 @@
+import { trpc } from "@/client/lib/trpc";
+import {
+  Box,
+  Dialog,
+  DialogTitle,
+  Alert,
+  AlertTitle,
+  Button,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  Checkbox,
+  ListItemText,
+} from "@mui/material";
+import { useState } from "react";
+
+interface SubgoalAssignmentModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
+  const [selectedParaIds, setSelectedParaIds] = useState<string[]>([]);
+  const myParasQuery = trpc.case_manager.getMyParas.useQuery();
+
+  const handleParaToggle = (paraId: string) => () => {
+    setSelectedParaIds((prev) => {
+      if (prev.includes(paraId)) {
+        return prev.filter((id) => id !== paraId);
+      } else {
+        return [...prev, paraId];
+      }
+    });
+  };
+
+  const handleClose = () => {
+    props.onClose();
+    setSelectedParaIds([]);
+  };
+
+  return (
+    <Dialog open={props.isOpen} onClose={handleClose}>
+      <DialogTitle>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>
+        <Box sx={{ display: "flex", justifyContent: "end" }}>
+          <Button variant="contained" onClick={handleClose}>
+            Next
+          </Button>
+        </Box>
+      </Box>
+    </Dialog>
+  );
+};

src/components/subgoal/Subgoal.tsx

@@ -2,25 +2,17 @@ import { trpc } from "@/client/lib/trpc";
 import { Subgoal } from "@/types/global";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import { useState } from "react";
+import { SubgoalAssignmentModal } from "./Subgoal-Assignment-Modal";
 
 interface SubgoalProps {
   subgoal: Subgoal;
 }
 
 const Subgoals = ({ subgoal }: SubgoalProps) => {
+  const [isAssignmentModalOpen, setIsAssignmentModalOpen] = useState(false);
   const task = trpc.iep.tempAddTaskToSelf.useMutation();
 
-  // TODO: add form to assign to my paras
-  // const assignToPara = (event: React.FormEvent<HTMLFormElement>) => {
-  //   event.preventDefault();
-  //   const data = new FormData(event.currentTarget);
-
-  //   task.mutate({
-  //     subgoal_id: subgoal.subgoal_id,
-  //     assignee_id: data.get("assignee_id") as string,
-  //     due_date: new Date(data.get("due_date")) as Date
-  //   });
-  // }
   const assignToPara = async () => {
     const result = await task.mutateAsync({
       subgoal_id: subgoal.subgoal_id,
@@ -35,32 +27,55 @@ const Subgoals = ({ subgoal }: SubgoalProps) => {
   };
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        justifyContent: "space-between",
-        backgroundColor: "#f4d5d5",
-        padding: "1rem",
-      }}
-    >
-      <p>{subgoal.description}</p>
-      <Button
+    <>
+      <Box
         sx={{
-          height: "24px",
-          width: "auto",
-          padding: "0px 20px",
-          backgroundColor: "#5347d7",
-          borderRadius: "5px",
-          border: "none",
-          color: "#ffffff",
-          fontFamily: "Quicksand",
+          display: "flex",
+          justifyContent: "space-between",
+          backgroundColor: "#f4d5d5",
+          padding: "1rem",
         }}
-        variant="contained"
-        onClick={assignToPara}
       >
-        Assign
-      </Button>
-    </Box>
+        <p>{subgoal.description}</p>
+        <Button
+          sx={{
+            height: "24px",
+            width: "auto",
+            padding: "0px 20px",
+            backgroundColor: "#5347d7",
+            borderRadius: "5px",
+            border: "none",
+            color: "#ffffff",
+            fontFamily: "Quicksand",
+          }}
+          variant="contained"
+          onClick={assignToPara}
+        >
+          Assign
+        </Button>
+
+        <Button
+          sx={{
+            height: "24px",
+            width: "auto",
+            padding: "0px 20px",
+            backgroundColor: "#5347d7",
+            borderRadius: "5px",
+            border: "none",
+            color: "#ffffff",
+            fontFamily: "Quicksand",
+          }}
+          variant="contained"
+          onClick={() => setIsAssignmentModalOpen(true)}
+        >
+          [Draft] Assign
+        </Button>
+      </Box>
+      <SubgoalAssignmentModal
+        isOpen={isAssignmentModalOpen}
+        onClose={() => setIsAssignmentModalOpen(false)}
+      />
+    </>
   );
 };