Skip to content

Commit

Permalink
Search UI for discharge patients (#9320)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mahendar0701
Mahendar0701 authored Dec 17, 2024
1 parent ba80ea9 commit 927c399
Showing 1 changed file with 95 additions and 107 deletions.
202 changes: 95 additions & 107 deletions src/components/Facility/DischargedPatientsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Link, navigate } from "raviger";
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import CountBlock from "@/CAREUI/display/Count";
Expand All @@ -11,13 +11,11 @@ import PaginatedList from "@/CAREUI/misc/PaginatedList";

import Loading from "@/components/Common/Loading";
import Page from "@/components/Common/Page";
import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
import SortDropdownMenu from "@/components/Common/SortDropdown";
import Tabs from "@/components/Common/Tabs";
import { getDiagnosesByIds } from "@/components/Diagnosis/utils";
import { ICD11DiagnosisModel } from "@/components/Facility/models";
import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
import SearchInput from "@/components/Form/SearchInput";
import {
DIAGNOSES_FILTER_LABELS,
DiagnosesFilterKey,
Expand Down Expand Up @@ -52,16 +50,79 @@ const DischargedPatientsList = ({
pathParams: { id: facility_external_id },
});

const { qParams, updateQuery, advancedFilter, FilterBadges, updatePage } =
useFilters({
limit: 12,
cacheBlacklist: [
"name",
"patient_no",
"phone_number",
"emergency_phone_number",
],
});
const {
qParams,
updateQuery,
advancedFilter,
FilterBadges,
updatePage,
clearSearch,
} = useFilters({
limit: 12,
cacheBlacklist: [
"name",
"patient_no",
"phone_number",
"emergency_phone_number",
],
});

const searchOptions = [
{
key: "name",
label: "Name",
type: "text" as const,
placeholder: "search_by_patient_name",
value: qParams.name || "",
shortcutKey: "n",
},
{
key: "patient_no",
label: "IP/OP No",
type: "text" as const,
placeholder: "search_by_patient_no",
value: qParams.patient_no || "",
shortcutKey: "u",
},
{
key: "phone_number",
label: "Phone Number",
type: "phone" as const,
placeholder: "Search_by_phone_number",
value: qParams.phone_number || "",
shortcutKey: "p",
},
{
key: "emergency_contact_number",
label: "Emergency Contact Phone Number",
type: "phone" as const,
placeholder: "search_by_emergency_phone_number",
value: qParams.emergency_phone_number || "",
shortcutKey: "e",
},
];

const handleSearch = useCallback(
(key: string, value: string) => {
const isValidPhoneNumber = (val: string) =>
val.length >= 13 || val === "";

const updatedQuery = {
phone_number:
key === "phone_number" && isValidPhoneNumber(value)
? value
: undefined,
name: key === "name" ? value : undefined,
patient_no: key === "patient_no" ? value : undefined,
emergency_phone_number:
key === "emergency_contact_number" && isValidPhoneNumber(value)
? value
: undefined,
};
updateQuery(updatedQuery);
},
[updateQuery],
);

useEffect(() => {
if (!qParams.phone_number && phone_number.length >= 13) {
Expand Down Expand Up @@ -200,56 +261,11 @@ const DischargedPatientsList = ({
});
};

const queryField = <T,>(name: string, defaultValue?: T) => {
return {
name,
value: qParams[name] || defaultValue,
onChange: (e: FieldChangeEvent<T>) => updateQuery({ [e.name]: e.value }),
className: "grow w-full mb-2",
};
};
const [diagnoses, setDiagnoses] = useState<ICD11DiagnosisModel[]>([]);
const [phone_number, setPhoneNumber] = useState("");
const [phoneNumberError, setPhoneNumberError] = useState("");
const [emergency_phone_number, setEmergencyPhoneNumber] = useState("");
const [emergencyPhoneNumberError, setEmergencyPhoneNumberError] =
useState("");
const [count, setCount] = useState(0);

const setPhoneNum = (phone_number: string) => {
setPhoneNumber(phone_number);
if (phone_number.length >= 13) {
setPhoneNumberError("");
updateQuery({ phone_number });
return;
}

if (phone_number === "+91" || phone_number === "") {
setPhoneNumberError("");
qParams.phone_number && updateQuery({ phone_number: null });
return;
}

setPhoneNumberError("Enter a valid number");
};

const setEmergencyPhoneNum = (emergency_phone_number: string) => {
setEmergencyPhoneNumber(emergency_phone_number);
if (emergency_phone_number.length >= 13) {
setEmergencyPhoneNumberError("");
updateQuery({ emergency_phone_number });
return;
}

if (emergency_phone_number === "+91" || emergency_phone_number === "") {
setEmergencyPhoneNumberError("");
qParams.emergency_phone_number &&
updateQuery({ emergency_phone_number: null });
return;
}

setEmergencyPhoneNumberError("Enter a valid number");
};
const [isLoading, setIsLoading] = useState(false);

return (
<Page
Expand Down Expand Up @@ -281,53 +297,22 @@ const DischargedPatientsList = ({
</>
}
>
<div className="manualGrid my-4 mb-[-12px] mt-5 grid-cols-1 gap-3 px-2 sm:grid-cols-4 md:px-0">
<div className="mt-2 flex h-full flex-col gap-3 xl:flex-row">
<div className="flex-1">
<CountBlock
text="Discharged Patients"
count={count}
loading={facilityQuery.loading}
icon="d-patient"
className="pb-12"
/>
</div>
</div>
<div className="col-span-3 w-full">
<div className="col-span-2 mt-2">
<div className="mt-1 md:flex md:gap-4">
<SearchInput
label="Search by Patient"
placeholder="Enter patient name"
{...queryField("name")}
/>
<SearchInput
label="Search by IP/OP Number"
placeholder="Enter IP/OP Number"
secondary
{...queryField("patient_no")}
/>
</div>
<div className="md:flex md:gap-4">
<PhoneNumberFormField
label="Search by Primary Number"
{...queryField("phone_number", "+91")}
value={phone_number}
onChange={(e) => setPhoneNum(e.value)}
error={phoneNumberError}
types={["mobile", "landline"]}
/>
<PhoneNumberFormField
label="Search by Emergency Number"
{...queryField("emergency_phone_number", "+91")}
value={emergency_phone_number}
onChange={(e) => setEmergencyPhoneNum(e.value)}
error={emergencyPhoneNumberError}
types={["mobile", "landline"]}
/>
</div>
</div>
<div className="mt-4 gap-4 lg:gap-16 flex flex-col lg:flex-row lg:items-center">
<div id="total-patientcount">
<CountBlock
text={t("total_patients")}
count={count || 0}
loading={isLoading}
icon="d-patient"
/>
</div>
<SearchByMultipleFields
id="patient-search"
options={searchOptions}
onSearch={handleSearch}
clearSearch={clearSearch}
className="w-full"
/>
</div>
<div className="col-span-3 mt-6 flex flex-wrap">
<FilterBadges
Expand Down Expand Up @@ -440,7 +425,10 @@ const DischargedPatientsList = ({
route={routes.listFacilityDischargedPatients}
pathParams={{ facility_external_id }}
query={{ ordering: "-modified_date", ...qParams }}
queryCB={(query) => setCount(query.data?.count || 0)}
queryCB={(query) => {
setCount(query.data?.count || 0);
setIsLoading(query.loading);
}}
initialPage={qParams.page}
onPageChange={updatePage}
>
Expand Down

0 comments on commit 927c399

Please sign in to comment.