Merge pull request #1695 from Shelf-nu/1675-feature-request-export-of-bookings-to-csv

feature: export of bookings to csv

Author: DonKoko

app/components/booking/export-bookings-button.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { useAtomValue } from "jotai";
+import { selectedBulkItemsAtom } from "~/atoms/list";
+import { useSearchParams } from "~/hooks/search-params";
+import { ALL_SELECTED_KEY, isSelectingAllItems } from "~/utils/list";
+import { Button } from "../shared/button";
+import { Spinner } from "../shared/spinner";
+
+export function ExportBookingsButton() {
+  const selectedBookings = useAtomValue(selectedBulkItemsAtom);
+  const disabled = selectedBookings.length === 0;
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [searchParams] = useSearchParams();
+
+  const allSelected = isSelectingAllItems(selectedBookings);
+  const title = `Export selection ${
+    disabled ? "" : allSelected ? "(All)" : `(${selectedBookings.length})`
+  }`;
+
+  /** Get the bookingsIds from the atom and add them to bookingsIds search param */
+  const bookingsIds = selectedBookings.map((booking) => booking.id);
+
+  const hasAllSelected = bookingsIds.includes(ALL_SELECTED_KEY);
+  let fetchSearchParams = "";
+  /**
+   * We have to check if ALL_SELECTED_KEY is included, and if it is, we need to strip the bookingsIds from the searchParams and send all the rest of the search params to the loader
+   * Then inside the bookings.export loader we can know how to query the bookings
+   * It is important to keep the ALL_SELECTED_KEY because that helps us know how to query
+   */
+  if (hasAllSelected) {
+    const searchParamsCopy = new URLSearchParams(searchParams);
+    // Delete bookingsIds
+    searchParamsCopy.delete("bookingsIds");
+    // Add back ALL_SELECTED_KEY to bookingsIds
+    searchParamsCopy.append("bookingsIds", ALL_SELECTED_KEY);
+    fetchSearchParams = `?${searchParamsCopy.toString()}`;
+  } else {
+    // In this case only specific keys are selected so we dont need the filters, we just pass the ids of the selected bookings
+    fetchSearchParams = `?bookingsIds=${bookingsIds.join(",")}`;
+  }
+
+  /** Handle the download via fetcher and track state */
+  const handleExport = async () => {
+    setIsDownloading(true);
+    try {
+      const url = `/bookings/export/bookings-${new Date()
+        .toISOString()
+        .slice(0, 10)}.csv`;
+      const response = await fetch(`${url}${fetchSearchParams}`);
+      const blob = await response.blob();
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.setAttribute("download", url.split("/").pop() || "export.csv");
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleExport}
+      variant="secondary"
+      className="font-medium"
+      title={title}
+      disabled={
+        disabled
+          ? { reason: "You must select at least 1 booking to export" }
+          : isDownloading
+      }
+    >
+      <div className="flex items-center gap-1">
+        {isDownloading ? (
+          <span>
+            <Spinner />
+          </span>
+        ) : null}{" "}
+        <span>{title}</span>
+      </div>
+    </Button>
+  );
+}

app/modules/booking/service.server.ts

@@ -14,13 +14,14 @@ import { bookingUpdatesTemplateString } from "~/emails/bookings-updates-template
 import { sendEmail } from "~/emails/mail.server";
 import { getStatusClasses, isOneDayEvent } from "~/utils/calendar";
 import { getDateTimeFormat } from "~/utils/client-hints";
+import { updateCookieWithPerPage } from "~/utils/cookies.server";
 import { calcTimeDifference } from "~/utils/date-fns";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import type { ErrorLabel } from "~/utils/error";
 import { isLikeShelfError, isNotFoundError, ShelfError } from "~/utils/error";
 import { getRedirectUrlFromRequest } from "~/utils/http";
 import { getCurrentSearchParams } from "~/utils/http.server";
