make settings a modal and add save button

Author: KeeyanGhoreshi

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 
+                        value = {state[key]}
+                        onChange = {(event) => {updateCB(key, event.target.value);}}/>
+                      }
+                      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,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 {
           </button>
         </div>
         <div>
-          {/* <div id="settings-header"></div> */}
-          {this.state.showSettings && (
-            <div className='settings-box'>
+          <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()}>

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