Merge pull request HospitalRun#12 from zemoso-int/FE_GET_PATIENTS

added filter functionality and integratedn get patients api

src/HospitalRun.tsx

@@ -29,38 +29,40 @@ const HospitalRun = () => {
       <NetworkStatusMessage />
       <Navbar />
       <div className="container-fluid">
-        <div className="col-md-2">
-          <Sidebar />
+        <div>
+          <Sidebar/>
         </div>
-        <ButtonBarProvider>
-          <div className="row">
-            <main
-              role="main"
-              className={`${
-                sidebarCollapsed ? 'col-md-10 col-lg-11' : 'col-md-9 col-lg-10'
-              } ml-sm-auto px-4`}
-            >
-              <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
-                <h1 className="h2">{title}</h1>
-                <ButtonToolBar />
-              </div>
-              <Breadcrumbs />
-              <div>
-                <Switch>
-                  <Route exact path="/" component={Dashboard} />
-                  <Route path="/appointments" component={Appointments} />
-                  <Route path="/patients" component={Patients} />
-                  <Route path="/labs" component={Labs} />
-                  <Route path="/medications" component={Medications} />
-                  <Route path="/incidents" component={Incidents} />
-                  <Route path="/settings" component={Settings} />
-                  <Route path="/imaging" component={Imagings} />
-                </Switch>
-              </div>
-              <Toaster autoClose={5000} hideProgressBar draggable />
-            </main>
-          </div>
-        </ButtonBarProvider>
+
+          <ButtonBarProvider>
+            <div>
+              <main
+                role="main"
+                className={`${
+                  sidebarCollapsed ? 'col-md-10 col-lg-11' : 'col-md-9 col-lg-10'
+                } ml-sm-auto px-4`}
+              >
+                <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+                  <h1 className="h2">{title}</h1>
+                  <ButtonToolBar />
+                </div>
+                <Breadcrumbs />
+                <div>
+                  <Switch>
+                    <Route exact path="/" component={Dashboard} />
+                    <Route path="/appointments" component={Appointments} />
+                    <Route path="/patients" component={Patients} />
+                    <Route path="/labs" component={Labs} />
+                    <Route path="/medications" component={Medications} />
+                    <Route path="/incidents" component={Incidents} />
+                    <Route path="/settings" component={Settings} />
+                    <Route path="/imaging" component={Imagings} />
+                  </Switch>
+                </div>
+                <Toaster autoClose={5000} hideProgressBar draggable />
+              </main>
+            </div>
+          </ButtonBarProvider>
+
       </div>
     </div>
   )

src/patients/hooks/usePatients.tsx

@@ -15,6 +15,15 @@ async function fetchPatients(_: any, searchRequest: PatientSearchRequest): Promi
   return { totalCount, patients }
 }
 
+// async function filterPatients(
+//   _: any,
+//   searchRequest: PatientSearchRequest,
+// ): Promise<PatientsResult> {
+//   const patients = await PatientRepository.search(searchRequest.queryString)
+//   const totalCount = await PatientRepository.count()
+//   return { totalCount, patients }
+// }
+
 export default function usePatients(searchRequest: PatientSearchRequest) {
   return useQuery(['patients', searchRequest], fetchPatients)
 }

src/patients/search/SearchPatients.tsx

@@ -1,30 +1,163 @@
 import { Column, Container, Row } from '@hospitalrun/components'
-import React, { useCallback, useState } from 'react'
-
+import React, { useCallback, useEffect, useState } from 'react'
+import { Button } from '@hospitalrun/components'
 import PatientSearchRequest from '../models/PatientSearchRequest'
 import PatientSearchInput from './PatientSearchInput'
 import ViewPatientsTable from './ViewPatientsTable'
