make settings a modal and add save button

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

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 (
       <div>
+        <Box flexGrow={1}>
+        <h4 className='setting-header'>Settings</h4>
+        <Grid container spacing={2} sx={{padding: '20px'}}>
         {headers.map(({ key, type, display }) => {
+
           switch (type) {
             case 'input':
               return (
-                <div key={key}>
-                  <p className="setting-header">{display}</p>
-                  <InputBox
-                    extraClass="setting-input"
-                    value={state[key]}
-                    updateCB={updateCB}
-                    elementName={key}
+                <Grid key = {key} item xs={6}>
+                <div>
+                  <TextField 
+                    label={display} 
+                    variant="outlined" 
+                    value={state[key]} 
+                    onChange = {(event)=>{updateCB(key, event.target.value);}}
+                    sx = {{width:'100%'}}
                   />
                 </div>
+                </Grid>
               );
             case 'check':
+              if(firstCheckbox) {
+                firstCheckbox = false;
+                showBreak = true;
+              } else {
+                showBreak = false;
+              }
               return (
-                <div key={key}>
-                  <p className="setting-header">
-                    {display}
-                    <CheckBox
-                      extraClass="setting-checkbox"
-                      extraInnerClass="setting-inner-checkbox"
-                      toggle={state[key]}
-                      updateCB={updateCB}
-                      elementName={key}
+                <React.Fragment key={key}>
+                  {showBreak ? <Grid item xs={12}></Grid> :''}
+                  <Grid item xs={3}>
+                    <FormControlLabel control = {
+                        <Checkbox 
+                        checked = {Boolean(state[key])}
+                        onChange = {(event) => {updateCB(key, event.target.checked);}}/>
+                      }
+                      label = {display}
                     />
-                  </p>
-                  <p>&nbsp;</p>
-                </div>
+                  </Grid>
+                </React.Fragment>
               );
             default:
               return (
@@ -163,15 +209,29 @@ export default class SettingsBox extends Component {
               );
           }
         })}
-        {resetHeaderDefinitions.map(({ key, display, reset }) => {
-          return (
-            <div key={key}>
-              <button className={'setting-btn btn btn-class'} onClick={reset(state, consoleLog)}>
-                {display}
-              </button>
-            </div>
-          );
-        })}
+            {resetHeaderDefinitions.map(({ key, display, reset }) => {
+              return (
+                <Grid item key={key} xs={4}>
+                  <Button variant='outlined' onClick={reset(state, consoleLog)}>
+                    {display}
+                  </Button>
+                </Grid>
+              );
+            })}
+          {/* spacer */}
+          <hr style={{
+            'width':'100%'
+          }}/>
+          <Grid item xs={8} />
+
+          <Grid item xs={2}>
+            <Button variant = 'outlined' onClick = {this.cancelSettings}>Cancel</Button>
+          </Grid>
+          <Grid item xs={2}>
+            <Button variant = 'contained' onClick = {this.saveSettings}>Save</Button>
+          </Grid>
+        </Grid>
+      </Box>
       </div>
     );
   }

src/containers/RequestBuilder.js

@@ -1,13 +1,13 @@
 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';
 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,6 +49,21 @@ 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.updateStateElement(element[0], element[1]);
+      } catch {
+        if (element[0]) {
+          console.log('Could not load setting:' + element[0]);
+        }
+      }
+    });
+
     if (!this.state.client) {
       this.reconnectEhr();
     } else {
@@ -240,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() {
@@ -265,24 +260,23 @@ export default class RequestBuilder extends Component {
           </button>
         </div>
         <div>
-          {/* <div id="settings-header"></div> */}
-          {this.state.showSettings && (
+          <Modal open={this.state.showSettings} onClose={() => { this.setState({ showSettings: false }); }} >
             <div className='settings-box'>
               <SettingsBox
                 state={this.state}
                 consoleLog={this.consoleLog}
                 updateCB={this.updateStateElement}
               />
             </div>
-            )}
+          </Modal>
         </div>
-          <div style={{display: 'flex'}}>
-            <Accordion style={{width: '95%'}} expanded={this.state.expanded} onChange={this.handleChange()}>
-              <AccordionSummary
+        <div style={{ display: 'flex' }}>
+          <Accordion style={{ width: '95%' }} expanded={this.state.expanded} onChange={this.handleChange()}>
+            <AccordionSummary
               expandIcon={<ExpandMoreIcon />}
               aria-controls="panel1a-content"
               id="panel1a-header"
-              style={{marginLeft: '45%'}}
+              style={{ marginLeft: '45%' }}
             >
               <Button variant="contained" startIcon={<PersonIcon />}>
                 Select a patient
@@ -314,17 +308,17 @@ export default class RequestBuilder extends Component {
                 </div>
                 : <span></span>
               }
-              
+
             </AccordionDetails>
-            </Accordion>
-            <IconButton
-              color="primary"
-              onClick={() => this.getPatients()}
-              size="large"
-            >
-              <RefreshIcon fontSize="large" />
-            </IconButton>
-          </div>
+          </Accordion>
+          <IconButton
+            color="primary"
+            onClick={() => this.getPatients()}
+            size="large"
+          >
+            <RefreshIcon fontSize="large" />
+          </IconButton>
+        </div>
         <div className="form-group container left-form">
           <div>
             {/*for the ehr launch */}

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
+
 }