Merge pull request #1370 from vikashsprem/feat/drop-down-booking

Added dropdown in booking page assets management
Shelf-nu · Oct 28, 2024 · e23af94 · e23af94
2 parents 24ab75d + f798a3a
commit e23af94
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 19 deletions.
diff --git a/app/components/booking/booking-assets-column.tsx b/app/components/booking/booking-assets-column.tsx
@@ -1,11 +1,13 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import type { Kit } from "@prisma/client";
 import { AssetStatus, BookingStatus } from "@prisma/client";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { useLoaderData } from "@remix-run/react";
 import { useBookingStatusHelpers } from "~/hooks/use-booking-status";
 import { useUserRoleHelper } from "~/hooks/user-user-role-helper";
 import type { BookingWithCustodians } from "~/routes/_layout+/bookings";
 import type { AssetWithBooking } from "~/routes/_layout+/bookings.$bookingId.add-assets";
+import { tw } from "~/utils/tw";
 import { groupBy } from "~/utils/utils";
 import { AssetRowActionsDropdown } from "./asset-row-actions-dropdown";
 import { AvailabilityLabel } from "./availability-label";
@@ -60,6 +62,25 @@ export function BookingAssetsColumn() {
     [items]
   );
 
+  const [expandedKits, setExpandedKits] = useState<Record<string, boolean>>({});
+  /**
+   * Represents the visibility of booking assets in the UI.
+   * A value of 0 typically means all categories are hidden,
+   */
+  const [categoryVisibility, setCategoryVisibility] = useState<number>(
+    Object.values(groupedAssetsWithKits).length + assetsWithoutKits.length
+  );
+
+  const toggleKitExpansion = (kitId: string) => {
+    setExpandedKits((prev) => ({
+      ...prev,
+      [kitId]: !prev[kitId],
+    }));
+    expandedKits[kitId]
+      ? setCategoryVisibility(categoryVisibility + 1)
+      : setCategoryVisibility(categoryVisibility - 1);
+  };
+
   const manageAssetsButtonDisabled = useMemo(
     () =>
       !booking.from ||
@@ -140,11 +161,11 @@ export function BookingAssetsColumn() {
               />
             ) : (
               <>
-                <Table className="">
+                <Table className="border-collapse">
                   <ListHeader hideFirstColumn>
                     <Th>Name</Th>
                     <Th> </Th>
-                    <Th>Category</Th>
+                    {categoryVisibility > 0 && <Th>Category</Th>}
                     <Th> </Th>
                   </ListHeader>
                   <tbody>
@@ -158,10 +179,14 @@ export function BookingAssetsColumn() {
                     {/* List all the assets which are part of a kit */}
                     {Object.values(groupedAssetsWithKits).map((assets) => {
                       const kit = assets[0].kit as Kit;
+                      const isExpanded = expandedKits[kit.id] ?? false;
 
                       return (
                         <React.Fragment key={kit.id}>
-                          <ListItem item={kit} className="bg-gray-50">
+                          <ListItem
+                            item={kit}
+                            className="pseudo-border-bottom bg-gray-50"
+                          >
                             <Td className="max-w-full">
                               <Button
                                 to={`/kits/${kit.id}`}
@@ -172,7 +197,6 @@ export function BookingAssetsColumn() {
                                   {kit.name}
                                 </div>
                               </Button>
-
                               <p className="text-sm text-gray-600">
                                 {assets.length} assets
                               </p>
@@ -181,20 +205,48 @@ export function BookingAssetsColumn() {
                             <Td> </Td>
                             <Td> </Td>
 
-                            <Td className="pr-4 text-right">
-                              {(!isBase && isDraft) || isReserved ? (
-                                <KitRowActionsDropdown kit={kit} />
-                              ) : null}
+                            <Td className="pr-4 text-right align-middle">
+                              <div className="flex items-center justify-end gap-5">
+                                <Button
+                                  onClick={() => toggleKitExpansion(kit.id)}
+                                  variant="link"
+                                  className="text-center font-bold text-gray-600 hover:text-gray-900"
+                                >
+                                  <ChevronDownIcon
+                                    className={tw(
+                                      `size-6 ${
+                                        !isExpanded ? "rotate-180" : ""
+                                      }`
+                                    )}
+                                  />
+                                </Button>
+
+                                {(!isBase && isDraft) || isReserved ? (
+                                  <KitRowActionsDropdown kit={kit} />
+                                ) : null}
+                              </div>
                             </Td>
                           </ListItem>
-
-                          {assets.map((asset) => (
-                            <ListItem key={asset.id} item={asset}>
-                              <ListAssetContent
-                                item={asset as AssetWithBooking}
-                              />
-                            </ListItem>
-                          ))}
+                          {!isExpanded &&
+                            assets.map((asset) => (
+                              <ListItem
+                                key={asset.id}
+                                item={asset}
+                                motionProps={{
+                                  initial: { opacity: 0, y: -10 },
+                                  animate: { opacity: 1, y: 0 },
+                                  exit: { opacity: 0, y: 10 },
+                                  transition: {
+                                    duration: 0.3,
+                                    ease: "easeInOut",
+                                  },
+                                }}
+                              >
+                                <ListAssetContent
+                                  item={asset as AssetWithBooking}
+                                />
+                              </ListItem>
+                            ))}
                         </React.Fragment>
                       );
                     })}

diff --git a/app/components/list/list-item.tsx b/app/components/list/list-item.tsx
@@ -1,3 +1,5 @@
+import type { MotionProps } from "framer-motion";
+import { motion } from "framer-motion";
 import { tw } from "~/utils/tw";
 
 export interface ListItemData {
@@ -10,15 +12,17 @@ export interface ListItemProps {
   children: React.ReactNode;
   navigate?: (id: string, item: ListItemData) => void;
   className?: string;
+  motionProps?: MotionProps; // Optional animation props passed to the motion component
 }
 
 export const ListItem = ({
   item,
   children,
   navigate,
   className,
+  motionProps = {},
 }: ListItemProps) => (
-  <tr
+  <motion.tr
     onClick={(event) => {
       if (navigate) {
         // Check if Ctrl or Cmd key is pressed
@@ -46,7 +50,8 @@ export const ListItem = ({
       willChange: "transform",
       backgroundAttachment: "initial",
     }}
+    {...motionProps}
   >
     {children}
-  </tr>
+  </motion.tr>
 );
diff --git a/app/styles/global.css b/app/styles/global.css
@@ -324,3 +324,7 @@ dialog {
 .bulk-tagging-dialog .dialog-body {
   @apply overflow-visible;
 }
+
+.pseudo-border-bottom {
+  @apply after:absolute after:inset-x-0 after:bottom-0 after:border-b after:border-gray-200 after:content-[''] hover:bg-gray-100;
+}