lib updates, code fixes

uwcirg · Jan 7, 2025 · 83b2600 · 83b2600
1 parent 6488ea3
commit 83b2600
Show file tree

Hide file tree

Showing 13 changed files with 816 additions and 837 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cosri_patient_search",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Patient search interface for COSRI",
   "license": "BSD-Source-Code",
   "scripts": {
@@ -39,7 +39,6 @@
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^5.1.0",
     "jsonpath": "^1.1.1",
-    "node-polyfill-webpack-plugin": "^2.0.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-text-mask": "^5.5.0",
@@ -60,20 +59,21 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "babel-jest": "^29.7.0",
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.27.1",
     "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^4.2.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
     "dotenv": "^8.6.0",
     "filemanager-webpack-plugin": "^7.0.0",
     "globals": "^15.14.0",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.6.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.0.0",
+    "node-polyfill-webpack-plugin": "^4.1.0",
     "sass": "^1.57.1",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.3.0",
+    "sass-loader": "^16.0.4",
+    "style-loader": "^4.0.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.97.1",
     "webpack-bundle-analyzer": "^4.10.2",

diff --git a/patientsearch/src/js/components/Agreement.js b/patientsearch/src/js/components/Agreement.js
@@ -496,17 +496,6 @@ export default function Agreement(props) {
               className: classes.dateInput
             },
           }}
-          // renderInput={(props) => (
-          //   <TextField
-          //     {...props}
-          //     inputProps={{
-          //       placeholder: "MM-DD-YYYY",
-          //     }}
-          //     inputFormat="MM-DD-YYYY"
-          //     className={classes.dateInput}
-          //     variant="standard"
-          //   />
-          // )}
           clearable={true}
           format="YYYY-MM-DD"
           minDate={dayjs("1950-01-01")}

