Merge pull request #145 from mcode/dev

Dev

.env

@@ -6,6 +6,7 @@ VITE_AUTH = http://localhost:8180
 VITE_CDS_SERVICE = http://localhost:8090/etasu/reset
 VITE_CLIENT = app-login
 VITE_CLIENT_SCOPES = launch offline_access openid profile user/Patient.read patient/Patient.read user/Practitioner.read
+VITE_USE_DEFAULT_USER = false
 VITE_DEFAULT_USER = pra1234
 VITE_EHR_BASE = http://localhost:8080/test-ehr/r4
 VITE_EHR_SERVER = http://localhost:8080/test-ehr/r4

Dockerfile

@@ -1,9 +1,13 @@
 FROM node:21-alpine
 
+ARG VITE_URL
+ENV VITE_URL=$VITE_URL
+
 WORKDIR /home/node/app/request-generator
 COPY --chown=node:node . .
 RUN npm install
 EXPOSE 3000
-COPY --chown=node:node . .
+
+HEALTHCHECK --interval=30s --start-period=15s --timeout=10m --retries=10 CMD wget --no-verbose --tries=1 --spider ${VITE_URL} || exit 1
 
 CMD npm run start

Dockerfile.dev

@@ -1,6 +1,14 @@
 FROM node:21-alpine
 WORKDIR /home/node/app/request-generator
+
+ARG VITE_URL
+ENV VITE_URL=$VITE_URL
+
 COPY --chown=node:node . .
 RUN npm install
 EXPOSE 3000
+EXPOSE 3001
+
+HEALTHCHECK --interval=30s --start-period=15s --timeout=10m --retries=10 CMD wget --no-verbose --tries=1 --spider ${VITE_URL} || exit 1
+
 CMD ./dockerRunnerDev.sh

README.md

@@ -116,6 +116,7 @@ Following are a list of modifiable paths:
 | VITE_CDS_SERVICE                                      | `http://localhost:8090/cds-services`                                                                 | The base URL of the CDS Service.  This will typically be the REMS Admin.                     |
 | VITE_CLIENT                                           | `app-login`                                                                                          | The default client to use for the SMART launch. Can be modified directly when launching the app.                     |
 | VITE_CLIENT_SCOPES                                    | `launch offline_access openid profile user/Patient.read patient/Patient.read user/Practitioner.read` | The default scopes to use for the SMART launch. Can be modified directly when launching the app.                      |
+| VITE_USE_DEFAULT_USER                                 | `false`                                                                                              | When true, override the logged in user with the default user.                     |
 | VITE_DEFAULT_USER                                     | `pra1234`                                                                                            | The default user to log in as when SMART launching. It should be the FHIR id of a practitioner resource.                     |
 | VITE_EHR_BASE                                         | `http://localhost:8080/test-ehr/r4`                                                                  | The default base url for the EHR. Can be modified directly when launching the app.                     |
 | VITE_EHR_SERVER                                       | `http://localhost:8080/test-ehr/r4`                                                                  | The default base url for the EHR FHIR Server. Generally, this should be the same as the EHR_BASE.                     |

package.json

