Merge pull request #1682 from rockingrohit9639/feature/bookings-sorting

feat(booking-sorting): add SortBy on bookings index

Author: DonKoko

app/modules/booking/service.server.ts

@@ -8,6 +8,7 @@ import type {
   User,
   UserOrganization,
 } from "@prisma/client";
+import type { SortingDirection } from "~/components/list/filters/sort-by";
 import { db } from "~/database/db.server";
 import { bookingUpdatesTemplateString } from "~/emails/bookings-updates-template";
 import { sendEmail } from "~/emails/mail.server";
@@ -542,6 +543,8 @@ export async function getBookings(params: {
   extraInclude?: Prisma.BookingInclude;
   /** Controls whether entries should be paginated or not */
   takeAll?: boolean;
+  orderBy?: string;
+  orderDirection?: SortingDirection;
 }) {
   const {
     organizationId,
@@ -558,6 +561,8 @@ export async function getBookings(params: {
     userId,
     extraInclude,
     takeAll = false,
+    orderBy = "from",
+    orderDirection = "asc",
   } = params;
 
   try {
@@ -692,7 +697,7 @@ export async function getBookings(params: {
           },
           ...(extraInclude || undefined),
         },
-        orderBy: { from: "asc" },
+        orderBy: { [orderBy]: orderDirection },
       }),
       db.booking.count({ where }),
     ]);

app/routes/_layout+/bookings.tsx

@@ -19,6 +19,8 @@ import LineBreakText from "~/components/layout/line-break-text";
 import { List } from "~/components/list";
 import { ListContentWrapper } from "~/components/list/content-wrapper";
 import { Filters } from "~/components/list/filters";
+import type { SortingDirection } from "~/components/list/filters/sort-by";
+import { SortBy } from "~/components/list/filters/sort-by";
 import { Badge } from "~/components/shared/badge";
 import { Button } from "~/components/shared/button";
 import { Td, Th } from "~/components/table";
@@ -80,6 +82,10 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
     const cookie = await updateCookieWithPerPage(request, perPageParam);
     const { perPage } = cookie;
 
+    const orderBy = searchParams.get("orderBy") ?? "from";
+    const orderDirection = (searchParams.get("orderDirection") ??
+      "asc") as SortingDirection;
+
     /**
      * For self service and base users, we need to get the teamMember to be able to filter by it as well.
      * This is to handle a case when a booking was assigned when there wasn't a user attached to a team member but they were later on linked.
@@ -127,6 +133,8 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
         }),
         custodianTeamMemberIds: teamMemberIds,
         ...selfServiceData,
+        orderBy,
+        orderDirection,
       }),
 
       // team members/custodian
@@ -222,6 +230,12 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
   return defaultShouldRevalidate;
 };
 
+const BOOKING_SORTING_OPTIONS = {
+  from: "From Date",
+  to: "To Date",
+  name: "Name",
+} as const;
+
 export default function BookingsIndexPage({
   className,
   disableBulkActions = false,
@@ -292,6 +306,13 @@ export default function BookingsIndexPage({
         <Filters
           slots={{
             "left-of-search": <StatusFilter statusItems={BookingStatus} />,
+            "right-of-search": (
+              <SortBy
+                sortingOptions={BOOKING_SORTING_OPTIONS}
+                defaultSortingBy="from"
+                defaultSortingDirection="asc"
+              />
+            ),
           }}
         >
           <When