+import FilterMenu from './filter/PatientFilter'
+import { data } from './../util/constants'
+import PatientRepository from '../../shared/db/PatientRepository'
+import Patient from '../../shared/model/Patient'
+
+export interface ILabelsContext {
+  filterLabels: string[]
+  setFilterLabels: React.Dispatch<React.SetStateAction<string[]>>
+}
+export const LabelsContext = React.createContext<ILabelsContext>({
+  filterLabels: [],
+  setFilterLabels: () => {},
+})
 
 const SearchPatients = () => {
   const [searchRequest, setSearchRequest] = useState<PatientSearchRequest>({ queryString: '' })
+  const [filterMenuState, setFilterMenuState] = useState(false)
+  const [filterLabels, setFilterLabels] = useState<string[]>([])
+  const filterLabelsValue = { filterLabels, setFilterLabels }
+  const [filteredPatientData, setFilteredPatientData] = useState<Patient[]>([])
+  const [filterValues, setFilterValues] = useState<Array<String>>([])
+  const [clearFilterS, setClearFilterS]= useState(false)
+  const [trigger, setTrigger]= useState<boolean>(false)
+
+
+
 
   const onSearchRequestChange = useCallback((newSearchRequest: PatientSearchRequest) => {
     setSearchRequest(newSearchRequest)
   }, [])
 
+  const openFilterMenu = () => {
+    setFilterMenuState(true)
+  }
+
+  const handleClose = () => {
+    setFilterMenuState(!filterMenuState)
+  }
+  const clearFilter = () => {
+    setFilteredPatientData([])
+    setClearFilterS(false)
+    setTrigger(true)
+  }
+const changeTrigger = (param:boolean) =>{
+  setTrigger(param)
+}
+
+
+
+
+  let allFilterData: any = []
+  useEffect(() => {
+
+  }, [allFilterData]);
+
+  function getAge(dateString:string) {   
+    var today = new Date();
+    var birthDate = new Date(dateString);
+    var age = today.getFullYear() - birthDate.getFullYear();
+    return age;
+}
+
+  const filterAllPatientData1 = async (param:any) => {
+    console.log('paramValues: ',param,param.length)
+    if (param?.length > 0) {
+
+      let tempData = await PatientRepository.findAll()
+      param.map((data:String)=>{
+        tempData.map((data2)=>{
+          if(data === data2.sex){
+            allFilterData.push(data2)
+            console.log('newdata: ', allFilterData)
+          }
+          else{
+            let age=getAge(data2.dateOfBirth)
+            if(data === '0 - 20 yrs' && age<=20 && !allFilterData.includes(data2)){
+              allFilterData.push(data2)
+            }
+            if(data === '21 - 40 yrs' && age>20 && age<=40 && !allFilterData.includes(data2)){
+              allFilterData.push(data2)
+            }
+            if(data === '41 - 60 yrs' && age>40 && age<=60 && !allFilterData.includes(data2)){
+              allFilterData.push(data2)
+            }
+            if(data === '61 + yrs' && age>60 && !allFilterData.includes(data2)){
+              allFilterData.push(data2)
+            }
+          }
+
+        })
+      })
+      console.log('allFilterData: ',allFilterData)        
+      setFilteredPatientData(allFilterData)
+      console.log('filteredPatientData',filteredPatientData)
+    }
+  }
+
   return (
-    <div>
-      <Container>
-        <Row>
-          <Column md={12}>
-            <PatientSearchInput onChange={onSearchRequestChange} />
-          </Column>
-        </Row>
-        <Row>
-          <ViewPatientsTable searchRequest={searchRequest} />
-        </Row>
-      </Container>
-    </div>
+    <LabelsContext.Provider value={filterLabelsValue}>
+      <div>
+        <Container>
+          <FilterMenu
+            filterMenuState={filterMenuState}
+            handleClose={handleClose}
+            data={data}
+            handleFilters={(param) => {
+              console.log('param: ', param)
+              setFilterValues(param)
+              console.log('insidefilterValues: ', filterValues)
+              filterAllPatientData1(param)
+              setClearFilterS(true)
+            }}
+            handleApply={() => {}}
+            clearFilters={changeTrigger}
+            trigger={trigger}
+
+          />
+          <Row>
+            <Column md={12}>
+              <Row>
+                <Column md={8} style={{ paddingLeft: '0px' }}>
+                  <PatientSearchInput data-testid={'searcinput'} onChange={onSearchRequestChange} />
+                </Column>
+                <Column md={2} style={{ display: 'flex', justifyContent: 'end', padding: '0px' }}>
+                  <Button
+                    style={{ width: '7vw', height: '2.97rem' }}
+                    key="filterButton"
+                    outlined
+                    color="success"
+                    onClick={openFilterMenu}
+                  >
+                    Filter
+                  </Button>
+                </Column>
+                <Column md={2} style={{ display: 'flex', justifyContent: 'end', padding: '0px' }}>
+                  <Button
+                    style={{ width: '7vw', height: '2.97rem' }}
+                    key="filterButton"
+                    outlined
+                    color="success"
+                    onClick={clearFilter}
+                  >
+                    Clear Filter
+                  </Button>
+                </Column>
+              </Row>
+            </Column>
+          </Row>
+          <Row>
+            <ViewPatientsTable searchRequest={searchRequest} filtered={clearFilterS} patientData={clearFilterS ? filteredPatientData : []} />
+          </Row>
+        </Container>
+      </div>
+    </LabelsContext.Provider>
   )
 }
 

