Add env variable for developer mode, don't show checkbox if false

mcode · Oct 18, 2023 · 291e30e · 291e30e
1 parent 3afd8e8
commit 291e30e
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 <Typography fontSize={16}>{tooltip}</Typography>;
+  };
+
+  // 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
             </Button>
-              <Button variant="outlined" disabled={!isFilledOut()}
-                onClick={() => {
-                  outputResponse('completed');
-                }}
-              >
-                Submit REMS Bundle
-              </Button>
+            <Tooltip title={getMissingFieldsTooltip()}>
+              <span>
+                <Button variant="outlined" disabled={!isFilledOut()}
+                  onClick={() => {
+                    outputResponse('completed');
+                  }}
+                >
+                  Submit REMS Bundle
+                </Button>
+              </span>
+            </Tooltip>
           </div>
-          {!isFilledOut() ? <p className='error-text'>* Fill out all required fields before submitting</p> : <></>}
+          {!isFilledOut() ? <p className='error-text'>You must include a value for {getMissingFields()}</p> : <></>}
         </div>
       );
     } else {
       if (props.adFormCompleted) {
         return (
           <div className="submit-button-panel">
-            <Button variant="outlined" disabled={!isFilledOut()}
-              onClick={() => {
-                outputResponse('completed');
-              }}
-            >
-              Submit REMS Bundle
-            </Button>
+            <Tooltip title={getMissingFieldsTooltip()}>
+              <Button variant="outlined" disabled={!isFilledOut()}
+                onClick={() => {
+                  outputResponse('completed');
+                }}
+              >
+                Submit REMS Bundle
+              </Button>
+            </Tooltip>
           </div>
         );
       } else {
@@ -1658,8 +1686,10 @@ export function QuestionnaireForm(props: QuestionnaireProps) {
           ) : null}
         </div>
       ) : null}
-      {!isAdaptive ? <div className="status-panel">Form Loaded: {formLoaded}</div> : null}
-      {getDisplayButtons()}
+      <div style={{display: 'flex', justifyContent: 'space-between'}}>
+        {!isAdaptive ? <div className="status-panel">Form Loaded: {formLoaded}</div> : <div/>}
+        {getDisplayButtons()}
+      </div>
     </div>
   );
 }
diff --git 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<QuestionnaireResponse>();
   const [formElement, setFormElement] = useState<HTMLElement>();
   const [ignoreRequiredCheckbox, setIgnoreRequiredCheckbox] = useState<boolean>(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}
             ></input>
           </div>
-          <div className="task-button">
-            <label>Ignore required fields</label>{' '}
-            <input
-              type="checkbox"
-              onChange={() => {
-                updateRequired(false);
-              }}
-              id='required-fields-checkbox'
-              ref={onRequiredCheckboxRefChange}
-            ></input>
-          </div>
+          { showRequiredCheckbox ? 
+            <div className="task-button">
+              <label>Ignore required fields</label>{' '}
+              <input
+                type="checkbox"
+                onChange={() => {
+                  updateRequired(false);
+                }}
+                id='required-fields-checkbox'
+                ref={onRequiredCheckboxRefChange}
+              ></input>
+            </div>
+          : <div/>}
         </div>
       </div>
     );