diff --git a/compass/app/admin/layout.tsx b/compass/app/admin/layout.tsx index 68d4d55..bfe3717 100644 --- a/compass/app/admin/layout.tsx +++ b/compass/app/admin/layout.tsx @@ -1,6 +1,6 @@ "use client"; -import Sidebar from "@/components/resource/Sidebar"; +import Sidebar from "@/components/Sidebar/Sidebar"; import React, { useState } from "react"; import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline"; import { createClient } from "@/utils/supabase/client"; @@ -80,7 +80,7 @@ export default function RootLayout({ setIsSidebarOpen={setIsSidebarOpen} name={user.username} email={user.email} - admin={user.role === Role.ADMIN} + isAdmin={user.role === Role.ADMIN} /> {/* page ui */} diff --git a/compass/app/api/user/all/route.ts b/compass/app/api/user/all/route.ts index b8d1518..5f7259a 100644 --- a/compass/app/api/user/all/route.ts +++ b/compass/app/api/user/all/route.ts @@ -1,3 +1,4 @@ +import User from "@/utils/models/User"; import { NextResponse } from "next/server"; export async function GET(request: Request) { @@ -10,5 +11,14 @@ export async function GET(request: Request) { const data = await fetch(`${apiEndpoint}?user_id=${uuid}`); - return NextResponse.json(await data.json(), { status: data.status }); + const userData: User[] = await data.json(); + // TODO: Remove make every user visible + + const users = userData.map((user: User) => { + user.visible = true; + + return user; + }); + + return NextResponse.json(users, { status: data.status }); } diff --git a/compass/app/resource/layout.tsx b/compass/app/resource/layout.tsx index f598b09..589448e 100644 --- a/compass/app/resource/layout.tsx +++ b/compass/app/resource/layout.tsx @@ -1,5 +1,5 @@ "use client"; -import Sidebar from "@/components/resource/Sidebar"; +import Sidebar from "@/components/Sidebar/Sidebar"; import React, { useState } from "react"; import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline"; import { createClient } from "@/utils/supabase/client"; @@ -69,7 +69,7 @@ export default function RootLayout({ name={user.username} email={user.email} setIsSidebarOpen={setIsSidebarOpen} - admin={user.role === Role.ADMIN} + isAdmin={user.role === Role.ADMIN} /> {/* page ui */} diff --git a/compass/components/Drawer/Drawer.tsx b/compass/components/Drawer/Drawer.tsx new file mode 100644 index 0000000..6879f75 --- /dev/null +++ b/compass/components/Drawer/Drawer.tsx @@ -0,0 +1,247 @@ +import { FunctionComponent, ReactNode } from "react"; +import React, { useState } from "react"; +import { ChevronDoubleLeftIcon } from "@heroicons/react/24/solid"; +import { + StarIcon as SolidStarIcon, + EnvelopeIcon, + UserIcon, +} from "@heroicons/react/24/solid"; +import { + ArrowsPointingOutIcon, + ArrowsPointingInIcon, + StarIcon as OutlineStarIcon, + ListBulletIcon, +} from "@heroicons/react/24/outline"; +import TagsInput from "../TagsInput/Index"; + +type DrawerProps = { + title: string; + children: ReactNode; + onClick?: (event: React.MouseEvent) => void; + type?: "button" | "submit" | "reset"; // specify possible values for type + disabled?: boolean; + editableContent?: any; + onSave?: (content: any) => void; + rowContent?: any; + onRowUpdate?: (content: any) => void; +}; + +interface EditContent { + content: string; + isEditing: boolean; +} + +const Drawer: FunctionComponent = ({ + title, + children, + onSave, + editableContent, + rowContent, + onRowUpdate, +}) => { + const [isOpen, setIsOpen] = useState(false); + const [isFull, setIsFull] = useState(false); + const [isFavorite, setIsFavorite] = useState(false); + const [tempRowContent, setTempRowContent] = useState(rowContent); + + const handleTempRowContentChange = (e) => { + const { name, value } = e.target; + console.log(name); + console.log(value); + setTempRowContent((prevContent) => ({ + ...prevContent, + [name]: value, + })); + }; + + const handleEnterPress = (e) => { + if (e.key === "Enter") { + e.preventDefault(); + // Update the rowContent with the temporaryRowContent + if (onRowUpdate) { + onRowUpdate(tempRowContent); + } + } + }; + + const toggleDrawer = () => { + setIsOpen(!isOpen); + if (isFull) { + setIsFull(!isFull); + } + }; + + const toggleDrawerFullScreen = () => setIsFull(!isFull); + + const toggleFavorite = () => setIsFavorite(!isFavorite); + + const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white transform ease-in-out duration-300 z-20 ${ + isOpen ? "translate-x-0 shadow-xl" : "translate-x-full" + } ${isFull ? "w-full" : "w-1/2"}`; + + const iconComponent = isFull ? ( + + ) : ( + + ); + + const favoriteIcon = isFavorite ? ( + + ) : ( + + ); + + const [presetOptions, setPresetOptions] = useState([ + "administrator", + "volunteer", + "employee", + ]); + const [rolePresetOptions, setRolePresetOptions] = useState([ + "domestic", + "community", + "economic", + ]); + 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); + }; + + return ( +
+ +
+
+
+
+ + + +

+ {rowContent.username} +

+
+
+ + + +
+
+
+ + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+ + Username + +
+ + Role + +
+ + Email + +
+ + Type of Program + {/* {rowContent.program} */} + +
+
+
+
+
+ ); +}; + +export default Drawer; diff --git a/compass/components/resource/Sidebar.tsx b/compass/components/Sidebar/Sidebar.tsx similarity index 96% rename from compass/components/resource/Sidebar.tsx rename to compass/components/Sidebar/Sidebar.tsx index ffd4b56..0a7fa63 100644 --- a/compass/components/resource/Sidebar.tsx +++ b/compass/components/Sidebar/Sidebar.tsx @@ -7,20 +7,20 @@ import { BookOpenIcon, } from "@heroicons/react/24/solid"; import { SidebarItem } from "./SidebarItem"; -import { UserProfile } from "./UserProfile"; +import { UserProfile } from "../resource/UserProfile"; interface SidebarProps { setIsSidebarOpen: React.Dispatch>; name: string; email: string; - admin: boolean; + isAdmin: boolean; } const Sidebar: React.FC = ({ setIsSidebarOpen, name, email, - admin, + isAdmin: admin, }) => { return (
diff --git a/compass/components/resource/SidebarItem.tsx b/compass/components/Sidebar/SidebarItem.tsx similarity index 100% rename from compass/components/resource/SidebarItem.tsx rename to compass/components/Sidebar/SidebarItem.tsx diff --git a/compass/components/Table.tsx b/compass/components/Table.tsx deleted file mode 100644 index 112b997..0000000 --- a/compass/components/Table.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Component } from "react"; - -// interface TableHeader { -// title: string, -// type: string -// } - -// interface TableRow { -// [key: string]: any, -// } -interface TableProps { - headersData: string[]; - data: { [key: string]: any }[]; -} - -const Table: React.FC = ({ headersData, data }) => { - const headers = headersData.map((header, i) => { - return {header}; - }); - - console.log(data); - - const rows = data.map((item) => { - const row = headersData.map((key) => { - return {item[key]}; - }); - return {row}; - }); - - return ( - <> - - - {headers} - - {rows} -
- - ); -}; - -export default Table; diff --git a/compass/components/Table/PrimaryTableCell.tsx b/compass/components/Table/PrimaryTableCell.tsx index 05b3d1e..06a85b2 100644 --- a/compass/components/Table/PrimaryTableCell.tsx +++ b/compass/components/Table/PrimaryTableCell.tsx @@ -1,6 +1,6 @@ /* An extension of TableCell.tsx that includes an "open" button and the drawer. For cells in the "primary" (or first) column of the table. */ -import Drawer from "@/components/page/Drawer"; +import Drawer from "@/components/Drawer/Drawer"; import { TableCell } from "./TableCell"; import { SetStateAction, useState } from "react"; diff --git a/compass/components/Table/RowOpenAction.tsx b/compass/components/Table/RowOpenAction.tsx index bf02ae7..9a7103c 100644 --- a/compass/components/Table/RowOpenAction.tsx +++ b/compass/components/Table/RowOpenAction.tsx @@ -1,4 +1,4 @@ -import Drawer from "@/components/page/Drawer"; +import Drawer from "@/components/Drawer/Drawer"; import { ChangeEvent, useState } from "react"; export const RowOpenAction = ({ title, rowData, onRowUpdate }) => { diff --git a/compass/components/Table/RowOptionMenu.tsx b/compass/components/Table/RowOptionMenu.tsx index fca1c58..3fb34ed 100644 --- a/compass/components/Table/RowOptionMenu.tsx +++ b/compass/components/Table/RowOptionMenu.tsx @@ -20,7 +20,7 @@ export const RowOptionMenu = ({ onDelete, onHide }) => { return ( <> - ); -}; - -export default Card; diff --git a/compass/components/page/DropDown.tsx b/compass/components/page/DropDown.tsx deleted file mode 100644 index 5eca333..0000000 --- a/compass/components/page/DropDown.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { ChangeEvent, FunctionComponent } from "react"; - -// Define the shape of a single option -interface DropdownOption { - label: string; - value: string | number; -} - -// Define the props for the Dropdown component -interface DropdownProps { - options: DropdownOption[]; - onChange: (event: ChangeEvent) => void; // Type for change event on - {options.map((option, index) => ( - - ))} - - ); -}; - -export default Dropdown;