542 patient search

src/components/RequestBox/PatientSearchBar/PatientSearchBar.js

@@ -0,0 +1,87 @@
+import { Autocomplete, Box, TextField } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { PrefetchTemplate } from '../../../PrefetchTemplate';
+import { defaultValues } from '../../../util/data';
+import PatientBox from '../../SMARTBox/PatientBox';
+import './PatientSearchBarStyle.css';
+
+export default function PatientSearchBar(props) {
+    const [options] = useState(defaultValues);
+    const [input, setInput] = useState('');
+    const [listOfPatients, setListOfPatients] = useState([]);
+
+    useEffect(() => {
+        const newList = props.searchablePatients.map((patient) => ({
+            id: patient.id,
+            name: getName(patient),
+        }));
+        setListOfPatients([newList]);
+    }, [props.searchablePatients]);
+
+    function getName(patient) {
+        if (patient.name) {
+            return (patient.name[0].given[0]) + ' ' + (patient.name[0].family);
+        }
+        return '';
+    }
+
+    function patientSearchBar() {
+        return (
+            <Box className='search-box-container'>
+                <Autocomplete className='search-box'
+                    disablePortal
+                    id='search-box'
+                    onInputChange={(event, newInputValue) => {
+                        setInput(newInputValue.toLowerCase());
+                    }}
+                    options={listOfPatients[0].map(item => item.name)}
+                    renderInput={(params) => <TextField {...params}
+                        label='Search for a patient'
+                    />} />
+                {displayFilteredPatientList(input, listOfPatients[0])}
+            </Box>
+        );
+    }
+
+    function displayFilteredPatientList(searchstring, listOfPatients) {
+        const filteredListOfPatients = listOfPatients.filter((element) => {
+            if (searchstring === '') {
+                return element;
+            }
+            else {
+                return element.name.toLowerCase().includes(searchstring);
+            }
+        });
+
+        return (
+            <Box>
+                {filteredListOfPatients.map(patient => {
+                    return (
+                        <div key={patient.id}>
+                            <PatientBox
+                                key={patient.id}
+                                patient={props.searchablePatients.find(item => item.id === patient.id)}
+                                client={props.client}
+                                callback={props.callback}
+                                callbackList={props.callbackList}
+                                callbackMap={props.callbackMap}
+                                updatePrefetchCallback={PrefetchTemplate.generateQueries}
+                                clearCallback={props.clearCallback}
+                                ehrUrl={props.ehrUrl}
+                                options={options}
+                                responseExpirationDays={props.responseExpirationDays}
+                                defaultUser={props.defaultUser}
+                            />
+                        </div>
+                    );
+                })}
+            </Box>
+        );
+    }
+
+    return (
+        <div>
+            {listOfPatients[0] ? patientSearchBar() : 'loading...'}
+        </div>
+    );
+}

src/components/RequestBox/PatientSearchBar/PatientSearchBarStyle.css

@@ -0,0 +1,18 @@
+.patients {
+    padding: 5px;
+}
+
+.search-box {
+    top: -10;
+    width: 100%;
+    margin: 10px auto;
+    margin-bottom: 50px;
+}
+
+.search-box-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly
+}

src/components/RequestBox/RequestBox.js

@@ -1,15 +1,15 @@
+import PersonIcon from '@mui/icons-material/Person';
+import { Box, Button, ButtonGroup, Modal } from '@mui/material';
+import _ from 'lodash';
 import React, { Component } from 'react';
-import FHIR from 'fhirclient';
-import PatientBox from '../SMARTBox/PatientBox';
-import { types, defaultValues, shortNameMap } from '../../util/data';
-import { getAge } from '../../util/fhir';
 import buildNewRxRequest from '../../util/buildScript.2017071.js';
-import _ from 'lodash';
-import './request.css';
-import { PrefetchTemplate } from '../../PrefetchTemplate';
+import { defaultValues, shortNameMap, types } from '../../util/data';
+import { getAge } from '../../util/fhir';
 import { retrieveLaunchContext } from '../../util/util';
