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}
+ >
+
+ : }
);