diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx index 444e2f6..f07a20f 100644 --- a/compass/components/Table/Index.tsx +++ b/compass/components/Table/Index.tsx @@ -2,18 +2,25 @@ import usersImport from "./users.json"; import { + Cell, ColumnDef, + Row, createColumnHelper, flexRender, getCoreRowModel, + getFilteredRowModel, + sortingFns, useReactTable, } from "@tanstack/react-table"; -import { useState, useEffect } from "react"; +import { ChangeEvent, useState, useEffect, FunctionComponent, useRef, ChangeEventHandler, Key } from "react"; import { RowOptionMenu } from "./RowOptionMenu"; import { RowOpenAction } from "./RowOpenAction"; import { TableAction } from "./TableAction"; -import { AtSymbolIcon, Bars2Icon } from "@heroicons/react/24/solid"; +import { AtSymbolIcon, Bars2Icon, ArrowDownCircleIcon, PlusIcon } from "@heroicons/react/24/solid"; import TagsInput from "../TagsInput/Index"; +import { rankItem } from "@tanstack/match-sorter-utils"; +import { TableCell } from "./TableCell"; +import { PrimaryTableCell } from "./PrimaryTableCell"; const usersExample = usersImport as unknown as User[]; @@ -26,12 +33,49 @@ type User = { program: "domestic" | "economic" | "community"; experience: number; group?: string; + visible: boolean; }; +// For search +const fuzzyFilter = (row: Row, columnId: string, value: any, addMeta: (meta: any) => void) => { + // Rank the item + const itemRank = rankItem(row.getValue(columnId), value) + + // Store the ranking info + addMeta(itemRank) + + // Return if the item should be filtered in/out + return itemRank.passed +} export const Table = () => { const columnHelper = createColumnHelper(); + + useEffect(() => { + const sortedUsers = [...usersExample].sort((a, b) => (a.visible === b.visible ? 0 : a.visible ? -1 : 1)); + setData(sortedUsers); + }, []); + + const deleteUser = (userId) => { + console.log(data); + setData(currentData => currentData.filter(user => user.id !== userId)); + }; + + const hideUser = (userId: number) => { + console.log(`Toggling visibility for user with ID: ${userId}`); + setData(currentData => { + const newData = currentData.map(user => { + if (user.id === userId) { + return { ...user, visible: !user.visible }; + } + return user; + }).sort((a, b) => a.visible === b.visible ? 0 : a.visible ? -1 : 1); + + console.log(newData); + return newData; + }); + }; const [presetOptions, setPresetOptions] = useState(["administrator", "volunteer", "employee"]); const [tagColors, setTagColors] = useState(new Map()); @@ -47,13 +91,14 @@ export const Table = () => { const columns = [ columnHelper.display({ id: "options", - cell: props => + cell: props => deleteUser(props.row.original.id)} onHide={() => hideUser(props.row.original.id)} /> }), columnHelper.accessor("username", { header: () => <> Username, cell: (info) => , }), columnHelper.accessor("role", { + header: () => <> Role, cell: (info) => { }), columnHelper.accessor("email", { header: () => <> Email, - cell: (info) => info.renderValue(), + cell: TableCell, }), columnHelper.accessor("program", { + header: () => <> Program, cell: (info) => info.renderValue(), }), ]; const [data, setData] = useState([...usersExample]); + const addUser = () => { + setData([...data, {}]); + } + + // Searching + const [query, setQuery] = useState(""); + const handleSearchChange = (e: ChangeEvent) => { + const target = e.target as HTMLInputElement; + setQuery(String(target.value)); + } + + const handleCellChange = (e: ChangeEvent, key: Key) => { + const target = e.target as HTMLInputElement; + console.log(key); + } + + // TODO: Filtering + // TODO: Sorting + // added this fn for editing rows const handleRowUpdate = (updatedRow: User) => { const dataIndex = data.findIndex((row) => row.id === updatedRow.id); @@ -85,7 +150,31 @@ export const Table = () => { const table = useReactTable({ columns, data, + filterFns: { + fuzzy: fuzzyFilter + }, + state: { + globalFilter: query, + }, + onGlobalFilterChange: setQuery, + globalFilterFn: fuzzyFilter, getCoreRowModel: getCoreRowModel(), + getFilteredRowModel: getFilteredRowModel(), + meta: { + updateData: (rowIndex: number, columnId: string, value: string) => { + setData(old => + old.map((row, index) => { + if (index === rowIndex) { + return { + ...old[rowIndex], + [columnId]: value, + }; + } + return row; + }) + ); + } + } }); const handleRowData = (row: any) => { @@ -101,7 +190,7 @@ export const Table = () => { return (
- +
@@ -127,24 +216,40 @@ export const Table = () => { ))} - - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell, i) => ( - - ))} - - ))} + + {table.getRowModel().rows.map((row) => { + // Individual row + const isUserVisible = row.original.visible; + const rowClassNames = `text-gray-800 border-y lowercase hover:bg-gray-50 ${!isUserVisible ? "bg-gray-200 text-gray-500" : ""}`; + return ( + + {row.getVisibleCells().map((cell, i) => ( + + ))} + + ); + })} + + + + + +
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + + New + +
) } + diff --git a/compass/components/Table/PrimaryTableCell.tsx b/compass/components/Table/PrimaryTableCell.tsx new file mode 100644 index 0000000..a6e265f --- /dev/null +++ b/compass/components/Table/PrimaryTableCell.tsx @@ -0,0 +1,22 @@ +/* An extension of TableCell.tsx that includes an "open" button and the drawer. +For cells in the "primary" (or first) column of the table. */ +import Drawer from "@/components/page/Drawer"; +import { TableCell } from "./TableCell"; +import { SetStateAction, useState } from "react"; + +export const PrimaryTableCell = ({ getValue, row, column, table }) => { + const [pageContent, setPageContent] = useState("") + + const handleDrawerContentChange = (newContent: SetStateAction) => { + setPageContent(newContent); + }; + + return ( +
+ + + {pageContent} + +
+ ); +}; diff --git a/compass/components/Table/RowOption.tsx b/compass/components/Table/RowOption.tsx new file mode 100644 index 0000000..0514c64 --- /dev/null +++ b/compass/components/Table/RowOption.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { TrashIcon, DocumentDuplicateIcon, ArrowUpRightIcon, EyeSlashIcon } from "@heroicons/react/24/solid"; + +export const RowOption = ({ icon: Icon, label, onClick }) => { + return ( + + ); +}; \ No newline at end of file diff --git a/compass/components/Table/RowOptionMenu.tsx b/compass/components/Table/RowOptionMenu.tsx index f7a5c92..d383b20 100644 --- a/compass/components/Table/RowOptionMenu.tsx +++ b/compass/components/Table/RowOptionMenu.tsx @@ -1,9 +1,10 @@ //delete, duplicate, open -import { TrashIcon, DocumentDuplicateIcon, ArrowUpRightIcon, EllipsisVerticalIcon } from "@heroicons/react/24/solid"; +import { TrashIcon, DocumentDuplicateIcon, ArrowUpRightIcon, EllipsisVerticalIcon, EyeSlashIcon } from "@heroicons/react/24/solid"; +import Button from "../Button"; import { useState, useEffect, useRef } from "react"; +import { RowOption } from "./RowOption"; - -export const RowOptionMenu = () => { +export const RowOptionMenu = ( { onDelete, onHide } ) => { const [menuOpen, setMenuOpen] = useState(false); const openMenu = () => setMenuOpen(true); const closeMenu = () => setMenuOpen(false); @@ -15,12 +16,12 @@ export const RowOptionMenu = () => { <>
*]:p-1 [&>*]:px-5 [&>*]:rounded" + (!menuOpen ? " invisible" : "")} + 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" : "")} > -
Delete
-
Duplicate
-
Open
-
- + + { /* handle open */ }} /> + + + ); } diff --git a/compass/components/Table/TableAction.tsx b/compass/components/Table/TableAction.tsx index f2a72a0..e58e110 100644 --- a/compass/components/Table/TableAction.tsx +++ b/compass/components/Table/TableAction.tsx @@ -1,9 +1,16 @@ +/** The actions (Filter, Sort, Search) at the top of the table. */ import { MagnifyingGlassIcon } from "@heroicons/react/24/solid"; -import { useRef, useState } from "react"; +import { ChangeEventHandler, Dispatch, FunctionComponent, SetStateAction, useRef, useState } from "react"; -export const TableAction = () => { +type TableActionProps = { + query: string + handleChange: ChangeEventHandler +} + +export const TableAction: FunctionComponent = ({query, handleChange}) => { const searchInput = useRef(null); const [searchActive, setSearchActive] = useState(false); + const activateSearch = () => { setSearchActive(true); if (searchInput.current === null) { return; } @@ -30,7 +37,10 @@ export const TableAction = () => { className={"outline-none transition-all duration-300 " + (searchActive ? "w-48" : "w-0")} type="text" name="search" - placeholder="Type to search..." /> + placeholder="Type to search..." + value={query ?? ""} + onChange={handleChange} + /> ); }; diff --git a/compass/components/Table/TableCell.tsx b/compass/components/Table/TableCell.tsx new file mode 100644 index 0000000..a6dfc02 --- /dev/null +++ b/compass/components/Table/TableCell.tsx @@ -0,0 +1,21 @@ +/* A lone table cell. Passed in for "cell" for a TanStack Table. */ +import { useState, useEffect } from "react"; + +export const TableCell = ({ getValue, row, column, table }) => { + const initialValue = getValue(); + const [value, setValue] = useState(initialValue); + + useEffect(() => { + setValue(initialValue); + }, [initialValue]); + + const onBlur = () => { + table.options.meta?.updateData(row.index, column.id, value); + }; +// focus:border focus:border-gray-200 + const className = "w-full p-3 bg-inherit rounded-md outline-none border border-transparent relative " + + "focus:shadow-md focus:border-gray-200 focus:bg-white focus:z-20 focus:p-4 focus:-m-1 " + + "focus:w-[calc(100%+0.5rem)]"; + + return setValue(e.target.value)} onBlur={onBlur} />; +}; diff --git a/compass/components/Table/users.json b/compass/components/Table/users.json index 20caf99..7073ce3 100644 --- a/compass/components/Table/users.json +++ b/compass/components/Table/users.json @@ -1 +1 @@ -[{"id":0,"created_at":1711482132230,"username":"Bo_Pfeffer","role":"ADMIN","email":"Bo.Pfeffer@gmail.com","program":"DOMESTIC","experience":2,"group":""},{"id":1,"created_at":1711482132231,"username":"Marianna_Heathcote76","role":"ADMIN","email":"Marianna_Heathcote14@yahoo.com","program":"DOMESTIC","experience":1,"group":""},{"id":2,"created_at":1711482132231,"username":"Queenie_Schroeder","role":"VOLUNTEER","email":"Queenie_Schroeder@yahoo.com","program":"COMMUNITY","experience":5,"group":""},{"id":3,"created_at":1711482132231,"username":"Arne.Bode","role":"VOLUNTEER","email":"Arne.Bode@hotmail.com","program":"DOMESTIC","experience":3,"group":""},{"id":4,"created_at":1711482132231,"username":"Maia.Zulauf9","role":"ADMIN","email":"Maia_Zulauf@gmail.com","program":"DOMESTIC","experience":5,"group":""},{"id":5,"created_at":1711482132231,"username":"River_Bauch","role":"EMPLOYEE","email":"River.Bauch@yahoo.com","program":"ECONOMIC","experience":2,"group":""},{"id":6,"created_at":1711482132231,"username":"Virgil.Hilll","role":"VOLUNTEER","email":"Virgil.Hilll@yahoo.com","program":"ECONOMIC","experience":3,"group":""},{"id":7,"created_at":1711482132231,"username":"Bridget_Cartwright","role":"ADMIN","email":"Bridget_Cartwright@yahoo.com","program":"ECONOMIC","experience":3,"group":""},{"id":8,"created_at":1711482132231,"username":"Glennie_Keebler64","role":"EMPLOYEE","email":"Glennie_Keebler60@yahoo.com","program":"DOMESTIC","experience":2,"group":""},{"id":9,"created_at":1711482132232,"username":"Orin.Jenkins53","role":"EMPLOYEE","email":"Orin.Jenkins@gmail.com","program":"ECONOMIC","experience":1,"group":""},{"id":10,"created_at":1711482132232,"username":"Zachery.Rosenbaum","role":"ADMIN","email":"Zachery.Rosenbaum@hotmail.com","program":"COMMUNITY","experience":3,"group":""},{"id":11,"created_at":1711482132232,"username":"Phoebe.Ziemann","role":"EMPLOYEE","email":"Phoebe_Ziemann92@gmail.com","program":"COMMUNITY","experience":2,"group":""},{"id":12,"created_at":1711482132232,"username":"Bradford_Conroy53","role":"VOLUNTEER","email":"Bradford_Conroy94@hotmail.com","program":"COMMUNITY","experience":2,"group":""},{"id":13,"created_at":1711482132232,"username":"Florine_Strosin55","role":"VOLUNTEER","email":"Florine.Strosin29@hotmail.com","program":"ECONOMIC","experience":1,"group":""},{"id":14,"created_at":1711482132232,"username":"Constance.Doyle59","role":"EMPLOYEE","email":"Constance_Doyle@hotmail.com","program":"DOMESTIC","experience":3,"group":""},{"id":15,"created_at":1711482132232,"username":"Chauncey_Lockman","role":"ADMIN","email":"Chauncey_Lockman@yahoo.com","program":"DOMESTIC","experience":5,"group":""},{"id":16,"created_at":1711482132232,"username":"Esther_Wuckert-Larson26","role":"EMPLOYEE","email":"Esther_Wuckert-Larson@gmail.com","program":"ECONOMIC","experience":0,"group":""},{"id":17,"created_at":1711482132232,"username":"Jewel.Kunde","role":"VOLUNTEER","email":"Jewel_Kunde29@gmail.com","program":"ECONOMIC","experience":5,"group":""},{"id":18,"created_at":1711482132232,"username":"Hildegard_Parker92","role":"ADMIN","email":"Hildegard_Parker74@yahoo.com","program":"ECONOMIC","experience":2,"group":""},{"id":19,"created_at":1711482132232,"username":"Jordane.Lakin2","role":"ADMIN","email":"Jordane_Lakin@hotmail.com","program":"COMMUNITY","experience":1,"group":""}] \ No newline at end of file +[{"id":0,"created_at":1711482132230,"username":"Bo_Pfeffer","role":"ADMIN","email":"Bo.Pfeffer@gmail.com","program":"DOMESTIC","experience":2,"group":"", "visible": true},{"id":1,"created_at":1711482132231,"username":"Marianna_Heathcote76","role":"ADMIN","email":"Marianna_Heathcote14@yahoo.com","program":"DOMESTIC","experience":1,"group":"", "visible": true},{"id":2,"created_at":1711482132231,"username":"Queenie_Schroeder","role":"VOLUNTEER","email":"Queenie_Schroeder@yahoo.com","program":"COMMUNITY","experience":5,"group":"", "visible": true},{"id":3,"created_at":1711482132231,"username":"Arne.Bode","role":"VOLUNTEER","email":"Arne.Bode@hotmail.com","program":"DOMESTIC","experience":3,"group":"", "visible": true},{"id":4,"created_at":1711482132231,"username":"Maia.Zulauf9","role":"ADMIN","email":"Maia_Zulauf@gmail.com","program":"DOMESTIC","experience":5,"group":"", "visible": true},{"id":5,"created_at":1711482132231,"username":"River_Bauch","role":"EMPLOYEE","email":"River.Bauch@yahoo.com","program":"ECONOMIC","experience":2,"group":"", "visible": true},{"id":6,"created_at":1711482132231,"username":"Virgil.Hilll","role":"VOLUNTEER","email":"Virgil.Hilll@yahoo.com","program":"ECONOMIC","experience":3,"group":"", "visible": true},{"id":7,"created_at":1711482132231,"username":"Bridget_Cartwright","role":"ADMIN","email":"Bridget_Cartwright@yahoo.com","program":"ECONOMIC","experience":3,"group":"", "visible": true},{"id":8,"created_at":1711482132231,"username":"Glennie_Keebler64","role":"EMPLOYEE","email":"Glennie_Keebler60@yahoo.com","program":"DOMESTIC","experience":2,"group":"", "visible": true},{"id":9,"created_at":1711482132232,"username":"Orin.Jenkins53","role":"EMPLOYEE","email":"Orin.Jenkins@gmail.com","program":"ECONOMIC","experience":1,"group":"", "visible": true},{"id":10,"created_at":1711482132232,"username":"Zachery.Rosenbaum","role":"ADMIN","email":"Zachery.Rosenbaum@hotmail.com","program":"COMMUNITY","experience":3,"group":"", "visible": true},{"id":11,"created_at":1711482132232,"username":"Phoebe.Ziemann","role":"EMPLOYEE","email":"Phoebe_Ziemann92@gmail.com","program":"COMMUNITY","experience":2,"group":"", "visible": true},{"id":12,"created_at":1711482132232,"username":"Bradford_Conroy53","role":"VOLUNTEER","email":"Bradford_Conroy94@hotmail.com","program":"COMMUNITY","experience":2,"group":"", "visible": true},{"id":13,"created_at":1711482132232,"username":"Florine_Strosin55","role":"VOLUNTEER","email":"Florine.Strosin29@hotmail.com","program":"ECONOMIC","experience":1,"group":"", "visible": true},{"id":14,"created_at":1711482132232,"username":"Constance.Doyle59","role":"EMPLOYEE","email":"Constance_Doyle@hotmail.com","program":"DOMESTIC","experience":3,"group":"", "visible": true},{"id":15,"created_at":1711482132232,"username":"Chauncey_Lockman","role":"ADMIN","email":"Chauncey_Lockman@yahoo.com","program":"DOMESTIC","experience":5,"group":"", "visible": true},{"id":16,"created_at":1711482132232,"username":"Esther_Wuckert-Larson26","role":"EMPLOYEE","email":"Esther_Wuckert-Larson@gmail.com","program":"ECONOMIC","experience":0,"group":"", "visible": true},{"id":17,"created_at":1711482132232,"username":"Jewel.Kunde","role":"VOLUNTEER","email":"Jewel_Kunde29@gmail.com","program":"ECONOMIC","experience":5,"group":"", "visible": true},{"id":18,"created_at":1711482132232,"username":"Hildegard_Parker92","role":"ADMIN","email":"Hildegard_Parker74@yahoo.com","program":"ECONOMIC","experience":2,"group":"", "visible": true},{"id":19,"created_at":1711482132232,"username":"Jordane.Lakin2","role":"ADMIN","email":"Jordane_Lakin@hotmail.com","program":"COMMUNITY","experience":1,"group":"", "visible": true}] \ No newline at end of file diff --git a/compass/components/page/Drawer.tsx b/compass/components/page/Drawer.tsx index ffa4304..d9d99ab 100644 --- a/compass/components/page/Drawer.tsx +++ b/compass/components/page/Drawer.tsx @@ -58,14 +58,14 @@ const Drawer: FunctionComponent = ({ title, children, onSave, edita setIsFull(!isFull); } } - + const toggleDrawerFullScreen = () => setIsFull(!isFull); const toggleFavorite = () => setIsFavorite(!isFavorite); - const drawerClassName = `fixed top-0 right-0 h-full bg-white transform ease-in-out duration-300 ${ + const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white transform ease-in-out duration-300 z-20 ${ isOpen ? "translate-x-0 shadow-xl" : "translate-x-full" - + } ${isFull ? "w-full" : "w-1/2"}`; const iconComponent = isFull ? : ; @@ -80,7 +80,7 @@ const Drawer: FunctionComponent = ({ title, children, onSave, edita
- {currentCardIcon} + {currentCardIcon}

{rowContent.username}

diff --git a/compass/package-lock.json b/compass/package-lock.json index fd7ab14..f37a923 100644 --- a/compass/package-lock.json +++ b/compass/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@heroicons/react": "^2.1.1", + "@tanstack/match-sorter-utils": "^8.15.1", "@tanstack/react-table": "^8.15.0", "next": "13.5.6", "react": "^18", @@ -402,6 +403,21 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/match-sorter-utils": { + "version": "8.15.1", + "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.15.1.tgz", + "integrity": "sha512-PnVV3d2poenUM31ZbZi/yXkBu3J7kd5k2u51CGwwNojag451AjTH9N6n41yjXz2fpLeewleyLBmNS6+HcGDlXw==", + "dependencies": { + "remove-accents": "0.5.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@tanstack/react-table": { "version": "8.15.0", "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.15.0.tgz", @@ -3556,6 +3572,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/remove-accents": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz", + "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", diff --git a/compass/package.json b/compass/package.json index 4036d60..10ba9d0 100644 --- a/compass/package.json +++ b/compass/package.json @@ -1,4 +1,3 @@ - { "name": "compass", "version": "0.1.0", @@ -11,6 +10,7 @@ }, "dependencies": { "@heroicons/react": "^2.1.1", + "@tanstack/match-sorter-utils": "^8.15.1", "@tanstack/react-table": "^8.15.0", "next": "13.5.6", "react": "^18",