Task UI

src/components/App.js

@@ -1,16 +1,27 @@
 import { ThemeProvider } from '@mui/styles';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter, HashRouter, Route, Routes } from 'react-router-dom';
 import Gateway from '../containers/Gateway/Gateway';
 import Index from '../containers/Index';
 import Launch from '../containers/Launch';
 import PatientPortal from '../containers/PatientPortal';
 import RegisterPage from '../containers/register/RegisterPage';
 import theme from '../containers/styles/theme';
+import { SettingsContext } from '../containers/ContextProvider/SettingsProvider';
+import { actionTypes } from '../containers/ContextProvider/reducer';
+
 const isGhPages = process.env.REACT_APP_GH_PAGES === 'true';
 const Router = isGhPages ? HashRouter : BrowserRouter;
 const redirect = isGhPages ? '/request-generator/#/index' : '/index';
 const App = () => {
+  const [state, dispatch] = React.useContext(SettingsContext);
+  useEffect(() => {
+    dispatch({
+      type: actionTypes.updateSetting,
+      settingId: 'redirect',
+      value: redirect
+    });
+  }, []);
   return (
     <Router>
       <Routes>

src/components/DisplayBox/DisplayBox.js

@@ -392,12 +392,11 @@ export default class DisplayBox extends Component {
       }
       return (
         <div>
-          Notification Cards ({renderedCards.length})<div>{renderedCards}</div>
+          <div>{renderedCards}</div>
         </div>
       );
     } else {
       return <div></div>;
     }
   }
-
 }

src/components/DisplayBox/card-list.css

@@ -1,6 +1,6 @@
 .decision-card {
     padding: 15px;
-    margin: 10px;
+    margin: 0 0 10px 10px;
     background: #fcfcfc;
     border: 1px solid rgba(0, 0, 0, 0.12);
     border-radius: 4px;

src/components/RequestBox/InProgressFormBox/InProgressFormBox.js

@@ -3,27 +3,35 @@ import React from 'react';
 import './InProgressFormBoxStyle.css';
 
 export default function InProgressFormBox(props) {
-    return (
-        props.qrResponse?.questionnaire ? (
-                <Box className={'inprogress-container'}>
-                    <Typography variant='h6' color='text.primary' gutterBottom>
-                        In Progress Form
-                    </Typography>
-                    <Typography variant='subtitle1'>
-                        <Typography color='text.secondary'>  Practitioner: </Typography>{props.qrResponse.author ? props.qrResponse.author.reference : 'empty'}
-                    </Typography>
-                    <Typography variant='subtitle1' >
-                        <Typography color='text.secondary'>  Last Edited: </Typography> {props.qrResponse.authored ? props.qrResponse.authored : 'empty'}
-                    </Typography>
-                    <Typography sx={{ mb: 4 }} variant='subtitle1'>
-                        <Typography color='text.secondary'>  Form Link: </Typography>{props.qrResponse.questionnaire ? props.qrResponse.questionnaire : 'empty'}
-                    </Typography>
-                    <ButtonGroup variant='outlined' aria-label='button group'>
-                        <Button onClick={props.relaunch} color='primary' varient='outlined' style={{ width: '300px' }}>
-                            Open In-Progress Form
-                        </Button>
-                    </ButtonGroup>
-                </Box>
-        ) : ''
-    );
-}
+  return props.qrResponse?.questionnaire ? (
+    <Box className={'inprogress-container'}>
+      <Typography variant="h6" color="text.primary" gutterBottom>
+        In Progress Form
+      </Typography>
+      <Typography variant="subtitle1">
+        <Typography color="text.secondary"> Practitioner: </Typography>
+        {props.qrResponse.author ? props.qrResponse.author.reference : 'empty'}
+      </Typography>
+      <Typography variant="subtitle1">
+        <Typography color="text.secondary"> Last Edited: </Typography>{' '}
+        {props.qrResponse.authored ? props.qrResponse.authored : 'empty'}
+      </Typography>
+      <Typography sx={{ mb: 4 }} variant="subtitle1">
+        <Typography color="text.secondary"> Form Link: </Typography>
+        {props.qrResponse.questionnaire ? props.qrResponse.questionnaire : 'empty'}
+      </Typography>
+      <ButtonGroup variant="outlined" aria-label="button group">
+        <Button
+          onClick={props.relaunch}
+          color="primary"
+          varient="outlined"
+          style={{ width: '300px' }}
+        >
+          Open In-Progress Form
+        </Button>
+      </ButtonGroup>
+    </Box>
+  ) : (
+    ''
+  );
+}

src/components/RequestBox/PatientSearchBar/PatientSearchBar.js

@@ -1,7 +1,9 @@
-import { Autocomplete, Box, TextField } from '@mui/material';
+import { Autocomplete, Box, TextField, IconButton } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { PrefetchTemplate } from '../../../PrefetchTemplate';
 import { defaultValues } from '../../../util/data';
+import RefreshIcon from '@mui/icons-material/Refresh';
+
 import PatientBox from '../../SMARTBox/PatientBox';
 import './PatientSearchBarStyle.css';
 
