From 5d97320ae8c1a050c4e2144ff0eb55cf3a2bb0c0 Mon Sep 17 00:00:00 2001
From: Tessa Thornberry <tthornberryclass@gmail.com>
Date: Fri, 10 Nov 2023 15:04:23 -0800
Subject: [PATCH] initiated conditional setting for changing between the first
 and second modal selection procecsses.

---
 .../Subgoal-Assignment-Modal.module.css       |  2 +
 .../subgoal/Subgoal-Assignment-Modal.tsx      | 79 +++++++++++--------
 2 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/src/components/subgoal/Subgoal-Assignment-Modal.module.css b/src/components/subgoal/Subgoal-Assignment-Modal.module.css
index 9cc0a5b3..c1373b78 100644
--- a/src/components/subgoal/Subgoal-Assignment-Modal.module.css
+++ b/src/components/subgoal/Subgoal-Assignment-Modal.module.css
@@ -2,6 +2,8 @@
 .assignSubgoalModal {
   max-width: 360px;
   width: 360px;
+  max-height: 580px;
+  height: 800px;
   margin: auto;
   font-size: 16px;
   text-align: left;
diff --git a/src/components/subgoal/Subgoal-Assignment-Modal.tsx b/src/components/subgoal/Subgoal-Assignment-Modal.tsx
index 023a1eb4..4627b871 100644
--- a/src/components/subgoal/Subgoal-Assignment-Modal.tsx
+++ b/src/components/subgoal/Subgoal-Assignment-Modal.tsx
@@ -3,8 +3,6 @@ import {
   Box,
   Dialog,
   DialogTitle,
-  Alert,
-  AlertTitle,
   Button,
   List,
   ListItem,
@@ -24,6 +22,7 @@ interface SubgoalAssignmentModalProps {
 
 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,
@@ -39,10 +38,10 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
     });
   };
 
-  //onClose, keep data in state? or have notification to verify navigation away from page.
   const handleClose = () => {
     props.onClose();
     setSelectedParaIds([]);
+    setCurrentModalSelection(1);
   };
 
   return (
@@ -67,41 +66,51 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
             </p>
           ))}
         </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>
+        {/* 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}
+            onClick={() => setCurrentModalSelection(2)} //hide first selection process and open second
             className={$subgoal.button}
           >
             Next