Added sorting for events (#8270)

ohcnetwork · Aug 9, 2024 · f5721b9 · f5721b9
1 parent 56dd922
commit f5721b9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
@@ -201,6 +201,13 @@ export const PATIENT_SORT_OPTIONS: SortOption[] = [
   { isAscending: false, value: "-name" },
 ];
 
+export const EVENTS_SORT_OPTIONS: SortOption[] = [
+  { isAscending: false, value: "-created_date" },
+  { isAscending: true, value: "created_date" },
+  { isAscending: false, value: "-taken_at" },
+  { isAscending: true, value: "taken_at" },
+];
+
 export const DISCHARGED_PATIENT_SORT_OPTIONS: SortOption[] = [
   { isAscending: false, value: "-created_date" },
   { isAscending: true, value: "created_date" },

diff --git a/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx b/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx
@@ -7,15 +7,32 @@ import LoadingLogUpdateCard from "../../Consultations/DailyRounds/LoadingCard";
 import GenericEvent from "./GenericEvent";
 import { getEventIcon } from "./iconMap";
 import { EventGeneric } from "./types";
+import SortDropdownMenu from "../../../Common/SortDropdown";
+import { EVENTS_SORT_OPTIONS } from "../../../../Common/constants";
+import { QueryParams } from "../../../../Utils/request/types";
+import { useState } from "react";
 
 export default function EventsList() {
   const [consultationId] = useSlugs("consultation");
   const { t } = useTranslation();
+  const [query, setQuery] = useState<QueryParams>();
 
   return (
-    <PaginatedList route={routes.getEvents} pathParams={{ consultationId }}>
+    <PaginatedList
+      route={routes.getEvents}
+      pathParams={{ consultationId }}
+      query={query}
+    >
       {() => (
         <>
+          <div className="m-1 flex flex-1 justify-end">
+            <SortDropdownMenu
+              options={EVENTS_SORT_OPTIONS}
+              selected={query?.ordering?.toString()}
+              onSelect={setQuery}
+            />
+          </div>
+
           <div className="mt-4 flex w-full flex-col gap-4">
             <div className="flex max-h-[85vh] flex-col gap-4 overflow-y-auto overflow-x-hidden px-3">
               <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">

diff --git a/src/Locale/en/SortOptions.json b/src/Locale/en/SortOptions.json
@@ -9,6 +9,8 @@
   "facility__name,-last_consultation__current_bed__bed__name": "Bed No. N-1",
   "-review_time": "Latest review date first",
   "review_time": "Oldest review date first",
+  "taken_at": "Oldest taken date first",
+  "-taken_at": "Latest taken date first",
   "name": "Patient name A-Z",
   "-name": "Patient name Z-A",
   "bed__name": "Bed No. 1-N",