From 8b81f6cb4ff2a1e9d6103a507d97adcd9b8b95d3 Mon Sep 17 00:00:00 2001
From: Advik Arora <aroraadvik@gmail.com>
Date: Tue, 2 Apr 2024 18:42:02 -0400
Subject: [PATCH 1/3] added delete and RowOption component
---
compass/components/Table/Index.tsx | 10 +++++++---
compass/components/Table/RowOption.tsx | 10 ++++++++++
compass/components/Table/RowOptionMenu.tsx | 19 ++++++++++---------
compass/package-lock.json | 1 -
4 files changed, 27 insertions(+), 13 deletions(-)
create mode 100644 compass/components/Table/RowOption.tsx
diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx
index d7db0d2..ce36256 100644
--- a/compass/components/Table/Index.tsx
+++ b/compass/components/Table/Index.tsx
@@ -31,13 +31,17 @@ type User = {
export const Table = () => {
const columnHelper = createColumnHelper<User>();
+ const deleteUser = (userId) => {
+ setData(currentData => currentData.filter(user => user.id !== userId));
+ };
+
const columns = [
columnHelper.display({
id: "options",
- cell: props => <RowOptionMenu />
+ cell: props => <RowOptionMenu onDelete={() => deleteUser(props.row.original.id)} />
}),
columnHelper.accessor("username", {
- header: () => <><Bars2Icon className="inline align-top h-4" /> Username</>,
+ header: () => <><Bars2Icon className="inline align-top h-4 mr-2" /> Username</>,
cell: (info) => <RowOpenAction title={info.getValue()} />,
}),
columnHelper.accessor("role", {
@@ -99,7 +103,7 @@ export const Table = () => {
className={
"p-2 "
+ ((1 < i && i < columns.length - 1) ? "border-x" : "")
- + ((i === 0) ? "text-center px-0" : "")
+ + ((i === 0) ? "text-left px-0" : "")
}
key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
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 (
+ <button onClick={onClick} className="hover:bg-gray-100 flex items-center gap-2 p-2 w-full">
+ <Icon className="inline h-4" /> {label}
+ </button>
+ );
+};
\ No newline at end of file
diff --git a/compass/components/Table/RowOptionMenu.tsx b/compass/components/Table/RowOptionMenu.tsx
index f7a5c92..5830fb5 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 } ) => {
const [menuOpen, setMenuOpen] = useState(false);
const openMenu = () => setMenuOpen(true);
const closeMenu = () => setMenuOpen(false);
@@ -15,12 +16,12 @@ export const RowOptionMenu = () => {
<>
<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" : "")}
+ className={"justify-start border border-gray-200 shadow-lg flex flex-col absolute bg-white w-auto p-2 rounded [&>*]: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>
- </>
+ <RowOption icon={TrashIcon} label="Delete" onClick={onDelete} />
+ <RowOption icon={ArrowUpRightIcon} label="Open" onClick={() => { /* handle open */ }} />
+ <RowOption icon={EyeSlashIcon} label="Hide" onClick={() => { /* handle hide */ }} />
+ </div>
+</>
);
}
diff --git a/compass/package-lock.json b/compass/package-lock.json
index 1c26973..fd7ab14 100644
--- a/compass/package-lock.json
+++ b/compass/package-lock.json
@@ -4395,4 +4395,3 @@
}
}
}
-
From 8436709e37e4aa2e2e6147a1becacd56a33d5b4a Mon Sep 17 00:00:00 2001
From: Advik Arora <aroraadvik@gmail.com>
Date: Wed, 3 Apr 2024 15:27:48 -0400
Subject: [PATCH 2/3] added filtering for hide feature, also added visible
attribute to users
---
compass/components/Table/Index.tsx | 23 ++++++++++++++++++++--
compass/components/Table/RowOptionMenu.tsx | 4 ++--
compass/components/Table/users.json | 2 +-
3 files changed, 24 insertions(+), 5 deletions(-)
diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx
index ce36256..c245143 100644
--- a/compass/components/Table/Index.tsx
+++ b/compass/components/Table/Index.tsx
@@ -8,7 +8,7 @@ import {
getCoreRowModel,
useReactTable,
} from "@tanstack/react-table";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import { RowOptionMenu } from "./RowOptionMenu";
import { RowOpenAction } from "./RowOpenAction";
import { TableAction } from "./TableAction";
@@ -25,20 +25,39 @@ type User = {
program: "DOMESTIC" | "ECONOMIC" | "COMMUNITY";
experience: number;
group?: string;
+ visible: boolean;
};
export const Table = () => {
const columnHelper = createColumnHelper<User>();
+ 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(`Hiding user with ID: ${userId}`); // Confirm the ID being processed
+ setData(currentData => {
+ const newData = currentData.map(user => {
+ console.log(`Checking user with ID: ${user.id}`); // Confirm each user's ID being checked
+ return user.id === userId ? { ...user, visible: false } : user;
+ }).sort((a, b) => a.visible === b.visible ? 0 : a.visible ? -1 : 1);
+
+ console.log(newData); // Check the sorted data
+ return newData;
+ });
+ };
const columns = [
columnHelper.display({
id: "options",
- cell: props => <RowOptionMenu onDelete={() => deleteUser(props.row.original.id)} />
+ cell: props => <RowOptionMenu onDelete={() => deleteUser(props.row.original.id)} onHide={() => hideUser(props.row.original.id)} />
}),
columnHelper.accessor("username", {
header: () => <><Bars2Icon className="inline align-top h-4 mr-2" /> Username</>,
diff --git a/compass/components/Table/RowOptionMenu.tsx b/compass/components/Table/RowOptionMenu.tsx
index 5830fb5..58c5284 100644
--- a/compass/components/Table/RowOptionMenu.tsx
+++ b/compass/components/Table/RowOptionMenu.tsx
@@ -4,7 +4,7 @@ import Button from "../Button";
import { useState, useEffect, useRef } from "react";
import { RowOption } from "./RowOption";
-export const RowOptionMenu = ( { onDelete } ) => {
+export const RowOptionMenu = ( { onDelete, onHide } ) => {
const [menuOpen, setMenuOpen] = useState(false);
const openMenu = () => setMenuOpen(true);
const closeMenu = () => setMenuOpen(false);
@@ -20,7 +20,7 @@ export const RowOptionMenu = ( { onDelete } ) => {
>
<RowOption icon={TrashIcon} label="Delete" onClick={onDelete} />
<RowOption icon={ArrowUpRightIcon} label="Open" onClick={() => { /* handle open */ }} />
- <RowOption icon={EyeSlashIcon} label="Hide" onClick={() => { /* handle hide */ }} />
+ <RowOption icon={EyeSlashIcon} label="Hide" onClick={ onHide } />
</div>
</>
);
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
From 97fd4703ba5ae92c04d125d4815a5fa48d73b5d7 Mon Sep 17 00:00:00 2001
From: Advik Arora <aroraadvik@gmail.com>
Date: Wed, 3 Apr 2024 15:40:10 -0400
Subject: [PATCH 3/3] added graying out of rows that are hidden, and allowed
for hide to be a toggle
---
compass/components/Table/Index.tsx | 51 ++++++++++++++++++------------
1 file changed, 31 insertions(+), 20 deletions(-)
diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx
index c245143..2b02c16 100644
--- a/compass/components/Table/Index.tsx
+++ b/compass/components/Table/Index.tsx
@@ -43,17 +43,20 @@ export const Table = () => {
};
const hideUser = (userId: number) => {
- console.log(`Hiding user with ID: ${userId}`); // Confirm the ID being processed
+ console.log(`Toggling visibility for user with ID: ${userId}`);
setData(currentData => {
const newData = currentData.map(user => {
- console.log(`Checking user with ID: ${user.id}`); // Confirm each user's ID being checked
- return user.id === userId ? { ...user, visible: false } : 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); // Check the sorted data
+ console.log(newData);
return newData;
});
};
+
const columns = [
columnHelper.display({
id: "options",
@@ -114,22 +117,30 @@ export const Table = () => {
</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-left px-0" : "")
- }
- key={cell.id}>
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
- </td>
- ))}
- </tr>
- ))}
+ <tbody>
+ {table.getRowModel().rows.map((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 (
+ <tr
+ className={rowClassNames}
+ key={row.id}
+ >
+ {row.getVisibleCells().map((cell, i) => (
+ <td
+ className={
+ "p-2 " +
+ ((1 < i && i < columns.length - 1) ? "border-x" : "") +
+ (i === 0 ? "text-left px-0" : "")
+ }
+ key={cell.id}
+ >
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ </td>
+ ))}
+ </tr>
+ );
+ })}
</tbody>
</table>
</div>