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 (
- - - - -
- - {this.props.logs.map(element => { - i++; - return
{element.content}
- }) } -
+ +
+ {this.props.logs.map(element => { + i++; + return
{element.content}
+ }) } +
) diff --git a/src/components/ConsoleBox/consoleBox.css b/src/components/ConsoleBox/consoleBox.css index d6a68ce2..69359024 100644 --- a/src/components/ConsoleBox/consoleBox.css +++ b/src/components/ConsoleBox/consoleBox.css @@ -45,22 +45,12 @@ transition-delay: 0s; } -.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..10378155 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) { @@ -136,15 +138,23 @@ export default class RequestBox extends Component { }); }; + emptyField = empty; + renderPatientInfo() { const patient = this.state.patient; + if (Object.keys(patient).length === 0) { + return ( +
+
+ ); + } let name; if (patient.name) { name = ( {`${patient.name[0].given[0]} ${patient.name[0].family}`} ); } else { - name = "N/A"; + name = this.emptyField; } return (
@@ -153,13 +163,13 @@ export default class RequestBox extends Component {
Name: {name}
- Age: {patient.birthDate ? getAge(patient.birthDate) : "N/A"} + Age: {patient.birthDate ? getAge(patient.birthDate) : this.emptyField}
- Gender: {patient.gender ? patient.gender : "N/A"} + Gender: {patient.gender ? patient.gender : this.emptyField}
- State: {this.state.patientState ? this.state.patientState : "N/A"} + State: {this.state.patientState ? this.state.patientState : this.emptyField}
{this.renderOtherInfo()} {this.renderQRInfo()} @@ -174,14 +184,14 @@ export default class RequestBox extends Component { Coding
- Code: {this.state.code ? this.state.code : "N/A"} + Code: {this.state.code ? this.state.code : this.emptyField}
System:{" "} - {this.state.codeSystem ? shortNameMap[this.state.codeSystem] : "N/A"} + {this.state.codeSystem ? shortNameMap[this.state.codeSystem] : this.emptyField}
- Display: {this.state.display ? this.state.display : "N/A"} + Display: {this.state.display ? this.state.display : this.emptyField}
); @@ -191,16 +201,22 @@ export default class RequestBox extends Component { const qrResponse = this.state.response; return (
-
- In Progress Form -
-
Form: { qrResponse.questionnaire ? qrResponse.questionnaire : "N/A"}
-
- Author: {qrResponse.author ? qrResponse.author.reference : "N/A"} -
-
- Date: {qrResponse.authored ? qrResponse.authored : "N/A"} -
+ {qrResponse.questionnaire ? + <> +
+ In Progress Form +
+
Form: { qrResponse.questionnaire ? qrResponse.questionnaire : this.emptyField}
+
+ Author: {qrResponse.author ? qrResponse.author.reference : this.emptyField} +
+
+ Date: {qrResponse.authored ? qrResponse.authored : this.emptyField} +
+ + : +
+ }
); } @@ -417,7 +433,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 ( @@ -456,41 +472,39 @@ export default class RequestBox extends Component { )}
- +
- {this.state.patient.id ? this.state.patient.id : "N/A"} + {this.state.patient.id ? Patient ID: {this.state.patient.id} : No patient selected}
{this.renderPatientInfo()} {this.renderPrefetchedResources()}
-
- Deidentify Records - -
+ + {this.state.patient.id ? +
+ Deidentify Records + +
:
+ }
-
-
-
- - - - + {this.state.patient.id ? +
+ + + + + + +
+ : }
); } diff --git a/src/components/RequestBox/request.css b/src/components/RequestBox/request.css index b31ead0b..0e1e0845 100644 --- a/src/components/RequestBox/request.css +++ b/src/components/RequestBox/request.css @@ -1,4 +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; @@ -117,4 +119,13 @@ .questionnaire-response { width: 100%; padding:10px 10px 10px 0px; +} + +.action-btns { + margin-top: 5px; +} + +.empty-field { + color: dimgrey; + font-style: italic; } \ No newline at end of file diff --git a/src/containers/RequestBuilder.js b/src/containers/RequestBuilder.js index 4f794a72..a411cd9e 100644 --- a/src/containers/RequestBuilder.js +++ b/src/containers/RequestBuilder.js @@ -391,16 +391,9 @@ export default class RequestBuilder extends Component { return (
- -
- - {/* {this.state.ehrLaunch? - - - :null} */}
@@ -432,22 +425,10 @@ export default class RequestBuilder extends Component {

- {/* */} - {/* - - - -
- -
*/} +
+
+
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;