From 291e30e3f1ae0d287a9798a074ad9e312377595a Mon Sep 17 00:00:00 2001 From: Ariel Virgulto Date: Wed, 18 Oct 2023 11:08:52 -0400 Subject: [PATCH] Add env variable for developer mode, don't show checkbox if false --- .env | 1 + README.md | 1 + src/views/Questionnaire/QuestionnaireForm.css | 3 +- src/views/Questionnaire/QuestionnaireForm.tsx | 66 ++++++++++++++----- src/views/Questionnaire/SmartApp.tsx | 29 ++++---- 5 files changed, 69 insertions(+), 31 deletions(-) diff --git a/.env b/.env index c2e72b7..d42d2f7 100644 --- a/.env +++ b/.env @@ -9,6 +9,7 @@ REACT_APP_SEND_RX_ENABLED = true PORT=4040 REACT_APP_CLIENT_ID = app-login REACT_APP_CLIENT_SCOPES = launch openid profile user/Patient.read patient/Patient.read user/Practitioner.read +REACT_APP_DEVELOPER_MODE = true GENERATE_SOURCEMAP=false BROWSER=none diff --git a/README.md b/README.md index c2f94cd..5c3b76c 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ Following are a list of modifiable paths: | REACT_APP_PHARMACY_SERVER_BASE | `http://localhost:5051` | | REACT_APP_ETASU_STATUS_ENABLED | `true` | | REACT_APP_PHARMACY_STATUS_ENABLED | `true` | +| REACT_APP_DEVELOPER_MODE | `true` | | REACT_APP_SEND_RX_ENABLED | `true` | | PORT | `4040`| diff --git a/src/views/Questionnaire/QuestionnaireForm.css b/src/views/Questionnaire/QuestionnaireForm.css index 62b4e37..899d6d0 100644 --- a/src/views/Questionnaire/QuestionnaireForm.css +++ b/src/views/Questionnaire/QuestionnaireForm.css @@ -47,7 +47,6 @@ } .submit-button-panel { - float:right; margin-right: 10px; margin-bottom: 10px; } @@ -59,6 +58,7 @@ .error-text { text-align: end; font-style: italic; + color: #8b0000; } .submit-button { @@ -83,7 +83,6 @@ } .status-panel { - float:left; margin-left: 10px; margin-bottom: 10px; } diff --git a/src/views/Questionnaire/QuestionnaireForm.tsx b/src/views/Questionnaire/QuestionnaireForm.tsx index 62a2d21..16a74e6 100644 --- a/src/views/Questionnaire/QuestionnaireForm.tsx +++ b/src/views/Questionnaire/QuestionnaireForm.tsx @@ -27,7 +27,8 @@ import { searchQuestionnaire } from './questionnaireUtil'; import './QuestionnaireForm.css'; -import { Button } from '@mui/material'; +import { Button, Typography } from '@mui/material'; +import Tooltip from '@mui/material/Tooltip'; import Client from 'fhirclient/lib/Client'; import ConfigData from '../../config.json'; @@ -1044,6 +1045,27 @@ export function QuestionnaireForm(props: QuestionnaireProps) { } }; + // Get tooltip for Submit button + const getMissingFieldsTooltip = () => { + const tooltip = isFilledOut() ? 'Submit to REMS admin' : 'Fill out missing fields'; + return {tooltip}; + }; + + // Get missing fields to display + const getMissingFields = () => { + const fields: string[] = []; + const requiredFieldErrors = formValidationErrors ? formValidationErrors.filter((error) => { + return error.includes('requires a value'); + }) : []; + if (requiredFieldErrors.length) { + requiredFieldErrors.forEach((err) => { + const name = err.split(' requires a value')[0]; + fields.push(name); + }); + } + return fields.join(', '); + }; + const getDisplayButtons = () => { if (!isAdaptiveForm()) { return ( @@ -1059,28 +1081,34 @@ export function QuestionnaireForm(props: QuestionnaireProps) { > Save to EHR - + + + + + - {!isFilledOut() ?

* Fill out all required fields before submitting

: <>} + {!isFilledOut() ?

You must include a value for {getMissingFields()}

: <>} ); } else { if (props.adFormCompleted) { return (
- + + +
); } else { @@ -1658,8 +1686,10 @@ export function QuestionnaireForm(props: QuestionnaireProps) { ) : null} ) : null} - {!isAdaptive ?
Form Loaded: {formLoaded}
: null} - {getDisplayButtons()} +
+ {!isAdaptive ?
Form Loaded: {formLoaded}
:
} + {getDisplayButtons()} +
); } diff --git a/src/views/Questionnaire/SmartApp.tsx b/src/views/Questionnaire/SmartApp.tsx index d867196..348d8c1 100644 --- a/src/views/Questionnaire/SmartApp.tsx +++ b/src/views/Questionnaire/SmartApp.tsx @@ -25,6 +25,7 @@ import executeElm from './elm/executeElm'; import PatientSelect from './components/PatientSelect/PatientSelect'; import RemsInterface from './components/RemsInterface/RemsInterface'; import { createRoot } from 'react-dom/client'; +import * as env from 'env-var'; interface SmartAppProps { standalone: boolean; @@ -112,6 +113,8 @@ export function SmartApp(props: SmartAppProps) { const [adFormResponseFromServer, setAdFormResponseFromServer] = useState(); const [formElement, setFormElement] = useState(); const [ignoreRequiredCheckbox, setIgnoreRequiredCheckbox] = useState(false); + + const showRequiredCheckbox: boolean = env.get('REACT_APP_DEVELOPER_MODE').asBool() ? true : false; const smart = props.smartClient; let FHIR_VERSION = 'r4'; const toggleOverlay = () => { @@ -341,6 +344,7 @@ export function SmartApp(props: SmartAppProps) { } }; + // update the ignore required checkbox const updateRequired = (defaultFilter: boolean) => { let checked: boolean, requiredCheckbox: HTMLInputElement; if (!defaultFilter) { @@ -587,6 +591,7 @@ export function SmartApp(props: SmartAppProps) { } }; + // update required checkbox ref const onRequiredCheckboxRefChange = () => { const requiredCheckbox = document.getElementById('required-fields-checkbox') as HTMLInputElement; if (requiredCheckbox != null) { @@ -635,17 +640,19 @@ export function SmartApp(props: SmartAppProps) { ref={onFilterCheckboxRefChange} > -
- {' '} - { - updateRequired(false); - }} - id='required-fields-checkbox' - ref={onRequiredCheckboxRefChange} - > -
+ { showRequiredCheckbox ? +
+ {' '} + { + updateRequired(false); + }} + id='required-fields-checkbox' + ref={onRequiredCheckboxRefChange} + > +
+ :
}
);