Merge remote-tracking branch 'origin/admin-GEN-97-get-tabled' into mel-admin-GEN-102-tag

compass/components/Table/Index.tsx

@@ -9,9 +9,9 @@ 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 TagsInput from "../TagsInput/Index";
 
 const usersExample = usersImport as unknown as User[];
 
@@ -31,17 +31,23 @@ export const Table = () => {
   const columnHelper = createColumnHelper<User>();
 
   const columns = [
+    columnHelper.display({
+      id: "options",
+      cell: props => <RowOptionMenu />
+    }),
     columnHelper.accessor("username", {
-      cell: (info) => <RowAction title={info.getValue()} />,
+      header: () => <><Bars2Icon className="inline align-top h-4" /> Username</>,
+      cell: (info) => <RowOpenAction title={info.getValue()} />,
     }),
     columnHelper.accessor("role", {
-      cell: (info) => <TagsInput presetValue={info.getValue()} presetOptions={["Administrator","Employee","Volunteer"]} />,
+      cell: (info) => info.renderValue(),
     }),
     columnHelper.accessor("email", {
+      header: () => <><AtSymbolIcon className="inline align-top h-4" /> Email</>,
       cell: (info) => info.renderValue(),
     }),
     columnHelper.accessor("program", {
-      cell: (info) => <TagsInput presetValue={info.getValue()} presetOptions={["Domestic","Economic","Community"]} />,
+      cell: (info) => info.renderValue(),
     }),
   ];
 
@@ -53,40 +59,53 @@ export const Table = () => {
     getCoreRowModel: getCoreRowModel(),
   });
 
-  return(
+  return (
     <div className="flex flex-col">
-    <div className="flex flex-row justify-end">
-    <TableAction />
+      <div className="flex flex-row justify-end">
+        <TableAction />
+      </div>
+      <table className="w-full text-xs text-left rtl:text-right">
+        <thead className="text-xs text-gray-500 capitalize">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header, i) => (
+                <th
+                  scope="col"
+                  className={
+                    "p-2 border-gray-200 border-y font-medium "
+                    + ((1 < i && i < columns.length - 1) ? "border-x" : "")
+                  }
+                  key={header.id}
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody className="">
+          {table.getRowModel().rows.map((row) => (
+            <tr className="text-gray-800 border-y lowercase hover:bg-gray-50" key={row.id}>
+              {row.getVisibleCells().map((cell, i) => (
+                <td
+                  className={
+                    "p-2 "
+                    + ((1 < i && i < columns.length - 1) ? "border-x" : "")
+                    + ((i === 0) ? "text-center px-0" : "")
+                  }
+                  key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
-    <table className="w-full text-xs text-left rtl:text-right">
-          <thead className="text-xs text-gray-500 capitalize">
-            {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <th scope="col" className="p-3 border-gray-200 border-y font-medium" key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-          <tbody className="">
-            {table.getRowModel().rows.map((row) => (
-              <tr className="text-gray-800 border-y lowercase hover:bg-gray-50" key={row.id}>
-                {row.getVisibleCells().map((cell) => (
-                  <td className="py-2 px-2" key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        </div>
   )
-}
+}

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 (
     <div className="font-semibold group flex flex-row items-center justify-between pr-2">

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 (
+    <>
+    <button className="align-center" onClick={() => setMenuOpen(!menuOpen)}><EllipsisVerticalIcon className="h-4"/></button>
+    <div
+      className={"absolute text-left bg-white w-auto p-1 rounded [&>*]:p-1 [&>*]:px-5 [&>*]:rounded" + (!menuOpen ? " invisible" : "")}
+    >
+      <div className="hover:bg-gray-100"><TrashIcon className="inline h-4"/> Delete</div>
+      <div className="hover:bg-gray-100"><DocumentDuplicateIcon className="inline h-4"/> Duplicate</div>
+      <div className="hover:bg-gray-100"><ArrowUpRightIcon className="inline h-4"/> Open</div>
+    </div>
+    </>
+  );
+}

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 (
-      <div className="w-40 flex flex-row items-center justify-between text-xs font-medium text-gray-500 p-2">
-        <span>Filter</span>
-        <span>Sort</span>
-        <span className="w-4 h-4"><MagnifyingGlassIcon /></span>
-      </div>
-    );
-  };
-  
+  const searchInput = useRef<HTMLInputElement>(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 (
+    <div className="w-auto flex flex-row gap-x-0.5 items-center justify-between text-xs font-medium text-gray-500 p-2">
+      <span className="p-1 rounded hover:bg-gray-100">Filter</span>
+      <span className="p-1 rounded hover:bg-gray-100">Sort</span>
+      <span className="p-1 rounded hover:bg-gray-100" onClick={() => activateSearch()}>
+        <MagnifyingGlassIcon className="w-4 h-4 inline" />
+      </span>
+      <input
+        ref={searchInput}
+        className={"outline-none transition-all duration-300 " + (searchActive ? "w-48" : "w-0")}
+        type="text"
+        name="search"
+        placeholder="Type to search..." />
+    </div>
+  );
+};

compass/components/page/Drawer.tsx

@@ -26,10 +26,10 @@ const Drawer: FunctionComponent<DrawerProps> = ({ 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<DrawerProps> = ({ title, children, onSave, edita
     };
 
     const addRow = () => {
-        
+
     }
 
     return (
@@ -73,4 +73,4 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
     );
 };
 
-export default Drawer;
+export default Drawer;