Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rearrange SMART on FHIR App UI #43

Merged
merged 4 commits into from
Sep 6, 2023
Merged

Rearrange SMART on FHIR App UI #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e1619a2
initial UI changes without reflow
ZaraMasino Aug 11, 2023
63e72f1
Update .gitignore to ignore Docker logs
jtquach1 Aug 30, 2023
0d0e5db
Rearrange Patient info and MedicationRequest selection into two horiz…
jtquach1 Sep 1, 2023
f1749c9
Reduced ratio of panes on md+ screens, added spacing on CDS Hooks car…
jtquach1 Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*

/logs
172 changes: 77 additions & 95 deletions src/views/Patient/MedReqDropDown/MedReqDropDown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
Card,
CardContent,
FormControl,
Grid,
InputLabel,
MenuItem,
Select,
Expand Down Expand Up @@ -242,121 +243,102 @@ function MedReqDropDown(props: MedReqDropDownProps) {
? true
: false;

const label = 'Select Medication Request';
return (
<div>
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
maxWidth: '800px'
}}
>
<div className="MedReqDropDown">
<div>
<Card sx={{ minWidth: 500, maxWidth: 5000, bgcolor: 'white', p: 5 }}>
<CardContent>
<Typography
sx={{ fontSize: 17 }}
color="text.secondary"
gutterBottom
component="div"
>
Select Medication Request:
</Typography>
<FormControl sx={{ minWidth: 300, mt: 1 }}>
<InputLabel id="dropdown-label">Select Medication</InputLabel>
<>
<Card sx={{ bgcolor: 'white' }}>
<CardContent>
<Grid item container spacing={2}>
<Grid item container alignItems="left" direction="column" spacing={2}>
<Grid item>
<FormControl fullWidth>
<InputLabel id="dropdown-label">{label}</InputLabel>
<Select
labelId="dropdown-label"
id="dropdown"
label={label}
value={selectedOption}
onChange={handleOptionSelect}
>
<MenuItem value="">
<em>Select Medication</em>
</MenuItem>
{medication ? (
medication.data.map(medications => (
<MenuItem key={medications.id} value={medications.id}>
{medications.medicationCodeableConcept?.coding?.[0].display}
</MenuItem>
))
) : (
<p>loading medications...</p>
<MenuItem>Loading medications...</MenuItem>
)}
</Select>
</FormControl>
</CardContent>
</Grid>

{selectedMedicationCard && (
<CardContent>
<Typography
sx={{ bgcolor: 'text.secondary', color: 'white', textAlign: 'center' }}
>
Code: {selectedMedicationCard?.medicationCodeableConcept?.coding?.[0].code}
</Typography>
<Typography
sx={{
bgcolor: 'text.disabled',
color: 'white',
textAlign: 'center',
fontSize: 24
}}
>
{medicationName}
</Typography>
<Typography
variant="h6"
sx={{ bgcolor: 'text.disabled', color: 'white', textAlign: 'center' }}
color="textSecondary"
gutterBottom
>
{selectedMedicationCard?.medicationCodeableConcept?.coding?.[0].display}
</Typography>
{etasu_status_enabled && (
<Button variant="contained" onClick={handleOpenCheckETASU}>
Check ETASU
</Button>
)}
{pharmacy_status_enabled && (
<Button variant="contained" onClick={handleOpenCheckPharmacy}>
Check Pharmacy
</Button>
)}
{sendRxEnabled && (
<Button variant="contained" onClick={handleSendRx}>
Send RX to PIMS
</Button>
)}
</CardContent>
<>
<Grid item>
<Typography bgcolor="text.secondary" color="white" textAlign="center">
Code: {selectedMedicationCard?.medicationCodeableConcept?.coding?.[0].code}
</Typography>
<Typography
bgcolor="text.disabled"
variant="h5"
textAlign="center"
color="white"
>
{medicationName}
</Typography>
<Typography
variant="h6"
bgcolor="text.disabled"
color="white"
textAlign="center"
>
{selectedMedicationCard?.medicationCodeableConcept?.coding?.[0].display}
</Typography>
</Grid>
<Grid item container justifyContent="center" spacing={2}>
{etasu_status_enabled && (
<Grid item>
<Button variant="contained" onClick={handleOpenCheckETASU}>
Check ETASU
</Button>
</Grid>
)}
{pharmacy_status_enabled && (
<Grid item>
<Button variant="contained" onClick={handleOpenCheckPharmacy}>
Check Pharmacy
</Button>
</Grid>
)}
{sendRxEnabled && (
<Grid item>
<Button variant="contained" onClick={handleSendRx}>
Send RX to PIMS
</Button>
</Grid>
)}
</Grid>
</>
)}
</Card>
{selectedOption ? (
<Card>
<CardContent>
<CdsHooksCards
cards={hooksCards}
client={client}
name={medicationName}
tabIndex={tabIndex}
setTabIndex={setTabIndex}
tabCallback={props.tabCallback}
></CdsHooksCards>
</CardContent>
</Card>
) : (
<p></p>
</Grid>

{selectedOption && (
<CdsHooksCards
cards={hooksCards}
client={client}
name={medicationName}
tabIndex={tabIndex}
setTabIndex={setTabIndex}
tabCallback={props.tabCallback}
/>
)}
</div>
</div>
</Box>
</Grid>
</CardContent>
</Card>
<Modal open={showEtasu} onClose={handleCloseCheckETASU}>
<Box sx={modal_style}>
<EtasuStatus
patient={patient}
medication={selectedMedicationCard}
update={showEtasu}
></EtasuStatus>
<EtasuStatus patient={patient} medication={selectedMedicationCard} update={showEtasu} />
</Box>
</Modal>
<Modal open={showPharmacy} onClose={handleCloseCheckPharmacy}>
Expand All @@ -365,10 +347,10 @@ function MedReqDropDown(props: MedReqDropDownProps) {
patient={patient}
medication={selectedMedicationCard}
update={showPharmacy}
></PharmacyStatus>
/>
</Box>
</Modal>
</div>
</>
);
}

Expand Down
73 changes: 29 additions & 44 deletions src/views/Patient/MedReqDropDown/cdsHooksCards/cdsHooksCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect, ReactElement } from 'react';
import { Button, Card, CardActions, CardContent, Typography } from '@mui/material';
import { Button, Card, CardActions, CardContent, Grid, Typography } from '@mui/material';

