implement meds (last dose) section

ubclaunchpad · Dec 1, 2024 · 488fd74 · 488fd74
1 parent 83e2135
commit 488fd74
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 31 deletions.
diff --git a/frontend/src/components/Modals/ConfirmCancelModal/ConfirmCancelModal.jsx b/frontend/src/components/Modals/ConfirmCancelModal/ConfirmCancelModal.jsx
@@ -20,7 +20,7 @@ export const ConfirmCancelModal = () => {
 
   return (
     <div>
-      <CLButtonSecondary className="cancel-x-icon-button" onClick={handleOpen} width={"220px"}>
+      <CLButtonSecondary className="cancel-x-icon-button" onClick={handleOpen} width={"180px"}>
        <XMarkIcon className="cancel-x-icon"/>
         <p>Cancel</p>
       </CLButtonSecondary>

diff --git a/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.jsx b/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.jsx
@@ -29,7 +29,7 @@ export const LogSavedSuccessModal = () => {
 
   return (
     <div>
-      <CLButtonPrimary className="save-icon-button" onClick={handleOpen} width={"330px"}>
+      <CLButtonPrimary className="save-icon-button" onClick={handleOpen} width={"280px"}>
        <SaveOutlinedIcon className="save-icon" />
         <p>Create New Log</p>
       </CLButtonPrimary>

diff --git a/frontend/src/pages/manual_entry/ManualEntry.jsx b/frontend/src/pages/manual_entry/ManualEntry.jsx
@@ -1,7 +1,7 @@
 import { AppBar } from "../../components/AppBar/AppBar";
 import { LogSavedSuccessModal } from "../../components/Modals/LogSavedSuccessModal/LogSavedSuccessModal";
 import { ConfirmCancelModal } from "../../components/Modals/ConfirmCancelModal/ConfirmCancelModal";
-import { SurgicalAndPatientInfo } from "./sections/surgical_and_patient_info/SurgicalAndPatientInto";
+import { SurgicalAndPatientInfo } from "./sections/surgical_and_patient_info/SurgicalAndPatientInfo";
 import { ExaminationsAndInvestigations } from "./sections/examinations_and_investigations/ExaminationsAndInvestigations";
 import { CasePlanning } from "./sections/case_planning/CasePlanning";
 import { LearningPoints } from "./sections/learning_points/LearningPoints";
@@ -14,7 +14,7 @@ import "./ManualEntry.css"
  * https://dev.to/dance2die/react-sticky-event-with-intersection-observer-310h
  */
 const ManualEntry = () => {
-  
+
   return (
     <div>
       <AppBar />

diff --git a/...tend/src/pages/manual_entry/sections/surgical_and_patient_info/SurgicalAndPatientInfo.css b/...tend/src/pages/manual_entry/sections/surgical_and_patient_info/SurgicalAndPatientInfo.css
@@ -0,0 +1,18 @@
+.meds-last-dose-button-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.meds-last-dose-button {
+  padding: 0;
+  background-color: transparent;
+  border-radius: 20px;
+}
+
+.meds-last-dose-icon {
+  height: 34px;
+  width: 34px;
+  color: #244B94;
+}
diff --git a/...d_patient_info/SurgicalAndPatientInto.jsx → ...d_patient_info/SurgicalAndPatientInfo.jsx b/...d_patient_info/SurgicalAndPatientInto.jsx → ...d_patient_info/SurgicalAndPatientInfo.jsx
@@ -1,13 +1,14 @@
+import { useState } from "react";
 import Box from "@mui/material/Box";
 import Grid from '@mui/material/Grid2';
 import Radio from "@mui/material/Radio";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { PlusCircleIcon, MinusCircleIcon } from "@heroicons/react/24/outline";
+import "./SurgicalAndPatientInfo.css"
 
 export const SurgicalAndPatientInfo = () => {
-  // const medsLastDoseArray = []
-
   return (
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={8}>
@@ -46,31 +47,7 @@ export const SurgicalAndPatientInfo = () => {
               </div>
             </Grid>
             <Grid size={12}>
-              <p className="input-title-bold">Meds (last dose)</p>
-            </Grid>
-            <Grid size={6}>
-              <div>
-                <p className="input-title">Name</p>
-                <input className="manual-entry-input" type="text" placeholder="1234567"/>
-              </div>
-            </Grid>
-            <Grid size={6}>
-              <div>
-                <p className="input-title">Dose</p>
-                <input className="manual-entry-input" type="text" placeholder="Adult cardiac"/>
-              </div>
-            </Grid>
-            <Grid size={6}>
-              <div>
-                <p className="input-title">Frequency</p>
-                <input className="manual-entry-input" type="text" placeholder="Adult cardiac"/>
-              </div>
-            </Grid>
-            <Grid size={6}>
-              <div>
-                <p className="input-title">Method of delivery</p>
-                <input className="manual-entry-input" type="text" placeholder="Adult cardiac"/>
-              </div>
+              <MedsLastDoseSection />
             </Grid>
           </Grid>
         </Grid>
@@ -138,4 +115,73 @@ export const SurgicalAndPatientInfo = () => {
       </Grid>
     </Box>
   )
+}
+
+const MedsLastDoseSection = () => {
+  const [medsLastDoses, setMedsLastDoses] = useState([0])
+
+  const handleAddMed = () => {
+    setMedsLastDoses(prevState => [...prevState, prevState.length])
+  }
+  const handleRemoveMed = () => {
+    if (medsLastDoses.length === 1) {
+      return
+    }
+    setMedsLastDoses(prevState => prevState.slice(0, prevState.length - 1))
+  }
+
+  return (
+    <div>
+      {medsLastDoses.map((_, i) => {
+        return (
+          <div key={i}>
+            {
+              (i > 0 &&
+                <div className="meds-last-dose-button-container">
+                  <button className="meds-last-dose-button" onClick={handleRemoveMed}>
+                    <MinusCircleIcon className="meds-last-dose-icon"/>
+                  </button>
+              </div>
+              )
+            }
+            <Grid container spacing={1}>
+              <Grid size={6}>
+                <div>
+                  <p className="input-title">Name</p>
+                  <input className="manual-entry-input" type="text" placeholder="1234567"/>
+                </div>
+              </Grid>
+              <Grid size={6}>
+                <div>
+                  <p className="input-title">Dose</p>
+                  <input className="manual-entry-input" type="text" placeholder="Adult cardiac"/>
+                </div>
+              </Grid>
+              <Grid size={6}>
+                <div>
+                  <p className="input-title">Frequency</p>
+                  <input className="manual-entry-input" type="text" placeholder="Adult cardiac"/>
+                </div>
+              </Grid>
+              <Grid size={6}>
+                <div>
+                  <p className="input-title">Method of delivery</p>
+                  <input className="manual-entry-input" type="text" placeholder="Adult cardiac"/>
+                </div>
+              </Grid>
+            </Grid>
+            {
+              (i === medsLastDoses.length - 1 &&
+                <div className="meds-last-dose-button-container">
+                  <button className="meds-last-dose-button" onClick={handleAddMed}>
+                    <PlusCircleIcon className="meds-last-dose-icon"/>
+                  </button>
+                </div>
+              )
+            }
+          </div>
+        )
+      })}
+    </div>
+  )
 }