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

Updated imports and client facing routes

Browse Source
This commit is contained in:
Nick A 2024-10-22 15:48:53 -04:00
parent b51ffcfbcd
commit 8f41d5e116
8 changed files with 9 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
compass/app/admin/page.tsx
View File

@ -1,7 +1,7 @@
"use client";
import { PageLayout } from "@/components/PageLayout";
import { Table } from "@/components/Table/Index";
import UserTable from "@/components/Table/UserIndex";
import User from "@/utils/models/User";
import { createClient } from "@/utils/supabase/client";
@ -38,7 +38,7 @@ export default function Page() {
<div className="min-h-screen flex flex-col">
{/* icon + title */}
<PageLayout title="Users" icon={<UsersIcon />}>
<Table users={users} />
<UserTable users={users} />
</PageLayout>
</div>
);

4
compass/app/resource/page.tsx
View File

@ -1,8 +1,8 @@
"use client";
import { PageLayout } from "@/components/PageLayout";
import { ResourceTable } from "@/components/Table/ResourceIndex";
import Resource from "@/utils/models/Resource";
import ResourceTable from "@/components/Table/ResourceIndex";
import { createClient } from "@/utils/supabase/client";
import { BookmarkIcon } from "@heroicons/react/24/solid";
@ -38,7 +38,7 @@ export default function Page() {
<div className="min-h-screen flex flex-col">
{/* icon + title */}
<PageLayout title="Resources" icon={<BookmarkIcon />}>
<ResourceTable users={resources} />
<ResourceTable resources={resources} />
</PageLayout>
</div>
);

92
compass/app/resource_test/layout.tsx
View File

@ -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>
);
}

177
compass/app/resource_test/page.tsx
View File

@ -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>
);
}

4
compass/app/service/page.tsx
View File

@ -1,7 +1,7 @@
"use client";
import { PageLayout } from "@/components/PageLayout";
import { ServiceTable } from "@/components/Table/ServiceIndex";
import ServiceTable from "@/components/Table/ServiceIndex";
import Service from "@/utils/models/Service";
import { createClient } from "@/utils/supabase/client";
@ -37,7 +37,7 @@ export default function Page() {
<div className="min-h-screen flex flex-col">
{/* icon + title */}
<PageLayout title="Services" icon={<ClipboardIcon />}>
<ServiceTable users={services} />
<ServiceTable services={services} />
</PageLayout>
</div>
);

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

@ -8,7 +8,7 @@ import TagsInput from "@/components/TagsInput/Index";
import Resource from "@/utils/models/Resource";
import { DataPoint } from "@/components/Table/Table";
export function ResourceTable({ resources }: { resources: Resource[] }) {
export default function ResourceTable({ resources }: { resources: Resource[] }) {
const columnHelper = createColumnHelper<Resource>();
const [data, setData] = useState<DataPoint[]>([...resources]);

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

@ -8,7 +8,7 @@ import TagsInput from "@/components/TagsInput/Index";
import Service from "@/utils/models/Service";
import { DataPoint } from "@/components/Table/Table";
export const ServiceTable = ({ services }: { services: Service[] }) => {
export default function ServiceTable({ services }: { services: Service[] }) {
const columnHelper = createColumnHelper<Service>();
const [data, setData] = useState<DataPoint[]>([...services]);

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

@ -8,7 +8,7 @@ import TagsInput from "@/components/TagsInput/Index";
import User from "@/utils/models/User";
import { DataPoint } from "@/components/Table/Table";
export function UserTable({ users }: { users: User[] }) {
export default function UserTable({ users }: { users: User[] }) {
const columnHelper = createColumnHelper<User>();
const [data, setData] = useState<DataPoint[]>([...users]);