re-struction patient list component - create new directory and move s… (

#194) * re-struction patient list component - create new directory and move subcomponents * lint fixes * lint fix * remove un-needed comment * add defaults * Update PatientListTable.js - lint fix * code clean up * lint fix * bug fix * lint fix * bug fix, refactor * move style code * code clean up, lint fix * lint fix * remove commented out code --------- Co-authored-by: Amy Chen <clone@cesium.cirg.washington.edu>
uwcirg · Sep 1, 2023 · 418844c · 418844c
1 parent 3f5c3b9
commit 418844c
Show file tree

Hide file tree

Showing 25 changed files with 1,288 additions and 1,054 deletions.
diff --git a/.../__tests__/components/DetailPanel.test.js → ...omponents/patientList/DetailPanel.test.js b/.../__tests__/components/DetailPanel.test.js → ...omponents/patientList/DetailPanel.test.js
@@ -1,10 +1,15 @@
 import { shallow } from "enzyme";
 import React from "react";
-import DetailPanel from "../../js/components/DetailPanel";
+import DetailPanel from "../../../js/components/patientList/DetailPanel";
 
 describe("DetailPanel", () => {
   it("DetailPanel component renders without crashing", () => {
-    const wrapper = shallow(<DetailPanel />);
+    const data = {
+      rowData: {
+        id: 1,
+      },
+    };
+    const wrapper = shallow(<DetailPanel data={data} />);
     expect(wrapper).toBeDefined();
   });
 });
diff --git a/...rc/__tests__/components/FilterRow.test.js → .../components/patientList/FilterRow.test.js b/...rc/__tests__/components/FilterRow.test.js → .../components/patientList/FilterRow.test.js
@@ -1,6 +1,6 @@
 import { shallow } from "enzyme";
 import React from "react";
-import FilterRow from "../../js/components/FilterRow";
+import FilterRow from "../../../js/components/patientList/FilterRow";
 
 describe("FilterRow", () => {
   it("FilterRow component renders without crashing", () => {

diff --git a/...sts__/components/PatientListTable.test.js → ...ents/patientList/PatientListTable.test.js b/...sts__/components/PatientListTable.test.js → ...ents/patientList/PatientListTable.test.js
@@ -1,6 +1,6 @@
 import { shallow } from "enzyme";
 import React from "react";
-import PatientListTable from "../../js/components/PatientListTable";
+import PatientListTable from "../../../js/components/patientList/PatientListTable";
 
 describe("PatientListTable", () => {
   it("Patient list renders without crashing", () => {

diff --git a/patientsearch/src/js/components/DetailPanel.js b/patientsearch/src/js/components/DetailPanel.js
diff --git a/patientsearch/src/js/components/Dropdown.js b/patientsearch/src/js/components/Dropdown.js
@@ -43,9 +43,11 @@ export default function Dropdown(props) {
     "& .MuiPaper-root": {
       borderRadius: 0,
       marginTop: theme.spacing(3),
+      overflow: "hidden",
       minWidth: 180,
       "& .MuiMenu-list": {
         padding: "32px 0 8px",
+        overflow: "hidden"
       },
       "& .MuiMenuItem-root": {
         paddingBottom: theme.spacing(0.5),
@@ -106,9 +108,10 @@ export default function Dropdown(props) {
             key={`menuItem${index}`}
             onClick={(event) => handleMenuSelect(event)}
             dense
+            datatopic={item.id}
           >
             <ListItemIcon className={classes.menuIcon} datatopic={item.id}>
-              <AddCircleOutlineIcon fontSize="small" />
+              <AddCircleOutlineIcon fontSize="small"/>
             </ListItemIcon>
             <Typography variant="subtitle2" datatopic={item.id}>
               {item.text}

diff --git a/patientsearch/src/js/components/EditButtonGroup.js b/patientsearch/src/js/components/EditButtonGroup.js
@@ -23,6 +23,23 @@ const useStyles = makeStyles((theme) => ({
   delYesButton: {
     marginRight: theme.spacing(0.5),
   },
+  modalBody: {
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column"
+  },
+  modalContent: {
+    background: "#FFF",
+    padding: theme.spacing(0, 2, 2, 2),
+    border: "2px solid #c37707",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column"
+  }
 }));
 // button group: Edit, Update, Delete and Cancel buttons
 export default function EditButtonGroup(props) {
@@ -104,8 +121,8 @@ export default function EditButtonGroup(props) {
       aria-labelledby="Delete Entry Modal"
       aria-describedby="Prompt for deleting entry"
     >
-      <div className="warning-modal-body">
-        <div className="warning-modal-content">
+      <div className={classes.modalBody}>
+        <div className={classes.modalContent}>
           <h3>Are you sure you want to remove this entry?</h3>
           {props.entryDescription && (
             <div

diff --git a/patientsearch/src/js/components/Error.js b/patientsearch/src/js/components/Error.js
@@ -21,7 +21,10 @@ const useStyles = makeStyles((theme) => ({
 export default function ErrorMessage(props) {
   const classes = useStyles();
   return (
-    <div className={classes.root} style={props.style}>
+    <div
+      className={classes.root}
+      style={{ ...props.style, display: props.message ? "block" : "none" }}
+    >
       <Alert severity="error" message={props.message}></Alert>
     </div>
   );

diff --git a/patientsearch/src/js/components/patientList/DetailPanel.js b/patientsearch/src/js/components/patientList/DetailPanel.js
@@ -0,0 +1,57 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "@material-ui/core/Button";
+import Paper from "@material-ui/core/Paper";
+import { makeStyles } from "@material-ui/core/styles";
+import { usePatientListContext } from "../../context/PatientListContextProvider";
+
+const useStyles = makeStyles((theme) => ({
+  detailPanelWrapper: {
+    backgroundColor: "#dde7e6",
+    padding: theme.spacing(0.25),
+  },
+  detailPanelContainer: {
+    position: "relative",
+    minHeight: theme.spacing(8),
+    backgroundColor: "#fbfbfb",
+  },
+  detailPanelCloseButton: {
+    position: "absolute",
+    top: theme.spacing(1.5),
+    right: theme.spacing(6),
+    color: theme.palette.primary.main,
+  },
+}));
+
+export default function DetailPanel({ data }) {
+  const classes = useStyles();
+  let {
+    getDetailPanelContent = function () {},
+    onDetailPanelClose = function () {},
+  } = usePatientListContext();
+
+  return (
+    <div className={classes.detailPanelWrapper}>
+      <Paper
+        elevation={1}
+        variant="outlined"
+        className={classes.detailPanelContainer}
+      >
+        {getDetailPanelContent(data)}
+        <Button
+          onClick={() => {
+            onDetailPanelClose(data);
+          }}
+          className={classes.detailPanelCloseButton}
+          size="small"
+        >
+          Close X
+        </Button>
+      </Paper>
+    </div>
+  );
+}
+
+DetailPanel.propTypes = {
+  data: PropTypes.object.isRequired,
+};
diff --git a/patientsearch/src/js/components/patientList/DropdownMenu.js b/patientsearch/src/js/components/patientList/DropdownMenu.js
@@ -0,0 +1,21 @@
+import Dropdown from "../Dropdown";
+import { usePatientListContext } from "../../context/PatientListContextProvider";
+
+export default function DropdownMenu() {
+  let {
+    anchorEl,
+    getMenuItems = function () {
+      return null;
+    },
+    handleMenuClose = function () {},
+    handleMenuSelect = function () {},
+  } = usePatientListContext();
+  return (
+    <Dropdown
+      anchorEl={anchorEl}
+      handleMenuClose={handleMenuClose}
+      handleMenuSelect={handleMenuSelect}
+      menuItems={getMenuItems()}
+    ></Dropdown>
+  );
+}
diff --git a/patientsearch/src/js/components/FilterRow.js → ...rc/js/components/patientList/FilterRow.js b/patientsearch/src/js/components/FilterRow.js → ...rc/js/components/patientList/FilterRow.js
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
 import DateFnsUtils from "@date-io/date-fns";
 import isValid from "date-fns/isValid";
@@ -14,6 +13,7 @@ import {
   MuiPickersUtilsProvider,
   KeyboardDatePicker,
 } from "@material-ui/pickers";
+import { usePatientListContext } from "../../context/PatientListContextProvider";
 
 const useStyles = makeStyles((theme) => ({
   row: {
@@ -49,7 +49,19 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function FilterRow(props) {
+export default function FilterRow() {
+  let {
+    //methods
+    handleSearch = function () {
+      console.log("handleSearch is not defined.  Unable to search.");
+    },
+    onFiltersDidChange = function () {
+      console.log("onFiltersDidChange is not defined.");
+    },
+    //states/set state methods
+    actionLabel,
+  } = usePatientListContext();
+
   const classes = useStyles();
   const LAUNCH_BUTTON_LABEL = "VIEW";
   const [firstName, setFirstName] = React.useState("");
@@ -59,7 +71,7 @@ export default function FilterRow(props) {
   const handleFirstNameChange = (event) => {
     let targetValue = event.target.value;
     setFirstName(targetValue);
-    props.onFiltersDidChange([
+    onFiltersDidChange([
       {
         field: "first_name",
         value: targetValue,
@@ -77,7 +89,7 @@ export default function FilterRow(props) {
   const handleLastNameChange = (event) => {
     let targetValue = event.target.value;
     setLastName(targetValue);
-    props.onFiltersDidChange([
+    onFiltersDidChange([
       {
         field: "last_name",
         value: targetValue,
@@ -112,7 +124,7 @@ export default function FilterRow(props) {
   const clearDate = () => {
     setDateInput("");
     setDate(null);
-    props.onFiltersDidChange([
+    onFiltersDidChange([
       {
         field: "first_name",
         value: firstName,
@@ -129,25 +141,23 @@ export default function FilterRow(props) {
   };
   const handleClear = () => {
     clearFields();
-    props.onFiltersDidChange(null);
+    onFiltersDidChange(null);
   };
   const clearFields = () => {
     setFirstName("");
     setLastName("");
     clearDate();
   };
   const getLaunchButtonLabel = () => {
-    return props.launchButtonLabel
-      ? props.launchButtonLabel
-      : LAUNCH_BUTTON_LABEL;
+    return actionLabel ? actionLabel : LAUNCH_BUTTON_LABEL;
   };
   const handleKeyDown = (e) => {
     const pressedKey = String(e.key).toLowerCase();
     if (pressedKey === "spacebar") {
       e.stopPropagation();
     }
     if (pressedKey === "enter") {
-      props.launchFunc(getFilterData());
+      handleSearch(getFilterData());
       return;
     }
     return false;
@@ -234,7 +244,7 @@ export default function FilterRow(props) {
           if (!event || !isValid(event)) {
             if (event && String(dateInput).replace(/[-_]/g, "").length >= 8)
               setDate(event);
-            props.onFiltersDidChange([
+            onFiltersDidChange([
               {
                 field: "first_name",
                 value: firstName,
@@ -251,7 +261,7 @@ export default function FilterRow(props) {
             return;
           }
           setDate(event);
-          props.onFiltersDidChange([
+          onFiltersDidChange([
             {
               field: "first_name",
               value: firstName,
@@ -278,7 +288,7 @@ export default function FilterRow(props) {
       color="primary"
       size="small"
       variant="contained"
-      onClick={() => props.launchFunc(getFilterData())}
+      onClick={() => handleSearch(getFilterData())}
     >
       {getLaunchButtonLabel()}
     </Button>
@@ -316,9 +326,3 @@ export default function FilterRow(props) {
     </tr>
   );
 }
-
-FilterRow.propTypes = {
-  onFiltersDidChange: PropTypes.func.isRequired,
-  launchButtonLabel: PropTypes.string,
-  launchFunc: PropTypes.func,
-};