diff --git a/patientsearch/src/js/components/Dropdown.js b/patientsearch/src/js/components/Dropdown.js
@@ -77,13 +77,14 @@ export default function Dropdown(props) {
   const menuItems = props.menuItems ? props.menuItems : null;
 
   if (!menuItems) return null;
+  if (!props.anchorEl) return null;
 
   return (
     <StyledMenu
       id="dropdownMenu"
       anchorEl={props.anchorEl}
       keepMounted
-      open={Boolean(props.anchorEl)}
+      open={!!props.open}
       onClose={(event) => handleMenuClose(event)}
       transformOrigin={{
         vertical: "top",

diff --git a/patientsearch/src/js/components/HistoryTable.js b/patientsearch/src/js/components/HistoryTable.js
@@ -1,13 +1,13 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import React from "react";
 import { useTheme } from "@mui/material/styles";
-import makeStyles from '@mui/styles/makeStyles';
-import MaterialTable from "@material-table/core";
+import makeStyles from "@mui/styles/makeStyles";
+import MaterialTable, { MTableActions } from "@material-table/core";
 import TablePagination from "@mui/material/TablePagination";
 import CircularProgress from "@mui/material/CircularProgress";
 import Error from "./Error";
-import {fetchData} from "../helpers/utility";
-import {tableIcons} from "../constants/consts";
+import { fetchData } from "../helpers/utility";
+import { tableIcons } from "../constants/consts";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -133,12 +133,13 @@ export default function HistoryTable(props) {
       <Error message={errorMessage} style={errorStyle} />
     </div>
   );
+  const columns = props.columns ?? [];
   return (
     <React.Fragment>
       <div className={classes.root}>
         <MaterialTable
           className="history"
-          columns={props.columns}
+          columns={columns}
           data={data}
           options={{
             ...defaultOptions,
@@ -151,6 +152,13 @@ export default function HistoryTable(props) {
           components={{
             OverlayLoading: () => renderOverloadingComponent(),
             Pagination: (parentProps) => renderTablePagination(parentProps),
+            Actions: (props) => (
+              <MTableActions
+                {...props}
+                columns={columns}
+                onColumnsChanged={() => false}
+              ></MTableActions>
+            ),
           }}
           editable={{
             onRowUpdate: (newData, oldData) => {
@@ -208,11 +216,11 @@ export default function HistoryTable(props) {
   );
 }
 HistoryTable.propTypes = {
-    data: PropTypes.array.isRequired,
-    columns: PropTypes.array.isRequired,
-    APIURL: PropTypes.string.isRequired,
-    submitDataFormatter: PropTypes.func,
-    onRowUpdate: PropTypes.func,
-    onRowDelete: PropTypes.func,
-    options: PropTypes.object
+  data: PropTypes.array.isRequired,
+  columns: PropTypes.array.isRequired,
+  APIURL: PropTypes.string.isRequired,
+  submitDataFormatter: PropTypes.func,
+  onRowUpdate: PropTypes.func,
+  onRowDelete: PropTypes.func,
+  options: PropTypes.object,
 };
diff --git a/patientsearch/src/js/components/UrineScreen.js b/patientsearch/src/js/components/UrineScreen.js
@@ -444,10 +444,12 @@ export default function UrineScreen(props) {
       }
     )
       .then(() => {
-        if (!snackOpen || !setHistoryInitialized)
-          setSnackOpen(true);
+        setSnackOpen(true);
         setTimeout(() => {
-          getHistory(callback);
+          getHistory(() => {
+            setSnackOpen(false);
+            callback();
+          });
         }, 150);
       })
       .catch((e) => {
@@ -607,36 +609,6 @@ export default function UrineScreen(props) {
       );
     });
   };
-  const getColumns = () => [
-    {
-      field: "id",
-      hidden: true,
-    },
-    {
-      title: "Urine Drug Screen Name",
-      field: "type",
-      emptyValue: "--",
-      cellStyle: {
-        padding: "4px 24px 4px 16px",
-      },
-      lookup: getSelectLookupTypes(),
-      editable: !onlyOneUrineScreenType() ? "always" : "never",
-    },
-    {
-      title: "Order Date",
-      field: "date",
-      emptyValue: "--",
-      cellStyle: {
-        padding: "4px 24px 4px 16px",
-      },
-      editComponent: (params) => (
-        <FormattedInput
-          defaultValue={params.value}
-          handleChange={(e) => params.onChange(e.target.value)}
-        ></FormattedInput>
-      ),
-    },
-  ];
   const getSelectLookupTypes = () => {
     if (!urineScreenTypes) return;
     let types = {};
@@ -785,6 +757,36 @@ export default function UrineScreen(props) {
       />
     </div>
   );
+  const columns = [
+    {
+      field: "id",
+      hidden: true,
+    },
+    {
+      title: "Urine Drug Screen Name",
+      field: "type",
+      emptyValue: "--",
+      cellStyle: {
+        padding: "4px 24px 4px 16px",
+      },
+      lookup: getSelectLookupTypes(),
+      editable: !onlyOneUrineScreenType() ? "always" : "never",
+    },
+    {
+      title: "Order Date",
+      field: "date",
+      emptyValue: "--",
+      cellStyle: {
+        padding: "4px 24px 4px 16px",
+      },
+      editComponent: (params) => (
+        <FormattedInput
+          defaultValue={params.value}
+          handleChange={(e) => params.onChange(e.target.value)}
+        ></FormattedInput>
+      ),
+    },
+  ];
   const renderMostRecentHistory = () => (
     <React.Fragment>
       <Typography
@@ -876,11 +878,17 @@ export default function UrineScreen(props) {
           <div className="history-table">
             <HistoryTable
               data={history}
-              columns={getColumns()}
+              columns={columns}
               APIURL="/fhir/ServiceRequest/"
               submitDataFormatter={submitDataFormatter}
               onRowUpdate={() => getHistory()}
               onRowDelete={() => getHistory()}
+              options={{
+                actionsCellStyle: {
+                  width: "60%",
+                  textAlign: "left",
+                },
+              }}
             ></HistoryTable>
           </div>
         )}

diff --git a/patientsearch/src/js/components/patientList/DropdownMenu.js b/patientsearch/src/js/components/patientList/DropdownMenu.js
@@ -1,21 +1,27 @@
 import Dropdown from "../Dropdown";
 import { usePatientListContext } from "../../context/PatientListContextProvider";
 
-export default function DropdownMenu() {
+export default function DropdownMenu(props) {
   let {
-    anchorEl,
+   // anchorEl,
+    currentRow,
     getMenuItems = function () {
       return null;
     },
     handleMenuClose = function () {},
     handleMenuSelect = function () {},
   } = usePatientListContext();
+  if (!props.anchorEl) return null;
   return (
-    <Dropdown
-      anchorEl={anchorEl}
-      handleMenuClose={handleMenuClose}
-      handleMenuSelect={handleMenuSelect}
-      menuItems={getMenuItems()}
-    ></Dropdown>
+    (
+      <Dropdown
+        anchorEl={props.anchorEl}
+        open={props.data.id === currentRow?.id}
+        handleMenuClose={handleMenuClose}
+        handleMenuSelect={handleMenuSelect}
+        menuItems={getMenuItems()}
+        {...props}
+      ></Dropdown>
+    )
   );
 }
diff --git a/patientsearch/src/js/components/patientList/PatientList.js b/patientsearch/src/js/components/patientList/PatientList.js
@@ -1,6 +1,5 @@
 import React from "react";
-//import MaterialTable, {MTableActions} from "@material-table/core";
-import MaterialTable from "@material-table/core";
+import MaterialTable, { MTableActions } from "@material-table/core";
 import CircularProgress from "@mui/material/CircularProgress";
 import Container from "@mui/material/Container";
 import { usePatientListContext } from "../../context/PatientListContextProvider";
@@ -72,9 +71,14 @@ export default function PatientListTable() {
     );
   };
 
-  const renderDropdownMenu = () => {
+  const renderDropdownMenu = (props) => {
     if (shouldHideMoreMenu()) return false;
-    return <DropdownMenu></DropdownMenu>;
+    return (
+      <DropdownMenu
+        {...props}
+        anchorEl={document.querySelector("#actions_" + props.data?.id)}
+      ></DropdownMenu>
+    );
   };
 
   React.useEffect(() => {
@@ -115,9 +119,16 @@ export default function PatientListTable() {
                   <CircularProgress></CircularProgress>
                 </OverlayElement>
               ),
-              // Actions: (props) => {
-              //   return <MTableActions {...props} columns={columns} onColumnsChanged={() => true}></MTableActions>
-              // }
+              Actions: (props) => (
+                <div id={`actions_${props.data.id}`}>
+                  <MTableActions
+                    {...props}
+                    columns={getColumns()}
+                    onColumnsChanged={() => false}
+                  ></MTableActions>
+                  {renderDropdownMenu(props)}
+                </div>
+              ),
             }}
             icons={constants.tableIcons}
           />
@@ -132,7 +143,7 @@ export default function PatientListTable() {
         </div>
         <LaunchDialog></LaunchDialog>
         <ReactivatingModal></ReactivatingModal>
-        {renderDropdownMenu()}
+        {/* {renderDropdownMenu()} */}
       </Container>
     </>
   );

diff --git a/patientsearch/src/js/constants/consts.js b/patientsearch/src/js/constants/consts.js
@@ -152,6 +152,6 @@ export const CREATE_BUTTON_LABEL = "CREATE";
 export const MORE_MENU_KEY = "MORE_MENU";
 export const ACCESS_TOKEN_KEY = "access_token";
 export const REALM_ACCESS_TOKEN_KEY = "realm_access";
-export const MAX_MAIN_TABLE_WIDTH = "1280px";
+export const MAX_MAIN_TABLE_WIDTH = "1200px";
 export const FOLLOWING_FLAG = "following";
 export const MIN_QUERY_COUNT = 500;