513 in page select

src/components/RequestBox/InProgressFormBox/InProgressFormBox.js

@@ -1,4 +1,4 @@
-import { Box, Button, Paper, Typography, ButtonGroup } from '@mui/material';
+import { Box, Button, Typography, ButtonGroup } from '@mui/material';
 import React from 'react';
 import './InProgressFormBoxStyle.css';
 

src/components/RequestBox/InProgressFormBox/InProgressFormBoxStyle.css

@@ -4,7 +4,4 @@
     border-radius: 5px;
     padding:20px;
     margin:20px 0 20px 0;
-
-    /* This should be inherited, need to change */
-    width:48.5vw;
 }

src/components/RequestBox/PatientSearchBar/PatientSearchBar.js

@@ -24,20 +24,37 @@ export default function PatientSearchBar(props) {
         }
         return '';
     }
+
+    function getFilteredLength(searchstring, listOfPatients) {
+        const filteredListOfPatients = listOfPatients[0].filter((element) => {
+            if (searchstring === '') {
+                return element;
+            }
+            else {
+                return element.name.toLowerCase().includes(searchstring);
+            }
+        });
+
+        return filteredListOfPatients.length;
+    }
 
     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'
-                    />} />
+                <span className='search-header'>
+                    <p>Filter patient list</p>
+                    <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'
+                        />} />
+                    <p>Showing {getFilteredLength(input, listOfPatients)} of {props.searchablePatients.length} records</p>
+                </span>
                 {displayFilteredPatientList(input, listOfPatients[0])}
             </Box>
         );
@@ -52,12 +69,11 @@ export default function PatientSearchBar(props) {
                 return element.name.toLowerCase().includes(searchstring);
             }
         });
-
         return (
             <Box>
                 {filteredListOfPatients.map(patient => {
                     return (
-                        <div key={patient.id}>
+                        <span key={patient.id}>
                             <PatientBox
                                 key={patient.id}
                                 patient={props.searchablePatients.find(item => item.id === patient.id)}
@@ -72,16 +88,16 @@ export default function PatientSearchBar(props) {
                                 responseExpirationDays={props.responseExpirationDays}
                                 defaultUser={props.defaultUser}
                             />
-                        </div>
+                        </span>
                     );
                 })}
             </Box>
         );
     }
 
     return (
-        <div>
+        <span>
             {listOfPatients[0] ? patientSearchBar() : 'loading...'}
-        </div>
+        </span>
     );
 }

src/components/RequestBox/PatientSearchBar/PatientSearchBarStyle.css

@@ -3,10 +3,8 @@
 }
 
 .search-box {
-    top: -10;
-    width: 100%;
-    margin: 10px auto;
-    margin-bottom: 50px;
+    width: 75%;
+    margin: 0px 10px 25px 20px;
 }
 
 .search-box-container {
@@ -15,4 +13,9 @@
     display: flex;
     flex-direction: column;
     justify-content: space-evenly
+}
+
+.search-header {
+    display: flex;
+    align-items: center;
 }