mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-06 20:50:17 -04:00
Merge branch 'admin-GEN-97-get-tabled' into andy-GEN-97-table-search
This commit is contained in:
Andy Chan (12beesinatrenchcoat)
commit
8aa4753199
|
|
@ -11,7 +11,7 @@ import {
|
|||
sortingFns,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { ChangeEvent, useState } from "react";
|
||||
import { ChangeEvent, useState, useEffect } from "react";
|
||||
import { RowOptionMenu } from "./RowOptionMenu";
|
||||
import { RowOpenAction } from "./RowOpenAction";
|
||||
import { TableAction } from "./TableAction";
|
||||
|
|
@ -29,6 +29,7 @@ type User = {
|
|||
program: "DOMESTIC" | "ECONOMIC" | "COMMUNITY";
|
||||
experience: number;
|
||||
group?: string;
|
||||
visible: boolean;
|
||||
};
|
||||
|
||||
// For search
|
||||
|
|
@ -46,13 +47,38 @@ const fuzzyFilter = (row: Row<any>, columnId: string, value: any, addMeta: (meta
|
|||
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(`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 columns = [
|
||||
columnHelper.display({
|
||||
id: "options",
|
||||
cell: props => <RowOptionMenu />
|
||||
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" /> Username</>,
|
||||
header: () => <><Bars2Icon className="inline align-top h-4 mr-2" /> Username</>,
|
||||
cell: (info) => <RowOpenAction title={info.getValue()} />,
|
||||
}),
|
||||
columnHelper.accessor("role", {
|
||||
|
|
@ -125,22 +151,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-center 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>
|
||||
|
|
|
|||
10
compass/components/Table/RowOption.tsx
Normal file
10
compass/components/Table/RowOption.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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 = () => {
|
|||
<>
|
||||
<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={ onHide } />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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":""}]
|
||||
[{"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}]
|
||||
Loading…
Reference in New Issue
Block a user