From 7dbce9d1f7bab395e0e83ece5295869e9d1bc37e Mon Sep 17 00:00:00 2001 From: KeeyanGhoreshi Date: Wed, 24 Jan 2024 21:25:44 -0500 Subject: [PATCH 1/4] make settings a modal and add save button --- src/components/SettingsBox/SettingsBox.css | 7 +- src/components/SettingsBox/SettingsBox.js | 122 +++++++++++++++------ src/containers/RequestBuilder.js | 22 +++- src/index.css | 14 ++- 4 files changed, 124 insertions(+), 41 deletions(-) diff --git a/src/components/SettingsBox/SettingsBox.css b/src/components/SettingsBox/SettingsBox.css index b2527c3c..9f473389 100644 --- a/src/components/SettingsBox/SettingsBox.css +++ b/src/components/SettingsBox/SettingsBox.css @@ -18,8 +18,12 @@ } .setting-header{ - font-size:12px; + font-weight:bold; margin:0; + margin-bottom: 10px; + padding:15px; + color:white; + background-color:#005B94; } .setting-btn { @@ -39,3 +43,4 @@ background-color: #333232; color: #858282; } + diff --git a/src/components/SettingsBox/SettingsBox.js b/src/components/SettingsBox/SettingsBox.js index e3760c88..819645ac 100644 --- a/src/components/SettingsBox/SettingsBox.js +++ b/src/components/SettingsBox/SettingsBox.js @@ -1,9 +1,12 @@ import React, { Component } from 'react'; import './SettingsBox.css'; import InputBox from '../Inputs/InputBox'; -import CheckBox from '../Inputs/CheckBox'; +import Checkbox from '@mui/material/Checkbox'; + import { headerDefinitions, types } from '../../util/data'; import FHIR from 'fhirclient'; +import { Box, Button, FormControlLabel, Grid, TextField } from '@mui/material'; +import CloseIcon from '@mui/icons-material/Close'; const clearQuestionnaireResponses = ({ ehrUrl, defaultUser, access_token }, consoleLog) => @@ -89,7 +92,7 @@ const resetRemsAdmin = const resetHeaderDefinitions = [ { - display: 'Clear EHR QuestionnaireResponses', + display: 'Clear In-Progress Forms', key: 'clearQuestionnaireResponses', reset: clearQuestionnaireResponses }, @@ -108,12 +111,44 @@ const resetHeaderDefinitions = [ export default class SettingsBox extends Component { constructor(props) { super(props); + this.state = { + originalValues: [] + }; + this.cancelSettings = this.cancelSettings.bind(this); + this.closeSettings = this.closeSettings.bind(this); + this.saveSettings = this.saveSettings.bind(this); + } + + componentDidMount() { + const headers = Object.keys(headerDefinitions).map(key => ([key, this.props.state[key]])); + this.setState({originalValues: headers}); + } + + closeSettings() { + this.props.updateCB('showSettings', false); + } + saveSettings() { + const headers = Object.keys(headerDefinitions).map(key => ([key, this.props.state[key]])); + console.log(headers); + localStorage.setItem('reqgenSettings', JSON.stringify(headers)); + this.closeSettings(); } - componentDidMount() {} + cancelSettings() { + this.state.originalValues.forEach((e) => { + try{ + this.props.updateCB(e[0], e[1]); + } catch { + console.log('Failed to reset setting value'); + } + }); + this.closeSettings(); + } render() { const { state, consoleLog, updateCB } = this.props; + let firstCheckbox = true; + let showBreak = true; const headers = Object.keys(headerDefinitions) .map(key => ({ ...headerDefinitions[key], key })) @@ -125,35 +160,46 @@ export default class SettingsBox extends Component { return (
+ +

Settings

+ {headers.map(({ key, type, display }) => { + switch (type) { case 'input': return ( -
-

{display}

- +
+ {updateCB(key, event.target.value);}} + sx = {{width:'100%'}} />
+ ); case 'check': + if(firstCheckbox) { + firstCheckbox = false; + showBreak = true; + } else { + showBreak = false; + } return ( -
-

- {display} - + {showBreak ? :''} + + {updateCB(key, event.target.value);}}/> + } + label = {display} /> -

-

 

-
+ + ); default: return ( @@ -163,15 +209,29 @@ export default class SettingsBox extends Component { ); } })} - {resetHeaderDefinitions.map(({ key, display, reset }) => { - return ( -
- -
- ); - })} + {resetHeaderDefinitions.map(({ key, display, reset }) => { + return ( + + + + ); + })} + {/* spacer */} +
+ + + + + + + + + +
); } diff --git a/src/containers/RequestBuilder.js b/src/containers/RequestBuilder.js index a75d266c..500ad27c 100644 --- a/src/containers/RequestBuilder.js +++ b/src/containers/RequestBuilder.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Button, Box, IconButton } from '@mui/material'; +import { Button, Box, IconButton, Modal, DialogTitle } from '@mui/material'; import PersonIcon from '@mui/icons-material/Person'; import RefreshIcon from '@mui/icons-material/Refresh'; import DisplayBox from '../components/DisplayBox/DisplayBox'; @@ -69,6 +69,17 @@ export default class RequestBuilder extends Component { } componentDidMount() { + // load settings + JSON.parse(localStorage.getItem('reqgenSettings') || '[]').forEach((element) => { + try { + this.setState({[element[0]]: element[1]}); + } catch { + if(element[0]){ + console.log('Could not load setting:' + element[0]); + } + } + }); + if (!this.state.client) { this.reconnectEhr(); } else { @@ -265,16 +276,15 @@ export default class RequestBuilder extends Component {
- {/*
*/} - {this.state.showSettings && ( -
+ {this.setState({showSettings:false});}} > +
+ />
- )} +
diff --git a/src/index.css b/src/index.css index 19229868..410e3449 100644 --- a/src/index.css +++ b/src/index.css @@ -325,8 +325,16 @@ input:not(:focus):not([value=""]):valid ~ .floating-label{ .title { margin-bottom: 65px; } - .settings-box { - width: 50%; - margin-left: 20px; + border: 1px solid black; + width: 75%; + height: 75%; + background-color:white; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + overflow-y: auto; + box-shadow: 10px 10px 20px black + } \ No newline at end of file From c8713b4188374069c9dae61daae7dc9cc898bb6b Mon Sep 17 00:00:00 2001 From: Keeyan Date: Thu, 1 Feb 2024 15:47:30 -0500 Subject: [PATCH 2/4] remove potential for uncaught mismatch (#97) --- src/containers/RequestBuilder.js | 68 ++++++++++++-------------------- src/util/data.js | 55 ++++++++++++++++++-------- 2 files changed, 64 insertions(+), 59 deletions(-) diff --git a/src/containers/RequestBuilder.js b/src/containers/RequestBuilder.js index 500ad27c..4eab829f 100644 --- a/src/containers/RequestBuilder.js +++ b/src/containers/RequestBuilder.js @@ -7,7 +7,7 @@ import '../index.css'; import SettingsBox from '../components/SettingsBox/SettingsBox'; import RequestBox from '../components/RequestBox/RequestBox'; import buildRequest from '../util/buildRequest.js'; -import { types, defaultValues } from '../util/data.js'; +import { types, defaultValues, headerDefinitions } from '../util/data.js'; import { createJwt, setupKeys } from '../util/auth'; import env from 'env-var'; @@ -25,7 +25,7 @@ export default class RequestBuilder extends Component { this.state = { loading: false, logs: [], - patient: {}, + patient: {}, expanded: false, patientList: [], response: {}, @@ -38,26 +38,6 @@ export default class RequestBuilder extends Component { token: null, client: this.props.client, codeValues: defaultValues, - // Configurable values - alternativeTherapy: env.get('REACT_APP_ALT_DRUG').asBool(), - baseUrl: env.get('REACT_APP_EHR_BASE').asString(), - cdsUrl: env.get('REACT_APP_CDS_SERVICE').asString(), - defaultUser: env.get('REACT_APP_DEFAULT_USER').asString(), - ehrUrl: env.get('REACT_APP_EHR_SERVER').asString(), - ehrUrlSentToRemsAdminForPreFetch: env - .get('REACT_APP_EHR_SERVER_TO_BE_SENT_TO_REMS_ADMIN_FOR_PREFETCH') - .asString(), - generateJsonToken: env.get('REACT_APP_GENERATE_JWT').asBool(), - includeConfig: true, - launchUrl: env.get('REACT_APP_LAUNCH_URL').asString(), - orderSelect: env.get('REACT_APP_ORDER_SELECT').asString(), - orderSign: env.get('REACT_APP_ORDER_SIGN').asString(), - patientFhirQuery: env.get('REACT_APP_PATIENT_FHIR_QUERY').asString(), - patientView: env.get('REACT_APP_PATIENT_VIEW').asString(), - pimsUrl: env.get('REACT_APP_PIMS_SERVER').asString(), - responseExpirationDays: env.get('REACT_APP_RESPONSE_EXPIRATION_DAYS').asInt(), - sendPrefetch: true, - smartAppUrl: env.get('REACT_APP_SMART_LAUNCH_URL').asString() }; this.updateStateElement = this.updateStateElement.bind(this); @@ -69,12 +49,16 @@ export default class RequestBuilder extends Component { } componentDidMount() { + // init settings + Object.keys(headerDefinitions).map((key) => { + this.setState({ [key]: headerDefinitions[key].default }); + }); // load settings JSON.parse(localStorage.getItem('reqgenSettings') || '[]').forEach((element) => { try { - this.setState({[element[0]]: element[1]}); + this.setState({ [element[0]]: element[1] }); } catch { - if(element[0]){ + if (element[0]) { console.log('Could not load setting:' + element[0]); } } @@ -251,7 +235,7 @@ export default class RequestBuilder extends Component { }); }; handleChange = () => (event, isExpanded) => { - this.setState({ expanded: isExpanded ? true: false}); + this.setState({ expanded: isExpanded ? true : false }); }; render() { @@ -276,23 +260,23 @@ export default class RequestBuilder extends Component {
- {this.setState({showSettings:false});}} > -
+ { this.setState({ showSettings: false }); }} > +
+ />
-
- - + + } aria-controls="panel1a-content" id="panel1a-header" - style={{marginLeft: '45%'}} + style={{ marginLeft: '45%' }} >
: } - + - - this.getPatients()} - size="large" - > - - -
+ + this.getPatients()} + size="large" + > + + +
{/*for the ehr launch */} diff --git a/src/util/data.js b/src/util/data.js index d49ec438..f135947b 100644 --- a/src/util/data.js +++ b/src/util/data.js @@ -1,71 +1,92 @@ +import env from 'env-var'; + const headerDefinitions = { alternativeTherapy: { display: 'Alternative Therapy Cards Allowed', - type: 'check' + type: 'check', + default: env.get('REACT_APP_ALT_DRUG').asBool() }, baseUrl: { display: 'Base Server', - type: 'input' + type: 'input', + default: env.get('REACT_APP_EHR_BASE').asString() }, cdsUrl: { display: 'REMS Admin', - type: 'input' + type: 'input', + default: env.get('REACT_APP_CDS_SERVICE').asString() }, defaultUser: { display: 'Default User', - type: 'input' + type: 'input', + default: env.get('REACT_APP_DEFAULT_USER').asString() }, ehrUrl: { display: 'EHR Server', - type: 'input' + type: 'input', + default: env.get('REACT_APP_EHR_SERVER').asString() }, ehrUrlSentToRemsAdminForPreFetch: { display: 'EHR Server Sent to REMS Admin for Prefetch', - type: 'input' + type: 'input', + default: env + .get('REACT_APP_EHR_SERVER_TO_BE_SENT_TO_REMS_ADMIN_FOR_PREFETCH') + .asString() }, generateJsonToken: { display: 'Generate JSON Web Token', - type: 'check' + type: 'check', + default: env.get('REACT_APP_GENERATE_JWT').asBool() }, includeConfig: { display: 'Include Configuration in CRD Request', - type: 'check' + type: 'check', + default: true }, launchUrl: { display: 'DTR Launch URL (QuestionnaireForm)', - type: 'input' + type: 'input', + default: env.get('REACT_APP_LAUNCH_URL').asString() }, orderSelect: { display: 'Order Select Rest End Point', - type: 'input' + type: 'input', + default: env.get('REACT_APP_ORDER_SELECT').asString() }, orderSign: { display: 'Order Sign Rest End Point', - type: 'input' + type: 'input', + default: env.get('REACT_APP_ORDER_SIGN').asString() }, patientFhirQuery: { display: 'Patient FHIR Query', - type: 'input' + type: 'input', + default: env.get('REACT_APP_PATIENT_FHIR_QUERY').asString() }, patientView: { display: 'Patient View Rest End Point', - type: 'input' + type: 'input', + default: env.get('REACT_APP_PATIENT_VIEW').asString() }, pimsUrl: { display: 'PIMS Server', - type: 'input' + type: 'input', + default: env.get('REACT_APP_PIMS_SERVER').asString() }, responseExpirationDays: { display: 'In Progress Form Expiration Days', - type: 'input' + type: 'input', + default: env.get('REACT_APP_RESPONSE_EXPIRATION_DAYS').asInt() }, sendPrefetch: { display: 'Send Prefetch', - type: 'check' + type: 'check', + default: true }, smartAppUrl: { display: 'SMART App', - type: 'input' + type: 'input', + default: env.get('REACT_APP_SMART_LAUNCH_URL').asString() } }; From 84924539b5475e7adce1e4beca4d76b259639a7d Mon Sep 17 00:00:00 2001 From: KeeyanGhoreshi Date: Thu, 1 Feb 2024 15:54:43 -0500 Subject: [PATCH 3/4] fix checkboxes --- src/components/SettingsBox/SettingsBox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SettingsBox/SettingsBox.js b/src/components/SettingsBox/SettingsBox.js index 819645ac..29192dd9 100644 --- a/src/components/SettingsBox/SettingsBox.js +++ b/src/components/SettingsBox/SettingsBox.js @@ -193,8 +193,8 @@ export default class SettingsBox extends Component { {updateCB(key, event.target.value);}}/> + checked = {Boolean(state[key])} + onChange = {(event) => {updateCB(key, event.target.checked);}}/> } label = {display} /> From 6550eae1e68df2b3434a13d65432ae3d60f8dad2 Mon Sep 17 00:00:00 2001 From: KeeyanGhoreshi Date: Thu, 8 Feb 2024 14:04:40 -0500 Subject: [PATCH 4/4] fix issue with patient load --- src/containers/RequestBuilder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/RequestBuilder.js b/src/containers/RequestBuilder.js index 4eab829f..00018b58 100644 --- a/src/containers/RequestBuilder.js +++ b/src/containers/RequestBuilder.js @@ -56,7 +56,7 @@ export default class RequestBuilder extends Component { // load settings JSON.parse(localStorage.getItem('reqgenSettings') || '[]').forEach((element) => { try { - this.setState({ [element[0]]: element[1] }); + this.updateStateElement(element[0], element[1]); } catch { if (element[0]) { console.log('Could not load setting:' + element[0]);