Skip to content

Commit

Permalink
fixed filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@skks1212
skks1212 committed May 17, 2024
1 parent 1f56af6 commit 22b0469
Show file tree
Hide file tree
Showing 3 changed files with 189 additions and 130 deletions.
12 changes: 11 additions & 1 deletion src/CAREUI/misc/PaginatedList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createContext, useContext, useState } from "react";
import { createContext, useContext, useEffect, useState } from "react";
import { PaginatedResponse, QueryRoute } from "../../Utils/request/types";
import useQuery, { QueryOptions } from "../../Utils/request/useQuery";
import ButtonV2, {
Expand Down Expand Up @@ -33,6 +33,9 @@ function useContextualized<TItem>() {
interface Props<TItem> extends QueryOptions<PaginatedResponse<TItem>> {
route: QueryRoute<PaginatedResponse<TItem>>;
perPage?: number;
queryCB?: (
query: ReturnType<typeof useQuery<PaginatedResponse<TItem>>>,
) => void;
children: (
ctx: PaginatedListContext<TItem>,
query: ReturnType<typeof useQuery<PaginatedResponse<TItem>>>,
Expand All @@ -43,6 +46,7 @@ export default function PaginatedList<TItem extends object>({
children,
route,
perPage = DEFAULT_PER_PAGE_LIMIT,
queryCB,
...queryOptions
}: Props<TItem>) {
const [currentPage, setPage] = useState(1);
Expand All @@ -57,6 +61,12 @@ export default function PaginatedList<TItem extends object>({

const items = query.data?.results ?? [];

useEffect(() => {
if (queryCB) {
queryCB(query);
}
}, [query]);

return (
<context.Provider
value={{ ...query, items, perPage, currentPage, setPage }}
Expand Down
235 changes: 142 additions & 93 deletions src/Components/Facility/DischargedPatientsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import PaginatedList from "../../CAREUI/misc/PaginatedList";
import Loading from "../Common/Loading";
import { PatientModel } from "../Patient/models";
import useQuery from "../../Utils/request/useQuery";
import { debounce } from "lodash-es";
import SearchInput from "../Form/SearchInput";
import {
ADMITTED_TO,
Expand Down Expand Up @@ -219,21 +218,17 @@ const DischargedPatientsList = ({
}}
options={
<>
<SearchInput
className="mr-4 w-full max-w-sm"
placeholder="Search by patient name"
name="name"
value={qParams.name}
onChange={debounce((e) => updateQuery({ name: e.value }))}
/>
<div className="flex flex-col gap-4 md:flex-row">
<div className="flex flex-col gap-4 lg:flex-row">
<SwitchTabs
tab1="Live"
tab2="Discharged"
className="mr-4"
onClickTab1={() => navigate("/patients")}
isTab2Active
/>
<AdvancedFilterButton
onClick={() => advancedFilter.setShow(true)}
/>
<SortDropdownMenu
options={DISCHARGED_PATIENT_SORT_OPTIONS}
selected={qParams.ordering}
Expand All @@ -243,6 +238,54 @@ 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="l-user-injured"
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>
</div>
<div className="col-span-3 mt-6 flex flex-wrap">
<FilterBadges
badges={({
Expand All @@ -254,99 +297,100 @@ const DischargedPatientsList = ({
range,
ordering,
}) => [
phoneNumber("Primary number", "phone_number"),
phoneNumber("Emergency number", "emergency_phone_number"),
badge("Patient name", "name"),
badge("IP/OP number", "patient_no"),
...dateRange("Modified", "modified_date"),
...dateRange("Created", "created_date"),
...dateRange("Admitted", "last_consultation_encounter_date"),
...dateRange("Discharged", "last_consultation_discharge_date"),
// Admitted to type badges
badge("No. of vaccination doses", "number_of_doses"),
kasp(),
badge("COWIN ID", "covin_id"),
badge("Is Antenatal", "is_antenatal"),
badge("Review Missed", "review_missed"),
badge(
"Is Medico-Legal Case",
"last_consultation_medico_legal_case",
),
value(
"Location",
"last_consultation_current_bed__location",
qParams.last_consultation_current_bed__location
? facilityAssetLocationData?.name ||
qParams.last_consultation_current_bed__locations
: "",
),
badge("Facility Type", "facility_type"),
value(
"District",
"district",
qParams.district ? districtData?.name || "" : "",
),
ordering(),
value("Category", "category", getTheCategoryFromId()),
badge("Disease Status", "disease_status"),
value(
"Respiratory Support",
"ventilator_interface",
qParams.ventilator_interface &&
phoneNumber("Primary number", "phone_number"),
phoneNumber("Emergency number", "emergency_phone_number"),
badge("Patient name", "name"),
badge("IP/OP number", "patient_no"),
...dateRange("Modified", "modified_date"),
...dateRange("Created", "created_date"),
...dateRange("Admitted", "last_consultation_encounter_date"),
...dateRange("Discharged", "last_consultation_discharge_date"),
// Admitted to type badges
badge("No. of vaccination doses", "number_of_doses"),
kasp(),
badge("COWIN ID", "covin_id"),
badge("Is Antenatal", "is_antenatal"),
badge("Review Missed", "review_missed"),
badge(
"Is Medico-Legal Case",
"last_consultation_medico_legal_case",
),
value(
"Location",
"last_consultation_current_bed__location",
qParams.last_consultation_current_bed__location
? facilityAssetLocationData?.name ||
qParams.last_consultation_current_bed__locations
: "",
),
badge("Facility Type", "facility_type"),
value(
"District",
"district",
qParams.district ? districtData?.name || "" : "",
),
ordering(),
value("Category", "category", getTheCategoryFromId()),
badge("Disease Status", "disease_status"),
value(
"Respiratory Support",
"ventilator_interface",
qParams.ventilator_interface &&
t(`RESPIRATORY_SUPPORT_${qParams.ventilator_interface}`),
),
value(
"Gender",
"gender",
parseOptionId(GENDER_TYPES, qParams.gender) || "",
),
{
name: "Admitted to",
value: ADMITTED_TO[qParams.last_consultation_admitted_to],
paramKey: "last_consultation_admitted_to",
},
...range("Age", "age"),
badge("SRF ID", "srf_id"),
{
name: "LSG Body",
value: qParams.lsgBody ? LocalBodyData?.name || "" : "",
paramKey: "lsgBody",
},
...FILTER_BY_DIAGNOSES_KEYS.map((key) =>
value(
DIAGNOSES_FILTER_LABELS[key],
key,
getDiagnosisFilterValue(key).join(", "),
),
),
badge("Declared Status", "is_declared_positive"),
...dateRange("Result", "date_of_result"),
...dateRange("Declared positive", "date_declared_positive"),
...dateRange(
"Symptoms onset",
"last_consultation_symptoms_onset_date",
),
...dateRange("Last vaccinated", "last_vaccinated_date"),
{
name: "Telemedicine",
paramKey: "last_consultation_is_telemedicine",
},
),
value(
"Gender",
"gender",
parseOptionId(GENDER_TYPES, qParams.gender) || "",
),
{
name: "Admitted to",
value: ADMITTED_TO[qParams.last_consultation_admitted_to],
paramKey: "last_consultation_admitted_to",
},
...range("Age", "age"),
badge("SRF ID", "srf_id"),
{
name: "LSG Body",
value: qParams.lsgBody ? LocalBodyData?.name || "" : "",
paramKey: "lsgBody",
},
...FILTER_BY_DIAGNOSES_KEYS.map((key) =>
value(
"Discharge Reason",
"last_consultation__new_discharge_reason",
parseOptionId(
DISCHARGE_REASONS,
qParams.last_consultation__new_discharge_reason,
) || "",
DIAGNOSES_FILTER_LABELS[key],
key,
getDiagnosisFilterValue(key).join(", "),
),
]}
),
badge("Declared Status", "is_declared_positive"),
...dateRange("Result", "date_of_result"),
...dateRange("Declared positive", "date_declared_positive"),
...dateRange(
"Symptoms onset",
"last_consultation_symptoms_onset_date",
),
...dateRange("Last vaccinated", "last_vaccinated_date"),
{
name: "Telemedicine",
paramKey: "last_consultation_is_telemedicine",
},
value(
"Discharge Reason",
"last_consultation__new_discharge_reason",
parseOptionId(
DISCHARGE_REASONS,
qParams.last_consultation__new_discharge_reason,
) || "",
),
]}
children={
qParams.last_consultation_admitted_bed_type_list &&
LastAdmittedToTypeBadges()
}
/>
</div>
<PaginatedList
perPage={12}
route={routes.listFacilityDischargedPatients}
pathParams={{ facility_external_id }}
query={{ ordering: "-modified_date", ...qParams }}
Expand All @@ -356,7 +400,7 @@ const DischargedPatientsList = ({
}}
>
{() => (
<div className="flex flex-col gap-4 py-4 lg:px-4 lg:py-8">
<div className="flex flex-col gap-4">
<PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
<span>{t("discharged_patients_empty")}</span>
</PaginatedList.WhenEmpty>
Expand All @@ -383,6 +427,11 @@ const DischargedPatientsList = ({
</div>
)}
</PaginatedList>
<PatientFilter
{...advancedFilter}
key={window.location.search}
dischargePage
/>
</Page>
);
};
Expand Down

0 comments on commit 22b0469

Please sign in to comment.