@@ -56,6 +58,9 @@ export default function PatientSearchBar(props) {
             Showing {getFilteredLength(input, listOfPatients)} of {props.searchablePatients.length}{' '}
             records
           </p>
+          <IconButton color="primary" onClick={() => props.getPatients()} size="large">
+            <RefreshIcon fontSize="large" />
+          </IconButton>
         </span>
         {displayFilteredPatientList(input, listOfPatients[0])}
       </Box>

src/components/RequestBox/PatientSearchBar/PatientSearchBarStyle.css

@@ -17,5 +17,6 @@
 
 .search-header {
     display: flex;
+    padding: 12px;
     align-items: center;
 }

src/components/RequestBox/RequestBox.js

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup } from '@mui/material';
+import { Button, ButtonGroup, Grid } from '@mui/material';
 import _ from 'lodash';
 import React, { Component } from 'react';
 import buildNewRxRequest from '../../util/buildScript.2017071.js';
@@ -382,8 +382,14 @@ export default class RequestBox extends Component {
               <span>Patient ID: {this.props.patient.id}</span>
             </div>
             <div className="patient-info">
-              {this.renderPatientInfo()}
-              {this.renderPrefetchedResources()}
+              <Grid container>
+                <Grid item xs={6}>
+                  {this.renderPatientInfo()}
+                </Grid>
+                <Grid item xs={6}>
+                  {this.renderPrefetchedResources()}
+                </Grid>
+              </Grid>
             </div>
           </div>
           <div className="action-btns">

src/components/RequestBox/request.css

@@ -12,7 +12,6 @@
 
 .request {
     border: 1px solid black;
-    height: auto;
     padding: 10px;
     border-radius: 5px;
     background-color: rgb(248, 248, 248);
@@ -32,8 +31,6 @@
 }
 
 .demographics {
-    width: 50%;
-    float: left;
     padding:10px 10px 10px 0px;
 }
 
@@ -54,8 +51,6 @@
 }
 
 .prefetched {
-    width: 50%;
-    float:left;
     padding:10px 10px 10px 0px;
     margin-top: 5px;
 }

src/components/RequestDashboard/Home.jsx

@@ -0,0 +1,115 @@
+import React, { memo, useState } from 'react';
+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 useStyles from './styles';
+import PatientSection from './PatientSection';
+import { SettingsContext } from '../../containers/ContextProvider/SettingsProvider';
+import SettingsSection from './SettingsSection';
+import TasksSection from './TasksSection';
+
+const Home = props => {
+  const classes = useStyles();
+  const patientButton = 'Select a Patient';
+  const taskButton = 'View Tasks';
+  const settingsButton = 'Settings';
+  const [section, setSection] = useState('');
+  const [state, dispatch] = React.useContext(SettingsContext);
+
+  const openSection = buttonId => {
+    setSection(buttonId);
+  };
+
+  // renders top menu tab buttons
+  const renderMainButton = (buttonId, icon) => {
+    let buttonClass = `${classes.mainButton} ${classes.mainButtonView}`;
+    let gridWidth = 2;
+    let tooltip = '';
+    if (section) {
+      // section active, switch button view
+      buttonClass = `${classes.mainButton} ${classes.tabButtonView}`;
+      if (buttonId === section) {
+        buttonClass += ` ${classes.selectedTabView}`;
+      }
+      gridWidth = 0;
+      tooltip = <h5>{buttonId}</h5>;
+    }
+    return (
+      <Grid item xs={gridWidth} align="center">
+        <Tooltip enterDelay={600} title={tooltip}>
+          <Button
+            className={buttonClass}
+            variant="contained"
+            startIcon={icon}
+            onClick={() => {
+              openSection(buttonId);
+            }}
+          >
+            {section ? '' : buttonId}
+          </Button>
+        </Tooltip>
+      </Grid>
+    );
+  };
+  // render view depending on which tab button is selected
+  const renderMainView = () => {
+    let gridClass = `${classes.mainDiv} ${classes.mainDivView}`;
+    if (section) {
+      gridClass = `${classes.mainDiv} ${classes.tabDivView}`;
+    }
+    return (
+      <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>
+          </Grid>
+        ) : (
+          <Grid item xs={3}></Grid>
+        )}
+        {/* spacer */}
+      </Grid>
+    );
+  };
+
+  // render content of each view, makes other content invisible so it doesn't rerender every time
+  const renderSectionView = () => {
+    let renderSection = <div>Loading...</div>;
+
+    if (section) {
+      let patientRenderClass = section === patientButton ? '' : classes.disappear;
+      let taskRenderClass = section === taskButton ? '' : classes.disappear;
+      let settingsRenderClass = section === settingsButton ? '' : classes.disappear;
+
+      return (
+        <div className={classes.mainSectionView}>
+          <div className={patientRenderClass}>
+            <PatientSection client={props.client} />
+          </div>
+          <div className={taskRenderClass}>
+            <TasksSection client={props.client} />
+          </div>
+          <div className={settingsRenderClass}>
+            <SettingsSection client={props.client} />
+          </div>
+        </div>
+      );
+    } else {
+      return '';
+    }
+  };
+
+  return (
+    <div>
+      {renderMainView()}
+      {renderSectionView()}
+    </div>
+  );
+};
+
+export default memo(Home);

src/components/RequestDashboard/PatientSection.jsx

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+
+import useStyles from './styles';
+import RequestBuilder from '../../containers/RequestBuilder';
+import { SettingsContext } from '../../containers/ContextProvider/SettingsProvider';
+
+const PatientSection = props => {
+  const classes = useStyles();
+  const [state, dispatch] = React.useContext(SettingsContext);
+  // TODO: Make request builder use react-hooks
+  return (
+    <div>
+      {state.startup ? (
+        <RequestBuilder globalState={state} dispatch={dispatch} client={props.client} />
+      ) : (
+        <>Loading...</>
+      )}
+    </div>
+  );
+};
+
+export default memo(PatientSection);