diff --git a/compass/app/resource_test/page.tsx b/compass/app/resource_test/page.tsx
new file mode 100644
index 0000000..519391e
--- /dev/null
+++ b/compass/app/resource_test/page.tsx
@@ -0,0 +1,177 @@
+"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>
+ );
+}
diff --git a/compass/components/Table/ResourceIndex.tsx b/compass/components/Table/ResourceIndex.tsx
index a714836..99dcbd3 100644
--- a/compass/components/Table/ResourceIndex.tsx
+++ b/compass/components/Table/ResourceIndex.tsx
@@ -61,7 +61,13 @@ export const ResourceTable = ({ users }: { users: Resource[] }) => {
);
setData(sortedUsers);
}, [users]);
-
+
+ const [presetOptions, setPresetOptions] = useState([
+ "administrator",
+ "volunteer",
+ "employee",
+ ]);
+
const deleteUser = (userId: number) => {
console.log(data);
setData((currentData) =>
@@ -87,11 +93,6 @@ export const ResourceTable = ({ users }: { users: Resource[] }) => {
return newData;
});
};
- const [presetOptions, setPresetOptions] = useState([
- "administrator",
- "volunteer",
- "employee",
- ]);
const [tagColors, setTagColors] = useState(new Map());
const getTagColor = (tag: string) => {
diff --git a/compass/components/Table/TestIndex.tsx b/compass/components/Table/TestIndex.tsx
new file mode 100644
index 0000000..11c446d
--- /dev/null
+++ b/compass/components/Table/TestIndex.tsx
@@ -0,0 +1,180 @@
+// for showcasing to compass
+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 Resource from "@/utils/models/Resource";
+
+// 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;
+};
+
+// TODO: Rename everything to resources
+export const TestTable = ({ initialData, columns }: { initialData: Resource[], columns: ColumnDef<any, any>[] }) => {
+ useEffect(() => {
+ const sortedData = [...initialData].sort((a, b) =>
+ a.visible === b.visible ? 0 : a.visible ? -1 : 1
+ );
+ setData(sortedData);
+ }, [initialData]);
+
+ const [data, setData] = useState<Resource[]>([...initialData]);
+
+ // 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 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>
+ );
+};
diff --git a/compass/components/TagsInput/TagsArray.tsx b/compass/components/TagsInput/TagsArray.tsx
index c014e7c..845e739 100644
--- a/compass/components/TagsInput/TagsArray.tsx
+++ b/compass/components/TagsInput/TagsArray.tsx
@@ -7,7 +7,7 @@ export interface Tags {
}
export const TagsArray = ({ tags, handleDelete, active = false }: Tags) => {
- console.log(tags);
+ // console.log(tags);
return (
<div className="flex ml-2 flex-wrap gap-2 items-center">