import axios from 'axios';
import Client from 'fhirclient/lib/Client';
Expand Down Expand Up @@ -151,67 +151,52 @@ const CdsHooksCard = (props: CdsHooksCardProps) => {
});
});
}
const cardSectionHeaderStyle = { marginBottom: '2px', color: 'black' };
const decisionCard = {
padding: '15px',
margin: '10px',
backgroundColor: '#fff',
border: '1px solid rgba(0, 0, 0, 0.12)',
borderRadius: '4px'
};
const cardSource = { fontSize: '.85rem', fontStyle: 'italic', margin: '0 0 5px' };
const sourceLink = { marginRight: '8px', color: '#4183c4', textDecoration: 'none' };
return (
<div>
<Grid item>
<Card variant="outlined" style={decisionCard}>
<React.Fragment>
<CardContent>
<Typography style={cardSectionHeaderStyle} gutterBottom>
Summary
</Typography>
<Typography variant="h5" component="div">
<p>{props.card?.summary}</p>
</Typography>
<br />
<Typography style={cardSectionHeaderStyle} gutterBottom>
Details
</Typography>
<Typography>{props.card?.detail}</Typography>
<br />
<Typography style={cardSource} gutterBottom>
Source{' '}
<a href={props.card?.source?.url} style={sourceLink}>
{props.card?.source?.label}
</a>
</Typography>
</CardContent>
<CardActions sx={{ display: 'inline !important' }}>
<CardContent>
<Typography variant="h5" component="div">
{props.card?.summary}
</Typography>
<Typography>{props.card?.detail}</Typography>
<Typography style={cardSource} gutterBottom>
{'Source '}
<a href={props.card?.source?.url} style={sourceLink}>
{props.card?.source?.label}
</a>
</Typography>
</CardContent>
<CardActions>
<Grid container spacing={1}>
{links.map((link: Link) => {
if (link.type === 'smart') {
return (
<Button
key={link?.label}
variant="outlined"
onClick={() => buttonClickAction(link)}
>
{link?.label}
</Button>
<Grid item key={link?.label}>
<Button variant="outlined" onClick={() => buttonClickAction(link)}>
{link?.label}
</Button>
</Grid>
);
}
return (
<Button
key={link?.label}
endIcon={<PictureAsPdfIcon />}
onClick={() => buttonClickAction(link)}
>
{link?.label}
</Button>
<Grid item key={link?.label}>
<Button endIcon={<PictureAsPdfIcon />} onClick={() => buttonClickAction(link)}>
{link?.label}
</Button>
</Grid>
);
})}
</CardActions>
</React.Fragment>
</Grid>
</CardActions>
</Card>
</div>
</Grid>
);
};

Expand Down
7 changes: 4 additions & 3 deletions src/views/Patient/MedReqDropDown/cdsHooksCards/cdsHooksCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Client from 'fhirclient/lib/Client';
import { Card as HooksCard } from '../../../../cds-hooks/resources/HookTypes';
import CdsHooksCard from './cdsHooksCard';
import { ReactElement } from 'react';
import { Grid } from '@mui/material';

interface CdsHooksCardsProps {
cards: HooksCard[];
Expand All @@ -14,7 +15,7 @@ interface CdsHooksCardsProps {

const CdsHooksCards = (props: CdsHooksCardsProps) => {
return (
<div>
<Grid item container spacing={2}>
{props.cards.map((card: HooksCard) => (
<CdsHooksCard
key={card?.summary}
Expand All @@ -24,9 +25,9 @@ const CdsHooksCards = (props: CdsHooksCardsProps) => {
tabCallback={props.tabCallback}
tabIndex={props.tabIndex}
setTabIndex={props.setTabIndex}
></CdsHooksCard>
/>
))}
</div>
</Grid>
);
};

Expand Down
Loading
Loading