Merge pull request #1273 from rajeshj11/feat-969-show-table-with-hscroll

feat:show table in mobile with hscroll
Shelf-nu · Aug 22, 2024 · 51231e1 · 51231e1
2 parents 4852bce + 42bfa77
commit 51231e1
Show file tree

Hide file tree

Showing 19 changed files with 195 additions and 100 deletions.
diff --git a/app/components/dashboard/most-scanned-assets.tsx b/app/components/dashboard/most-scanned-assets.tsx
@@ -76,7 +76,7 @@ const Row = ({
 }) => (
   <>
     {/* Item */}
-    <Td className="w-full whitespace-normal p-0 md:p-0">
+    <Td className="w-full min-w-[130px] whitespace-normal p-0 md:p-0">
       <div className="flex justify-between gap-3 px-4 py-3 md:justify-normal md:px-6">
         <div className="flex items-center gap-3">
           <div className="flex size-12 shrink-0 items-center justify-center">
@@ -106,6 +106,6 @@ const Row = ({
     </Td>
 
     {/* Category */}
-    <Td className="hidden md:table-cell">{item.scanCount} scans</Td>
+    <Td>{item.scanCount} scans</Td>
   </>
 );
diff --git a/app/components/dashboard/most-scanned-categories.tsx b/app/components/dashboard/most-scanned-categories.tsx
@@ -78,6 +78,6 @@ const Row = ({
     </Td>
 
     {/* Category */}
-    <Td className="hidden md:table-cell">{item.scanCount} scans</Td>
+    <Td>{item.scanCount} scans</Td>
   </>
 );
diff --git a/app/components/dashboard/newest-assets.tsx b/app/components/dashboard/newest-assets.tsx
@@ -109,7 +109,7 @@ const Row = ({
       </Td>
 
       {/* Category */}
-      <Td className="hidden md:table-cell">
+      <Td>
         {category ? (
           <Badge color={category.color} withDot={false}>
             {category.name}

diff --git a/app/components/list/bulk-actions/bulk-list-header.tsx b/app/components/list/bulk-actions/bulk-list-header.tsx
@@ -26,7 +26,7 @@ export default function BulkListHeader() {
   }
 
   return (
-    <Th className="table-cell md:pl-4 md:pr-3">
+    <Th className="md:pl-4 md:pr-3">
       {partialItemsSelected ? (
         <PartialCheckboxIcon
           className="cursor-pointer"

diff --git a/app/components/list/bulk-actions/bulk-list-item-checkbox.tsx b/app/components/list/bulk-actions/bulk-list-item-checkbox.tsx
@@ -27,10 +27,7 @@ export default function BulkListItemCheckbox({
   }
 
   return (
-    <Td
-      className="table-cell md:pl-4 md:pr-3"
-      onClick={handleBulkItemSelection}
-    >
+    <Td className="md:pl-4 md:pr-3" onClick={handleBulkItemSelection}>
       <FakeCheckbox
         className={tw("text-white", checked ? "text-primary" : "")}
         checked={checked}

diff --git a/app/components/list/index.tsx b/app/components/list/index.tsx
@@ -120,7 +120,7 @@ export const List = React.forwardRef<HTMLDivElement, ListProps>(function List(
     <div
       ref={ref}
       className={tw(
-        "-mx-4 overflow-x-auto border border-gray-200  bg-white md:mx-0 md:rounded",
+        "-mx-4  overflow-auto border border-gray-200  bg-white md:mx-0 md:rounded",
         className
       )}
     >

diff --git a/app/components/table.tsx b/app/components/table.tsx
@@ -1,5 +1,6 @@
 import type { TdHTMLAttributes } from "react";
 import React from "react";
+import { useTableIsOverflowing } from "~/hooks/use-table-overflow";
 import { tw } from "~/utils/tw";
 
 export function Table({
@@ -9,10 +10,20 @@ export function Table({
   children: React.ReactNode;
   className?: string;
 }) {
+  const { containerRef, isOverflowing } = useTableIsOverflowing();
+
   return (
-    <table className={tw("w-full table-auto border-collapse", className)}>
-      {children}
-    </table>
+    <div className={`relative ${isOverflowing ? "overflowing" : ""}`}>
+      <div className="fixed-gradient"></div>
+      <div
+        ref={containerRef}
+        className="scrollbar-top scrollbar-always-visible"
+      >
+        <table className={tw("w-full table-auto border-collapse", className)}>
+          {children}
+        </table>
+      </div>
+    </div>
   );
 }
 
@@ -56,7 +67,10 @@ interface TdProps extends TdHTMLAttributes<HTMLTableCellElement> {
 export function Td({ children, className, ...props }: TdProps) {
   return (
     <td
-      className={tw("whitespace-nowrap border-b p-4 md:px-6", className)}
+      className={tw(
+        "max-w-[200px] truncate whitespace-nowrap border-b p-4 md:px-6",
+        className
+      )}
       {...props}
     >
       {children}

diff --git a/app/hooks/use-table-overflow.ts b/app/hooks/use-table-overflow.ts
@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from "react";
+
+// Custom hook to handle table right side scroll fade effect
+export const useTableIsOverflowing = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      const container = containerRef.current;
+      if (container) {
+        const hasOverflow = container.scrollWidth > container.clientWidth;
+        const hasReachedEnd =
+          container.scrollLeft + container.clientWidth >= container.scrollWidth;
+        setIsOverflowing(hasOverflow && !hasReachedEnd);
+      }
+    };
+
+    checkOverflow(); // Initial check
+    if (window) {
+      window.addEventListener("resize", checkOverflow); // Check on resize
+    }
+
+    // Ensure the scroll event listener is added correctly
+    const container = containerRef.current;
+    if (container) {
+      container.addEventListener("scroll", checkOverflow);
+    }
+
+    return () => {
+      if (window) {
+        window.removeEventListener("resize", checkOverflow);
+      }
+      if (container) {
+        container.removeEventListener("scroll", checkOverflow);
+      }
+    };
+  }, []);
+
+  return { containerRef, isOverflowing };
+};
diff --git a/app/routes/_layout+/admin-dashboard+/qrs.tsx b/app/routes/_layout+/admin-dashboard+/qrs.tsx
@@ -124,16 +124,16 @@ export default function Area51() {
           hideFirstHeaderColumn
           headerChildren={
             <>
-              <Th className="hidden md:table-cell">QR id</Th>
-              <Th className="hidden md:table-cell">Asset</Th>
-              <Th className="hidden md:table-cell">Kit</Th>
-              <Th className="hidden md:table-cell">Organization ID</Th>
-              <Th className="hidden md:table-cell">User ID</Th>
-              <Th className="hidden md:table-cell">
+              <Th>QR id</Th>
+              <Th>Asset</Th>
+              <Th>Kit</Th>
+              <Th>Organization ID</Th>
+              <Th>User ID</Th>
+              <Th>
                 <span title="Only available for batched codes">Printed</span>
               </Th>
-              <Th className="hidden md:table-cell">Batch</Th>
-              <Th className="hidden md:table-cell">Created at</Th>
+              <Th>Batch</Th>
+              <Th>Created at</Th>
             </>
           }
         />

diff --git a/app/routes/_layout+/assets._index.tsx b/app/routes/_layout+/assets._index.tsx
@@ -484,25 +484,24 @@ export const AssetsList = ({
          * Using remix's navigate is the default behaviour, however it can receive also a custom function
          */
         navigate={(itemId) => navigate(`/assets/${itemId}`)}
-        className=" overflow-x-visible md:overflow-x-auto"
         bulkActions={disableBulkActions ? undefined : <BulkActionsDropdown />}
         customEmptyStateContent={
           customEmptyState ? customEmptyState : undefined
         }
         headerChildren={
           <>
-            <Th className="hidden md:table-cell">Category</Th>
-            <Th className="hidden md:table-cell">Tags</Th>
+            <Th>Category</Th>
+            <Th>Tags</Th>
             <When
               truthy={userHasPermission({
                 roles,
                 entity: PermissionEntity.custody,
                 action: PermissionAction.read,
               })}
             >
-              <Th className="hidden md:table-cell">Custodian</Th>
+              <Th>Custodian</Th>
             </When>
-            <Th className="hidden md:table-cell">Location</Th>
+            <Th>Location</Th>
           </>
         }
       />
@@ -580,15 +579,11 @@ const ListAssetContent = ({
               </div>
             </div>
           </div>
-
-          <button className="block md:hidden">
-            <ChevronRight />
-          </button>
         </div>
       </Td>
 
       {/* Category */}
-      <Td className="hidden md:table-cell">
+      <Td>
         {category ? (
           <Badge color={category.color} withDot={false}>
             {category.name}
@@ -601,7 +596,7 @@ const ListAssetContent = ({
       </Td>
 
       {/* Tags */}
-      <Td className="hidden text-left md:table-cell">
+      <Td className="text-left">
         <ListItemTagsColumn tags={tags} />
       </Td>
 
@@ -613,7 +608,7 @@ const ListAssetContent = ({
           action: PermissionAction.read,
         })}
       >
-        <Td className="hidden md:table-cell">
+        <Td>
           {custody ? (
             <GrayBadge>
               <>
@@ -648,9 +643,7 @@ const ListAssetContent = ({
       </When>
 
       {/* Location */}
-      <Td className="hidden md:table-cell">
-        {location?.name ? <GrayBadge>{location.name}</GrayBadge> : null}
-      </Td>
+      <Td>{location?.name ? <GrayBadge>{location.name}</GrayBadge> : null}</Td>
     </>
   );
 };

diff --git a/app/routes/_layout+/bookings.tsx b/app/routes/_layout+/bookings.tsx
@@ -9,7 +9,6 @@ import BulkActionsDropdown from "~/components/booking/bulk-actions-dropdown";
 import { StatusFilter } from "~/components/booking/status-filter";
 import { ErrorContent } from "~/components/errors";
 
-import { ChevronRight } from "~/components/icons/library";
 import ContextualModal from "~/components/layout/contextual-modal";
 import Header from "~/components/layout/header";
 import type { HeaderData } from "~/components/layout/header/types";
@@ -217,16 +216,15 @@ export default function BookingsIndexPage({
           bulkActions={disableBulkActions ? undefined : <BulkActionsDropdown />}
           ItemComponent={ListAssetContent}
           navigate={(id) => navigate(`/bookings/${id}`)}
-          className="overflow-x-visible md:overflow-x-auto"
           headerChildren={
             <>
-              <Th className="hidden md:table-cell" />
-              <Th className="hidden md:table-cell">Description</Th>
+              <Th />
+              <Th>Description</Th>
 
-              <Th className="hidden md:table-cell">From</Th>
-              <Th className="hidden md:table-cell">To</Th>
-              <Th className="hidden md:table-cell">Custodian</Th>
-              <Th className="hidden md:table-cell">Created by</Th>
+              <Th>From</Th>
+              <Th>To</Th>
+              <Th>Custodian</Th>
+              <Th>Created by</Th>
             </>
           }
         />
@@ -301,10 +299,6 @@ const ListAssetContent = ({
               </div>
             </div>
           </div>
-
-          <button className="block md:hidden">
-            <ChevronRight />
-          </button>
         </div>
       </Td>
 
@@ -314,7 +308,7 @@ const ListAssetContent = ({
        * 2. Have custody
        * 3. Have other bookings with the same period - this I am not sure how to handle yet
        * */}
-      <Td className="hidden md:table-cell">
+      <Td>
         {hasUnavaiableAssets ? (
           <AvailabilityBadge
             badgeText={"Includes unavailable assets"}
@@ -326,12 +320,12 @@ const ListAssetContent = ({
         ) : null}
       </Td>
 
-      <Td className="hidden md:table-cell">
+      <Td className="max-w-62">
         {item.description ? <LineBreakText text={item.description} /> : null}
       </Td>
 
       {/* From */}
-      <Td className="hidden md:table-cell">
+      <Td>
         {item.displayFrom ? (
           <div className="min-w-[130px]">
             <span className="word-break mb-1 block font-medium">
@@ -343,7 +337,7 @@ const ListAssetContent = ({
       </Td>
 
       {/* To */}
-      <Td className="hidden md:table-cell">
+      <Td>
         {item.displayTo ? (
           <div className="min-w-[130px]">
             <span className="word-break mb-1 block font-medium">
@@ -355,7 +349,7 @@ const ListAssetContent = ({
       </Td>
 
       {/* Custodian */}
-      <Td className="hidden md:table-cell">
+      <Td>
         {item?.custodianUser ? (
           <UserBadge
             img={
@@ -372,7 +366,7 @@ const ListAssetContent = ({
       </Td>
 
       {/* Created by */}
-      <Td className="hidden md:table-cell">
+      <Td>
         <UserBadge
           img={
             item?.creator?.profilePicture || "/static/images/default_pfp.jpg"

diff --git a/app/routes/_layout+/categories.tsx b/app/routes/_layout+/categories.tsx
@@ -12,6 +12,7 @@ import { DeleteCategory } from "~/components/category/delete-category";
 import { ErrorContent } from "~/components/errors";
 import Header from "~/components/layout/header";
 import type { HeaderData } from "~/components/layout/header/types";
+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";
@@ -166,9 +167,9 @@ export default function CategoriesPage() {
           ItemComponent={CategoryItem}
           headerChildren={
             <>
-              <Th className="hidden md:table-cell">Description</Th>
-              <Th className="hidden md:table-cell">Assets</Th>
-              <Th className="hidden md:table-cell">Actions</Th>
+              <Th>Description</Th>
+              <Th>Assets</Th>
+              <Th>Actions</Th>
             </>
           }
         />
@@ -192,8 +193,15 @@ const CategoryItem = ({
         {item.name}
       </Badge>
     </Td>
-    <Td className="w-3/4 text-gray-500" title="Description">
-      {item.description}
+    <Td className="max-w-62 md:w-3/4">
+      {item.description ? (
+        <LineBreakText
+          className="md:w-3/4"
+          text={item.description}
+          numberOfLines={3}
+          charactersPerLine={60}
+        />
+      ) : null}
     </Td>
     <Td>{item._count.assets}</Td>
     <Td>