Merge pull request #546 from coronasafe/develop

Update search by phone number and minor style fixes
ohcnetwork · Aug 25, 2020 · 701f3f9 · 701f3f9
2 parents 39aa16e + c5bef1f
commit 701f3f9
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 87 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -272,6 +272,18 @@ $border: #28a745;
   }
 }
 
+.form-input{
+  padding-top: 6px;
+  padding-bottom: 6px;
+  width: 100%;
+  border-radius: 4px;
+  height: 38px;
+  &:focus {
+    border-color: $border !important;
+    box-shadow: 0 0 0 1px $border !important;
+  }
+}
+
 .shifting-page-filter-dropdown {
   .MuiFormControl-root {
     @apply mt-2;

diff --git a/src/Components/Common/HelperInputFields.tsx b/src/Components/Common/HelperInputFields.tsx
@@ -7,6 +7,7 @@ import { SelectProps } from '@material-ui/core/Select';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { DatePickerProps, KeyboardDatePicker, KeyboardDateTimePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date';
+import { debounce } from 'lodash';
 import React, { ChangeEvent } from 'react';
 import PhoneInput, { ICountryData } from 'react-phone-input-2';
 import 'react-phone-input-2/lib/high-res.css';
@@ -406,8 +407,9 @@ export const AutoCompleteAsyncField = (props: any) => {
 export const PhoneNumberField = (props: any) => {
     const { label, placeholder, errors, onChange, onlyIndia, value } = props;
     const countryRestriction = !!onlyIndia ? { onlyCountries: ['in'] } : {};
+    const onChangeHandler = debounce(onChange, 500);
     const handleChange = (value: string, data: ICountryData | {}, event: ChangeEvent<HTMLInputElement>, formattedValue: string) => {
-        onChange(formattedValue);
+        onChangeHandler(formattedValue);
     }
     return (<>
         {label && <InputLabel>{label}</InputLabel>}

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
@@ -113,16 +113,16 @@ export const FacilityHome = (props: any) => {
   let stats = patientStatsData.map((data: PatientStatsModel, index) => {
     return (
       <tr className="border" key={index}>
-        <td className="border px-4 py-2 whitespace-no-wrap">{data.entry_date || "-"}</td>
-        <td className="border px-4 py-2 text-center">{data.num_patients_visited || "-"}</td>
+        <td className="border px-4 py-2 whitespace-no-wrap">{data.entry_date || "0"}</td>
+        <td className="border px-4 py-2 text-center">{data.num_patients_visited || "0"}</td>
         <td className="border px-4 py-2 text-center">
-          {data.num_patients_home_quarantine || "-"}
+          {data.num_patients_home_quarantine || "0"}
         </td>
         <td className="border px-4 py-2 text-center">
-          {data.num_patients_isolation || "-"}
+          {data.num_patients_isolation || "0"}
         </td>
-        <td className="border px-4 py-2 text-center">{data.num_patient_referred || "-"}</td>
-        <td className="border px-4 py-2 text-center">{data.num_patient_confirmed_positive || "-"}</td>
+        <td className="border px-4 py-2 text-center">{data.num_patient_referred || "0"}</td>
+        <td className="border px-4 py-2 text-center">{data.num_patient_confirmed_positive || "0"}</td>
         <td className="border px-4 py-2">
           <button
             className="btn btn-default"
@@ -142,13 +142,11 @@ export const FacilityHome = (props: any) => {
       <div className="bg-white rounded-lg md:p-6 p-3 shadow">
         <div className="md:flex justify-between">
           <div>
-            <Typography
-              style={{ textTransform: "capitalize" }}
-              variant="h6"
-              component="h6"
+            <div
+              className="text-xl font-semibold"
             >
               {facilityData.name}
-            </Typography>
+            </div>
             <Typography>Address : {facilityData.address}</Typography>
             <Typography>Phone : {facilityData.phone_number}</Typography>
             <Typography>
@@ -184,7 +182,7 @@ export const FacilityHome = (props: any) => {
           >
             <i className="fas fa-plus text-white mr-2">
             </i>
-            Add Details of Covid Suspects
+            Add Details of a Patient
             </button>
 
           <button
@@ -193,7 +191,7 @@ export const FacilityHome = (props: any) => {
           >
             <i className="fas fa-user-injured text-white mr-2">
             </i>
-            View Suspects / Patients
+            View Patients
           </button>
         </div>
         <div className="mt-4">

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
@@ -1,23 +1,23 @@
+import loadable from '@loadable/component';
+import Box from '@material-ui/core/Box';
 import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
-import WarningRoundedIcon from "@material-ui/icons/WarningRounded";
+import { makeStyles, Theme, useTheme } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 import { navigate, useQueryParams } from "hookrouter";
-import loadable from '@loadable/component';
-import React, { useState, useEffect } from "react";
-import { useDispatch } from "react-redux";
-import { downloadPatients, searchPatientFilter } from "../../Redux/actions";
-const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
-import Pagination from "../Common/Pagination";
-import { PatientFilter } from "./PatientFilter";
-import { InputSearchBox } from "../Common/SearchBox";
-import { CSVLink } from "react-csv";
 import moment from 'moment';
+import React, { useEffect, useState } from "react";
+import { CSVLink } from "react-csv";
+import { useDispatch } from "react-redux";
 import SwipeableViews from 'react-swipeable-views';
-import { makeStyles, Theme, useTheme } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
+import { getAllPatient } from "../../Redux/actions";
+import { PhoneNumberField } from '../Common/HelperInputFields';
 import NavTabs from '../Common/NavTabs';
+import Pagination from "../Common/Pagination";
+import { InputSearchBox } from "../Common/SearchBox";
+import { PatientFilter } from "./PatientFilter";
+const Loading = loadable(() => import("../Common/Loading"));
+const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -96,26 +96,45 @@ export const PatientManager = (props: any) => {
 
   let managePatients: any = null;
   const handleDownload = async () => {
-    const res = await dispatch(downloadPatients());
-    setDownloadFile(res.data);
-    document.getElementById("downloadlink")?.click();
+    const params = {
+      csv: true,
+      facility: facilityId,
+      disease_status: qParams.disease_status
+
+    };
+    const res = await dispatch(getAllPatient(params))
+    if (res && res.data) {
+      setDownloadFile(res.data);
+      document.getElementById("downloadlink")?.click();
+    }
   };
 
+  useEffect(() => {
+    setQueryParams({
+      page: 1,
+      name: '',
+      disease_status: '',
+      phone_number: '+91'
+    });
+  }, [setQueryParams])
+
   useEffect(() => {
     setIsLoading(true);
-    const params = Object.assign({
+    const params = {
+      ...qParams,
+      phone_number: qParams.phone_number && qParams.phone_number.split(' ').length > 1 ? qParams.phone_number.replace(/[\s()-]+/gi, '') : "",
       facility: facilityId,
       offset: (qParams.page ? qParams.page - 1 : 0) * RESULT_LIMIT
-    }, qParams);
+    };
 
-    dispatch(searchPatientFilter(params))
+    dispatch(getAllPatient(params))
       .then((res: any) => {
         if (res && res.data) {
           setData(res.data.results);
           setTotalCount(res.data.count);
         }
         setIsLoading(false);
-      }).catch((ex: any) => {
+      }).catch(() => {
         setIsLoading(false);
       })
   }, [qParams, dispatch, facilityId]);
@@ -128,11 +147,9 @@ export const PatientManager = (props: any) => {
   const handleTabChange = async (tab: number) => {
 
     updateQuery({
+      ...qParams,
       is_active: tab ? 'False' : 'True',
       page: 1,
-      name: '',
-      disease_status: '',
-      phone_number: ''
     });
   };
 
@@ -166,7 +183,7 @@ export const PatientManager = (props: any) => {
         >
           <div className="px-4 md:w-1/2">
             <div className="md:flex justify-between w-full">
-              <div className="text-xl font-semibold capitalize">
+              <div className="text-xl font-normal capitalize">
                 {patient.name} -   {patient.age}
               </div>
             </div>
@@ -235,14 +252,14 @@ export const PatientManager = (props: any) => {
     managePatients = (
       <Grid item xs={12} md={12} className={classes.displayFlex}>
         <Grid container justify="center" alignItems="center">
-          <h5> No Covid Suspects Found</h5>
+          <h5> No Patients Found</h5>
         </Grid>
       </Grid>
     );
   }
 
   return (
-    <div>
+    <div className="px-6">
       <PageTitle
         title="Patients"
         hideBack={!facilityId}
@@ -276,11 +293,10 @@ export const PatientManager = (props: any) => {
             <div className="text-sm font-semibold mt-2">
               Search by number
           </div>
-            <InputSearchBox
-              search={searchByPhone}
+            <PhoneNumberField
               value={qParams.phone_number}
-              placeholder='+919876543210'
-              errors=''
+              onChange={searchByPhone}
+              errors=""
             />
           </div>
         </div>
@@ -289,7 +305,7 @@ export const PatientManager = (props: any) => {
             <div className="text-sm font-semibold">Filter by Status</div>
             <PatientFilter filter={handleFilter} value={qParams.disease_status} />
           </div>
-          <div className="mt-2">
+          <div className="mb-2">
             <button
               type="button"
               className="inline-flex items-center mt-1 md:mt-0 lg:mt-0 px-1 py-2 ml-1  lg:px-3 border border-green-500

diff --git a/src/Components/Shifting/ListView.tsx b/src/Components/Shifting/ListView.tsx
@@ -40,19 +40,16 @@ export default function ListView() {
   }
 
   return (
-    <div className="flex flex-col h-screen px-2 md:px-8 pb-2">
-
+    <div className="flex flex-col h-screen px-2 pb-2">
       <div className="flex items-end justify-between">
         <PageTitle title={"Shifting"} hideBack={true} />
-
         <div className="md:px-4">
           <InputSearchBox
             search={query => filterOnChange({ ...filter, patient_name: query })}
             placeholder='Patient Name'
             errors=''
           />
         </div>
-
         <div className="bg-gray-200 text-sm text-gray-500 leading-none border-2 border-gray-200 rounded-full inline-flex">
           <button
             className={"flex leading-none border-2 border-gray-200 rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-blue-400 focus:text-blue-400 rounded-r-full px-4 py-2"
@@ -74,9 +71,7 @@ export default function ListView() {
               + (showFilters ? " bg-white text-gray-800" : " bg-gray-200 text-sm text-gray-500")}
             onClick={_ => setShowFilters(show => !show)}>
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="fill-current w-4 h-4 mr-2">
-              <line x1="8" y1="6" x2="21" y2="6">
-
-              </line>
+              <line x1="8" y1="6" x2="21" y2="6"></line>
               <line x1="8" y1="12" x2="21" y2="12"> </line>
               <line x1="8" y1="18" x2="21" y2="18"> </line>
               <line x1="3" y1="6" x2="3.01" y2="6"> </line>
@@ -87,15 +82,11 @@ export default function ListView() {
           </button>
         </div>
       </div>
-
       <div className="flex mt-4 pb-2 flex-1 items-start overflow-x-scroll">
         {isLoading ? <Loading /> : boardFilter.map(board =>
           <ShiftingBoard filterProp={filter} board={board} />
         )}
       </div>
-
-
-
       <SlideOver show={showFilters} setShow={setShowFilters}>
         <div className="bg-white h-screen p-4">
           <ListFilter

diff --git a/src/Components/Shifting/ShiftingBoard.tsx b/src/Components/Shifting/ShiftingBoard.tsx
@@ -75,7 +75,7 @@ export default function ListView({ board, filterProp }: boardProps) {
     return data
       .filter(({ status }) => status === filter)
       .map((shift: any, idx: number) =>
-        <div key={`shift_${shift.id}`} className="w-full mt-2">
+        <div key={`shift_${shift.id}`} className="w-full mt-2 ">
           <div className="overflow-hidden shadow rounded-lg bg-white h-full mx-2">
             <div className="p-4 h-full flex flex-col justify-between">
               <div>
@@ -93,7 +93,7 @@ export default function ListView({ board, filterProp }: boardProps) {
                   <div className="sm:col-span-1">
                     <dt className="text-sm leading-5 font-medium text-gray-500">
                       <i className="fas fa-plane-departure mr-2"></i>
-                      Orgin facility
+                      Origin facility
                   </dt>
                     <dd className="font-bold text-sm leading-5 text-gray-900">
                       {(shift.orgin_facility_object || {}).name}
@@ -145,33 +145,29 @@ export default function ListView({ board, filterProp }: boardProps) {
       );
   }
   return (
-    <div className="rounded-md bg-gray-200 flex-shrink-0 w-3/4 md:w-1/2 lg:w-1/3 xl:w-1/4 p-2 pb-4 mr-3 h-full overflow-y-auto">
-      <div className="flex justify-between py-1">
+    <div className="bg-gray-200 py-2 mr-2 flex-shrink-0 w-3/4 md:w-1/2 lg:w-1/3 xl:w-1/4 pb-4 h-full overflow-y-auto rounded-md">
+      <div className="flex justify-between p-4 rounded mx-2 bg-white shadow">
         <h3 className="text-sm flex">{board}
-          <span className="rounded-lg ml-2 bg-gray-700 text-white px-2">
-            {totalCount || "0"}
-          </span>
         </h3>
-        <svg
-          className="h-4 fill-current text-grey-dark cursor-pointer"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-        >
-          <path d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
-        </svg>
+        <span className="rounded-lg ml-2 bg-gray-700 text-white px-2">
+          {totalCount || "0"}
+        </span>
       </div>
       <div className="text-sm mt-2 pb-2 flex flex-col">
-        {isLoading ? <div className="border border-gray-300 bg-white shadow rounded-md p-4 max-w-sm w-full mx-auto">
-          <div className="animate-pulse flex space-x-4 ">
-            <div className="flex-1 space-y-4 py-1">
-              <div className="h-4 bg-gray-400 rounded w-3/4"></div>
-              <div className="space-y-2">
-                <div className="h-4 bg-gray-400 rounded"></div>
-                <div className="h-4 bg-gray-400 rounded w-5/6"></div>
+        {isLoading ?
+          <div className="m-1">
+            <div className="border border-gray-300 bg-white shadow rounded-md p-4 max-w-sm w-full mx-auto">
+              <div className="animate-pulse flex space-x-4 ">
+                <div className="flex-1 space-y-4 py-1">
+                  <div className="h-4 bg-gray-400 rounded w-3/4"></div>
+                  <div className="space-y-2">
+                    <div className="h-4 bg-gray-400 rounded"></div>
+                    <div className="h-4 bg-gray-400 rounded w-5/6"></div>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div> : data?.length > 0 ? patientFilter(board) : <p className="mx-auto p-4">No Patients to Show</p>}
+          </div> : data?.length > 0 ? patientFilter(board) : <p className="mx-auto p-4">No Patients to Show</p>}
         {!isLoading && data?.length < (totalCount || 0) &&
           <button onClick={_ => handlePagination(currentPage + 1, limit)} className="mx-auto my-4 p-2 px-4 bg-gray-100 rounded-md hover:bg-white">More...</button>}
       </div>

diff --git a/src/Redux/actions.tsx b/src/Redux/actions.tsx
@@ -96,9 +96,6 @@ export const getDoctor = (id: number, pathParam: object) => {
 export const searchPatient = (params: object) => {
   return fireRequest('searchPatient', [], params);
 };
-export const searchPatientFilter = (params: object) => {
-  return fireRequest('searchPatientFilter', [], params);
-};
 export const searchUser = (params: object) => {
   return fireRequest('searchUser', [], params);
 };

diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
@@ -204,9 +204,6 @@ export default {
   searchPatient: {
     path: "/api/v1/patient/search",
   },
-  searchPatientFilter: {
-    path: "/api/v1/patient",
-  },
   patientList: {
     path: "/api/v1/patient",
   },

diff --git a/src/Router/AppRouter.tsx b/src/Router/AppRouter.tsx
@@ -136,7 +136,7 @@ let menus = [
     icon: "fas fa-hospital"
   },
   {
-    title: 'Patients / Suspects',
+    title: 'Patients',
     link: '/patients',
     icon: "fas fa-user-injured"
   },