Merge pull request #230 from amitbhoj-fc/feature/searchImplementation

Search box implementation for listing #228
ohcnetwork · Apr 8, 2020 · 281a1e0 · 281a1e0
2 parents 864e7fb + 814cd8d
commit 281a1e0
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 3 deletions.
diff --git a/src/Components/Common/SearchBox.tsx b/src/Components/Common/SearchBox.tsx
@@ -1,6 +1,10 @@
 import React, { ChangeEvent } from 'react';
-import { Theme, InputBase } from '@material-ui/core';
+import { Theme, InputBase, TextField, TextFieldProps, InputLabel } from '@material-ui/core';
 import { makeStyles, withStyles, createStyles } from '@material-ui/core/styles';
+import IconButton from "@material-ui/core/IconButton";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import SearchIcon from "@material-ui/icons/Search";
+import Grid from "@material-ui/core/Grid";
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -21,6 +25,15 @@ const useStyles = makeStyles(theme => ({
     },
     margin: {
         margin: theme.spacing(1),
+    },
+    searchboxInput:{
+        background:"#ffffff"
+    },
+    searchboxSticky:{
+        position: "sticky",
+        zIndex: 1,
+        top: "0px",
+        background: "#edf2f7",
     }
 }));
 
@@ -69,4 +82,44 @@ const SearchBox = (props: SearchBoxProps) => {
     )
 };
 
-export default SearchBox;
+export default SearchBox;
+
+type TextFieldPropsExtended = TextFieldProps & { errors: string }
+
+export const InputSearchBox = (props:TextFieldPropsExtended) =>{
+    const classes = useStyles();
+    const { onKeyUp, placeholder, type, errors } = props;
+    const inputType = type === 'number' ? 'text' : type;
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (typeof onKeyUp !== 'function') {
+            return
+        }
+        onKeyUp(event);
+    }
+    return(
+        <Grid item xs={6} md={12} className={classes.searchboxSticky}>
+        <Grid container justify="center" alignItems="center" className='mt-4'>
+            {/* <InputLabel id="name-label">Name*</InputLabel> */}
+            <TextField
+                name="search"
+                variant="outlined"
+                margin="dense"
+                type="text"
+                placeholder = {placeholder}
+                InputProps={{
+                endAdornment: (
+                    <InputAdornment position="start">
+                    <IconButton>
+                        <SearchIcon />
+                    </IconButton>
+                    </InputAdornment>
+                    )
+                }}
+                onKeyUp = {handleKeyDown}
+                className = {`MuiInput-fullWidth ${classes.searchboxInput}`}
+            />
+        </Grid>
+      </Grid>
+    )
+}
diff --git a/src/Components/Facility/HospitalList.tsx b/src/Components/Facility/HospitalList.tsx
@@ -10,14 +10,15 @@ import { Loading } from "../Common/Loading";
 import PageTitle from "../Common/PageTitle";
 import Pagination from "../Common/Pagination";
 import { FacilityModal } from "./models";
+import {InputSearchBox} from "../Common/SearchBox";
 
 const useStyles = makeStyles((theme) => ({
   paginateTopPadding: {
     paddingTop: "50px",
   },
   displayFlex: {
     display: "flex",
-  },
+  }
 }));
 
 export const HospitalList = () => {
@@ -60,6 +61,19 @@ export const HospitalList = () => {
     setCurrentPage(page);
     setOffset(offset);
   };
+  const onSearchSuspects = async (event: React.KeyboardEvent<HTMLInputElement>):Promise<any> => {
+    let searchValue:any = (event.target as HTMLInputElement).value
+    if(event.keyCode === 13){
+      setIsLoading(true);
+      const res = await dispatchAction(getFacilities({ limit, offset, name: searchValue }));
+        if (res && res.data) {
+          setData(res.data.results);
+          setTotalCount(res.data.count);
+        }
+        setIsLoading(false);
+      event.stopPropagation();
+    }
+  }
 
   let facilityList: any[] = [];
   if (data && data.length) {
@@ -138,6 +152,11 @@ export const HospitalList = () => {
   return (
     <div className="px-2">
       <PageTitle title="Facilities" hideBack={true} />
+      <InputSearchBox
+        onKeyUp = {onSearchSuspects}
+        placeholder = 'Search Facilities'
+        errors=''
+      />
       <div className="flex flex-wrap mt-4">{manageFacilities}</div>
     </div>
   );

diff --git a/src/Components/Patient/SampleViewAdmin.tsx b/src/Components/Patient/SampleViewAdmin.tsx
@@ -13,6 +13,7 @@ import { Loading } from "../Common/Loading";
 import PageTitle from "../Common/PageTitle";
 import Pagination from "../Common/Pagination";
 import { SampleListModel } from "./models";
+import {InputSearchBox} from "../Common/SearchBox";
 import UpdateStatusDialog from "./UpdateStatusDialog";
 
 const useStyles = makeStyles((theme) => ({
@@ -112,6 +113,19 @@ export default function SampleViewAdmin(props: any) {
       show: false,
       sample: {},
     });
+  };
+  const onSearchDistrictName = async (event: React.KeyboardEvent<HTMLInputElement>):Promise<any> => {
+    let searchValue:any = (event.target as HTMLInputElement).value
+    if(event.keyCode === 13){
+      setIsLoading(true);
+      const res = await dispatch(getTestList({ limit, offset, district_name : searchValue}));
+        if (res && res.data) {
+          setSample(res.data.results);
+          setTotalCount(res.data.count);
+        }
+        setIsLoading(false);
+      event.stopPropagation();
+    }
   }
 
   let sampleList: any[] = [];
@@ -264,6 +278,11 @@ export default function SampleViewAdmin(props: any) {
         userType={userType}
       />)}
       <PageTitle title="Sample Management system" hideBack={true} />
+      <InputSearchBox
+        onKeyUp = {onSearchDistrictName}
+        placeholder = 'Search District Name'
+        errors=''
+      />
       <div className="flex flex-wrap mt-4">{manageSamples}</div>
     </div>
   );