-import PersonIcon from '@mui/icons-material/Person';
-import { Button, ButtonGroup, Modal, Box } from '@mui/material';
+import './request.css';
+
+import PatientSearchBar from './PatientSearchBar/PatientSearchBar.js';
+
 const style = {
   position: 'absolute',
   top: '50%',
@@ -25,7 +25,7 @@ const style = {
   borderBottom: '2px solid black',
   boxShadow: 24,
   p: 4,
-  padding: '0px'
+  padding: '50px'
 };
 export default class RequestBox extends Component {
   constructor(props) {
@@ -60,7 +60,7 @@ export default class RequestBox extends Component {
     this.submitOrderSign(request);
   }
 
-  componentDidMount() {}
+  componentDidMount() { }
 
   exitSmart = () => {
     this.setState({ openPatient: false });
@@ -155,6 +155,7 @@ export default class RequestBox extends Component {
   };
 
   getPatients = () => {
+    //passes and sets patients when the "select patient is clicked"
     this.setState({ openPatient: true });
     this.props.client
       .request('Patient?_sort=identifier&_count=12', { flat: true })
@@ -330,7 +331,7 @@ export default class RequestBox extends Component {
     if (!userId) {
       console.log(
         'Practitioner not populated from prefetch, using default from config: ' +
-          this.props.defaultUser
+        this.props.defaultUser
       );
       userId = this.props.defaultUser;
     }
@@ -424,7 +425,7 @@ export default class RequestBox extends Component {
     console.log(newRx);
     const serializer = new XMLSerializer();
 
-    // send the message to the prescriber
+    // send the message to the Pharmacy
     this.props.consoleLog('Sending Rx to PIMS', types.info);
     fetch(this.props.pimsUrl, {
       method: 'POST',
@@ -464,33 +465,31 @@ export default class RequestBox extends Component {
     return (
       <div>
         <div className="request">
+
           <Modal
             open={this.state.openPatient}
             onClose={this.exitSmart}
             aria-labelledby="modal-modal-title"
             aria-describedby="modal-modal-description"
           >
+            {/* Patient selection pop up and search */}
             <Box sx={style}>
               {this.state.patientList instanceof Error
                 ? this.renderError()
-                : this.state.patientList.map(patient => {
-                    return (
-                      <PatientBox
-                        key={patient.id}
-                        patient={patient}
-                        client={this.props.client}
-                        callback={this.updateStateElement}
-                        callbackList={this.updateStateList}
-                        callbackMap={this.updateStateMap}
-                        updatePrefetchCallback={PrefetchTemplate.generateQueries}
-                        clearCallback={this.clearState}
-                        ehrUrl={this.props.ehrUrl}
-                        options={this.state.codeValues}
-                        responseExpirationDays={this.props.responseExpirationDays}
-                        defaultUser={this.props.defaultUser}
-                      />
-                    );
-                  })}
+                : <PatientSearchBar
+                  getPatients = {this.getPatients}
+                  searchablePatients={this.state.patientList}
+                  client={this.props.client}
+                  callback={this.updateStateElement}
+                  callbackList={this.updateStateList}
+                  callbackMap={this.updateStateMap}
+                  // updatePrefetchCallback={PrefetchTemplate.generateQueries}
+                  clearCallback={this.clearState}
+                  ehrUrl={this.props.ehrUrl} // is this used?
+                  options={this.state.codeValues}
+                  responseExpirationDays={this.props.responseExpirationDays}
+                  defaultUser={this.props.defaultUser}
+                />}
             </Box>
           </Modal>
           <div>

src/components/SMARTBox/smart.css

@@ -17,7 +17,7 @@ html{
 }
 
 .patient-box{
-    border-bottom: 2px solid black;
+    padding-bottom:10px;
 }
 .patient-header{
     color:white;