Skip to content

Commit

Permalink
Merge pull request #70 from mcode/rems-554-shorten-ipledge-form-requi…
Browse files Browse the repository at this point in the history 
…red-fields

Shorten display of iPledge/Isotretinoin form's required fields
  • Loading branch information
@plarocque4
plarocque4 authored Jan 26, 2024
2 parents d323ec1 + b5d0e94 commit 7a78554
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 42 deletions.
9 changes: 0 additions & 9 deletions src/views/Questionnaire/QuestionnaireForm.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,6 @@
margin-bottom: 10px;
}

.btn-row {
display: flex;
}

.error-text {
text-align: end;
font-style: italic;
Expand Down Expand Up @@ -82,11 +78,6 @@
color: white;
}

.status-panel {
margin-left: 10px;
margin-bottom: 10px;
}

.filled {
color:white;

Expand Down
104 changes: 71 additions & 33 deletions src/views/Questionnaire/QuestionnaireForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,16 @@ import {
getDrugCodeableConceptFromMedicationRequest
} from './questionnaireUtil';
import './QuestionnaireForm.css';
import { Button, Typography } from '@mui/material';
import {
Accordion,
AccordionDetails,
AccordionSummary,
Button,
Chip,
Stack,
Typography
} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Tooltip from '@mui/material/Tooltip';

import Client from 'fhirclient/lib/Client';
Expand All @@ -40,6 +49,7 @@ import { PrepopulationResults } from './SmartApp';
import { v4 as uuid } from 'uuid';
import axios, { AxiosResponse } from 'axios';
import { createRoot } from 'react-dom/client';
import { red } from '@mui/material/colors';
declare global {
interface Window {
LForms: any;
Expand Down Expand Up @@ -109,6 +119,7 @@ export function QuestionnaireForm(props: QuestionnaireProps) {
const partialForms: PartialForms = {};
const LForms = window.LForms;
const questionnaireFormId = `formContainer-${props.qform.id}-${props.tabIndex}`;

useEffect(() => {
// search for any partially completed QuestionnaireResponses
if (props.response) {
Expand Down Expand Up @@ -1038,7 +1049,7 @@ export function QuestionnaireForm(props: QuestionnaireProps) {
};

// Get missing fields to display
const getMissingFields = () => {
const getMissingFields = (): JSX.Element => {
const fields: string[] = [];
const requiredFieldErrors = formValidationErrors
? formValidationErrors.filter(error => {
Expand All @@ -1051,14 +1062,45 @@ export function QuestionnaireForm(props: QuestionnaireProps) {
fields.push(name);
});
}
return fields.join(', ');
return (
<Stack mt={1}>
<Accordion disableGutters>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography className="error-text">
You must include a value for the following missing fields (click to expand):
</Typography>
</AccordionSummary>
<AccordionDetails>
{fields.map((field, index) => (
<Chip
key={`field-${index}`}
sx={{
height: 'auto',
'& .MuiChip-label': {
display: 'block',
whiteSpace: 'normal'
},
color: red[300],
width: 'unset',
mb: 1,
mr: 1
}}
label={field}
color="error"
variant="outlined"
/>
))}
</AccordionDetails>
</Accordion>
</Stack>
);
};

const getDisplayButtons = () => {
if (!isAdaptiveForm()) {
return (
<div className="submit-button-panel">
<div className="btn-row">
<>
<Stack className="submit-button-panel" direction="row" spacing={1}>
<Button variant="outlined" onClick={() => loadPreviousForm()}>
Load Previous Form
</Button>
Expand All @@ -1083,18 +1125,14 @@ export function QuestionnaireForm(props: QuestionnaireProps) {
</Button>
</span>
</Tooltip>
</div>
{!isFilledOut() ? (
<p className="error-text">You must include a value for {getMissingFields()}</p>
) : (
<></>
)}
</div>
</Stack>
{!isFilledOut() && getMissingFields()}
</>
);
} else {
if (props.adFormCompleted) {
return (
<div className="submit-button-panel">
<Stack className="submit-button-panel">
<Tooltip title={getMissingFieldsTooltip()}>
<Button
variant="outlined"
Expand All @@ -1106,17 +1144,17 @@ export function QuestionnaireForm(props: QuestionnaireProps) {
Submit REMS Bundle
</Button>
</Tooltip>
</div>
</Stack>
);
} else {
return (
<div className="submit-button-panel">
{isAdaptiveFormWithoutItem() ? (
<Stack className="submit-button-panel">
{isAdaptiveFormWithoutItem() && (
<Button variant="outlined" onClick={() => loadPreviousForm()}>
Load Previous Form
</Button>
) : null}
{isAdaptiveFormWithItem() ? (
)}
{isAdaptiveFormWithItem() && (
<Button
variant="outlined"
onClick={() => {
Expand All @@ -1125,8 +1163,8 @@ export function QuestionnaireForm(props: QuestionnaireProps) {
>
Save To EHR
</Button>
) : null}
</div>
)}
</Stack>
);
}
}
Expand Down Expand Up @@ -1645,49 +1683,49 @@ export function QuestionnaireForm(props: QuestionnaireProps) {
return (
<div>
<div id={questionnaireFormId}></div>
{!isAdaptive && props.formFilled ? (
{!isAdaptive && props.formFilled && (
<div className="form-message-panel">
<p>
All fields have been filled. Continue or uncheck "Only Show Unfilled Fields" to review
and modify the form.
</p>
</div>
) : null}
{showPopup ? (
)}
{showPopup && (
<SelectPopup
title={popupTitle}
options={popupOptions}
finalOption={popupFinalOption}
selectedCallback={popupCallback}
open={openPopup}
/>
) : null}
)}
<AlertDialog
title="Alert"
rxAlert={showRxAlert}
setRxAlert={(e: RxAlert) => {
setShowRxAlert(e);
}}
></AlertDialog>
{isAdaptive ? (
{isAdaptive && (
<div className="form-message-panel">
{isAdaptiveFormWithoutItem() && !props.adFormCompleted ? (
{isAdaptiveFormWithoutItem() && !props.adFormCompleted && (
<p>Click Next Question button to proceed.</p>
) : null}
{!props.adFormCompleted ? (
)}
{!props.adFormCompleted && (
<div>
{' '}
<Button variant="outlined" onClick={loadNextQuestions}>
Next Question
</Button>
</div>
) : null}
)}
</div>
) : null}
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
{!isAdaptive ? <div className="status-panel">Form Loaded: {formLoaded}</div> : <div />}
)}
<Stack flexDirection="column" spacing={1} p={1}>
{!isAdaptive && <Typography>Form Loaded: {formLoaded}</Typography>}
{getDisplayButtons()}
</div>
</Stack>
</div>
);
}

0 comments on commit 7a78554

Please sign in to comment.