Loading...
;
-
if (section) {
- let patientRenderClass = section === patientButton ? '' : classes.disappear;
- let taskRenderClass = section === taskButton ? '' : classes.disappear;
- let settingsRenderClass = section === settingsButton ? '' : classes.disappear;
+ const patientRenderClass = section === patientButton ? '' : classes.disappear;
+ const taskRenderClass = section === taskButton ? '' : classes.disappear;
+ const settingsRenderClass = section === settingsButton ? '' : classes.disappear;
return (
diff --git a/src/components/RequestDashboard/PatientSection.jsx b/src/components/RequestDashboard/PatientSection.jsx
index a871bb69..21512725 100644
--- a/src/components/RequestDashboard/PatientSection.jsx
+++ b/src/components/RequestDashboard/PatientSection.jsx
@@ -1,13 +1,10 @@
-import React, { memo } from 'react';
+import { memo, useContext } 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
+ const [state, dispatch] = useContext(SettingsContext);
return (
{state.startup ? (
diff --git a/src/components/RequestDashboard/SettingsSection.jsx b/src/components/RequestDashboard/SettingsSection.jsx
index 9c704046..0c8b0105 100644
--- a/src/components/RequestDashboard/SettingsSection.jsx
+++ b/src/components/RequestDashboard/SettingsSection.jsx
@@ -1,37 +1,54 @@
import React, { memo, useState, useEffect } from 'react';
-import { Button, Box, FormControlLabel, Grid, Checkbox, TextField } from '@mui/material';
+import {
+ Box,
+ Button,
+ Checkbox,
+ FormControlLabel,
+ Grid,
+ IconButton,
+ Paper,
+ Select,
+ MenuItem,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ Tooltip,
+ TextField
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
-import useStyles from './styles';
import env from 'env-var';
import FHIR from 'fhirclient';
-import { headerDefinitions, types } from '../../util/data';
-import { actionTypes } from '../../containers/ContextProvider/reducer';
+import { headerDefinitions, medicationRequestToRemsAdmins } from '../../util/data';
+import { actionTypes, initialState } from '../../containers/ContextProvider/reducer';
import { SettingsContext } from '../../containers/ContextProvider/SettingsProvider';
+const CDS_HOOKS = ['order-sign', 'order-select', 'patient-view'];
+
const SettingsSection = props => {
- const classes = useStyles();
const [state, dispatch] = React.useContext(SettingsContext);
- const [headers, setHeaders] = useState([]);
- const [originalValues, setOriginalValues] = useState([]);
+
+ const fieldHeaders = Object.keys(headerDefinitions)
+ .map(key => ({ ...headerDefinitions[key], key }))
+ // Display the fields in descending order of type. If two fields are the same type,
+ // then sort by ascending order of display text.
+ .sort(
+ (self, other) =>
+ -self.type.localeCompare(other.type) || self.display.localeCompare(other.display)
+ );
useEffect(() => {
- const headers = Object.keys(headerDefinitions)
- .map(key => ({ ...headerDefinitions[key], key }))
- // Display the fields in descending order of type. If two fields are the same type, then sort by ascending order of display text.
- .sort(
- (self, other) =>
- -self.type.localeCompare(other.type) || self.display.localeCompare(other.display)
- );
- setHeaders(headers);
- const originals = Object.keys(headerDefinitions).map(key => [key, state[key]]);
- setOriginalValues(originals);
- JSON.parse(localStorage.getItem('reqgenSettings') || '[]').forEach(element => {
+ JSON.parse(localStorage.getItem('reqgenSettings') || '[]').forEach(([key, value]) => {
try {
- updateSetting(element[0], element[1]);
+ updateSetting(key, value);
} catch {
- if (element[0]) {
- console.log('Could not load setting:' + element[0]);
+ if (!key) {
+ console.log('Could not load setting:' + key);
}
}
});
@@ -41,6 +58,7 @@ const SettingsSection = props => {
type: actionTypes.flagStartup
});
}, []);
+
const updateSetting = (key, value) => {
dispatch({
type: actionTypes.updateSetting,
@@ -48,20 +66,16 @@ const SettingsSection = props => {
value: value
});
};
+
const saveSettings = () => {
- const headers = Object.keys(headerDefinitions).map(key => [key, state[key]]);
+ const headers = Object.keys(state).map(key => [key, state[key]]);
localStorage.setItem('reqgenSettings', JSON.stringify(headers));
};
const resetSettings = () => {
- originalValues.forEach(e => {
- try {
- updateSetting(e[0], e[1]);
- } catch {
- console.log('Failed to reset setting value');
- }
- });
+ dispatch({ type: actionTypes.resetSettings });
};
+
const clearQuestionnaireResponses =
({ defaultUser }) =>
() => {
@@ -105,13 +119,11 @@ const SettingsSection = props => {
console.log(error);
});
};
+
const resetRemsAdmin =
({ cdsUrl }) =>
() => {
- let url = new URL(cdsUrl);
- const resetUrl = url.origin + '/etasu/reset';
-
- fetch(resetUrl, {
+ fetch(cdsUrl, {
method: 'POST'
})
.then(response => {
@@ -123,6 +135,7 @@ const SettingsSection = props => {
console.log(error);
});
};
+
const clearMedicationDispenses =
({ ehrUrl, access_token }) =>
() => {
@@ -153,16 +166,18 @@ const SettingsSection = props => {
console.log(e);
});
};
+
const reconnectEhr =
({ baseUrl, redirect }) =>
() => {
FHIR.oauth2.authorize({
- clientId: env.get('REACT_APP_CLIENT').asString(),
+ clientId: env.get('VITE_CLIENT').asString(),
iss: baseUrl,
redirectUri: redirect,
- scope: env.get('REACT_APP_CLIENT_SCOPES').asString()
+ scope: env.get('VITE_CLIENT_SCOPES').asString()
});
};
+
const resetHeaderDefinitions = [
{
display: 'Reset PIMS Database',
@@ -195,9 +210,9 @@ const SettingsSection = props => {
let firstCheckbox = true;
let showBreak = true;
return (
-
-
- {headers.map(({ key, type, display }) => {
+
+
+ {fieldHeaders.map(({ key, type, display }) => {
switch (type) {
case 'input':
return (
@@ -207,9 +222,7 @@ const SettingsSection = props => {
label={display}
variant="outlined"
value={state[key]}
- onChange={event => {
- updateSetting(key, event.target.value);
- }}
+ onChange={event => updateSetting(key, event.target.value)}
sx={{ width: '100%' }}
/>
@@ -230,9 +243,7 @@ const SettingsSection = props => {
control={
{
- updateSetting(key, event.target.checked);
- }}
+ onChange={event => updateSetting(key, event.target.checked)}
/>
}
label={display}
@@ -248,35 +259,162 @@ const SettingsSection = props => {
);
}
})}
+
+
+
+
+
+
+
+ Medication Display
+ Medication RxNorm Code
+ CDS Hook
+ REMS Admin Endpoint
+ {/* This empty TableCell corresponds to the add and delete
+ buttons. It is used to fill up the sticky header which
+ will appear over the gray/white table rows. */}
+
+
+
+
+ {Object.entries(state.medicationRequestToRemsAdmins).map(([key, row]) => {
+ return (
+
+
+
+ dispatch({
+ type: actionTypes.updateCdsHookSetting,
+ settingId: key,
+ value: { display: event.target.value }
+ })
+ }
+ sx={{ width: '100%' }}
+ />
+
+
+
+ dispatch({
+ type: actionTypes.updateCdsHookSetting,
+ settingId: key,
+ value: { rxnorm: event.target.value }
+ })
+ }
+ sx={{ width: '100%' }}
+ />
+
+
+
+
+
+
+ dispatch({
+ type: actionTypes.updateCdsHookSetting,
+ settingId: key,
+ value: { remsAdmin: event.target.value }
+ })
+ }
+ sx={{ width: '100%' }}
+ />
+
+
+
+
+ dispatch({ type: actionTypes.addCdsHookSetting, settingId: key })
+ }
+ size="large"
+ >
+
+
+
+
+
+ dispatch({ type: actionTypes.deleteCdsHookSetting, settingId: key })
+ }
+ size="large"
+ >
+
+
+
+
+
+ );
+ })}
+
+
+
+
+
+ {/* spacer */}
+
+
+
{resetHeaderDefinitions.map(({ key, display, reset, variant }) => {
return (
-
+
);
})}
- {/* spacer */}
-
-
+
-
+
+
-
+
-
+
);
};
diff --git a/src/components/RequestDashboard/TasksSection.jsx b/src/components/RequestDashboard/TasksSection.jsx
index e8c424d5..317a4375 100644
--- a/src/components/RequestDashboard/TasksSection.jsx
+++ b/src/components/RequestDashboard/TasksSection.jsx
@@ -9,7 +9,9 @@ import {
Stack,
Select,
FormControl,
- InputLabel
+ InputLabel,
+ MenuItem,
+ Menu
} from '@mui/material';
import AssignmentIcon from '@mui/icons-material/Assignment';
import PersonIcon from '@mui/icons-material/Person';
@@ -19,29 +21,66 @@ import AssignmentLateIcon from '@mui/icons-material/AssignmentLate';
import AssignmentIndIcon from '@mui/icons-material/AssignmentInd';
import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import CheckIcon from '@mui/icons-material/Check';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import useStyles from './styles';
import { SettingsContext } from '../../containers/ContextProvider/SettingsProvider';
import { MemoizedTabPanel } from './TabPanel';
import { Info, Refresh } from '@mui/icons-material';
-import MenuItem from '@mui/material/MenuItem';
+import { retrieveLaunchContext } from '../../util/util';
+const taskStatus = Object.freeze({
+ inProgress: 'in-progress',
+ completed: 'completed',
+ ready: 'ready',
+ cancelled: 'cancelled',
+ onHold: 'on-hold'
+});
const TasksSection = props => {
const classes = useStyles();
const [tasks, setTasks] = useState([]);
- const [state, dispatch] = React.useContext(SettingsContext);
+ const [state] = React.useContext(SettingsContext);
const [value, setValue] = useState(0);
const [open, setOpen] = useState(false);
const [taskToDelete, setTaskToDelete] = useState('');
+ const [anchorStatus, setAnchorStatus] = useState(null);
+ const [anchorAssign, setAnchorAssign] = useState(null);
- const handleChangeAssign = (event, task) => {
- if (event.target.value === 'me') {
- assignTaskToMe(task);
+ const menuOpen = Boolean(anchorStatus);
+ const assignMenuOpen = Boolean(anchorAssign);
+
+ const handleMenuClick = (event, task) => {
+ setAnchorStatus({
+ anchor: event.currentTarget,
+ task: task
+ });
+ };
+ const handleMenuClose = () => {
+ setAnchorStatus(null);
+ };
+ const handleTaskStatusOptionSelect = (task, status) => {
+ updateTaskStatus(task, status);
+ handleMenuClose();
+ };
+ const handleChangeAssign = (task, val) => {
+ const taskClone = structuredClone(task);
+ if (val === 'me') {
+ assignTaskToMe(taskClone);
} else {
- assignTaskToPatient(task);
+ assignTaskToPatient(taskClone);
}
+ handleAssignMenuClose();
+ };
+ const handleAssignMenuClick = (event, task) => {
+ setAnchorAssign({
+ anchor: event.currentTarget,
+ task: task
+ });
+ };
+ const handleAssignMenuClose = () => {
+ setAnchorAssign(null);
};
-
const handleChange = (event, newValue) => {
setValue(newValue);
};
@@ -53,8 +92,22 @@ const TasksSection = props => {
setTaskToDelete(task);
setOpen(true);
};
+ const washTask = task => {
+ if (task.owner && task.owner.id) {
+ task.owner = {
+ reference: `${task.owner.resourceType}/${task.owner.id}`
+ };
+ }
+ if (task.for && task.for.id) {
+ task.for = {
+ reference: `${task.for.resourceType}/${task.for.id}`
+ };
+ }
+ return task;
+ };
const assignTaskToMe = task => {
if (task) {
+ task = washTask(task);
let user = props.client.user.id;
if (!user) {
user = `Practitioner/${state.defaultUser}`;
@@ -62,12 +115,7 @@ const TasksSection = props => {
task.owner = {
reference: user
};
- if (task.for) {
- // reset 'for' element before updating
- task.for = {
- reference: `${task.for.resourceType}/${task.for.id}`
- };
- }
+
props.client.update(task).then(e => {
fetchTasks();
});
@@ -75,17 +123,10 @@ const TasksSection = props => {
};
const assignTaskToPatient = task => {
if (task) {
- let patientId = task.for.id;
- let user = `Patient/${patientId}`;
+ task = washTask(task);
task.owner = {
- reference: user
+ reference: task.for.reference
};
- if (task.for) {
- // reset 'for' element before updating
- task.for = {
- reference: `${task.for.resourceType}/${task.for.id}`
- };
- }
props.client.update(task).then(e => {
fetchTasks();
});
@@ -122,6 +163,75 @@ const TasksSection = props => {
useEffect(() => {
fetchTasks();
}, [state.patient]);
+
+ const updateTaskStatus = (task, status) => {
+ task.status = status;
+ const updatedTask = structuredClone(task); // structured clone may not work on older browsers
+ props.client.update(washTask(updatedTask)).then(e => {
+ fetchTasks();
+ });
+ };
+ const launchTask = lTask => {
+ let link = '';
+ let appContext = '';
+ lTask.input.forEach(input => {
+ const code = input?.type?.coding?.[0]?.code;
+ if (code && code.toLowerCase() === 'smartonfhir-application') {
+ link = input.valueUrl;
+ } else if (code && code.toLowerCase() === 'smartonfhir-appcontext') {
+ appContext = input.valueString;
+ }
+ });
+ const smartLink = {
+ appContext: encodeURIComponent(appContext),
+ type: 'smart',
+ url: link
+ };
+ const patient = lTask.for.id;
+ retrieveLaunchContext(smartLink, patient, props.client.state).then(result => {
+ updateTaskStatus(lTask, 'in-progress');
+ lTask.status = 'in-progress';
+ props.client.update(washTask(lTask)).then(_e => {
+ fetchTasks();
+ });
+ window.open(result.url, '_blank');
+ });
+ };
+ const renderStatusMenu = () => {
+ return (
+
+ );
+ };
+ const renderAssignMenu = () => {
+ const assignOptions = ['me', 'patient'];
+ return (
+
+ );
+ };
const renderTasks = taskSubset => {
if (taskSubset.length > 0) {
return (
@@ -135,8 +245,13 @@ const TasksSection = props => {
};
const renderTask = task => {
let statusColor = '#555';
- if (task.status.toLowerCase() === 'ready') {
+ const tStatus = task.status.toLowerCase();
+ if (tStatus === taskStatus.ready) {
statusColor = '#198754';
+ } else if (tStatus === taskStatus.inProgress) {
+ statusColor = '#fd7e14';
+ } else if (tStatus === taskStatus.completed) {
+ statusColor = '#0d6efd';
}
let taskForName = 'N/A';
@@ -205,32 +320,31 @@ const TasksSection = props => {
{ownerText}
- }>
- View Resource
+
-
-
+
+ Assign
+
{/*spacer*/}
-
+
- }>
- Process Task
-
-
-
-
-
- );
- };
-
- const unassignedTasks = tasks.filter(t => !t.owner);
- const assignedTasks = tasks.filter(t => t.owner?.id === state.defaultUser); // should check current user, not default
- return (
- <>
-
-
-
-
- {taskToDelete ? `Are you sure you want to delete Task ${taskToDelete.id}` : ''}
-
-
- {/*spacer*/}
-
-
-
-
-
-
-
+
+
+ );
+ };
+
+ const renderMainView = () => {
+ const unassignedTasks = tasks.filter(t => !t.owner);
+ const assignedTasks = tasks.filter(t => t.owner?.id === state.defaultUser); // should check current user, not default
+ return (
@@ -323,6 +411,51 @@ const TasksSection = props => {
{renderTasks(unassignedTasks)}
+ );
+ };
+
+ const renderPortalView = () => {
+ const patientTasks = tasks.filter(t => t.owner?.id === state.patient?.id);
+ return renderTasks(patientTasks);
+ };
+
+ return (
+ <>
+
+
+
+
+ {taskToDelete ? `Are you sure you want to delete Task ${taskToDelete.id}` : ''}
+
+
+ {/*spacer*/}
+
+
+
+
+
+
+
+
+
+
+ {renderStatusMenu()}
+ {renderAssignMenu()}
+ {props.portalView ? renderPortalView() : renderMainView()}
);
};
diff --git a/src/components/RequestDashboard/styles.jsx b/src/components/RequestDashboard/styles.jsx
index 00c52a63..4a85cf57 100644
--- a/src/components/RequestDashboard/styles.jsx
+++ b/src/components/RequestDashboard/styles.jsx
@@ -1,6 +1,6 @@
import { makeStyles } from '@mui/styles';
export default makeStyles(
- theme => ({
+ () => ({
disappear: {
display: 'none'
},
diff --git a/src/components/SMARTBox/EHRLaunchBox.js b/src/components/SMARTBox/EHRLaunchBox.js
deleted file mode 100644
index d7095727..00000000
--- a/src/components/SMARTBox/EHRLaunchBox.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Component } from 'react';
-import { fhir } from '../../util/fhir';
-import './smart.css';
-import env from 'env-var';
-
-export default class EHRLaunchBox extends Component {
- constructor(props) {
- super(props);
- this.state = {};
- }
-
- render() {
- return (
-
-
EHR Launch Settings
-
-
-
-
- Note: Only the local EHR is supported at this time for EHR launch
-
-
-
-
-
-
-
-
+
EHR Launch Settings
+
+
+
+
+ Note: Only the local EHR is supported at this time for EHR launch
+
+
+
+
+
+
+
+
-
-
- {columns.map(column => (
-
- {column.label}
-
- ))}
-
-
-
- {options.map(row => (
-
- this.handleRequestChange(row.value, patient)}
- >
-
- {row.name}
-
- {row.code}
-
-
- ))}
-
-
-
- );
- }
-
- makeQuestionnaireTable(columns, options, type, patient) {
- return (
-
-
-
-
- {columns.map(column => (
-
- {column.label}
-
- ))}
-
-
-
- {options.map(row => (
-
- this.relaunch(row.value)}
- className="hover-row"
- >
-
- {row.text}
-
- {row.time}
-
-
- ))}
-
-
-
- );
- }
-
- render() {
- const patient = this.props.patient;
- if (!patient) {
- return <>;
- }
- let name = '';
- let fullName = '';
- let formatBirthdate = '';
- if (patient.name) {
- name = {`${patient.name[0].given[0]} ${patient.name[0].family}`} ;
- fullName = {`${patient.name[0].given.join(' ')} ${patient.name[0].family}`} ;
- }
- if (patient.birthDate) {
- formatBirthdate = new Date(patient.birthDate).toDateString();
- }
-
- // add all of the requests to the list of options
- let options = [];
- let responseOptions = [];
- if (this.state.deviceRequests.data) {
- this.state.deviceRequests.data.forEach(e => {
- this.makeOption(e, options);
- });
- }
- if (this.state.serviceRequests.data) {
- this.state.serviceRequests.data.forEach(e => {
- this.makeOption(e, options);
- });
- }
- if (this.state.medicationRequests.data) {
- this.state.medicationRequests.data.forEach(e => {
- this.makeOption(e, options);
- });
- }
-
- if (this.state.medicationDispenses.data) {
- this.state.medicationDispenses.data.forEach(e => {
- this.makeOption(e, options);
- });
- }
-
- if (this.state.questionnaireResponses.data) {
- responseOptions = this.state.questionnaireResponses.data.map(qr => this.makeQROption(qr));
- }
-
- const medicationColumns = [
- { id: 'name', label: 'Medication' },
- { id: 'code', label: 'Request #' }
- ];
-
- const questionnaireColumns = [
- { id: 'name', label: 'Title' },
- { id: 'time', label: 'Created' }
- ];
-
- const medicationTooltip =
- options.length === 0 ? 'No medications found.' : `${options.length} medications available`;
- const formTooltip =
- this.state.numInProgressForms === 0 ? 'No In-Progress Forms' : 'Open In-Progress Forms';
-
- return (
-
-
- {name ? name : 'N/A'}{' '}
- {`(ID: ${patient.id})`}
-
-
-
-
- Full Name: {fullName}
-
-
- Gender:{' '}
- {patient.gender.charAt(0).toUpperCase() + patient.gender.slice(1)}
-
-
- DoB/Age: {formatBirthdate} (
- {getAge(patient.birthDate)} years old)
-
-
-
- {this.state.showMedications ? (
- }
- onClick={() => this.setState({ showMedications: false })}
- >
- Close Medications
-
- ) : (
-
-
- }
- disabled={options.length === 0}
- onClick={() => {
- this.updatePatient(patient);
- this.setState({ showMedications: true, showQuestionnaires: false });
- }}
- >
- Request New Medication
-
-
-
- )}
- {this.state.showQuestionnaires ? (
- }
- onClick={() => this.setState({ showQuestionnaires: false })}
- >
- Close In Progress Forms
-
- ) : (
-
-
- }
- disabled={this.state.numInProgressForms === 0}
- onClick={() => {
- this.updatePatient(patient);
- this.setState({ showQuestionnaires: true, showMedications: false });
- }}
- >
- {this.state.numInProgressForms} Form(s) In Progress
-
-
-
- )}
-
-
-
- {this.state.showMedications ? (
-
- {this.makeResponseTable(medicationColumns, options, 'medication', patient)}
-
- ) : (
-
- )}
- {this.state.showQuestionnaires ? (
-
- {this.makeQuestionnaireTable(
- questionnaireColumns,
- responseOptions,
- 'questionnaire',
- patient
- )}
-
- ) : (
-
- )}
-
+
+
+ {columns.map(column => (
+
+ {column.label}
+
+ ))}
+
+
+
+ {options.map(row => (
+
+ handleRequestChange(row.value, patient)}
+ >
+
+ {row.name}
+
+ {row.code}
+
+
+ ))}
+
+
+
+ );
+ };
+
+ const makeQuestionnaireTable = (columns, options, type, _patient) => {
+ return (
+
+
+
+
+ {columns.map(column => (
+
+ {column.label}
+
+ ))}
+
+
+
+ {options.map(row => (
+
+ relaunch(row.value)}
+ className="hover-row"
+ >
+
+ {row.text}
+
+ {row.time}
+
+
+ ))}
+
+
+
+ );
+ };
+
+ const getPatientInfo = () => {
+ if (patient.name) {
+ setState(prevState => ({
+ ...prevState,
+ name: `${patient.name[0].given[0]} ${patient.name[0].family}`
+ }));
+ setState(prevState => ({
+ ...prevState,
+ fullName: `${patient.name[0].given.join(' ')} ${patient.name[0].family}`
+ }));
+ }
+ if (patient.birthDate) {
+ setState(prevState => ({
+ ...prevState,
+ formatBirthDate: new Date(patient.birthDate).toDateString()
+ }));
+ }
+ };
+
+ return (
+
+
+ {state.name} {`(ID: ${patient.id})`}
+
+
+
+
+ Full Name: {state.fullName}
+
+
+ Gender:{' '}
+ {patient.gender.charAt(0).toUpperCase() + patient.gender.slice(1)}
+
+
+ DoB/Age: {state.formatBirthDate} (
+ {getAge(patient.birthDate)} years old)
+
+
+
+ {state.showMedications ? (
+ }
+ onClick={() => setState(prevState => ({ ...prevState, showMedications: false }))}
+ >
+ Close Medications
+
+ ) : (
+
+
+ }
+ disabled={state.options.length === 0}
+ onClick={() => {
+ updatePatient(patient);
+ setState(prevState => ({
+ ...prevState,
+ showMedications: true,
+ showQuestionnaires: false
+ }));
+ }}
+ >
+ Request New Medication
+
+
+
+ )}
+ {state.showQuestionnaires ? (
+ }
+ onClick={() => setState(prevState => ({ ...prevState, showQuestionnaires: false }))}
+ >
+ Close In Progress Forms
+
+ ) : (
+
+
+ }
+ disabled={state.numInProgressForms === 0}
+ onClick={() => {
+ updatePatient(patient);
+ setState(prevState => ({
+ ...prevState,
+ showQuestionnaires: true,
+ showMedications: false
+ }));
+ }}
+ >
+ {state.numInProgressForms} Form(s) In Progress
+
+
+
+ )}
+
+
+
+ {state.showMedications ? (
+
+ {makeResponseTable(medicationColumns, state.options, 'medication', patient)}
+
+ ) : (
+
+ )}
+ {state.showQuestionnaires ? (
+
+ {makeQuestionnaireTable(
+ questionnaireColumns,
+ state.responseOptions,
+ 'questionnaire',
+ patient
+ )}
+
+ ) : (
+
+ )}
+
{state.patientList.message}{' '}
+
+ );
+ };
+
+ return (
+ <>
+
+
+
+ }
+ aria-controls="panel1a-content"
+ id="panel1a-header"
+ style={{ marginLeft: '45%' }}
+ >
+ }>
+ Select a patient
+
+
+
+ {state.patientList.length > 0 && state.expanded && (
+
+ {state.patientList instanceof Error ? (
+ renderError()
+ ) : (
+
+ )}
+
+ )}
+
+
+
+
+ getPatients()} size="large">
+
+
+
+
+
+ {displayRequestBox && (
+
+
+ getMedicationSpecificRemsAdminUrl(request, globalState, hook)
+ }
+ />
+
+ )}
+
+ {!disableGetEtasu && (
+
+
+
+ )}
+ {!disableGetMedicationStatus && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default RequestBuilder;
diff --git a/src/containers/register/RegisterPage.js b/src/containers/register/RegisterPage.jsx
similarity index 98%
rename from src/containers/register/RegisterPage.js
rename to src/containers/register/RegisterPage.jsx
index a38d4327..95d7469e 100644
--- a/src/containers/register/RegisterPage.js
+++ b/src/containers/register/RegisterPage.jsx
@@ -10,7 +10,7 @@ import {
TextField,
Typography
} from '@mui/material';
-import React, { useState } from 'react';
+import { useState } from 'react';
import './RegisterPageStyle.css';
export default function RegisterPage(props) {
diff --git a/src/containers/styles/theme.jsx b/src/containers/styles/theme.jsx
index 00c1c359..0c82b2fd 100644
--- a/src/containers/styles/theme.jsx
+++ b/src/containers/styles/theme.jsx
@@ -23,8 +23,8 @@ const colors = {
green: '#2fa874',
maroon: '#a83048',
purple: '#8b72d6',
- turqoise: '#37c0ae',
- turqoiseLight: '#e6f7f5'
+ turquoise: '#37c0ae',
+ turquoiseLight: '#e6f7f5'
};
const paletteBase = {
diff --git a/src/index.css b/src/index.css
index 5c0b331e..caf53ce6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -148,12 +148,10 @@ input:not(:focus):not([value='']):valid ~ .floating-label {
margin-left: 5px;
}
.onOff {
- /* border-color: #E34531; */
border-color: #c5c5c5;
}
.onOffActive {
- /* border-color: #5CB85C; */
border-color: #222222;
}
@@ -177,7 +175,6 @@ input:not(:focus):not([value='']):valid ~ .floating-label {
opacity: 1;
}
.invisible {
- /* display:none; */
opacity: 0;
}
.spinner {
diff --git a/src/index.js b/src/index.jsx
similarity index 91%
rename from src/index.js
rename to src/index.jsx
index 2eea30c3..491a9220 100644
--- a/src/index.js
+++ b/src/index.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
diff --git a/src/util/auth.js b/src/util/auth.js
index 0258583b..6c2df049 100644
--- a/src/util/auth.js
+++ b/src/util/auth.js
@@ -1,19 +1,19 @@
import privKey from '../keys/crdPrivateKey.js';
-import KJUR, { KEYUTIL } from 'jsrsasign';
+import KJUR from 'jsrsasign';
import { v4 as uuidv4 } from 'uuid';
import env from 'env-var';
function login() {
const tokenUrl =
- env.get('REACT_APP_AUTH').asString() +
+ env.get('VITE_AUTH').asString() +
'/realms/' +
- env.get('REACT_APP_REALM').asString() +
+ env.get('VITE_REALM').asString() +
'/protocol/openid-connect/token';
let params = {
grant_type: 'password',
- username: env.get('REACT_APP_USER').asString(),
- password: env.get('REACT_APP_PASSWORD').asString(),
- client_id: env.get('REACT_APP_CLIENT').asString()
+ username: env.get('VITE_USER').asString(),
+ password: env.get('VITE_PASSWORD').asString(),
+ client_id: env.get('VITE_CLIENT').asString()
};
// Encodes the params to be compliant with
@@ -53,7 +53,7 @@ function createJwt(baseUrl, audience) {
alg: 'ES384',
typ: 'JWT',
kid: 'zGe023HzCFfY7NPb04EGvRDP1oYsTOtLNCNjDgr66AI',
- jku: env.get('REACT_APP_PUBLIC_KEYS').asString()
+ jku: env.get('VITE_PUBLIC_KEYS').asString()
});
return KJUR.jws.JWS.sign(null, jwtHeader, jwtPayload, privKey);
diff --git a/src/util/buildScript.2017071.js b/src/util/buildScript.2017071.js
index 653b60e4..f09232f6 100644
--- a/src/util/buildScript.2017071.js
+++ b/src/util/buildScript.2017071.js
@@ -234,6 +234,11 @@ function buildNewRxMedication(doc, medicationRequestResource) {
if (system.endsWith('rxnorm')) {
// Medication Drug Description
xmlAddTextNode(doc, medicationPrescribed, 'DrugDescription', coding.display);
+ // Medication Drug Code
+ var drugDbCode = doc.createElement('DrugDBCode');
+ xmlAddTextNode(doc, drugDbCode, 'Code', coding.code);
+ xmlAddTextNode(doc, drugDbCode, 'Qualifier', 'BPK'); // Branded Package BPCK (BPK)
+ drugCoded.appendChild(drugDbCode);
} else if (system.endsWith('ndc')) {
// Medication Drug Code
var productCode = doc.createElement('ProductCode');
diff --git a/src/util/data.js b/src/util/data.js
index b1f0b2e2..d3086192 100644
--- a/src/util/data.js
+++ b/src/util/data.js
@@ -4,37 +4,37 @@ const headerDefinitions = {
alternativeTherapy: {
display: 'Alternative Therapy Cards Allowed',
type: 'check',
- default: env.get('REACT_APP_ALT_DRUG').asBool()
+ default: env.get('VITE_ALT_DRUG').asBool()
},
baseUrl: {
display: 'Base Server',
type: 'input',
- default: env.get('REACT_APP_EHR_BASE').asString()
+ default: env.get('VITE_EHR_BASE').asString()
},
cdsUrl: {
- display: 'REMS Admin',
+ display: 'REMS Admin Reset Url',
type: 'input',
- default: env.get('REACT_APP_CDS_SERVICE').asString()
+ default: env.get('VITE_CDS_SERVICE').asString()
},
defaultUser: {
display: 'Default User',
type: 'input',
- default: env.get('REACT_APP_DEFAULT_USER').asString()
+ default: env.get('VITE_DEFAULT_USER').asString()
},
ehrUrl: {
display: 'EHR Server',
type: 'input',
- default: env.get('REACT_APP_EHR_SERVER').asString()
+ default: env.get('VITE_EHR_SERVER').asString()
},
ehrUrlSentToRemsAdminForPreFetch: {
display: 'EHR Server Sent to REMS Admin for Prefetch',
type: 'input',
- default: env.get('REACT_APP_EHR_SERVER_TO_BE_SENT_TO_REMS_ADMIN_FOR_PREFETCH').asString()
+ default: env.get('VITE_EHR_SERVER_TO_BE_SENT_TO_REMS_ADMIN_FOR_PREFETCH').asString()
},
generateJsonToken: {
display: 'Generate JSON Web Token',
type: 'check',
- default: env.get('REACT_APP_GENERATE_JWT').asBool()
+ default: env.get('VITE_GENERATE_JWT').asBool()
},
includeConfig: {
display: 'Include Configuration in CRD Request',
@@ -44,37 +44,22 @@ const headerDefinitions = {
launchUrl: {
display: 'DTR Launch URL (QuestionnaireForm)',
type: 'input',
- default: env.get('REACT_APP_LAUNCH_URL').asString()
- },
- orderSelect: {
- display: 'Order Select Rest End Point',
- type: 'input',
- default: env.get('REACT_APP_ORDER_SELECT').asString()
- },
- orderSign: {
- display: 'Order Sign Rest End Point',
- type: 'input',
- default: env.get('REACT_APP_ORDER_SIGN').asString()
+ default: env.get('VITE_LAUNCH_URL').asString()
},
patientFhirQuery: {
display: 'Patient FHIR Query',
type: 'input',
- default: env.get('REACT_APP_PATIENT_FHIR_QUERY').asString()
- },
- patientView: {
- display: 'Patient View Rest End Point',
- type: 'input',
- default: env.get('REACT_APP_PATIENT_VIEW').asString()
+ default: env.get('VITE_PATIENT_FHIR_QUERY').asString()
},
pimsUrl: {
display: 'PIMS Server',
type: 'input',
- default: env.get('REACT_APP_PIMS_SERVER').asString()
+ default: env.get('VITE_PIMS_SERVER').asString()
},
responseExpirationDays: {
display: 'In Progress Form Expiration Days',
type: 'input',
- default: env.get('REACT_APP_RESPONSE_EXPIRATION_DAYS').asInt()
+ default: env.get('VITE_RESPONSE_EXPIRATION_DAYS').asInt()
},
sendPrefetch: {
display: 'Send Prefetch',
@@ -84,10 +69,54 @@ const headerDefinitions = {
smartAppUrl: {
display: 'SMART App',
type: 'input',
- default: env.get('REACT_APP_SMART_LAUNCH_URL').asString()
+ default: env.get('VITE_SMART_LAUNCH_URL').asString()
+ },
+ remsAdminServer: {
+ display: 'REMS Admin Server',
+ type: 'input',
+ default: env.get('VITE_SERVER').asString()
}
};
+const medicationRequestToRemsAdmins = Object.freeze([
+ {
+ rxnorm: 2183126,
+ display: 'Turalio 200 MG Oral Capsule',
+ hookEndpoints: [
+ { hook: 'order-sign', remsAdmin: 'http://localhost:8090/cds-services/rems-order-sign' },
+ { hook: 'order-select', remsAdmin: 'http://localhost:8090/cds-services/rems-order-select' },
+ { hook: 'patient-view', remsAdmin: 'http://localhost:8090/cds-services/rems-patient-view' }
+ ]
+ },
+ {
+ rxnorm: 6064,
+ display: 'Isotretinoin 20 MG Oral Capsule',
+ hookEndpoints: [
+ { hook: 'order-sign', remsAdmin: 'http://localhost:8090/cds-services/rems-order-sign' },
+ { hook: 'order-select', remsAdmin: 'http://localhost:8090/cds-services/rems-order-select' },
+ { hook: 'patient-view', remsAdmin: 'http://localhost:8090/cds-services/rems-patient-view' }
+ ]
+ },
+ {
+ rxnorm: 1237051,
+ display: 'TIRF 200 UG Oral Transmucosal Lozenge',
+ hookEndpoints: [
+ { hook: 'order-sign', remsAdmin: 'http://localhost:8090/cds-services/rems-order-sign' },
+ { hook: 'order-select', remsAdmin: 'http://localhost:8090/cds-services/rems-order-select' },
+ { hook: 'patient-view', remsAdmin: 'http://localhost:8090/cds-services/rems-patient-view' }
+ ]
+ },
+ {
+ rxnorm: 1666386,
+ display: 'Addyi 100 MG Oral Tablet',
+ hookEndpoints: [
+ { hook: 'order-sign', remsAdmin: 'http://localhost:8090/cds-services/rems-order-sign' },
+ { hook: 'order-select', remsAdmin: 'http://localhost:8090/cds-services/rems-order-select' },
+ { hook: 'patient-view', remsAdmin: 'http://localhost:8090/cds-services/rems-patient-view' }
+ ]
+ }
+]);
+
const types = {
error: 'errorClass',
info: 'infoClass',
@@ -213,4 +242,12 @@ const shortNameMap = {
'http://hl7.org/fhir/sid/ndc': 'NDC'
};
-export { defaultValues, genderOptions, headerDefinitions, shortNameMap, stateOptions, types };
+export {
+ defaultValues,
+ genderOptions,
+ headerDefinitions,
+ shortNameMap,
+ stateOptions,
+ types,
+ medicationRequestToRemsAdmins
+};
diff --git a/src/util/fhir.js b/src/util/fhir.js
index 0cbb845e..7c4a1c37 100644
--- a/src/util/fhir.js
+++ b/src/util/fhir.js
@@ -1,21 +1,3 @@
-function fhir(resource, ehrUrl, patient, auth) {
- const headers = {
- 'Content-Type': 'application/json'
- };
- if (patient) {
- fetch(`${ehrUrl}${resource}?subject=Patient/${patient}`, {
- method: 'GET',
- headers: headers
- })
- .then(response => {
- return response.json();
- })
- .then(json => {
- console.log(json);
- });
- }
-}
-
function getAge(dateString) {
var today = new Date();
var birthDate = new Date(dateString);
@@ -80,10 +62,20 @@ function createMedicationDispenseFromMedicationRequest(medicationRequest) {
return medicationDispense;
}
+function createMedicationFromMedicationRequest(medicationRequest) {
+ let medication = {};
+ medication.resourceType = 'Medication';
+ medication.id = medicationRequest?.id + '-med';
+ if (medicationRequest.medicationCodeableConcept) {
+ medication.code = medicationRequest.medicationCodeableConcept;
+ }
+ return medication;
+}
+
export {
- fhir,
getAge,
getDrugCodeableConceptFromMedicationRequest,
getDrugCodeFromMedicationRequest,
- createMedicationDispenseFromMedicationRequest
+ createMedicationDispenseFromMedicationRequest,
+ createMedicationFromMedicationRequest
};
diff --git a/src/util/util.js b/src/util/util.js
index b63e36ed..44b9286f 100644
--- a/src/util/util.js
+++ b/src/util/util.js
@@ -66,4 +66,55 @@ function retrieveLaunchContext(link, patientId, clientState) {
});
}
-export { retrieveLaunchContext };
+function standardsBasedGetEtasu(etasuUrl, body, responseCallback) {
+ axios({
+ method: 'post',
+ url: etasuUrl,
+ data: body
+ }).then(response => {
+ // Sorting an array mutates the data in place.
+ const remsMetRes = response.data;
+ if (remsMetRes?.parameter[0]?.resource?.contained) {
+ remsMetRes.parameter[0].resource.contained[0].parameter.sort((first, second) => {
+ // Keep the other forms unsorted.
+ if (second.name.includes('Patient Status Update')) {
+ // Sort the Patient Status Update forms in descending order of timestamp.
+ return second.name.localeCompare(first.name);
+ }
+ return 0;
+ });
+ }
+ responseCallback(response.data.parameter[0].resource, body);
+ }, error => {
+ console.log('error -- > ', error);
+ }
+ )
+}
+
+const getMedicationSpecificRemsAdminUrl = (request, globalState, hook) => {
+ const display = request.medicationCodeableConcept?.coding?.[0]?.display;
+ const rxnorm = request.medicationCodeableConcept?.coding?.[0]?.code;
+
+ if (!rxnorm) {
+ console.log("ERROR: unknown MedicationRequest code: '", rxnorm);
+ return undefined;
+ }
+
+ if (!(hook === 'patient-view' || hook === 'order-sign' || hook === 'order-select')) {
+ console.log(`ERROR: unknown hook type: ${hook}`);
+ return undefined;
+ }
+
+ const cdsUrl = Object.values(globalState.medicationRequestToRemsAdmins).find(
+ value => Number(value.rxnorm) === Number(rxnorm) && value.hook === hook
+ )?.remsAdmin;
+
+ if (!cdsUrl) {
+ console.log(`Medication ${display} is not a REMS medication`);
+ return undefined;
+ }
+
+ return cdsUrl;
+};
+
+export { retrieveLaunchContext, standardsBasedGetEtasu, getMedicationSpecificRemsAdminUrl };
diff --git a/vite-env.d.ts b/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..75d461a6
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import viteTsconfigPaths from 'vite-tsconfig-paths'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import dotenv from 'dotenv'
+
+dotenv.config() // load env vars from .env
+export default defineConfig({
+ // depending on your application, base can also be "/"
+ base: '',
+ plugins: [react(), viteTsconfigPaths(), nodePolyfills()],
+ define: {
+ 'process.env': process.env
+ },
+ server: {
+ // this sets a default port to 3000
+ port: 3000,
+ open: false,
+ host: true
+ },
+})
\ No newline at end of file