Add Sorting filter on Discharged Patients page (ohcnetwork#7594)

* Add Sorting filter on Discharged Patients page * refactor * add filter badges for sorting filter * reduce number of filter options * fix filter badge * refactor * fix ui issues
konavivekramakrishna · Apr 24, 2024 · 75743a8 · 75743a8
1 parent 218092b
commit 75743a8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
@@ -207,6 +207,15 @@ export const PATIENT_SORT_OPTIONS: SortOption[] = [
   { isAscending: false, value: "-name" },
 ];
 
+export const DISCHARGED_PATIENT_SORT_OPTIONS: SortOption[] = [
+  { isAscending: false, value: "-created_date" },
+  { isAscending: true, value: "created_date" },
+  { isAscending: false, value: "-modified_date" },
+  { isAscending: true, value: "modified_date" },
+  { isAscending: true, value: "name" },
+  { isAscending: false, value: "-name" },
+];
+
 export const getBedTypes = ({
   kasp_enabled,
   kasp_string,

diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
@@ -1,4 +1,4 @@
-import { Link, navigate, useQueryParams } from "raviger";
+import { Link, navigate } from "raviger";
 import routes from "../../Redux/api";
 import Page from "../Common/components/Page";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
@@ -7,12 +7,17 @@ import { PatientModel } from "../Patient/models";
 import useQuery from "../../Utils/request/useQuery";
 import { debounce } from "lodash-es";
 import SearchInput from "../Form/SearchInput";
-import { GENDER_TYPES } from "../../Common/constants";
+import {
+  DISCHARGED_PATIENT_SORT_OPTIONS,
+  GENDER_TYPES,
+} from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
 import { formatPatientAge } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
 import SwitchTabs from "../Common/components/SwitchTabs";
+import SortDropdownMenu from "../Common/SortDropdown";
+import useFilters from "../../Common/hooks/useFilters";
 
 const DischargedPatientsList = ({
   facility_external_id,
@@ -24,7 +29,7 @@ const DischargedPatientsList = ({
     pathParams: { id: facility_external_id },
   });
 
-  const [search, setSearch] = useQueryParams();
+  const { qParams, updateQuery, FilterBadges } = useFilters({});
 
   return (
     <Page
@@ -38,23 +43,33 @@ const DischargedPatientsList = ({
             className="mr-4 w-full max-w-sm"
             placeholder="Search by patient name"
             name="name"
-            value={search.name}
-            onChange={debounce((e) => setSearch({ [e.name]: e.value }), 300)}
-          />
-          <SwitchTabs
-            tab1="Live"
-            tab2="Discharged"
-            className="mr-4"
-            onClickTab1={() => navigate("/patients")}
-            isTab2Active
+            value={qParams.name}
+            onChange={debounce((e) => updateQuery({ name: e.value }))}
           />
+          <div className="flex flex-col gap-4 md:flex-row">
+            <SwitchTabs
+              tab1="Live"
+              tab2="Discharged"
+              className="mr-4"
+              onClickTab1={() => navigate("/patients")}
+              isTab2Active
+            />
+            <SortDropdownMenu
+              options={DISCHARGED_PATIENT_SORT_OPTIONS}
+              selected={qParams.ordering}
+              onSelect={(e) => updateQuery({ ordering: e.ordering })}
+            />
+          </div>
         </>
       }
     >
+      <div className="col-span-3 mt-6 flex flex-wrap">
+        <FilterBadges badges={({ ordering }) => [ordering()]} />
+      </div>
       <PaginatedList
         route={routes.listFacilityDischargedPatients}
         pathParams={{ facility_external_id }}
-        query={search}
+        query={{ ordering: "-modified_date", ...qParams }}
       >
         {() => (
           <div className="flex flex-col gap-4 py-4 lg:px-4 lg:py-8">