dev -> main (#193)

* Feature/filter for test patients (#192)

* recipients I am following checkbox functionality bugfix

* Allow filtering by test patients

* remove un-intended changes

* link and black fixes

* black fix

* fix based on feedback

---------

Co-authored-by: Amy Chen <clone@cesium.cirg.washington.edu>

* bugFix - TypeError related to Date object

---------

Co-authored-by: Amy Chen <achen2401@gmail.com>
Co-authored-by: Amy Chen <clone@cesium.cirg.washington.edu>

patientsearch/config.py

@@ -25,7 +25,12 @@ def load_json_config(potential_json_string):
 ENABLE_PATIENT_DELETE = os.getenv("ENABLE_PATIENT_DELETE", "false").lower() == "true"
 
 ENABLE_PROVIDER_FILTER = os.getenv("ENABLE_PROVIDER_FILTER", "false").lower() == "true"
-
+FILTER_FOR_TEST_PATIENTS_LABEL = os.getenv(
+    "FILTER_FOR_TEST_PATIENTS_LABEL", "Include test patients"
+)
+ENABLE_FILTER_FOR_TEST_PATIENTS = (
+    os.getenv("ENABLE_FILTER_FOR_TEST_PATIENTS", "false").lower() == "true"
+)
 LAUNCH_AFTER_PATIENT_CREATION = (
     os.getenv("LAUNCH_AFTER_PATIENT_CREATION", "false").lower() == "true"
 )

patientsearch/src/js/components/MyPatientsCheckbox.js

@@ -5,6 +5,7 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Checkbox from "@material-ui/core/Checkbox";
 import ErrorIcon from '@material-ui/icons/ReportProblemOutlined';
 import Tooltip from "@material-ui/core/Tooltip";
+import Typography from "@material-ui/core/Typography";
 
 const checkBoxStyles = makeStyles((theme) => {
   return {
@@ -58,7 +59,7 @@ export default function MyPatientsCheckbox({ label, shouldDisable, shouldCheck,
             }}
           />
         }
-        label={label}
+        label={<Typography variant="body2">{label}</Typography>}
       />
       {error && (
         <Tooltip

patientsearch/src/js/components/PatientListTable.js

@@ -6,8 +6,8 @@ import MaterialTable from "@material-table/core";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import Button from "@material-ui/core/Button";
 import Container from "@material-ui/core/Container";
+import Button from "@material-ui/core/Button";
 import TablePagination from "@material-ui/core/TablePagination";
 import Tooltip from "@material-ui/core/Tooltip";
 import DetailPanel from "./DetailPanel";
@@ -18,6 +18,7 @@ import FilterRow from "./FilterRow";
 import LoadingModal from "./LoadingModal";
 import MyPatientsCheckbox from "./MyPatientsCheckbox";
 import OverlayElement from "./OverlayElement";
+import TestPatientsCheckbox from "./TestPatientsCheckbox";
 import { useUserContext } from "../context/UserContextProvider";
 import { useSettingContext } from "../context/SettingContextProvider";
 import * as constants from "../constants/consts";
@@ -128,6 +129,9 @@ const useStyles = makeStyles((theme) => ({
   moreIcon: {
     marginRight: theme.spacing(1),
   },
+  tableOptionContainers: {
+    marginBottom: theme.spacing(2)
+  }
 }));
 let filterIntervalId = 0;
 export default function PatientListTable() {
@@ -191,6 +195,7 @@ export default function PatientListTable() {
   const [noDataText, setNoDataText] = React.useState("No record found.");
   const [patientIdsByCareTeamParticipant, setPatientIdsByCareTeamParticipant] =
     React.useState(false);
+  const [filterByTestPatients, setFilterByTestPatients] = React.useState(false);
   const tableRef = React.useRef();
   const UrineScreenComponent = lazy(() => import("./UrineScreen"));
   const AgreementComponent = lazy(() => import("./Agreement"));
@@ -439,7 +444,7 @@ export default function PatientListTable() {
             }
             let value = nodes && nodes.length ? nodes[nodes.length-1].value : null;
             if (dataType === "date") {
-              value = getLocalDateTimeString(value);
+              value = value ? getLocalDateTimeString(value) : "--";
             }
             if (dataType === "timeago" && value) {
               value = getTimeAgoDisplay(new Date(value));
@@ -675,6 +680,11 @@ export default function PatientListTable() {
     if (patientIdsByCareTeamParticipant && patientIdsByCareTeamParticipant.length) {
       apiURL += `&_id=${patientIdsByCareTeamParticipant.join(",")}`;
     }
+    if (getAppSettingByKey("ENABLE_FILTER_FOR_TEST_PATIENTS")) {
+      if (!filterByTestPatients) {
+        apiURL += `&_security:not=HTEST`;
+      }
+    }
     if (
       pagination.pageNumber > pagination.prevPageNumber &&
       pagination.nextPageURL
@@ -1173,6 +1183,19 @@ export default function PatientListTable() {
     );
   };
 
+  const renderFilterByTestPatientsCheckbox = () => {
+    if (!getAppSettingByKey("ENABLE_FILTER_FOR_TEST_PATIENTS")) return false;
+    return (
+      <TestPatientsCheckbox
+        label={getAppSettingByKey("FILTER_FOR_TEST_PATIENTS_LABEL")}
+        changeEvent={(checked) => {
+          setFilterByTestPatients(checked);
+          if (tableRef.current) tableRef.current.onQueryChange();
+        }}
+      ></TestPatientsCheckbox>
+    );
+  };
+
   React.useEffect(() => {
     //when page unloads, remove loading indicator
     window.addEventListener("beforeunload", handlePageUnload);
@@ -1186,7 +1209,7 @@ export default function PatientListTable() {
     return () => {
       window.removeEventListener("beforeunload", handlePageUnload);
     };
-  }, [userError, user, appSettings]); //retrieval of settings should occur prior to patient list being rendered/initialized
+  }, [userError, userName, appSettings]); //retrieval of settings should occur prior to patient list being rendered/initialized
 
   return (
     <Container className={classes.container} id="patientList">
@@ -1195,7 +1218,10 @@ export default function PatientListTable() {
       <div className="flex">
         {/* patient search row */}
         {renderPatientSearchRow()}
-        {renderMyPatientsCheckbox()}
+        <div className={classes.tableOptionContainers}>
+          {renderMyPatientsCheckbox()}
+          {renderFilterByTestPatientsCheckbox()}
+        </div>
       </div>
       {/* patient list table */}
 

patientsearch/src/js/components/TestPatientsCheckbox.js

@@ -0,0 +1,54 @@
+import { makeStyles } from "@material-ui/core/styles";
+import PropTypes from "prop-types";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import Typography from "@material-ui/core/Typography";
+
+const checkBoxStyles = makeStyles((theme) => {
+  return {
+    root: {
+      color: theme.palette.primary.main,
+    },
+  };
+});
+const formControlStyles = makeStyles((theme) => {
+  return {
+    root: {
+      backgroundColor: "#f7f7f7",
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1)
+    },
+  };
+});
+
+export default function TestPatientsCheckbox({ label, changeEvent }) {
+  const checkboxClasses = checkBoxStyles();
+  const formControlClasses = formControlStyles();
+  const handleChange = (event) => {
+    if (changeEvent) changeEvent(event.target.checked);
+  };
+  return (
+    <FormControlLabel
+      classes={{
+        root: formControlClasses.root,
+      }}
+      control={
+        <Checkbox
+          onChange={handleChange}
+          name="ckTestPatients"
+          color="primary"
+          size="small"
+          classes={{
+            root: checkboxClasses.root,
+          }}
+        />
+      }
+      label={<Typography variant="body2">{label}</Typography>}
+    />
+  );
+}
+
+TestPatientsCheckbox.propTypes = {
+  label: PropTypes.string.isRequired,
+  changeEvent: PropTypes.func,
+};

patientsearch/src/js/helpers/utility.js

@@ -185,6 +185,7 @@ export function getLocalDateTimeString(utcDateString, shortFormat) {
   //note javascript Date object automatically convert UTC date/time to locate date/time, no need to parse and convert
   let dateObj =
     utcDateString instanceof Date ? utcDateString : new Date(utcDateString);
+  if (!isValid(dateObj)) return utcDateString;
   let year = dateObj.getFullYear();
   let month = pad(dateObj.getMonth() + 1);
   let day = pad(dateObj.getDate());