@@ -31,7 +31,7 @@
   "scripts": {
     "start": "vite",
     "production": "json-server --watch src/db.json -p 3000 --host 0.0.0.0 --static build",
-    "build": "node build",
+    "build": "vite build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "lint": "eslint \"**/*.{js,jsx}\"",

src/components/App.jsx

@@ -1,4 +1,5 @@
-import { ThemeProvider } from '@mui/styles';
+import { ThemeProvider } from '@mui/material';
+
 import React, { useEffect } from 'react';
 import { BrowserRouter, HashRouter, Route, Routes } from 'react-router-dom';
 import Gateway from '../containers/Gateway/Gateway';
@@ -10,9 +11,10 @@ import theme from '../containers/styles/theme';
 import { SettingsContext } from '../containers/ContextProvider/SettingsProvider';
 import { actionTypes } from '../containers/ContextProvider/reducer';
 
-const isGhPages = process.env.VITE_GH_PAGES === 'true';
+const isGhPages = process.env.VITE_GH_PAGES.trim() === 'true';
 const Router = isGhPages ? HashRouter : BrowserRouter;
 const redirect = isGhPages ? '/request-generator/#/index' : '/index';
+console.log('redirect: ' + redirect);
 const App = () => {
   const [, dispatch] = React.useContext(SettingsContext);
   useEffect(() => {
@@ -26,8 +28,10 @@ const App = () => {
     <Router>
       <Routes>
         <Route path="/launch" element={<Launch redirect={redirect} />} />
-        <Route path="/index" element={<Index />} />
+        <Route path="/index" element={<ThemeProvider theme={theme}><Index/></ThemeProvider>} />
         <Route path="/register" element={<RegisterPage />} />
+        {/* forcibly enter backoffice workflow */}
+        <Route path="/index/backoffice" element={<ThemeProvider theme={theme}><Index backoffice={true}/></ThemeProvider> } />
         <Route
           path="/patient-portal"
           element={

src/components/Auth/Login.jsx

@@ -22,6 +22,7 @@ const Login = props => {
       params.append('client_id', env.get('VITE_CLIENT').asString());
       axios
         .post(
+          // this change breaks the patient portal login!
           `${env.get('VITE_AUTH').asString()}/realms/${env
             .get('VITE_REALM')
             .asString()}/protocol/openid-connect/token`,

src/components/Dashboard/Dashboard.jsx

@@ -102,7 +102,7 @@ const Dashboard = props => {
           }}
         >
           <Toolbar />
-          <Box sx={{ overflow: 'auto', marginTop: '31px' }}>
+          <Box sx={{ overflow: 'auto', marginTop: '51px' }}>
             <List>
               {createIcons().map((option, index) => (
                 <div key={`icon-${index}`}>

src/components/DisplayBox/DisplayBox.jsx

@@ -242,7 +242,7 @@ const DisplayBox = props => {
           // -- Detail (ReactMarkdown supports Github-flavored markdown) --
           const detailSection = card.detail ? (
             <div>
-              <ReactMarkdown source={card.detail} />
+              <ReactMarkdown source={card.detail}>{card.detail}</ReactMarkdown>
             </div>
           ) : (
             <p style={{ color: 'grey' }}>None</p>
@@ -358,8 +358,8 @@ const DisplayBox = props => {
                     {/* Forms */}
                     {linksSection.length !== 0 ? (
                       <div>
-                        <Typography color="text.secondary">Required Forms</Typography>
                         <Typography variant="div">{detailSection}</Typography>
+                        <Typography color="text.secondary">Required Forms</Typography>
                         <List className={'links-section'}>{linksSection}</List>
                       </div>
                     ) : (

src/components/RequestBox/PatientSearchBar/PatientSearchBar.jsx

@@ -1,4 +1,7 @@
-import { Autocomplete, Box, TextField, IconButton } from '@mui/material';
+import { Autocomplete, Box, TextField } from '@mui/material';
+import { Grid, Button } from '@mui/material';
+import PeopleIcon from '@mui/icons-material/People';
+
 import { useEffect, useState } from 'react';
 import { PrefetchTemplate } from '../../../PrefetchTemplate';
 import { defaultValues } from '../../../util/data';
@@ -32,9 +35,16 @@ const PatientSearchBar = props => {
     return filteredListOfPatients.length;
   }
 
+  const showAllPatients = () => {
+    props.callback('patient', {});
+    props.callback('expanded', false);
+  };
+
   function patientSearchBar() {
     return (
       <Box className="search-box-container">
+        <Grid container>
+          <Grid item xs={9}>
         <span className="search-header">
           <p>Filter patient list</p>
           <Autocomplete
@@ -52,6 +62,13 @@ const PatientSearchBar = props => {
             records
           </p>
         </span>
+          </Grid>
+          <Grid item xs={3}>
+            <Button variant="contained" startIcon={<PeopleIcon />} onClick={() => { showAllPatients(); }} style={{padding:'10px','paddingLeft':'20px', 'paddingRight':'20px'}}>
+              Select all Patients
+            </Button>
+          </Grid>
+        </Grid>
         {displayFilteredPatientList(input, listOfPatients[0])}
       </Box>
     );
@@ -82,7 +99,8 @@ const PatientSearchBar = props => {
                 clearCallback={props.clearCallback}
                 options={options}
                 responseExpirationDays={props.responseExpirationDays}
-                defaultUser={props.defaultUser}
+                user={props.user}
+                showButtons={props.showButtons}
               />
             </span>
           );

src/components/RequestBox/RequestBox.jsx

@@ -38,7 +38,7 @@ const RequestBox = props => {
     code,
     codeSystem,
     display,
-    defaultUser,
+    user,
     smartAppUrl,
     client,
     pimsUrl,
@@ -183,9 +183,9 @@ const RequestBox = props => {
     let userId = prefetchedResources?.practitioner?.id;
     if (!userId) {
       console.log(
-        'Practitioner not populated from prefetch, using default from config: ' + defaultUser
+        'Practitioner not populated from prefetch, using user: ' + user
       );
-      userId = defaultUser;
+      userId = user;
     }
 
     let link = {

src/components/RequestDashboard/Home.jsx

@@ -3,14 +3,19 @@ import { Button, Grid, Tooltip } from '@mui/material';
 import PersonIcon from '@mui/icons-material/Person';
 import AssignmentIcon from '@mui/icons-material/Assignment';
 import SettingsIcon from '@mui/icons-material/Settings';
+import AccountBoxIcon from '@mui/icons-material/AccountBox';
+import MedicalServicesIcon from '@mui/icons-material/MedicalServices';
 
 import useStyles from './styles';
 import PatientSection from './PatientSection';
 import SettingsSection from './SettingsSection';
 import TasksSection from './TasksSection';
 
+import { logout } from '../../util/auth';
+
 const Home = props => {
   const classes = useStyles();
+  const { client, token } = props;
   const patientButton = 'Select a Patient';
   const taskButton = 'View Tasks';
   const settingsButton = 'Settings';
@@ -58,20 +63,38 @@ const Home = props => {
       gridClass = `${classes.mainDiv} ${classes.tabDivView}`;
     }
     return (
+      <div>
       <Grid className={gridClass} item container justifyContent={'center'} alignItems={'center'}>
         {section ? '' : <Grid item xs={3}></Grid>} {/* spacer */}
         {renderMainButton(patientButton, <PersonIcon className={classes.mainIcon} />)}
         {renderMainButton(taskButton, <AssignmentIcon className={classes.mainIcon} />)}
         {renderMainButton(settingsButton, <SettingsIcon className={classes.mainIcon} />)}
         {section ? (
           <Grid className={classes.spacer} item xs={0}>
-            <div></div>
+            <span className={classes.titleIcon}>
+              <MedicalServicesIcon sx={{ fontSize: 48, verticalAlign: 'middle' }} />&nbsp;&nbsp;<strong>EHR</strong> Request Generator
+            </span>
           </Grid>
         ) : (
           <Grid item xs={3}></Grid>
         )}
         {/* spacer */}
+        {/** */}
+        {section ? (
+          <Grid className={classes.spacer} item xs={4}>
+            <span className={classes.loginIcon}>
+              <AccountBoxIcon sx={{ fontSize: 48, verticalAlign: 'middle' }} /> {token.name}
+              <Button variant="outlined" className={classes.whiteButton} onClick={logout}>
+                Logout
+              </Button>
+            </span>
+          </Grid>
+        ) : (
+          <Grid item xs={3}></Grid>
+        )}
+        {/**/}
       </Grid>
+      </div>
     );
   };
 
@@ -85,10 +108,10 @@ const Home = props => {
       return (
         <div className={classes.mainSectionView}>
           <div className={patientRenderClass}>
-            <PatientSection client={props.client} />
+            <PatientSection client={props.client} userId={token.userId} />
           </div>
           <div className={taskRenderClass}>
-            <TasksSection client={props.client} />
+            <TasksSection client={props.client} userName={token.name} userId={token.userId} />
           </div>
           <div className={settingsRenderClass}>
             <SettingsSection client={props.client} />

src/components/RequestDashboard/PatientSection.jsx

@@ -8,7 +8,7 @@ const PatientSection = props => {
   return (
     <div>
       {state.startup ? (
-        <RequestBuilder globalState={state} dispatch={dispatch} client={props.client} />
+        <RequestBuilder globalState={state} dispatch={dispatch} client={props.client} userId={props.userId} />
       ) : (
         <>Loading...</>
       )}