src/patients/search/ViewPatientsTable.tsx

@@ -1,16 +1,19 @@
 import { Table } from '@hospitalrun/components'
 import React from 'react'
-// import { useHistory } from 'react-router'
+//import { AnyIfEmpty } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import Loading from '../../shared/components/Loading'
 import useTranslator from '../../shared/hooks/useTranslator'
+import Patient from '../../shared/model/Patient'
 import { formatDate } from '../../shared/util/formatDate'
 import usePatients from '../hooks/usePatients'
 import PatientSearchRequest from '../models/PatientSearchRequest'
 import NoPatientsExist from './NoPatientsExist'
 
 interface Props {
   searchRequest: PatientSearchRequest
+  filtered:Boolean
+  patientData:Patient[]
 }
 
 const ViewPatientsTable = (props: Props) => {
@@ -30,8 +33,10 @@ const ViewPatientsTable = (props: Props) => {
   }
 
   return (
+    <>
     <Table
-      data={data.patients}
+
+      data={props.filtered ? props.patientData : data.patients}
       getID={(row) => row.id}
       columns={[
         { label: t('patient.code'), key: 'code' },
@@ -55,6 +60,8 @@ const ViewPatientsTable = (props: Props) => {
         },
       ]}
     />
+    {console.log('patientdata: ',props.patientData)}
+    </>
   )
 }
 

src/patients/search/filter/FormControlLabelCustom.tsx

@@ -0,0 +1,57 @@
+
+ import { Checkbox, FormControlLabel, styled, ThemeProvider } from '@mui/material';
+import React from 'react';
+import theme from './theme';
+
+
+ interface CheckBoxProps {
+   label: string | undefined;
+   onLabelChange?: (event: React.ChangeEvent<HTMLInputElement>, labelChecked: boolean) => void;
+   labelChecked?: boolean;
+   disabled?: boolean;
+   name?: string;
+ }
+
+ const StyledFormControlLabel = styled(FormControlLabel)(() => ({
+   '& .MuiFormControlLabel-label': {
+     fontWeight: '500',
+
+   },
+ }));
+
+ const StyledCheckbox = styled(Checkbox)({
+   '&:hover': {
+     backgroundColor: 'transparent',
+   },
+   '& .MuiSvgIcon-root': {
+     width: '1rem',
+     height: '1rem',
+     borderRadius: '0.3rem',
+   },
+ });
+
+ const CheckBoxComponent = (props: CheckBoxProps) => {
+   const { label, onLabelChange, disabled, labelChecked, name } = props;
+
+   return (
+    <ThemeProvider theme={theme}>
+     <StyledFormControlLabel
+       control={
+         <StyledCheckbox  
+          color='primary'        
+           onChange={onLabelChange}
+           value={label}
+           name={name}
+           checked={labelChecked}
+           disabled={disabled}
+           {...props}
+         />
+       }
+       label={label}
+     />
+     </ThemeProvider>
+   );
+ };
+
+ export default CheckBoxComponent;
+