From 0ca2665332f6e77da2d0776c81c87c372ca12a62 Mon Sep 17 00:00:00 2001
From: Ariel Virgulto <avirgulto@mitre.org>
Date: Thu, 7 Sep 2023 09:54:37 -0400
Subject: [PATCH 1/4] Initial updates to patient select button, developer
 console button and removing toggles

---
 src/components/ConsoleBox/ConsoleBox.js  | 21 +++++++-------
 src/components/ConsoleBox/consoleBox.css | 12 ++------
 src/components/RequestBox/RequestBox.js  | 35 +++++++++++-------------
 src/components/RequestBox/request.css    |  5 ++++
 src/containers/RequestBuilder.js         |  7 +++--
 src/index.css                            |  1 +
 6 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/src/components/ConsoleBox/ConsoleBox.js b/src/components/ConsoleBox/ConsoleBox.js
index e637834b..fed877d4 100644
--- a/src/components/ConsoleBox/ConsoleBox.js
+++ b/src/components/ConsoleBox/ConsoleBox.js
@@ -1,3 +1,4 @@
+import { Button } from '@mui/material';
 import React, {Component} from 'react';
 
 export default class ConsoleBox extends Component {
@@ -46,17 +47,15 @@ export default class ConsoleBox extends Component {
       let i = 0;
     return (
         <div>
-
-                <span className={this.state.headerStatus + " consoleHeader"} onClick={this.toggleConsole} >
-
-                </span>
-            <div id="your_div" className = {this.state.showStatus + " consoleMain resize"}>
-
-                {this.props.logs.map(element => {
-                    i++;
-                    return <div key = {i}> <span className={element.type}>{element.content}</span></div>
-                }) }
-            </div>
+          <Button variant='outlined' className={this.state.headerStatus + " consoleHeader"} onClick={this.toggleConsole}>
+            {this.state.showStatus === 'showConsole' ? 'Close console' : 'Open Developer console' }
+          </Button>
+          <div id="your_div" className = {this.state.showStatus + " consoleMain resize"}>
+              {this.props.logs.map(element => {
+                  i++;
+                  return <div key = {i}> <span className={element.type}>{element.content}</span></div>
+              }) }
+          </div>
         </div>
 
     )
diff --git a/src/components/ConsoleBox/consoleBox.css b/src/components/ConsoleBox/consoleBox.css
index d6a68ce2..ec59094f 100644
--- a/src/components/ConsoleBox/consoleBox.css
+++ b/src/components/ConsoleBox/consoleBox.css
@@ -45,22 +45,16 @@
     transition-delay: 0s;
 }
 
-.showHeader:hover{
+/* .showHeader:hover{
     color:#CCCCCC;
-}
+} */
 
 .showHeader{
     width:100%;
 }
-.showHeader::after{
-    content:"-";
-}
-.collapseHeader::after{
-    content:"+";
-}
 
 .collapseHeader{
-    width:25px;
+    width: 250px;
     color: black;
     text-align:center;
     border-width: 1px 1px 1px 1px;
diff --git a/src/components/RequestBox/RequestBox.js b/src/components/RequestBox/RequestBox.js
index 74dfa969..f5556dd7 100644
--- a/src/components/RequestBox/RequestBox.js
+++ b/src/components/RequestBox/RequestBox.js
@@ -11,6 +11,8 @@ import "./request.css";
 import { PrefetchTemplate } from "../../PrefetchTemplate";
 import { retrieveLaunchContext } from "../../util/util";
 import env from 'env-var';
+import PersonIcon from '@mui/icons-material/Person';
+import { Button, ButtonGroup } from '@mui/material';
 
 export default class RequestBox extends Component {
   constructor(props) {
@@ -456,11 +458,11 @@ export default class RequestBox extends Component {
           )}
 
           <div>
-            <button className="select-button" onClick={this.getPatients}>
-              Patient Select:
-            </button>
+            <Button variant='outlined' onClick={this.getPatients} startIcon={<PersonIcon />}>
+                Select a patient
+            </Button>
             <div className="request-header">
-              {this.state.patient.id ? this.state.patient.id : "N/A"}
+              {this.state.patient.id ? <span>Patient: {this.state.patient.id}</span> : <em>No patient selected</em>}
             </div>
             <div>
               {this.renderPatientInfo()}
@@ -476,21 +478,16 @@ export default class RequestBox extends Component {
             </div>
           </div>
         </div>
-        <div id="fse" className={"spinner " + (this.props.loading ? "visible" : "invisible")}>
-          <div className="ui active right inline loader"></div>
-        </div> 
-        <button className={"submit-btn btn btn-class "} onClick={this.launchSmartOnFhirApp} disabled={disableLaunchSmartOnFhir}>
-          Launch SMART on FHIR App
-        </button>
-        <button className={"submit-btn btn btn-class "} onClick={this.sendRx} disabled={disableSendRx}>
-          Send Rx to PIMS
-        </button>
-        <button className={"submit-btn btn btn-class "} onClick={this.relaunch} disabled={disableLaunchDTR}>
-          Relaunch DTR
-        </button>
-        <button className={"submit-btn btn btn-class "} onClick={this.submit} disabled={disableSendToCRD}>
-          Submit to REMS-Admin
-        </button>
+        {this.state.patient.id ?
+        <div className="action-btns">
+          <ButtonGroup variant="outlined" aria-label="outlined button group">
+            <Button onClick={this.relaunch} disabled={disableLaunchDTR}>Relaunch DTR</Button>
+            <Button onClick={this.launchSmartOnFhirApp} disabled={disableLaunchSmartOnFhir}>Launch SMART on FHIR App</Button>
+            <Button onClick={this.sendRx} disabled={disableSendRx}>Send Rx to PIMS</Button>
+            <Button onClick={this.submit} disabled={disableSendToCRD}>Submit to REMS-Admin</Button>
+          </ButtonGroup>
+        </div>
+      : <span />}
       </div>
     );
   }
diff --git a/src/components/RequestBox/request.css b/src/components/RequestBox/request.css
index b31ead0b..d819c321 100644
--- a/src/components/RequestBox/request.css
+++ b/src/components/RequestBox/request.css
@@ -1,4 +1,5 @@
 .request-header{
+    margin-top: 10px;
     border-width: 1px 1px 2px 2px;
     border-style: solid;
     border-color: transparent transparent black black;
@@ -117,4 +118,8 @@
 .questionnaire-response {
     width: 100%;
     padding:10px 10px 10px 0px;
+}
+
+.action-btns {
+    margin-top: 5px;
 }
\ No newline at end of file
diff --git a/src/containers/RequestBuilder.js b/src/containers/RequestBuilder.js
index 4f794a72..d0811f95 100644
--- a/src/containers/RequestBuilder.js
+++ b/src/containers/RequestBuilder.js
@@ -391,8 +391,8 @@ export default class RequestBuilder extends Component {
         return (
             <div>
                 <div className="nav-header">
-                    <button className={"launch-button left-button btn btn-class " + (this.state.ehrLaunch ? "active" : "not-active")} onClick={() => this.updateStateElement("ehrLaunch", true)}>EHR Launch</button>
-                    <button className={"launch-button right-button btn btn-class " + (!this.state.ehrLaunch ? "active" : "not-active")} onClick={() => this.updateStateElement("ehrLaunch", false)}>Standalone</button>
+                    {/* <button className={"launch-button left-button btn btn-class " + (this.state.ehrLaunch ? "active" : "not-active")} onClick={() => this.updateStateElement("ehrLaunch", true)}>EHR Launch</button>
+                    <button className={"launch-button right-button btn btn-class " + (!this.state.ehrLaunch ? "active" : "not-active")} onClick={() => this.updateStateElement("ehrLaunch", false)}>Standalone</button> */}
                     <button className={"btn btn-class settings " + (this.state.showSettings ? "active" : "not-active")} onClick={() => this.updateStateElement("showSettings", !this.state.showSettings)}><span className="glyphicon glyphicon-cog settings-icon" /></button>
 
                 </div>
@@ -448,6 +448,9 @@ export default class RequestBuilder extends Component {
                         />
                     </div> */}
 
+                    <br />
+                    <br />
+                    <br />
                     <ConsoleBox logs={this.state.logs} />
                 </div>
 
diff --git a/src/index.css b/src/index.css
index ba377cd9..ce75eedf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -308,6 +308,7 @@ input:not(:focus):not([value=""]):valid ~ .floating-label{
 
 .nav-header{
     margin-bottom: 10px;
+    height: 55px;
     padding:10px;
     border-bottom: 1px solid black;
     background-color: #005B94;

From 2681b9fb568c3bfa307dc04ec985e29a011ccd12 Mon Sep 17 00:00:00 2001
From: Ariel Virgulto <avirgulto@mitre.org>
Date: Thu, 7 Sep 2023 15:02:14 -0400
Subject: [PATCH 2/4] Update to only show fields when patient is selected,
 update name of buttons, show empty state

---
 src/components/RequestBox/RequestBox.js | 53 +++++++++++++++----------
 src/components/RequestBox/request.css   |  6 +++
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/components/RequestBox/RequestBox.js b/src/components/RequestBox/RequestBox.js
index f5556dd7..dc8e4d23 100644
--- a/src/components/RequestBox/RequestBox.js
+++ b/src/components/RequestBox/RequestBox.js
@@ -140,13 +140,19 @@ export default class RequestBox extends Component {
 
   renderPatientInfo() {
     const patient = this.state.patient;
+    if (Object.keys(patient).length === 0) {
+      return (
+          <div className="demographics">
+          </div>
+        );
+    }
     let name;
     if (patient.name) {
       name = (
         <span> {`${patient.name[0].given[0]} ${patient.name[0].family}`} </span>
       );
     } else {
-      name = "N/A";
+      name = <span className="empty-field">empty</span>;
     }
     return (
       <div className="demographics">
@@ -161,7 +167,7 @@ export default class RequestBox extends Component {
           Gender: {patient.gender ? patient.gender : "N/A"}
         </div>
         <div className="info lower-border">
-          State: {this.state.patientState ? this.state.patientState : "N/A"}
+          State: {this.state.patientState ? this.state.patientState : <span className="empty-field">empty</span>}
         </div>
         {this.renderOtherInfo()}
         {this.renderQRInfo()}
@@ -176,14 +182,14 @@ export default class RequestBox extends Component {
           <span style={{ fontWeight: "bold" }}>Coding</span>
         </div>
         <div className="info lower-border">
-          Code: {this.state.code ? this.state.code : "N/A"}
+          Code: {this.state.code ? this.state.code : <span className="empty-field">empty</span>}
         </div>
         <div className="info lower-border">
           System:{" "}
-          {this.state.codeSystem ? shortNameMap[this.state.codeSystem] : "N/A"}
+          {this.state.codeSystem ? shortNameMap[this.state.codeSystem] : <span className="empty-field">empty</span>}
         </div>
         <div className="info lower-border">
-          Display: {this.state.display ? this.state.display : "N/A"}
+          Display: {this.state.display ? this.state.display : <span className="empty-field">empty</span>}
         </div>
       </div>
     );
@@ -196,12 +202,12 @@ export default class RequestBox extends Component {
         <div className="lower-border">
           <span style={{ fontWeight: "bold" }}>In Progress Form</span>
           </div>
-          <div className="info lower-border">Form: { qrResponse.questionnaire ? qrResponse.questionnaire : "N/A"}</div>
+          <div className="info lower-border">Form: { qrResponse.questionnaire ? qrResponse.questionnaire : <span className="empty-field">empty</span>}</div>
           <div className="info lower-border">
-            Author: {qrResponse.author ? qrResponse.author.reference : "N/A"}
+            Author: {qrResponse.author ? qrResponse.author.reference : <span className="empty-field">empty</span>}
           </div>
           <div className="info lower-border">
-            Date: {qrResponse.authored ? qrResponse.authored : "N/A"}
+            Date: {qrResponse.authored ? qrResponse.authored :<span className="empty-field">empty</span>}
           </div>
         </div>
     );
@@ -419,7 +425,7 @@ export default class RequestBox extends Component {
         params['tokenResponse'] = {access_token: this.props.access_token.access_token};
     }
     const disableSendToCRD = this.isOrderNotSelected() || this.props.loading ;
-    const disableLaunchDTR = this.isOrderNotSelected() && Object.keys(this.state.response).length === 0;
+    const disableLaunchDTR = this.isOrderNotSelected() || !this.state.response.questionnaire;
     const disableSendRx = this.isOrderNotSelected() || this.props.loading;
     const disableLaunchSmartOnFhir = this.isPatientNotSelected();
     return (
@@ -458,33 +464,36 @@ export default class RequestBox extends Component {
           )}
 
           <div>
-            <Button variant='outlined' onClick={this.getPatients} startIcon={<PersonIcon />}>
+            <Button variant='contained' onClick={this.getPatients} startIcon={<PersonIcon />}>
                 Select a patient
             </Button>
             <div className="request-header">
-              {this.state.patient.id ? <span>Patient: {this.state.patient.id}</span> : <em>No patient selected</em>}
+              {this.state.patient.id ? <span>Patient ID: {this.state.patient.id}</span> : <em>No patient selected</em>}
             </div>
             <div>
               {this.renderPatientInfo()}
               {this.renderPrefetchedResources()}
             </div>
-            <div>
-              <b>Deidentify Records</b>
-              <CheckBox
-                toggle = {this.state.deidentifyRecords}
-                updateCB={this.updateDeidentifyCheckbox}
-                elementName = "deidentifyCheckbox" 
-                />
-            </div>
+
+            {this.state.patient.id ? 
+              <div>
+                <b>Deidentify Records</b>
+                <CheckBox
+                  toggle = {this.state.deidentifyRecords}
+                  updateCB={this.updateDeidentifyCheckbox}
+                  elementName = "deidentifyCheckbox" 
+                  />
+              </div> : <div/>
+            }
           </div>
         </div>
         {this.state.patient.id ?
         <div className="action-btns">
           <ButtonGroup variant="outlined" aria-label="outlined button group">
-            <Button onClick={this.relaunch} disabled={disableLaunchDTR}>Relaunch DTR</Button>
+            <Button onClick={this.relaunch} disabled={disableLaunchDTR}>Open In-Progress Form</Button>
             <Button onClick={this.launchSmartOnFhirApp} disabled={disableLaunchSmartOnFhir}>Launch SMART on FHIR App</Button>
-            <Button onClick={this.sendRx} disabled={disableSendRx}>Send Rx to PIMS</Button>
-            <Button onClick={this.submit} disabled={disableSendToCRD}>Submit to REMS-Admin</Button>
+            <Button onClick={this.sendRx} disabled={disableSendRx}>Send Rx to Pharmacy</Button>
+            <Button onClick={this.submit} disabled={disableSendToCRD}>Sign Order</Button>
           </ButtonGroup>
         </div>
       : <span />}
diff --git a/src/components/RequestBox/request.css b/src/components/RequestBox/request.css
index d819c321..0e1e0845 100644
--- a/src/components/RequestBox/request.css
+++ b/src/components/RequestBox/request.css
@@ -1,5 +1,6 @@
 .request-header{
     margin-top: 10px;
+    margin-left: 8px;
     border-width: 1px 1px 2px 2px;
     border-style: solid;
     border-color: transparent transparent black black;
@@ -122,4 +123,9 @@
 
 .action-btns {
     margin-top: 5px;
+}
+
+.empty-field {
+    color: dimgrey;
+    font-style: italic;
 }
\ No newline at end of file

From d50900f06496b6b1361c1a85dc866eae23bd3d81 Mon Sep 17 00:00:00 2001
From: Ariel Virgulto <avirgulto@mitre.org>
Date: Fri, 8 Sep 2023 10:23:17 -0400
Subject: [PATCH 3/4] Remove commented out things and pull out empty field

---
 src/components/ConsoleBox/consoleBox.css |  4 ----
 src/components/RequestBox/RequestBox.js  | 22 ++++++++++++----------
 src/containers/RequestBuilder.js         | 22 ----------------------
 3 files changed, 12 insertions(+), 36 deletions(-)

diff --git a/src/components/ConsoleBox/consoleBox.css b/src/components/ConsoleBox/consoleBox.css
index ec59094f..69359024 100644
--- a/src/components/ConsoleBox/consoleBox.css
+++ b/src/components/ConsoleBox/consoleBox.css
@@ -45,10 +45,6 @@
     transition-delay: 0s;
 }
 
-/* .showHeader:hover{
-    color:#CCCCCC;
-} */
-
 .showHeader{
     width:100%;
 }
diff --git a/src/components/RequestBox/RequestBox.js b/src/components/RequestBox/RequestBox.js
index dc8e4d23..9ada7413 100644
--- a/src/components/RequestBox/RequestBox.js
+++ b/src/components/RequestBox/RequestBox.js
@@ -138,6 +138,8 @@ export default class RequestBox extends Component {
       });
   };
 
+  emptyField = <span className="empty-field">empty</span>;
+
   renderPatientInfo() {
     const patient = this.state.patient;
     if (Object.keys(patient).length === 0) {
@@ -152,7 +154,7 @@ export default class RequestBox extends Component {
         <span> {`${patient.name[0].given[0]} ${patient.name[0].family}`} </span>
       );
     } else {
-      name = <span className="empty-field">empty</span>;
+      name = this.emptyField;
     }
     return (
       <div className="demographics">
@@ -161,13 +163,13 @@ export default class RequestBox extends Component {
         </div>
         <div className="info lower-border">Name: {name}</div>
         <div className="info lower-border">
-          Age: {patient.birthDate ? getAge(patient.birthDate) : "N/A"}
+          Age: {patient.birthDate ? getAge(patient.birthDate) : this.emptyField}
         </div>
         <div className="info lower-border">
-          Gender: {patient.gender ? patient.gender : "N/A"}
+          Gender: {patient.gender ? patient.gender : this.emptyField}
         </div>
         <div className="info lower-border">
-          State: {this.state.patientState ? this.state.patientState : <span className="empty-field">empty</span>}
+          State: {this.state.patientState ? this.state.patientState : this.emptyField}
         </div>
         {this.renderOtherInfo()}
         {this.renderQRInfo()}
@@ -182,14 +184,14 @@ export default class RequestBox extends Component {
           <span style={{ fontWeight: "bold" }}>Coding</span>
         </div>
         <div className="info lower-border">
-          Code: {this.state.code ? this.state.code : <span className="empty-field">empty</span>}
+          Code: {this.state.code ? this.state.code : this.emptyField}
         </div>
         <div className="info lower-border">
           System:{" "}
-          {this.state.codeSystem ? shortNameMap[this.state.codeSystem] : <span className="empty-field">empty</span>}
+          {this.state.codeSystem ? shortNameMap[this.state.codeSystem] : this.emptyField}
         </div>
         <div className="info lower-border">
-          Display: {this.state.display ? this.state.display : <span className="empty-field">empty</span>}
+          Display: {this.state.display ? this.state.display : this.emptyField}
         </div>
       </div>
     );
@@ -202,12 +204,12 @@ export default class RequestBox extends Component {
         <div className="lower-border">
           <span style={{ fontWeight: "bold" }}>In Progress Form</span>
           </div>
-          <div className="info lower-border">Form: { qrResponse.questionnaire ? qrResponse.questionnaire : <span className="empty-field">empty</span>}</div>
+          <div className="info lower-border">Form: { qrResponse.questionnaire ? qrResponse.questionnaire : this.emptyField}</div>
           <div className="info lower-border">
-            Author: {qrResponse.author ? qrResponse.author.reference : <span className="empty-field">empty</span>}
+            Author: {qrResponse.author ? qrResponse.author.reference : this.emptyField}
           </div>
           <div className="info lower-border">
-            Date: {qrResponse.authored ? qrResponse.authored :<span className="empty-field">empty</span>}
+            Date: {qrResponse.authored ? qrResponse.authored : this.emptyField}
           </div>
         </div>
     );
diff --git a/src/containers/RequestBuilder.js b/src/containers/RequestBuilder.js
index d0811f95..a411cd9e 100644
--- a/src/containers/RequestBuilder.js
+++ b/src/containers/RequestBuilder.js
@@ -391,16 +391,9 @@ export default class RequestBuilder extends Component {
         return (
             <div>
                 <div className="nav-header">
-                    {/* <button className={"launch-button left-button btn btn-class " + (this.state.ehrLaunch ? "active" : "not-active")} onClick={() => this.updateStateElement("ehrLaunch", true)}>EHR Launch</button>
-                    <button className={"launch-button right-button btn btn-class " + (!this.state.ehrLaunch ? "active" : "not-active")} onClick={() => this.updateStateElement("ehrLaunch", false)}>Standalone</button> */}
                     <button className={"btn btn-class settings " + (this.state.showSettings ? "active" : "not-active")} onClick={() => this.updateStateElement("showSettings", !this.state.showSettings)}><span className="glyphicon glyphicon-cog settings-icon" /></button>
 
                 </div>
-
-                {/* {this.state.ehrLaunch?
-                                    <SMARTBox exitSmart={this.exitSmart}>
-                                    <EHRLaunchBox></EHRLaunchBox>
-                                </SMARTBox>:null} */}
                 <div className="form-group container left-form">
                     <div id="settings-header">
 
@@ -432,21 +425,6 @@ export default class RequestBuilder extends Component {
 
                     </div>
                     <br />
-                    {/* <button className={"submit-btn btn btn-class " + (!total ? "button-error" : total === 1 ? "button-ready" : "button-empty-fields")} onClick={this.startLoading}>
-                        Submit
-                    </button> */}
-                    {/* 
-
-                    <CheckBox elementName="oauth" displayName="OAuth" updateCB={this.updateStateElement} />
-                    <CheckBox elementName="prefetch" displayName="Include Prefetch" updateCB={this.updateStateElement} />
-                    <div id="fse" className={"spinner " + (this.state.loading ? "visible" : "invisible")}>
-                        <Loader
-                            type="Oval"
-                            color="#222222"
-                            height="16"
-                            width="16"
-                        />
-                    </div> */}
 
                     <br />
                     <br />

From cffb6e30146009dd34043f51e1f6eb7572d7bc62 Mon Sep 17 00:00:00 2001
From: Ariel Virgulto <avirgulto@mitre.org>
Date: Fri, 8 Sep 2023 15:06:48 -0400
Subject: [PATCH 4/4] Hide in progress form section if no in progress forms

---
 src/components/RequestBox/RequestBox.js | 26 +++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/RequestBox/RequestBox.js b/src/components/RequestBox/RequestBox.js
index 9ada7413..10378155 100644
--- a/src/components/RequestBox/RequestBox.js
+++ b/src/components/RequestBox/RequestBox.js
@@ -201,16 +201,22 @@ export default class RequestBox extends Component {
     const qrResponse = this.state.response;
     return (
       <div className="questionnaire-response">
-        <div className="lower-border">
-          <span style={{ fontWeight: "bold" }}>In Progress Form</span>
-          </div>
-          <div className="info lower-border">Form: { qrResponse.questionnaire ? qrResponse.questionnaire : this.emptyField}</div>
-          <div className="info lower-border">
-            Author: {qrResponse.author ? qrResponse.author.reference : this.emptyField}
-          </div>
-          <div className="info lower-border">
-            Date: {qrResponse.authored ? qrResponse.authored : this.emptyField}
-          </div>
+        {qrResponse.questionnaire ? 
+          <>
+            <div className="lower-border">
+              <span style={{ fontWeight: "bold" }}>In Progress Form</span>
+            </div>
+            <div className="info lower-border">Form: { qrResponse.questionnaire ? qrResponse.questionnaire : this.emptyField}</div>
+            <div className="info lower-border">
+              Author: {qrResponse.author ? qrResponse.author.reference : this.emptyField}
+            </div>
+            <div className="info lower-border">
+              Date: {qrResponse.authored ? qrResponse.authored : this.emptyField}
+            </div>
+          </>
+          :
+          <div/>
+        }
         </div>
     );
   }