From 8258ba26661f537f95aa9cab40bb66bbb39d2d39 Mon Sep 17 00:00:00 2001 From: "Andy Chan (12beesinatrenchcoat)" Date: Fri, 29 Mar 2024 14:11:01 -0400 Subject: [PATCH 1/4] Rename RowAction -> RowOpenAction --- compass/components/Table/Index.tsx | 2 ++ compass/components/Table/{RowAction.tsx => RowOpenAction.tsx} | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) rename compass/components/Table/{RowAction.tsx => RowOpenAction.tsx} (91%) diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx index 5a12c1b..d0c432a 100644 --- a/compass/components/Table/Index.tsx +++ b/compass/components/Table/Index.tsx @@ -10,6 +10,7 @@ import { } from "@tanstack/react-table"; import { useState } from "react"; import { RowAction } from "./RowAction"; +import { RowOpenAction } from "./RowOpenAction"; import { TableAction } from "./TableAction"; const usersExample = usersImport as unknown as User[]; @@ -32,6 +33,7 @@ export const Table = () => { const columns = [ columnHelper.accessor("username", { cell: (info) => , + cell: (info) => , }), columnHelper.accessor("role", { cell: (info) => info.renderValue(), diff --git a/compass/components/Table/RowAction.tsx b/compass/components/Table/RowOpenAction.tsx similarity index 91% rename from compass/components/Table/RowAction.tsx rename to compass/components/Table/RowOpenAction.tsx index 37b0215..30d1cd3 100644 --- a/compass/components/Table/RowAction.tsx +++ b/compass/components/Table/RowOpenAction.tsx @@ -1,14 +1,14 @@ import Drawer from "@/components/page/Drawer"; import {ChangeEvent, useState} from "react"; -export const RowAction = ({ title }) => { +export const RowOpenAction = ({ title }) => { const [pageContent, setPageContent] = useState("") const handleDrawerContentChange = (newContent) => { setPageContent(newContent); }; - + return (
From a59f9d784a1e242366c2f2a32b50132e0ffa0de3 Mon Sep 17 00:00:00 2001 From: "Andy Chan (12beesinatrenchcoat)" Date: Sun, 31 Mar 2024 00:32:25 -0400 Subject: [PATCH 2/4] Initial implementation of options menu --- compass/components/Table/Index.tsx | 93 +++++++++++++--------- compass/components/Table/RowOptionMenu.tsx | 26 ++++++ 2 files changed, 83 insertions(+), 36 deletions(-) create mode 100644 compass/components/Table/RowOptionMenu.tsx diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx index d0c432a..d7db0d2 100644 --- a/compass/components/Table/Index.tsx +++ b/compass/components/Table/Index.tsx @@ -9,9 +9,10 @@ import { useReactTable, } from "@tanstack/react-table"; import { useState } from "react"; -import { RowAction } from "./RowAction"; +import { RowOptionMenu } from "./RowOptionMenu"; import { RowOpenAction } from "./RowOpenAction"; import { TableAction } from "./TableAction"; +import { Bars2Icon, AtSymbolIcon, HashtagIcon, ArrowDownCircleIcon } from "@heroicons/react/24/solid"; const usersExample = usersImport as unknown as User[]; @@ -31,17 +32,24 @@ export const Table = () => { const columnHelper = createColumnHelper(); const columns = [ + columnHelper.display({ + id: "options", + cell: props => + }), columnHelper.accessor("username", { - cell: (info) => , + header: () => <> Username, cell: (info) => , }), columnHelper.accessor("role", { + header: () => <> Role, cell: (info) => info.renderValue(), }), columnHelper.accessor("email", { + header: () => <> Email, cell: (info) => info.renderValue(), }), columnHelper.accessor("program", { + header: () => <> Program, cell: (info) => info.renderValue(), }), ]; @@ -54,40 +62,53 @@ export const Table = () => { getCoreRowModel: getCoreRowModel(), }); - return( + return (
-
- +
+ +
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header, i) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell, i) => ( + + ))} + + ))} + +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - ))} - - ))} - - - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ))} - -
- {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
-
) -} \ No newline at end of file +} diff --git a/compass/components/Table/RowOptionMenu.tsx b/compass/components/Table/RowOptionMenu.tsx new file mode 100644 index 0000000..f7a5c92 --- /dev/null +++ b/compass/components/Table/RowOptionMenu.tsx @@ -0,0 +1,26 @@ +//delete, duplicate, open +import { TrashIcon, DocumentDuplicateIcon, ArrowUpRightIcon, EllipsisVerticalIcon } from "@heroicons/react/24/solid"; +import { useState, useEffect, useRef } from "react"; + + +export const RowOptionMenu = () => { + const [menuOpen, setMenuOpen] = useState(false); + const openMenu = () => setMenuOpen(true); + const closeMenu = () => setMenuOpen(false); + + + // TODO: Hide menu if clicked elsewhere + + return ( + <> + +
*]:p-1 [&>*]:px-5 [&>*]:rounded" + (!menuOpen ? " invisible" : "")} + > +
Delete
+
Duplicate
+
Open
+
+ + ); +} From af8055002c42db85d90530e86a1159da92886307 Mon Sep 17 00:00:00 2001 From: "Andy Chan (12beesinatrenchcoat)" Date: Sun, 31 Mar 2024 00:35:15 -0400 Subject: [PATCH 3/4] Only show Drawer shadow when open --- compass/components/page/Drawer.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/compass/components/page/Drawer.tsx b/compass/components/page/Drawer.tsx index d80cd9f..91118f3 100644 --- a/compass/components/page/Drawer.tsx +++ b/compass/components/page/Drawer.tsx @@ -26,10 +26,10 @@ const Drawer: FunctionComponent = ({ title, children, onSave, edita setEditContent(event.target.value); }; - const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white shadow-xl transform ease-in-out duration-300 ${ - isOpen ? "translate-x-0" : "translate-x-full" + const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white transform ease-in-out duration-300 ${ + isOpen ? "translate-x-0 shadow-xl" : "translate-x-full" }`; - + const saveChanges = () => { console.log(editContent); if (onSave) { @@ -39,7 +39,7 @@ const Drawer: FunctionComponent = ({ title, children, onSave, edita }; const addRow = () => { - + } return ( @@ -73,4 +73,4 @@ const Drawer: FunctionComponent = ({ title, children, onSave, edita ); }; -export default Drawer; \ No newline at end of file +export default Drawer; From d82913a45d610fc16201fc0df8a315c4bffcb150 Mon Sep 17 00:00:00 2001 From: "Andy Chan (12beesinatrenchcoat)" Date: Sun, 31 Mar 2024 18:47:12 -0400 Subject: [PATCH 4/4] Add non-functional search bar Does not do anything at the moment. --- compass/components/Table/TableAction.tsx | 42 +++++++++++++++++++----- 1 file changed, 33 insertions(+), 9 deletions(-) diff --git a/compass/components/Table/TableAction.tsx b/compass/components/Table/TableAction.tsx index be4a309..f2a72a0 100644 --- a/compass/components/Table/TableAction.tsx +++ b/compass/components/Table/TableAction.tsx @@ -1,12 +1,36 @@ import { MagnifyingGlassIcon } from "@heroicons/react/24/solid"; +import { useRef, useState } from "react"; export const TableAction = () => { - return ( -
- Filter - Sort - -
- ); - }; - \ No newline at end of file + const searchInput = useRef(null); + const [searchActive, setSearchActive] = useState(false); + const activateSearch = () => { + setSearchActive(true); + if (searchInput.current === null) { return; } + searchInput.current.focus(); + searchInput.current.addEventListener("focusout", () => { + if (searchInput.current?.value.trim() === "") { + searchInput.current.value = ""; + deactivateSearch(); + } + }) + } + + const deactivateSearch = () => setSearchActive(false); + + return ( +
+ Filter + Sort + activateSearch()}> + + + +
+ ); +};