Edit visibility for options depending on administrator status

compass/components/Table/RowOpenAction.tsx

@@ -27,7 +27,7 @@ export function RowOpenAction<T extends DataPoint>({
     updateRoute,
 }: RowOpenActionProps<T>) {
     return (
-        <div className="font-semibold group flex flex-row items-center justify-between pr-2">
+        <div className="font-semibold group flex flex-row items-center justify-between px-2">
             {title}
             <span>
                 <Drawer

compass/components/Table/RowOptionMenu.tsx

@@ -5,41 +5,78 @@ import {
     ArrowUpRightIcon,
     EllipsisVerticalIcon,
     EyeSlashIcon,
+    EyeIcon,
 } from "@heroicons/react/24/solid";
 import Button from "../Button";
 import { useState, useEffect, useRef } from "react";
 import { RowOption } from "./RowOption";
 
-export const RowOptionMenu = ({ onDelete, onHide }) => {
+interface RowOptionMenuProps {
-    const [menuOpen, setMenuOpen] = useState(false);
+    onDelete?: () => void;
-    const openMenu = () => setMenuOpen(true);
+    onHide: () => void;
-    const closeMenu = () => setMenuOpen(false);
+    visible: boolean;
+}
 
-    // TODO: Hide menu if clicked elsewhere
+export const RowOptionMenu = ({
+    onDelete,
+    onHide,
+    visible,
+}: RowOptionMenuProps) => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                menuRef.current &&
+                buttonRef.current &&
+                !menuRef.current.contains(event.target as Node) &&
+                !buttonRef.current.contains(event.target as Node)
+            ) {
+                setMenuOpen(false);
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
 
     return (
         <>
             <button
+                ref={buttonRef}
                 className="items-end"
                 onClick={() => setMenuOpen(!menuOpen)}
             >
                 <EllipsisVerticalIcon className="h-4" />
             </button>
             <div
+                ref={menuRef}
                 className={
                     "justify-start border border-gray-200 shadow-lg flex flex-col absolute bg-white w-auto p-2 rounded [&>*]:rounded z-10" +
                     (!menuOpen ? " invisible" : "")
                 }
             >
-                <RowOption icon={TrashIcon} label="Delete" onClick={onDelete} />
+                {onDelete && (
                     <RowOption
+                        icon={TrashIcon}
+                        label="Delete"
+                        onClick={onDelete}
+                    />
+                )}
+                {/* <RowOption
                     icon={ArrowUpRightIcon}
                     label="Open"
-                    onClick={() => {
+                    onClick={() => {}}
-                        /* handle open */
+                /> */}
-                    }}
+                <RowOption
+                    icon={visible ? EyeSlashIcon : EyeIcon}
+                    label={visible ? "Hide" : "Show"}
+                    onClick={onHide}
                 />
-                <RowOption icon={EyeSlashIcon} label="Hide" onClick={onHide} />
             </div>
         </>
     );

compass/components/Table/Table.tsx

@@ -97,9 +97,9 @@ export default function Table<T extends DataPoint>({
         return response;
     };
 
-    // /** Sorting function based on visibility */
+    /** Sorting function based on visibility */
-    // const visibilitySort = (a: T, b: T) =>
+    const visibilitySort = (a: T, b: T) =>
-    //     a.visible === b.visible ? 0 : a.visible ? -1 : 1;
+        a.visible === b.visible ? 0 : a.visible ? -1 : 1;
 
     // // Sort data on load
     // useEffect(() => {
@@ -115,36 +115,43 @@ export default function Table<T extends DataPoint>({
     //     );
     // };
 
-    // const hideData = (dataId: number) => {
+    const hideData = (dataId: number) => {
-    //     console.log(`Toggling visibility for data with ID: ${dataId}`);
+        console.log(`Toggling visibility for data with ID: ${dataId}`);
-    //     setData((currentData) => {
+        setData((currentData) => {
-    //         const newData = currentData
+            const newData = currentData
-    //             .map((data) =>
+                .map((data) =>
-    //                 data.id === dataId
+                    data.id === dataId
-    //                     ? { ...data, visible: !data.visible }
+                        ? { ...data, visible: !data.visible }
-    //                     : data
+                        : data
-    //             )
+                )
-    //             .sort(visibilitySort);
+                .sort((a, b) => {
+                    // First sort by visibility
+                    const visibilityResult = visibilitySort(a, b);
+                    if (visibilityResult !== 0) return visibilityResult;
+                    // Then sort by id
+                    return a.id - b.id;
+                });
 
-    //         console.log(newData);
+            console.log(newData);
-    //         return newData;
+            return newData;
-    //     });
+        });
-    // };
+    };
 
     // Add data manipulation options to the first column
+    if (isAdmin) {
         columns.unshift(
             columnHelper.display({
                 id: "options",
                 cell: (props) => (
                     <RowOptionMenu
-                    onDelete={() => {}}
+                        onDelete={() => console.log("delete")}
-                    onHide={() => {}}
+                        onHide={() => hideData(props.row.original.id)}
-                    // onDelete={() => deleteData(props.row.original.id)}
+                        visible={props.row.original.visible}
-                    // onHide={() => hideData(props.row.original.id)}
                     />
                 ),
             })
         );
+    }
 
     // Searching
     const [query, setQuery] = useState("");
@@ -186,7 +193,12 @@ export default function Table<T extends DataPoint>({
                                     scope="col"
                                     className={
                                         "p-2 border-gray-200 border-y font-medium " +
-                                        (1 < i && i < columns.length - 1
+                                        ((!isAdmin &&
+                                            0 < i &&
+                                            i < columns.length - 1) ||
+                                        (isAdmin &&
+                                            1 < i &&
+                                            i < columns.length - 1)
                                             ? "border-x"
                                             : "")
                                     }
@@ -215,9 +227,11 @@ export default function Table<T extends DataPoint>({
                                 {row.getVisibleCells().map((cell, i) => (
                                     <td
                                         key={cell.id}
-                                        className={
+                                        className={`relative first:text-left first:px-0 last:border-none ${
-                                            "[&:nth-child(n+3)]:border-x relative first:text-left first:px-0 last:border-none"
+                                            isAdmin
-                                        }
+                                                ? "[&:nth-child(n+3)]"
+                                                : "[&:nth-child(n+2)]"
+                                        }:border-x`}
                                     >
                                         {flexRender(
                                             cell.column.columnDef.cell,