rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-09 14:00:15 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Edit visibility for options depending on administrator status

Browse Source
This commit is contained in:
pmoharana-cmd 2025-01-07 15:30:34 -05:00
parent 55a03ff3fd
commit 9c970ca40e
3 changed files with 97 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
compass/components/Table/RowOpenAction.tsx
View File

@ -27,7 +27,7 @@ export function RowOpenAction<T extends DataPoint>({
updateRoute,
}: RowOpenActionProps<T>) {
return (
<div className="font-semibold group flex flex-row items-center justify-between pr-2">
<div className="font-semibold group flex flex-row items-center justify-between px-2">
{title}
<span>
<Drawer

59
compass/components/Table/RowOptionMenu.tsx
View File

@ -5,41 +5,78 @@ import {
ArrowUpRightIcon,
EllipsisVerticalIcon,
EyeSlashIcon,
EyeIcon,
} from "@heroicons/react/24/solid";
import Button from "../Button";
import { useState, useEffect, useRef } from "react";
import { RowOption } from "./RowOption";
export const RowOptionMenu = ({ onDelete, onHide }) => {
const [menuOpen, setMenuOpen] = useState(false);
const openMenu = () => setMenuOpen(true);
const closeMenu = () => setMenuOpen(false);
interface RowOptionMenuProps {
onDelete?: () => void;
onHide: () => void;
visible: boolean;
}
// TODO: Hide menu if clicked elsewhere
export const RowOptionMenu = ({
onDelete,
onHide,
visible,
}: RowOptionMenuProps) => {
const [menuOpen, setMenuOpen] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
menuRef.current &&
buttonRef.current &&
!menuRef.current.contains(event.target as Node) &&
!buttonRef.current.contains(event.target as Node)
) {
setMenuOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return (
<>
<button
ref={buttonRef}
className="items-end"
onClick={() => setMenuOpen(!menuOpen)}
>
<EllipsisVerticalIcon className="h-4" />
</button>
<div
ref={menuRef}
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" : "")
}
>
<RowOption icon={TrashIcon} label="Delete" onClick={onDelete} />
<RowOption
{onDelete && (
<RowOption
icon={TrashIcon}
label="Delete"
onClick={onDelete}
/>
)}
{/* <RowOption
icon={ArrowUpRightIcon}
label="Open"
onClick={() => {
/* handle open */
}}
onClick={() => {}}
/> */}
<RowOption
icon={visible ? EyeSlashIcon : EyeIcon}
label={visible ? "Hide" : "Show"}
onClick={onHide}
/>
<RowOption icon={EyeSlashIcon} label="Hide" onClick={onHide} />
</div>
</>
);

82
compass/components/Table/Table.tsx
View File

@ -97,9 +97,9 @@ export default function Table<T extends DataPoint>({
return response;
};
// /** Sorting function based on visibility */
// const visibilitySort = (a: T, b: T) =>
// a.visible === b.visible ? 0 : a.visible ? -1 : 1;
/** Sorting function based on visibility */
const visibilitySort = (a: T, b: T) =>
a.visible === b.visible ? 0 : a.visible ? -1 : 1;
// // Sort data on load
// useEffect(() => {
@ -115,36 +115,43 @@ export default function Table<T extends DataPoint>({
// );
// };
// const hideData = (dataId: number) => {
// console.log(`Toggling visibility for data with ID: ${dataId}`);
// setData((currentData) => {
// const newData = currentData
// .map((data) =>
// data.id === dataId
// ? { ...data, visible: !data.visible }
// : data
// )
// .sort(visibilitySort);
const hideData = (dataId: number) => {
console.log(`Toggling visibility for data with ID: ${dataId}`);
setData((currentData) => {
const newData = currentData
.map((data) =>
data.id === dataId
? { ...data, visible: !data.visible }
: data
)
.sort((a, b) => {
// First sort by visibility
const visibilityResult = visibilitySort(a, b);
if (visibilityResult !== 0) return visibilityResult;
// Then sort by id
return a.id - b.id;
});
// console.log(newData);
// return newData;
// });
// };
console.log(newData);
return newData;
});
};
// Add data manipulation options to the first column
columns.unshift(
columnHelper.display({
id: "options",
cell: (props) => (
<RowOptionMenu
onDelete={() => {}}
onHide={() => {}}
// onDelete={() => deleteData(props.row.original.id)}
// onHide={() => hideData(props.row.original.id)}
/>
),
})
);
if (isAdmin) {
columns.unshift(
columnHelper.display({
id: "options",
cell: (props) => (
<RowOptionMenu
onDelete={() => console.log("delete")}
onHide={() => hideData(props.row.original.id)}
visible={props.row.original.visible}
/>
),
})
);
}
// Searching
const [query, setQuery] = useState("");
@ -186,7 +193,12 @@ export default function Table<T extends DataPoint>({
scope="col"
className={
"p-2 border-gray-200 border-y font-medium " +
(1 < i && i < columns.length - 1
((!isAdmin &&
0 < i &&
i < columns.length - 1) ||
(isAdmin &&
1 < i &&
i < columns.length - 1)
? "border-x"
: "")
}
@ -215,9 +227,11 @@ export default function Table<T extends DataPoint>({
{row.getVisibleCells().map((cell, i) => (
<td
key={cell.id}
className={
"[&:nth-child(n+3)]:border-x relative first:text-left first:px-0 last:border-none"
}
className={`relative first:text-left first:px-0 last:border-none ${
isAdmin
? "[&:nth-child(n+3)]"
: "[&:nth-child(n+2)]"
}:border-x`}
>
{flexRender(
cell.column.columnDef.cell,