-import { ALL_SELECTED_KEY } from "~/utils/list";
+import { ALL_SELECTED_KEY, getParamsValues } from "~/utils/list";
 import { Logger } from "~/utils/logger";
 import { QueueNames, scheduler } from "~/utils/scheduler.server";
 import type { MergeInclude } from "~/utils/utils";
@@ -146,7 +147,7 @@ async function updateBookingKitStates({
   }
 }
 
-const BOOKING_COMMON_INCLUDE = {
+export const BOOKING_COMMON_INCLUDE = {
   custodianTeamMember: true,
   custodianUser: true,
 } as Prisma.BookingInclude;
@@ -524,6 +525,75 @@ export async function upsertBooking(
   }
 }
 
+export async function getBookingsFilterData({
+  request,
+  isSelfServiceOrBase,
+  userId,
+  organizationId,
+}: {
+  request: Request;
+  isSelfServiceOrBase: boolean;
+  userId: string;
+  organizationId: string;
+}) {
+  const searchParams = getCurrentSearchParams(request);
+  const { page, perPageParam, search, status, teamMemberIds } =
+    getParamsValues(searchParams);
+  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.
+   * This is to ensure that the booking is still visible to the user that was assigned to it.
+   * Also this shouldn't really happen as we now have a fix implemented when accepting invites,
+   * to make sure it doesnt happen, hwoever its good to keep this as an extra safety thing.
+   * Ideally in the future we should remove this as it adds another query to the db
+   * @TODO this can safely be remove 3-6 months after this commit
+   */
+  let selfServiceData = null;
+  if (isSelfServiceOrBase) {
+    const teamMember = await db.teamMember.findFirst({
+      where: {
+        userId,
+        organizationId,
+      },
+    });
+    if (!teamMember) {
+      throw new ShelfError({
+        cause: null,
+        title: "Team member not found",
+        message:
+          "You are not part of a team in this organization. Please contact your organization admin to resolve this",
+        label: "Booking",
+        shouldBeCaptured: false,
+      });
+    }
+    selfServiceData = {
+      // If the user is self service, we only show bookings that belong to that user)
+      custodianUserId: userId,
+      custodianTeamMemberId: teamMember.id,
+    };
+  }
+
+  return {
+    searchParams,
+    cookie,
+    page,
+    perPage,
+    search,
+    status,
+    teamMemberIds,
+    orderBy,
+    orderDirection,
+    selfServiceData,
+  };
+}
+
 export async function getBookings(params: {
   organizationId: Organization["id"];
   /** Page number. Starts at 1 */
@@ -682,6 +752,7 @@ export async function getBookings(params: {
           ...BOOKING_COMMON_INCLUDE,
           assets: {
             select: {
+              title: true,
               id: true,
               custody: true,
               availableToBook: true,

app/modules/booking/utils.server.ts

@@ -1,11 +1,11 @@
 import type { BookingStatus, Organization, Prisma } from "@prisma/client";
 import type { HeaderData } from "~/components/layout/header/types";
-import { getClientHint, getDateTimeFormat } from "~/utils/client-hints";
+import { getClientHint } from "~/utils/client-hints";
 import type { ResponsePayload } from "~/utils/http.server";
 import { getCurrentSearchParams } from "~/utils/http.server";
 import { getParamsValues } from "~/utils/list";
 // eslint-disable-next-line import/no-cycle
-import { getBookings } from "./service.server";
+import { formatBookingsDates, getBookings } from "./service.server";
 
 export function getBookingWhereInput({
   organizationId,
@@ -111,33 +111,7 @@ export async function loadBookingsData({
   const hints = getClientHint(request);
 
   // Format booking dates
-  const items = bookings.map((b) => {
-    if (b.from && b.to) {
-      const from = new Date(b.from);
-      const displayFrom = getDateTimeFormat(request, {
-        dateStyle: "short",
-        timeStyle: "short",
-      }).format(from);
-
-      const to = new Date(b.to);
-      const displayTo = getDateTimeFormat(request, {
-        dateStyle: "short",
-        timeStyle: "short",
-      }).format(to);
-
-      return {
-        ...b,
-        displayFrom: displayFrom.split(","),
-        displayTo: displayTo.split(","),
-        metadata: {
-          ...b,
-          displayFrom: displayFrom.split(","),
-          displayTo: displayTo.split(","),
-        },
-      };
-    }
-    return b;
-  });
+  const items = formatBookingsDates(bookings, request);
 
   return {
     showModal: true,

app/routes/_layout+/assets.$assetId.bookings.tsx

@@ -3,10 +3,12 @@ import { json, type LoaderFunctionArgs } from "@remix-run/node";
 import { z } from "zod";
 import type { HeaderData } from "~/components/layout/header/types";
 import { hasGetAllValue } from "~/hooks/use-model-filters";
-import { getBookings } from "~/modules/booking/service.server";
+import {
+  formatBookingsDates,
+  getBookings,
+} from "~/modules/booking/service.server";
 import { setSelectedOrganizationIdCookie } from "~/modules/organization/context.server";
 import { getTeamMemberForCustodianFilter } from "~/modules/team-member/service.server";
-import { getDateTimeFormat } from "~/utils/client-hints";
 import {
   setCookie,
   updateCookieWithPerPage,
@@ -97,28 +99,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
     };
 
     /** We format the dates on the server based on the users timezone and locale  */
-    const items = bookings.map((b) => {
-      if (b.from && b.to) {
-        const from = new Date(b.from);
-        const displayFrom = getDateTimeFormat(request, {
-          dateStyle: "short",
-          timeStyle: "short",
-        }).format(from);
-
-        const to = new Date(b.to);
-        const displayTo = getDateTimeFormat(request, {
-          dateStyle: "short",
-          timeStyle: "short",
-        }).format(to);
-
-        return {
-          ...b,
-          displayFrom: displayFrom.split(","),
-          displayTo: displayTo.split(","),
-        };
-      }
-      return b;
-    });
+    const items = formatBookingsDates(bookings, request);
 
     return json(
       data({

app/routes/_layout+/bookings.export.$fileName[.csv].tsx

@@ -0,0 +1,62 @@
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import { z } from "zod";
+import { exportBookingsFromIndexToCsv } from "~/utils/csv.server";
+import { makeShelfError, ShelfError } from "~/utils/error";
+import { error, getCurrentSearchParams } from "~/utils/http.server";
+import {
+  PermissionAction,
+  PermissionEntity,
+} from "~/utils/permissions/permission.data";
+import { requirePermission } from "~/utils/roles.server";
+import { assertCanUseBookings } from "~/utils/subscription.server";
+
+export const ExportBookingsSchema = z.object({
+  bookingIds: z.array(z.string()).min(1),
+});
+
+export const loader = async ({ context, request }: LoaderFunctionArgs) => {
+  const authSession = context.getSession();
+  const { userId } = authSession;
+
+  try {
+    const { organizationId, currentOrganization, isSelfServiceOrBase } =
+      await requirePermission({
+        userId: authSession.userId,
+        request,
+        entity: PermissionEntity.booking,
+        action: PermissionAction.export,
+      });
+
+    assertCanUseBookings(currentOrganization);
+
+    const searchParams = getCurrentSearchParams(request);
+    const bookingsIds = searchParams.get("bookingsIds");
+
+    if (!bookingsIds) {
+      throw new ShelfError({
+        cause: null,
+        message: "No bookings selected",
+        label: "Booking",
+      });
+    }
+
+    /** Join the rows with a new line */
+    const csvString = await exportBookingsFromIndexToCsv({
+      request,
+      organizationId,
+      bookingsIds: bookingsIds.split(","),
+      userId,
+      isSelfServiceOrBase,
+    });
+
+    return new Response(csvString, {
+      status: 200,
+      headers: {
+        "content-type": "text/csv",
+      },
+    });
+  } catch (cause) {
+    const reason = makeShelfError(cause, { userId });
+    return json(error(reason), { status: reason.status });
+  }
+};