mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-23 03:29:49 -04:00
Compare commits
10 Commits
2766ad8eee
...
476016117b
| Author | SHA1 | Date | |
|---|---|---|---|
|
476016117b | ||
|
|
bcfca9e169 | ||
|
|
8f41d5e116 | ||
|
|
b51ffcfbcd | ||
|
|
f3878f45e6 | ||
|
|
966834d34d | ||
|
|
598b9dd784 | ||
|
|
3a2dd69332 | ||
|
|
77075c55d8 | ||
|
|
5d06760c41 |
|
|
@ -1,7 +1,7 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { PageLayout } from "@/components/PageLayout";
|
import { PageLayout } from "@/components/PageLayout";
|
||||||
import { Table } from "@/components/Table/Index";
|
import UserTable from "@/components/Table/UserIndex";
|
||||||
import User from "@/utils/models/User";
|
import User from "@/utils/models/User";
|
||||||
import { createClient } from "@/utils/supabase/client";
|
import { createClient } from "@/utils/supabase/client";
|
||||||
|
|
||||||
|
|
@ -38,7 +38,7 @@ export default function Page() {
|
||||||
<div className="min-h-screen flex flex-col">
|
<div className="min-h-screen flex flex-col">
|
||||||
{/* icon + title */}
|
{/* icon + title */}
|
||||||
<PageLayout title="Users" icon={<UsersIcon />}>
|
<PageLayout title="Users" icon={<UsersIcon />}>
|
||||||
<Table users={users} />
|
<UserTable users={users} />
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { PageLayout } from "@/components/PageLayout";
|
import { PageLayout } from "@/components/PageLayout";
|
||||||
import { ResourceTable } from "@/components/Table/ResourceIndex";
|
|
||||||
import Resource from "@/utils/models/Resource";
|
import Resource from "@/utils/models/Resource";
|
||||||
|
import ResourceTable from "@/components/Table/ResourceIndex";
|
||||||
import { createClient } from "@/utils/supabase/client";
|
import { createClient } from "@/utils/supabase/client";
|
||||||
|
|
||||||
import { BookmarkIcon } from "@heroicons/react/24/solid";
|
import { BookmarkIcon } from "@heroicons/react/24/solid";
|
||||||
|
|
@ -38,7 +38,7 @@ export default function Page() {
|
||||||
<div className="min-h-screen flex flex-col">
|
<div className="min-h-screen flex flex-col">
|
||||||
{/* icon + title */}
|
{/* icon + title */}
|
||||||
<PageLayout title="Resources" icon={<BookmarkIcon />}>
|
<PageLayout title="Resources" icon={<BookmarkIcon />}>
|
||||||
<ResourceTable users={resources} />
|
<ResourceTable resources={resources} />
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import Sidebar from "@/components/Sidebar/Sidebar";
|
|
||||||
import React, { useState } from "react";
|
|
||||||
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
|
|
||||||
import { createClient } from "@/utils/supabase/client";
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { useEffect } from "react";
|
|
||||||
import User, { Role } from "@/utils/models/User";
|
|
||||||
import Loading from "@/components/auth/Loading";
|
|
||||||
|
|
||||||
export default function RootLayout({
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}) {
|
|
||||||
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
|
||||||
const router = useRouter();
|
|
||||||
const [user, setUser] = useState<User>();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function getUser() {
|
|
||||||
const supabase = createClient();
|
|
||||||
|
|
||||||
const { data, error } = await supabase.auth.getUser();
|
|
||||||
|
|
||||||
console.log(data, error);
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
console.log("Accessed resource page but not logged in");
|
|
||||||
router.push("/auth/login");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const userData = await fetch(
|
|
||||||
`${process.env.NEXT_PUBLIC_HOST}/api/user?uuid=${data.user.id}`
|
|
||||||
);
|
|
||||||
|
|
||||||
const user: User = await userData.json();
|
|
||||||
|
|
||||||
setUser(user);
|
|
||||||
}
|
|
||||||
|
|
||||||
getUser();
|
|
||||||
}, [router]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex-row">
|
|
||||||
{user ? (
|
|
||||||
<div>
|
|
||||||
{/* button to open sidebar */}
|
|
||||||
<button
|
|
||||||
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
|
||||||
className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
|
|
||||||
aria-label={"Open sidebar"}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
!isSidebarOpen && (
|
|
||||||
<ChevronDoubleRightIcon className="h-5 w-5" />
|
|
||||||
) // Icon for closing the sidebar
|
|
||||||
}
|
|
||||||
</button>
|
|
||||||
{/* sidebar */}
|
|
||||||
<div
|
|
||||||
className={`absolute inset-y-0 left-0 transform ${
|
|
||||||
isSidebarOpen
|
|
||||||
? "translate-x-0"
|
|
||||||
: "-translate-x-full"
|
|
||||||
} w-64 transition duration-300 ease-in-out`}
|
|
||||||
>
|
|
||||||
<Sidebar
|
|
||||||
setIsSidebarOpen={setIsSidebarOpen}
|
|
||||||
name={user.username}
|
|
||||||
email={user.email}
|
|
||||||
isAdmin={user.role === Role.ADMIN}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/* page ui */}
|
|
||||||
<div
|
|
||||||
className={`flex-1 transition duration-300 ease-in-out ${
|
|
||||||
isSidebarOpen ? "ml-64" : "ml-0"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<Loading />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,177 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { PageLayout } from "@/components/PageLayout";
|
|
||||||
import { RowOpenAction } from "@/components/Table/RowOpenAction";
|
|
||||||
import { RowOptionMenu } from "@/components/Table/RowOptionMenu";
|
|
||||||
import { TestTable } from "@/components/Table/TestIndex";
|
|
||||||
import TagsInput from "@/components/TagsInput/Index";
|
|
||||||
import Resource from "@/utils/models/Resource";
|
|
||||||
import { createClient } from "@/utils/supabase/client";
|
|
||||||
|
|
||||||
import { Bars2Icon, BookmarkIcon } from "@heroicons/react/24/solid";
|
|
||||||
import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
const [resources, setResources] = useState<Resource[]>([]);
|
|
||||||
const columnHelper = createColumnHelper<Resource>();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function getResources() {
|
|
||||||
const supabase = createClient();
|
|
||||||
|
|
||||||
const { data, error } = await supabase.auth.getUser();
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
console.log("Accessed admin page but not logged in");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const userListData = await fetch(
|
|
||||||
`${process.env.NEXT_PUBLIC_HOST}/api/resource/all?uuid=${data.user.id}`
|
|
||||||
);
|
|
||||||
|
|
||||||
const resourcesAPI: Resource[] = await userListData.json();
|
|
||||||
|
|
||||||
setResources(resourcesAPI);
|
|
||||||
}
|
|
||||||
|
|
||||||
getResources();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const [data, setData] = useState<Resource[]>([]);
|
|
||||||
|
|
||||||
const deleteUser = (userId: number) => {
|
|
||||||
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 addUser = () => {
|
|
||||||
setData([...data]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [presetOptions, setPresetOptions] = useState([
|
|
||||||
"administrator",
|
|
||||||
"volunteer",
|
|
||||||
"employee",
|
|
||||||
]);
|
|
||||||
const [tagColors, setTagColors] = useState(new Map());
|
|
||||||
|
|
||||||
const getTagColor = (tag: string) => {
|
|
||||||
if (!tagColors.has(tag)) {
|
|
||||||
const colors = [
|
|
||||||
"bg-cyan-100",
|
|
||||||
"bg-blue-100",
|
|
||||||
"bg-green-100",
|
|
||||||
"bg-yellow-100",
|
|
||||||
"bg-purple-100",
|
|
||||||
];
|
|
||||||
const randomColor =
|
|
||||||
colors[Math.floor(Math.random() * colors.length)];
|
|
||||||
setTagColors(new Map(tagColors).set(tag, randomColor));
|
|
||||||
}
|
|
||||||
return tagColors.get(tag);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRowUpdate = (updatedRow: Resource) => {
|
|
||||||
const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
|
|
||||||
if (dataIndex !== -1) {
|
|
||||||
const updatedData = [...data];
|
|
||||||
updatedData[dataIndex] = updatedRow;
|
|
||||||
setData(updatedData);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const columns: ColumnDef<Resource, any>[] = [
|
|
||||||
columnHelper.display({
|
|
||||||
id: "options",
|
|
||||||
cell: (props) => (
|
|
||||||
<RowOptionMenu
|
|
||||||
onDelete={() => {}}
|
|
||||||
onHide={() => hideUser(props.row.original.id)}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
columnHelper.accessor("name", {
|
|
||||||
header: () => (
|
|
||||||
<>
|
|
||||||
<Bars2Icon className="inline align-top h-4" /> Name
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => (
|
|
||||||
<RowOpenAction
|
|
||||||
title={info.getValue()}
|
|
||||||
rowData={info.row.original}
|
|
||||||
onRowUpdate={handleRowUpdate}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
columnHelper.accessor("link", {
|
|
||||||
header: () => (
|
|
||||||
<>
|
|
||||||
<Bars2Icon className="inline align-top h-4" /> Link
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => (
|
|
||||||
<a
|
|
||||||
href={info.getValue()}
|
|
||||||
target={"_blank"}
|
|
||||||
className="ml-2 text-gray-500 underline hover:text-gray-400"
|
|
||||||
>
|
|
||||||
{info.getValue()}
|
|
||||||
</a>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
columnHelper.accessor("program", {
|
|
||||||
header: () => (
|
|
||||||
<>
|
|
||||||
<Bars2Icon className="inline align-top h-4" /> Program
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => (
|
|
||||||
<TagsInput presetValue={info.getValue()} />
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
|
|
||||||
columnHelper.accessor("summary", {
|
|
||||||
header: () => (
|
|
||||||
<>
|
|
||||||
<Bars2Icon className="inline align-top h-4" /> Summary
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => (
|
|
||||||
<span className="ml-2 text-gray-500">{info.getValue()}</span>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex flex-col">
|
|
||||||
{/* icon + title */}
|
|
||||||
<PageLayout title="Resources" icon={<BookmarkIcon />}>
|
|
||||||
<TestTable initialData={resources} columns={columns}/>
|
|
||||||
</PageLayout>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { PageLayout } from "@/components/PageLayout";
|
import { PageLayout } from "@/components/PageLayout";
|
||||||
import { ServiceTable } from "@/components/Table/ServiceIndex";
|
import ServiceTable from "@/components/Table/ServiceIndex";
|
||||||
import Service from "@/utils/models/Service";
|
import Service from "@/utils/models/Service";
|
||||||
import { createClient } from "@/utils/supabase/client";
|
import { createClient } from "@/utils/supabase/client";
|
||||||
|
|
||||||
|
|
@ -37,7 +37,7 @@ export default function Page() {
|
||||||
<div className="min-h-screen flex flex-col">
|
<div className="min-h-screen flex flex-col">
|
||||||
{/* icon + title */}
|
{/* icon + title */}
|
||||||
<PageLayout title="Services" icon={<ClipboardIcon />}>
|
<PageLayout title="Services" icon={<ClipboardIcon />}>
|
||||||
<ServiceTable users={services} />
|
<ServiceTable services={services} />
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,306 +0,0 @@
|
||||||
// for showcasing to compass
|
|
||||||
|
|
||||||
import users from "./users.json";
|
|
||||||
import {
|
|
||||||
Cell,
|
|
||||||
ColumnDef,
|
|
||||||
Row,
|
|
||||||
createColumnHelper,
|
|
||||||
flexRender,
|
|
||||||
getCoreRowModel,
|
|
||||||
getFilteredRowModel,
|
|
||||||
sortingFns,
|
|
||||||
useReactTable,
|
|
||||||
} from "@tanstack/react-table";
|
|
||||||
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,
|
|
||||||
ArrowDownCircleIcon,
|
|
||||||
PlusIcon,
|
|
||||||
} from "@heroicons/react/24/solid";
|
|
||||||
import TagsInput from "../TagsInput/Index";
|
|
||||||
import { rankItem } from "@tanstack/match-sorter-utils";
|
|
||||||
import User from "@/utils/models/User";
|
|
||||||
|
|
||||||
// For search
|
|
||||||
const fuzzyFilter = (
|
|
||||||
row: Row<any>,
|
|
||||||
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 = ({ users }: { users: User[] }) => {
|
|
||||||
const columnHelper = createColumnHelper<User>();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const sortedUsers = [...users].sort((a, b) =>
|
|
||||||
a.visible === b.visible ? 0 : a.visible ? -1 : 1
|
|
||||||
);
|
|
||||||
setData(sortedUsers);
|
|
||||||
}, [users]);
|
|
||||||
|
|
||||||
const deleteUser = (userId: number) => {
|
|
||||||
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());
|
|
||||||
|
|
||||||
const getTagColor = (tag: string) => {
|
|
||||||
if (!tagColors.has(tag)) {
|
|
||||||
const colors = [
|
|
||||||
"bg-cyan-100",
|
|
||||||
"bg-blue-100",
|
|
||||||
"bg-green-100",
|
|
||||||
"bg-yellow-100",
|
|
||||||
"bg-purple-100",
|
|
||||||
];
|
|
||||||
const randomColor =
|
|
||||||
colors[Math.floor(Math.random() * colors.length)];
|
|
||||||
setTagColors(new Map(tagColors).set(tag, randomColor));
|
|
||||||
}
|
|
||||||
return tagColors.get(tag);
|
|
||||||
};
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
columnHelper.display({
|
|
||||||
id: "options",
|
|
||||||
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
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => (
|
|
||||||
<RowOpenAction
|
|
||||||
title={info.getValue()}
|
|
||||||
rowData={info.row.original}
|
|
||||||
onRowUpdate={handleRowUpdate}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
columnHelper.accessor("role", {
|
|
||||||
header: () => (
|
|
||||||
<>
|
|
||||||
<ArrowDownCircleIcon className="inline align-top h-4" />{" "}
|
|
||||||
Role
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => (
|
|
||||||
<TagsInput
|
|
||||||
presetValue={info.getValue()}
|
|
||||||
presetOptions={presetOptions}
|
|
||||||
setPresetOptions={setPresetOptions}
|
|
||||||
getTagColor={getTagColor}
|
|
||||||
setTagColors={setTagColors}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
columnHelper.accessor("email", {
|
|
||||||
header: () => (
|
|
||||||
<>
|
|
||||||
<AtSymbolIcon className="inline align-top h-4" /> Email
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => (
|
|
||||||
<span className="ml-2 text-gray-500 underline hover:text-gray-400">
|
|
||||||
{info.getValue()}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
columnHelper.accessor("program", {
|
|
||||||
header: () => (
|
|
||||||
<>
|
|
||||||
<ArrowDownCircleIcon className="inline align-top h-4" />{" "}
|
|
||||||
Program
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => <TagsInput presetValue={info.getValue()} />,
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
|
|
||||||
const [data, setData] = useState<User[]>([...users]);
|
|
||||||
|
|
||||||
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);
|
|
||||||
if (dataIndex !== -1) {
|
|
||||||
const updatedData = [...data];
|
|
||||||
updatedData[dataIndex] = updatedRow;
|
|
||||||
setData(updatedData);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const table = useReactTable({
|
|
||||||
columns,
|
|
||||||
data,
|
|
||||||
filterFns: {
|
|
||||||
fuzzy: fuzzyFilter,
|
|
||||||
},
|
|
||||||
state: {
|
|
||||||
globalFilter: query,
|
|
||||||
},
|
|
||||||
onGlobalFilterChange: setQuery,
|
|
||||||
globalFilterFn: fuzzyFilter,
|
|
||||||
getCoreRowModel: getCoreRowModel(),
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleRowData = (row: any) => {
|
|
||||||
const rowData: any = {};
|
|
||||||
row.cells.forEach((cell: any) => {
|
|
||||||
rowData[cell.column.id] = cell.value;
|
|
||||||
});
|
|
||||||
// Use rowData object containing data from all columns for the current row
|
|
||||||
console.log(rowData);
|
|
||||||
return rowData;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<div className="flex flex-row justify-end">
|
|
||||||
<TableAction query={query} handleChange={handleSearchChange} />
|
|
||||||
</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>
|
|
||||||
{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 (
|
|
||||||
<tr className={rowClassNames} key={row.id}>
|
|
||||||
{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"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{flexRender(
|
|
||||||
cell.column.columnDef.cell,
|
|
||||||
cell.getContext()
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td
|
|
||||||
className="p-3 border-y border-gray-200 text-gray-600 hover:bg-gray-50"
|
|
||||||
colSpan={100}
|
|
||||||
onClick={addUser}
|
|
||||||
>
|
|
||||||
<span className="flex ml-1 text-gray-500">
|
|
||||||
<PlusIcon className="inline h-4 mr-1" />
|
|
||||||
New
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,305 +1,95 @@
|
||||||
// for showcasing to compass
|
import { Bars2Icon } from "@heroicons/react/24/solid";
|
||||||
|
import { useState } from "react";
|
||||||
import users from "./users.json";
|
import useTagsHandler from "@/components/TagsInput/TagsHandler";
|
||||||
import {
|
import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
|
||||||
Cell,
|
import { Table } from "@/components/Table/Table";
|
||||||
ColumnDef,
|
import { RowOpenAction } from "@/components/Table/RowOpenAction";
|
||||||
Row,
|
import TagsInput from "@/components/TagsInput/Index";
|
||||||
createColumnHelper,
|
import Resource from "@/utils/models/Resource";
|
||||||
flexRender,
|
import { DataPoint } from "@/components/Table/Table";
|
||||||
getCoreRowModel,
|
|
||||||
getFilteredRowModel,
|
/**
|
||||||
sortingFns,
|
* Table componenet used for displaying resources
|
||||||
useReactTable,
|
* @param props.resources List of resources to be displayed by the table
|
||||||
} from "@tanstack/react-table";
|
*/
|
||||||
import {
|
export default function ResourceTable({ resources }: { resources: Resource[] }) {
|
||||||
ChangeEvent,
|
const columnHelper = createColumnHelper<Resource>();
|
||||||
useState,
|
const [data, setData] = useState<DataPoint[]>([...resources]);
|
||||||
useEffect,
|
|
||||||
FunctionComponent,
|
// TODO: Update preset options for resources
|
||||||
useRef,
|
const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([
|
||||||
ChangeEventHandler,
|
"administrator",
|
||||||
Key,
|
"volunteer",
|
||||||
} from "react";
|
"employee",
|
||||||
import { RowOptionMenu } from "./RowOptionMenu";
|
])
|
||||||
import { RowOpenAction } from "./RowOpenAction";
|
|
||||||
import { TableAction } from "./TableAction";
|
const handleRowUpdate = (updatedRow: DataPoint) => {
|
||||||
import {
|
const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
|
||||||
AtSymbolIcon,
|
if (dataIndex !== -1) {
|
||||||
Bars2Icon,
|
const updatedData = [...data];
|
||||||
ArrowDownCircleIcon,
|
updatedData[dataIndex] = updatedRow;
|
||||||
PlusIcon,
|
setData(updatedData);
|
||||||
} from "@heroicons/react/24/solid";
|
}
|
||||||
import TagsInput from "../TagsInput/Index";
|
};
|
||||||
import { rankItem } from "@tanstack/match-sorter-utils";
|
|
||||||
import Resource from "@/utils/models/Resource";
|
const columns: ColumnDef<Resource, any>[] = [
|
||||||
|
columnHelper.accessor("name", {
|
||||||
// For search
|
header: () => (
|
||||||
const fuzzyFilter = (
|
<>
|
||||||
row: Row<any>,
|
<Bars2Icon className="inline align-top h-4" /> Name
|
||||||
columnId: string,
|
</>
|
||||||
value: any,
|
),
|
||||||
addMeta: (meta: any) => void
|
cell: (info) => (
|
||||||
) => {
|
<RowOpenAction
|
||||||
// Rank the item
|
title={info.getValue()}
|
||||||
const itemRank = rankItem(row.getValue(columnId), value);
|
rowData={info.row.original}
|
||||||
|
onRowUpdate={handleRowUpdate}
|
||||||
// Store the ranking info
|
/>
|
||||||
addMeta(itemRank);
|
),
|
||||||
|
}),
|
||||||
// Return if the item should be filtered in/out
|
columnHelper.accessor("link", {
|
||||||
return itemRank.passed;
|
header: () => (
|
||||||
};
|
<>
|
||||||
|
<Bars2Icon className="inline align-top h-4" /> Link
|
||||||
// TODO: Rename everything to resources
|
</>
|
||||||
export const ResourceTable = ({ users }: { users: Resource[] }) => {
|
),
|
||||||
const columnHelper = createColumnHelper<Resource>();
|
cell: (info) => (
|
||||||
|
<a
|
||||||
useEffect(() => {
|
href={info.getValue()}
|
||||||
const sortedUsers = [...users].sort((a, b) =>
|
target={"_blank"}
|
||||||
a.visible === b.visible ? 0 : a.visible ? -1 : 1
|
className="ml-2 text-gray-500 underline hover:text-gray-400"
|
||||||
);
|
>
|
||||||
setData(sortedUsers);
|
{info.getValue()}
|
||||||
}, [users]);
|
</a>
|
||||||
|
),
|
||||||
const [presetOptions, setPresetOptions] = useState([
|
}),
|
||||||
"administrator",
|
columnHelper.accessor("program", {
|
||||||
"volunteer",
|
header: () => (
|
||||||
"employee",
|
<>
|
||||||
]);
|
<Bars2Icon className="inline align-top h-4" /> Program
|
||||||
|
</>
|
||||||
const deleteUser = (userId: number) => {
|
),
|
||||||
console.log(data);
|
cell: (info) => (
|
||||||
setData((currentData) =>
|
<TagsInput
|
||||||
currentData.filter((user) => user.id !== userId)
|
presetValue={info.getValue()}
|
||||||
);
|
presetOptions={presetOptions}
|
||||||
};
|
setPresetOptions={setPresetOptions}
|
||||||
|
getTagColor={getTagColor}
|
||||||
const hideUser = (userId: number) => {
|
/>
|
||||||
console.log(`Toggling visibility for user with ID: ${userId}`);
|
),
|
||||||
setData((currentData) => {
|
}),
|
||||||
const newData = currentData
|
|
||||||
.map((user) => {
|
columnHelper.accessor("summary", {
|
||||||
if (user.id === userId) {
|
header: () => (
|
||||||
return { ...user, visible: !user.visible };
|
<>
|
||||||
}
|
<Bars2Icon className="inline align-top h-4" /> Summary
|
||||||
return user;
|
</>
|
||||||
})
|
),
|
||||||
.sort((a, b) =>
|
cell: (info) => (
|
||||||
a.visible === b.visible ? 0 : a.visible ? -1 : 1
|
<span className="ml-2 text-gray-500">{info.getValue()}</span>
|
||||||
);
|
),
|
||||||
|
}),
|
||||||
console.log(newData);
|
];
|
||||||
return newData;
|
|
||||||
});
|
return <Table data={data} setData={setData} columns={columns}/>
|
||||||
};
|
}
|
||||||
const [tagColors, setTagColors] = useState(new Map());
|
|
||||||
|
|
||||||
const getTagColor = (tag: string) => {
|
|
||||||
if (!tagColors.has(tag)) {
|
|
||||||
const colors = [
|
|
||||||
"bg-cyan-100",
|
|
||||||
"bg-blue-100",
|
|
||||||
"bg-green-100",
|
|
||||||
"bg-yellow-100",
|
|
||||||
"bg-purple-100",
|
|
||||||
];
|
|
||||||
const randomColor =
|
|
||||||
colors[Math.floor(Math.random() * colors.length)];
|
|
||||||
setTagColors(new Map(tagColors).set(tag, randomColor));
|
|
||||||
}
|
|
||||||
return tagColors.get(tag);
|
|
||||||
};
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
columnHelper.display({
|
|
||||||
id: "options",
|
|
||||||
cell: (props) => (
|
|
||||||
<RowOptionMenu
|
|
||||||
onDelete={() => {}}
|
|
||||||
onHide={() => hideUser(props.row.original.id)}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
columnHelper.accessor("name", {
|
|
||||||
header: () => (
|
|
||||||
<>
|
|
||||||
<Bars2Icon className="inline align-top h-4" /> Name
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => (
|
|
||||||
<RowOpenAction
|
|
||||||
title={info.getValue()}
|
|
||||||
rowData={info.row.original}
|
|
||||||
onRowUpdate={handleRowUpdate}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
columnHelper.accessor("link", {
|
|
||||||
header: () => (
|
|
||||||
<>
|
|
||||||
<Bars2Icon className="inline align-top h-4" /> Link
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => (
|
|
||||||
<a
|
|
||||||
href={info.getValue()}
|
|
||||||
target={"_blank"}
|
|
||||||
className="ml-2 text-gray-500 underline hover:text-gray-400"
|
|
||||||
>
|
|
||||||
{info.getValue()}
|
|
||||||
</a>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
columnHelper.accessor("program", {
|
|
||||||
header: () => (
|
|
||||||
<>
|
|
||||||
<Bars2Icon className="inline align-top h-4" /> Program
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => <TagsInput presetValue={info.getValue()} />,
|
|
||||||
}),
|
|
||||||
|
|
||||||
columnHelper.accessor("summary", {
|
|
||||||
header: () => (
|
|
||||||
<>
|
|
||||||
<Bars2Icon className="inline align-top h-4" /> Summary
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
cell: (info) => (
|
|
||||||
<span className="ml-2 text-gray-500">{info.getValue()}</span>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
|
|
||||||
const [data, setData] = useState<Resource[]>([...users]);
|
|
||||||
|
|
||||||
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: Resource) => {
|
|
||||||
const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
|
|
||||||
if (dataIndex !== -1) {
|
|
||||||
const updatedData = [...data];
|
|
||||||
updatedData[dataIndex] = updatedRow;
|
|
||||||
setData(updatedData);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const table = useReactTable({
|
|
||||||
columns,
|
|
||||||
data,
|
|
||||||
filterFns: {
|
|
||||||
fuzzy: fuzzyFilter,
|
|
||||||
},
|
|
||||||
state: {
|
|
||||||
globalFilter: query,
|
|
||||||
},
|
|
||||||
onGlobalFilterChange: setQuery,
|
|
||||||
globalFilterFn: fuzzyFilter,
|
|
||||||
getCoreRowModel: getCoreRowModel(),
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleRowData = (row: any) => {
|
|
||||||
const rowData: any = {};
|
|
||||||
row.cells.forEach((cell: any) => {
|
|
||||||
rowData[cell.column.id] = cell.value;
|
|
||||||
});
|
|
||||||
// Use rowData object containing data from all columns for the current row
|
|
||||||
console.log(rowData);
|
|
||||||
return rowData;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<div className="flex flex-row justify-end">
|
|
||||||
<TableAction query={query} handleChange={handleSearchChange} />
|
|
||||||
</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>
|
|
||||||
{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 (
|
|
||||||
<tr className={rowClassNames} key={row.id}>
|
|
||||||
{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"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{flexRender(
|
|
||||||
cell.column.columnDef.cell,
|
|
||||||
cell.getContext()
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td
|
|
||||||
className="p-3 border-y border-gray-200 text-gray-600 hover:bg-gray-50"
|
|
||||||
colSpan={100}
|
|
||||||
onClick={addUser}
|
|
||||||
>
|
|
||||||
<span className="flex ml-1 text-gray-500">
|
|
||||||
<PlusIcon className="inline h-4 mr-1" />
|
|
||||||
New
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,17 @@
|
||||||
import Drawer from "@/components/Drawer/Drawer";
|
import Drawer from "@/components/Drawer/Drawer";
|
||||||
import { ChangeEvent, useState } from "react";
|
import { useState } from "react";
|
||||||
|
import { DataPoint } from "@/components/Table/Table";
|
||||||
|
|
||||||
export const RowOpenAction = ({ title, rowData, onRowUpdate }) => {
|
type RowOpenActionProps = {
|
||||||
|
title: string,
|
||||||
|
rowData: DataPoint,
|
||||||
|
onRowUpdate: (updatedRow: DataPoint) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RowOpenAction = ({ title, rowData, onRowUpdate }: RowOpenActionProps) => {
|
||||||
const [pageContent, setPageContent] = useState("");
|
const [pageContent, setPageContent] = useState("");
|
||||||
|
|
||||||
const handleDrawerContentChange = (newContent) => {
|
const handleDrawerContentChange = (newContent: string) => {
|
||||||
setPageContent(newContent);
|
setPageContent(newContent);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,125 +1,38 @@
|
||||||
// for showcasing to compass
|
import { Bars2Icon } from "@heroicons/react/24/solid";
|
||||||
|
import { useState } from "react";
|
||||||
import users from "./users.json";
|
import useTagsHandler from "@/components/TagsInput/TagsHandler";
|
||||||
import {
|
import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
|
||||||
Cell,
|
import { Table } from "@/components/Table/Table";
|
||||||
ColumnDef,
|
import { RowOpenAction } from "@/components/Table/RowOpenAction";
|
||||||
Row,
|
import TagsInput from "@/components/TagsInput/Index";
|
||||||
createColumnHelper,
|
|
||||||
flexRender,
|
|
||||||
getCoreRowModel,
|
|
||||||
getFilteredRowModel,
|
|
||||||
sortingFns,
|
|
||||||
useReactTable,
|
|
||||||
} from "@tanstack/react-table";
|
|
||||||
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,
|
|
||||||
ArrowDownCircleIcon,
|
|
||||||
PlusIcon,
|
|
||||||
} from "@heroicons/react/24/solid";
|
|
||||||
import TagsInput from "../TagsInput/Index";
|
|
||||||
import { rankItem } from "@tanstack/match-sorter-utils";
|
|
||||||
import Service from "@/utils/models/Service";
|
import Service from "@/utils/models/Service";
|
||||||
|
import { DataPoint } from "@/components/Table/Table";
|
||||||
|
|
||||||
// For search
|
/**
|
||||||
const fuzzyFilter = (
|
* Table componenet used for displaying services
|
||||||
row: Row<any>,
|
* @param props.services List of services to be displayed by the table
|
||||||
columnId: string,
|
*/
|
||||||
value: any,
|
export default function ServiceTable({ services }: { services: Service[] }) {
|
||||||
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;
|
|
||||||
};
|
|
||||||
|
|
||||||
// TODO: Rename everything to service
|
|
||||||
export const ServiceTable = ({ users }: { users: Service[] }) => {
|
|
||||||
const columnHelper = createColumnHelper<Service>();
|
const columnHelper = createColumnHelper<Service>();
|
||||||
|
const [data, setData] = useState<DataPoint[]>([...services]);
|
||||||
useEffect(() => {
|
|
||||||
const sortedUsers = [...users].sort((a, b) =>
|
// TODO: Update preset options for services
|
||||||
a.visible === b.visible ? 0 : a.visible ? -1 : 1
|
const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([
|
||||||
);
|
|
||||||
setData(sortedUsers);
|
|
||||||
}, [users]);
|
|
||||||
|
|
||||||
const deleteUser = (userId: number) => {
|
|
||||||
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",
|
"administrator",
|
||||||
"volunteer",
|
"volunteer",
|
||||||
"employee",
|
"employee",
|
||||||
]);
|
])
|
||||||
const [tagColors, setTagColors] = useState(new Map());
|
|
||||||
|
|
||||||
const getTagColor = (tag: string) => {
|
const handleRowUpdate = (updatedRow: DataPoint) => {
|
||||||
if (!tagColors.has(tag)) {
|
const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
|
||||||
const colors = [
|
if (dataIndex !== -1) {
|
||||||
"bg-cyan-100",
|
const updatedData = [...data];
|
||||||
"bg-blue-100",
|
updatedData[dataIndex] = updatedRow;
|
||||||
"bg-green-100",
|
setData(updatedData);
|
||||||
"bg-yellow-100",
|
|
||||||
"bg-purple-100",
|
|
||||||
];
|
|
||||||
const randomColor =
|
|
||||||
colors[Math.floor(Math.random() * colors.length)];
|
|
||||||
setTagColors(new Map(tagColors).set(tag, randomColor));
|
|
||||||
}
|
}
|
||||||
return tagColors.get(tag);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const columns = [
|
const columns: ColumnDef<Service, any>[] = [
|
||||||
columnHelper.display({
|
|
||||||
id: "options",
|
|
||||||
cell: (props) => (
|
|
||||||
<RowOptionMenu
|
|
||||||
onDelete={() => {}}
|
|
||||||
onHide={() => hideUser(props.row.original.id)}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
columnHelper.accessor("name", {
|
columnHelper.accessor("name", {
|
||||||
header: () => (
|
header: () => (
|
||||||
<>
|
<>
|
||||||
|
|
@ -150,7 +63,14 @@ export const ServiceTable = ({ users }: { users: Service[] }) => {
|
||||||
<Bars2Icon className="inline align-top h-4" /> Program
|
<Bars2Icon className="inline align-top h-4" /> Program
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
cell: (info) => <TagsInput presetValue={info.getValue()} />,
|
cell: (info) => (
|
||||||
|
<TagsInput
|
||||||
|
presetValue={info.getValue()}
|
||||||
|
presetOptions={presetOptions}
|
||||||
|
setPresetOptions={setPresetOptions}
|
||||||
|
getTagColor={getTagColor}
|
||||||
|
/>
|
||||||
|
),
|
||||||
}),
|
}),
|
||||||
columnHelper.accessor("requirements", {
|
columnHelper.accessor("requirements", {
|
||||||
header: () => (
|
header: () => (
|
||||||
|
|
@ -159,10 +79,12 @@ export const ServiceTable = ({ users }: { users: Service[] }) => {
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
cell: (info) => (
|
cell: (info) => (
|
||||||
|
// TODO: Setup different tag handler for requirements
|
||||||
<TagsInput
|
<TagsInput
|
||||||
presetValue={
|
presetValue={info.getValue()[0] !== "" ? info.getValue() : ["N/A"]}
|
||||||
info.getValue()[0] !== "" ? info.getValue() : ["N/A"]
|
presetOptions={presetOptions}
|
||||||
}
|
setPresetOptions={setPresetOptions}
|
||||||
|
getTagColor={getTagColor}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
}),
|
}),
|
||||||
|
|
@ -179,134 +101,5 @@ export const ServiceTable = ({ users }: { users: Service[] }) => {
|
||||||
}),
|
}),
|
||||||
];
|
];
|
||||||
|
|
||||||
const [data, setData] = useState<Service[]>([...users]);
|
return <Table data={data} setData={setData} columns={columns} />
|
||||||
|
|
||||||
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: Service) => {
|
|
||||||
const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
|
|
||||||
if (dataIndex !== -1) {
|
|
||||||
const updatedData = [...data];
|
|
||||||
updatedData[dataIndex] = updatedRow;
|
|
||||||
setData(updatedData);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const table = useReactTable({
|
|
||||||
columns,
|
|
||||||
data,
|
|
||||||
filterFns: {
|
|
||||||
fuzzy: fuzzyFilter,
|
|
||||||
},
|
|
||||||
state: {
|
|
||||||
globalFilter: query,
|
|
||||||
},
|
|
||||||
onGlobalFilterChange: setQuery,
|
|
||||||
globalFilterFn: fuzzyFilter,
|
|
||||||
getCoreRowModel: getCoreRowModel(),
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleRowData = (row: any) => {
|
|
||||||
const rowData: any = {};
|
|
||||||
row.cells.forEach((cell: any) => {
|
|
||||||
rowData[cell.column.id] = cell.value;
|
|
||||||
});
|
|
||||||
// Use rowData object containing data from all columns for the current row
|
|
||||||
console.log(rowData);
|
|
||||||
return rowData;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<div className="flex flex-row justify-end">
|
|
||||||
<TableAction query={query} handleChange={handleSearchChange} />
|
|
||||||
</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>
|
|
||||||
{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 (
|
|
||||||
<tr className={rowClassNames} key={row.id}>
|
|
||||||
{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"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{flexRender(
|
|
||||||
cell.column.columnDef.cell,
|
|
||||||
cell.getContext()
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td
|
|
||||||
className="p-3 border-y border-gray-200 text-gray-600 hover:bg-gray-50"
|
|
||||||
colSpan={100}
|
|
||||||
onClick={addUser}
|
|
||||||
>
|
|
||||||
<span className="flex ml-1 text-gray-500">
|
|
||||||
<PlusIcon className="inline h-4 mr-1" />
|
|
||||||
New
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,34 @@
|
||||||
// for showcasing to compass
|
import {
|
||||||
import {
|
|
||||||
Cell,
|
|
||||||
ColumnDef,
|
|
||||||
Row,
|
Row,
|
||||||
createColumnHelper,
|
ColumnDef,
|
||||||
flexRender,
|
|
||||||
getCoreRowModel,
|
|
||||||
getFilteredRowModel,
|
|
||||||
sortingFns,
|
|
||||||
useReactTable,
|
useReactTable,
|
||||||
} from "@tanstack/react-table";
|
getCoreRowModel,
|
||||||
|
flexRender,
|
||||||
|
createColumnHelper
|
||||||
|
} from "@tanstack/react-table";
|
||||||
import {
|
import {
|
||||||
ChangeEvent,
|
ChangeEvent,
|
||||||
useState,
|
useState,
|
||||||
useEffect,
|
useEffect,
|
||||||
FunctionComponent,
|
|
||||||
useRef,
|
|
||||||
ChangeEventHandler,
|
|
||||||
Key,
|
Key,
|
||||||
|
Dispatch,
|
||||||
|
SetStateAction
|
||||||
} from "react";
|
} from "react";
|
||||||
import { RowOptionMenu } from "./RowOptionMenu";
|
|
||||||
import { RowOpenAction } from "./RowOpenAction";
|
|
||||||
import { TableAction } from "./TableAction";
|
import { TableAction } from "./TableAction";
|
||||||
import {
|
import { PlusIcon } from "@heroicons/react/24/solid";
|
||||||
AtSymbolIcon,
|
|
||||||
Bars2Icon,
|
|
||||||
ArrowDownCircleIcon,
|
|
||||||
PlusIcon,
|
|
||||||
} from "@heroicons/react/24/solid";
|
|
||||||
import TagsInput from "../TagsInput/Index";
|
|
||||||
import { rankItem } from "@tanstack/match-sorter-utils";
|
import { rankItem } from "@tanstack/match-sorter-utils";
|
||||||
import Resource from "@/utils/models/Resource";
|
import Resource from "@/utils/models/Resource";
|
||||||
|
import Service from "@/utils/models/Service";
|
||||||
|
import User from "@/utils/models/User";
|
||||||
|
import { RowOptionMenu } from "./RowOptionMenu";
|
||||||
|
|
||||||
|
export type DataPoint = Resource | User | Service;
|
||||||
|
|
||||||
|
type TableProps = {
|
||||||
|
data: DataPoint[],
|
||||||
|
setData: Dispatch<SetStateAction<DataPoint[]>>
|
||||||
|
columns: ColumnDef<any, any>[]
|
||||||
|
};
|
||||||
|
|
||||||
// For search
|
// For search
|
||||||
const fuzzyFilter = (
|
const fuzzyFilter = (
|
||||||
|
|
@ -49,16 +47,66 @@ const fuzzyFilter = (
|
||||||
return itemRank.passed;
|
return itemRank.passed;
|
||||||
};
|
};
|
||||||
|
|
||||||
// TODO: Rename everything to resources
|
/**
|
||||||
export const TestTable = ({ initialData, columns }: { initialData: Resource[], columns: ColumnDef<any, any>[] }) => {
|
* General componenet that holds shared functionality for any data table component
|
||||||
|
* @param props.data List of data, managed through state, to be held in the table
|
||||||
|
* @param props.setData State setter to be used for data manipulation methods
|
||||||
|
* @param props.columns Column definitions made with Tanstack columnHelper
|
||||||
|
*/
|
||||||
|
export const Table = ({ data, setData, columns }: TableProps) => {
|
||||||
|
const columnHelper = createColumnHelper<Resource>();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const sortedData = [...initialData].sort((a, b) =>
|
const sortedData = [...data].sort((a, b) =>
|
||||||
a.visible === b.visible ? 0 : a.visible ? -1 : 1
|
a.visible === b.visible ? 0 : a.visible ? -1 : 1
|
||||||
);
|
);
|
||||||
setData(sortedData);
|
setData(sortedData);
|
||||||
}, [initialData]);
|
}, [data, setData]);
|
||||||
|
|
||||||
const [data, setData] = useState<Resource[]>([...initialData]);
|
|
||||||
|
// Data manipulation
|
||||||
|
// TODO: Connect data manipulation methods to the database (deleteResource, hideResource, addResource)
|
||||||
|
const deleteData = (dataId: number) => {
|
||||||
|
console.log(data);
|
||||||
|
setData((currentData) =>
|
||||||
|
currentData.filter((data) => data.id !== dataId)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const hideData = (dataId: number) => {
|
||||||
|
console.log(`Toggling visibility for data with ID: ${dataId}`);
|
||||||
|
setData((currentData) => {
|
||||||
|
const newData = currentData
|
||||||
|
.map((data) => {
|
||||||
|
if (data.id === dataId) {
|
||||||
|
return { ...data, visible: !data.visible };
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
})
|
||||||
|
.sort((a, b) =>
|
||||||
|
a.visible === b.visible ? 0 : a.visible ? -1 : 1
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log(newData);
|
||||||
|
return newData;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const addData = () => {
|
||||||
|
setData([...data]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add data manipulation options to the first column
|
||||||
|
columns.unshift(
|
||||||
|
columnHelper.display({
|
||||||
|
id: "options",
|
||||||
|
cell: (props) => (
|
||||||
|
<RowOptionMenu
|
||||||
|
onDelete={() => deleteData(props.row.original.id)}
|
||||||
|
onHide={() => hideData(props.row.original.id)}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
// Searching
|
// Searching
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
|
|
@ -76,9 +124,6 @@ export const TestTable = ({ initialData, columns }: { initialData: Resource[], c
|
||||||
|
|
||||||
// TODO: Sorting
|
// TODO: Sorting
|
||||||
|
|
||||||
// added this fn for editing rows
|
|
||||||
|
|
||||||
|
|
||||||
const table = useReactTable({
|
const table = useReactTable({
|
||||||
columns,
|
columns,
|
||||||
data,
|
data,
|
||||||
|
|
@ -137,9 +182,9 @@ export const TestTable = ({ initialData, columns }: { initialData: Resource[], c
|
||||||
<tbody>
|
<tbody>
|
||||||
{table.getRowModel().rows.map((row) => {
|
{table.getRowModel().rows.map((row) => {
|
||||||
// Individual row
|
// Individual row
|
||||||
const isUserVisible = row.original.visible;
|
const isDataVisible = row.original.visible;
|
||||||
const rowClassNames = `text-gray-800 border-y lowercase hover:bg-gray-50 ${
|
const rowClassNames = `text-gray-800 border-y lowercase hover:bg-gray-50 ${
|
||||||
!isUserVisible ? "bg-gray-200 text-gray-500" : ""
|
!isDataVisible ? "bg-gray-200 text-gray-500" : ""
|
||||||
}`;
|
}`;
|
||||||
return (
|
return (
|
||||||
<tr className={rowClassNames} key={row.id}>
|
<tr className={rowClassNames} key={row.id}>
|
||||||
|
|
@ -165,7 +210,7 @@ export const TestTable = ({ initialData, columns }: { initialData: Resource[], c
|
||||||
<td
|
<td
|
||||||
className="p-3 border-y border-gray-200 text-gray-600 hover:bg-gray-50"
|
className="p-3 border-y border-gray-200 text-gray-600 hover:bg-gray-50"
|
||||||
colSpan={100}
|
colSpan={100}
|
||||||
onClick={addUser}
|
onClick={addData}
|
||||||
>
|
>
|
||||||
<span className="flex ml-1 text-gray-500">
|
<span className="flex ml-1 text-gray-500">
|
||||||
<PlusIcon className="inline h-4 mr-1" />
|
<PlusIcon className="inline h-4 mr-1" />
|
||||||
|
|
|
||||||
97
compass/components/Table/UserIndex.tsx
Normal file
97
compass/components/Table/UserIndex.tsx
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
import { ArrowDownCircleIcon, AtSymbolIcon, Bars2Icon } from "@heroicons/react/24/solid";
|
||||||
|
import { useState } from "react";
|
||||||
|
import useTagsHandler from "@/components/TagsInput/TagsHandler";
|
||||||
|
import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
|
||||||
|
import { Table } from "@/components/Table/Table";
|
||||||
|
import { RowOpenAction } from "@/components/Table/RowOpenAction";
|
||||||
|
import TagsInput from "@/components/TagsInput/Index";
|
||||||
|
import User from "@/utils/models/User";
|
||||||
|
import { DataPoint } from "@/components/Table/Table";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Table componenet used for displaying users
|
||||||
|
* @param props.users List of users to be displayed by the table
|
||||||
|
*/
|
||||||
|
export default function UserTable({ users }: { users: User[] }) {
|
||||||
|
const columnHelper = createColumnHelper<User>();
|
||||||
|
const [data, setData] = useState<DataPoint[]>([...users]);
|
||||||
|
|
||||||
|
const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([
|
||||||
|
"administrator",
|
||||||
|
"volunteer",
|
||||||
|
"employee",
|
||||||
|
])
|
||||||
|
|
||||||
|
const handleRowUpdate = (updatedRow: DataPoint) => {
|
||||||
|
const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
|
||||||
|
if (dataIndex !== -1) {
|
||||||
|
const updatedData = [...data];
|
||||||
|
updatedData[dataIndex] = updatedRow;
|
||||||
|
setData(updatedData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns: ColumnDef<User, any>[] = [
|
||||||
|
columnHelper.accessor("username", {
|
||||||
|
header: () => (
|
||||||
|
<>
|
||||||
|
<Bars2Icon className="inline align-top h-4" /> Username
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
cell: (info) => (
|
||||||
|
<RowOpenAction
|
||||||
|
title={info.getValue()}
|
||||||
|
rowData={info.row.original}
|
||||||
|
onRowUpdate={handleRowUpdate}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
columnHelper.accessor("role", {
|
||||||
|
header: () => (
|
||||||
|
<>
|
||||||
|
<ArrowDownCircleIcon className="inline align-top h-4" />{" "}
|
||||||
|
Role
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
cell: (info) => (
|
||||||
|
<TagsInput
|
||||||
|
presetValue={info.getValue()}
|
||||||
|
presetOptions={presetOptions}
|
||||||
|
setPresetOptions={setPresetOptions}
|
||||||
|
getTagColor={getTagColor}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
columnHelper.accessor("email", {
|
||||||
|
header: () => (
|
||||||
|
<>
|
||||||
|
<AtSymbolIcon className="inline align-top h-4" /> Email
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
cell: (info) => (
|
||||||
|
<span className="ml-2 text-gray-500 underline hover:text-gray-400">
|
||||||
|
{info.getValue()}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
columnHelper.accessor("program", {
|
||||||
|
header: () => (
|
||||||
|
<>
|
||||||
|
<ArrowDownCircleIcon className="inline align-top h-4" />{" "}
|
||||||
|
Program
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
// TODO: Setup different tags handler for program
|
||||||
|
cell: (info) => (
|
||||||
|
<TagsInput
|
||||||
|
presetValue={info.getValue()}
|
||||||
|
presetOptions={presetOptions}
|
||||||
|
setPresetOptions={setPresetOptions}
|
||||||
|
getTagColor={getTagColor}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
|
||||||
|
return <Table data={data} setData={setData} columns={columns}/>
|
||||||
|
}
|
||||||
|
|
@ -7,7 +7,7 @@ import { CreateNewTagAction } from "./CreateNewTagAction";
|
||||||
interface TagsInputProps {
|
interface TagsInputProps {
|
||||||
presetOptions: string[];
|
presetOptions: string[];
|
||||||
presetValue: string | string[];
|
presetValue: string | string[];
|
||||||
setPresetOptions: Dispatch<SetStateAction<string | string[]>>;
|
setPresetOptions: Dispatch<SetStateAction<string[]>>;
|
||||||
getTagColor(tag: string): string;
|
getTagColor(tag: string): string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
35
compass/components/TagsInput/TagsHandler.tsx
Normal file
35
compass/components/TagsInput/TagsHandler.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom hook used to handle the state of tag options and colors
|
||||||
|
* @param initialOptions Initial value for preset options
|
||||||
|
* @returns An object with three fields intended to be passed into a `TagsInput` component:
|
||||||
|
* - `presetOptions` - the current state of tag options
|
||||||
|
* - `setPresetOptions` - the state setter for presetOptions
|
||||||
|
* - `getTagColor` - function that retrieves the color for the given tag
|
||||||
|
*/
|
||||||
|
export default function useTagsHandler(initialOptions: string[]) {
|
||||||
|
const [presetOptions, setPresetOptions] = useState(initialOptions);
|
||||||
|
const [tagColors, setTagColors] = useState(new Map<string, string>());
|
||||||
|
|
||||||
|
const getTagColor = (tag: string): string => {
|
||||||
|
if (!tagColors.has(tag)) {
|
||||||
|
const colors = [
|
||||||
|
"bg-cyan-100",
|
||||||
|
"bg-blue-100",
|
||||||
|
"bg-green-100",
|
||||||
|
"bg-yellow-100",
|
||||||
|
"bg-purple-100",
|
||||||
|
];
|
||||||
|
const randomColor =
|
||||||
|
colors[Math.floor(Math.random() * colors.length)];
|
||||||
|
setTagColors(new Map(tagColors).set(tag, randomColor));
|
||||||
|
return randomColor;
|
||||||
|
}
|
||||||
|
// Since we populate any missing keys, .get will never return undefined,
|
||||||
|
// so we are safe to typecast to prevent a type error
|
||||||
|
return tagColors.get(tag) as string;
|
||||||
|
};
|
||||||
|
|
||||||
|
return { presetOptions, setPresetOptions, getTagColor }
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user