723 - Build workflow for back-office staff

.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

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.                     |

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';
@@ -26,8 +27,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/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...</>
       )}

src/components/RequestDashboard/SettingsSection.jsx

@@ -39,7 +39,7 @@ import { SettingsContext } from '../../containers/ContextProvider/SettingsProvid
 const ENDPOINT = [ORDER_SIGN, ORDER_SELECT, PATIENT_VIEW, ENCOUNTER_START, REMS_ETASU];
 
 const SettingsSection = props => {
-  const [state, dispatch] = React.useContext(SettingsContext);
+  const [state, dispatch, updateSetting, readSettings, saveSettings] = React.useContext(SettingsContext);
 
   const fieldHeaders = Object.keys(headerDefinitions)
     .map(key => ({ ...headerDefinitions[key], key }))
@@ -51,35 +51,9 @@ const SettingsSection = props => {
     );
 
   useEffect(() => {
-    JSON.parse(localStorage.getItem('reqgenSettings') || '[]').forEach(([key, value]) => {
-      try {
-        updateSetting(key, value);
-      } catch {
-        if (!key) {
-          console.log('Could not load setting:' + key);
-        }
-      }
-    });
-
-    // indicate to the rest of the app that the settings have been loaded
-    dispatch({
-      type: actionTypes.flagStartup
-    });
+    readSettings();
   }, []);
 
-  const updateSetting = (key, value) => {
-    dispatch({
-      type: actionTypes.updateSetting,
-      settingId: key,
-      value: value
-    });
-  };
-
-  const saveSettings = () => {
-    const headers = Object.keys(state).map(key => [key, state[key]]);
-    localStorage.setItem('reqgenSettings', JSON.stringify(headers));
-  };
-
   const resetSettings = () => {
     dispatch({ type: actionTypes.resetSettings });
   };
@@ -201,6 +175,7 @@ const SettingsSection = props => {
 
   let firstCheckbox = true;
   let showBreak = true;
+
   return (
     <Grid container spacing={2} sx={{ padding: '20px' }}>
       <Grid container item xs={12} direction="row" spacing={2}>
@@ -209,6 +184,7 @@ const SettingsSection = props => {
             case 'input':
               return (
                 <Grid key={key} item xs={6}>
+                  { ( (state['useDefaultUser'] && key === 'defaultUser') || key != 'defaultUser' ) ? (
                   <div>
                     <TextField
                       label={display}
@@ -218,6 +194,7 @@ const SettingsSection = props => {
                       sx={{ width: '100%' }}
                     />
                   </div>
+                  ) : ('') }
                 </Grid>
               );
             case 'check':