Project Set Detail Page

next.config.js

@@ -9,7 +9,7 @@ const nextConfig = {
         return config
     },
     env: {
-        BACKEND_BASE_URI: process.env.BACKEND_BASE_URI,
+        BACKEND_URL: process.env.BACKEND_URL,
     },
 }
 

package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-table": "^8.11.8",
     "class-variance-authority": "^0.7.0",

src/_temp_types/api/teams.ts

@@ -13,6 +13,7 @@ export type ApiTeamTemplate = {
     updatedAt: string
     slug: string
     requirements: ApiProjectRequirement[]
+    number_of_teams: number
     max_people: number
     min_people: number
 }

src/_temp_types/projects.ts

@@ -2,25 +2,37 @@
  * A requirement for a student with a specific attribute to work on a project
  */
 export type ProjectRequirement = {
+    id: number
     attribute: number
     operator: RequirementOperator
     // The number of students with this attribute required as described by the RequirementOperator
     value: number
 }
 
 export enum RequirementOperator {
-    EXACTLY = "exactly",
-    LESS_THAN = "less than",
-    MORE_THAN = "more than",
+    GT = "Greater Than",
+    GTE = "Greater Than or Equal",
+    LT = "Less Than",
+    LTE = "Less Than or Equal",
+    IN = "In",
+    NOT_IN = "Not In",
+    CONTAINS = "Contains",
+    EQ = "Equal",
 }
 
 /**
  * A model for a project with requirements that a Team may work on
  */
 export type Project = {
     id: number
-    name?: string
+    name: string
     // Specifies the number of teams that can work on this project
     numberOfTeams: number
     requirements?: ProjectRequirement[]
 }
+
+export type ProjectSet = {
+    id: number
+    name: string
+    numProjects: number
+}

src/app/layout.tsx

@@ -4,6 +4,7 @@ import './globals.css'
 import Navbar from "@/components/Navbar"
 import Footer from "@/components/Footer"
 import {Separator} from "@/components/ui/separator"
+import {Toaster} from "@/components/ui/toaster"
 
 const manrope = Manrope({ subsets: ['latin'] })
 
@@ -25,6 +26,7 @@ export default function RootLayout({
                 {children}
                 <Separator/>
                 <Footer />
+                <Toaster />
             </body>
         </html>
     )

src/app/project-sets/[projectSetId]/(components)/editModeButton.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import {Button} from "@/components/ui/button"
+import {FileIcon, Pencil1Icon} from "@radix-ui/react-icons"
+import * as React from "react"
+import {useRouter} from "next/navigation"
+
+export type EditModeButtonProps = {
+    currentSearchTerm: string
+    currentProjectId: number
+    currentEditMode: boolean
+}
+
+export function EditModeButton({currentSearchTerm, currentProjectId, currentEditMode}: EditModeButtonProps) {
+    const router = useRouter()
+
+    const updateIsEditMode = (isEditMode: boolean) => {
+        router.push(`?isEdit=${isEditMode}&projectId=${currentProjectId}&search=${currentSearchTerm}`)
+    }
+
+    return (
+        <>
+            {currentEditMode ? (
+                <Button variant="outline" size="sm" onClick={() => updateIsEditMode(false)}>
+                    <FileIcon className="mr-2"/>
+                    Save changes
+                </Button>
+            ) : (
+                <Button variant="outline" size="sm" onClick={() => updateIsEditMode(true)}>
+                    <Pencil1Icon className="mr-2"/>
+                    Edit mode
+                </Button>
+            )}
+        </>
+    )
+}

src/app/project-sets/[projectSetId]/(components)/numProjectsSubtitle.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import {Text} from "@/components/ui/text"
+import {Input} from "@/components/ui/input"
+import * as React from "react"
+import {type Project} from "@/_temp_types/projects"
+import {useRouter} from "next/navigation"
+
+export type NumProjectsSubtitleProps = {
+    project: Project
+    isEditMode: boolean
+    projectSetId: number
+}
+
+export function NumProjectsSubtitle({project, isEditMode, projectSetId}: NumProjectsSubtitleProps) {
+    const router = useRouter()
+
+    async function handleUpdateNumTeamsPerProject(numOfTeams: number) {
+        return fetch(process.env.BACKEND_URL + '/api/v1/teamset-templates/' + projectSetId + '/team-templates/' + project.id + '/', {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                number_of_teams: numOfTeams,
+            }),
+        })
+    }
+
+    return (
+        <>
+            <Text element="p" as="smallText">
+                This project can be completed by&nbsp;
+            </Text>
+            {isEditMode ? (
+                <Input
+                    className="w-8 text-center h-fit text-foreground text-sm font-medium leading-none border-0 border-b p-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:ring-offset-transparent focus-visible:ring-transparent focus-visible:outline-none"
+                    defaultValue={project.numberOfTeams}
+                    onBlur={(e) => {
+                        if (!isNaN(parseInt(e.target.value))) {
+                            handleUpdateNumTeamsPerProject(parseInt(e.target.value))
+                                .then(() => router.refresh())
+                                .catch((err) => console.error(err))
+                        }
+                    }}
+                />
+            ) : (
+                <Text element="p" as="smallText">
+                    {project.numberOfTeams}
+                </Text>
+            )}
+            <Text element="p" as="smallText" className="">
+                &nbsp;team{project.numberOfTeams > 1 && 's'}.
+            </Text>
+        </>
+    )
+}

src/app/project-sets/[projectSetId]/(components)/projectSetSelect.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
+import * as React from "react"
+import {type ProjectSet} from "@/_temp_types/projects"
+import {useRouter} from "next/navigation"
+
+export type ProjectSetSelectProps = {
+    currentProjectSetId: number
+    allProjectSets: ProjectSet[]
+}
+
+export function ProjectSetSelect({ currentProjectSetId, allProjectSets }: ProjectSetSelectProps) {
+    const router = useRouter()
+    const handleProjectSetChanged = (newProjectSetId: string) => {
+        router.push(`/project-sets/${newProjectSetId}`)
+    }
+
+    return (
+        <Select
+            value={currentProjectSetId.toString()}
+            onValueChange={(newProjectSetId) => handleProjectSetChanged(newProjectSetId)}
+        >
+            <SelectTrigger>
+                <SelectValue/>
+            </SelectTrigger>
+            <SelectContent>
+                {allProjectSets.map((projectSet) => (
+                    <SelectItem
+                        value={projectSet.id.toString()}
+                        key={projectSet.id}>{projectSet.name}
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    )
+}

src/app/project-sets/[projectSetId]/(components)/sidebarProjectsDisplay.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import * as React from "react"
+
+import {SearchBar} from "@/components/SearchBar"
+import {Button} from "@/components/ui/button"
+import {type Project} from "@/_temp_types/projects"
+import {useRouter} from "next/navigation"
+
+export type SidebarProjectsDisplayProps = {
+    projects: Project[]
+    currentSearchTerm: string
+    currentProjectId: number
+    currentEditMode: boolean
+}
+
+export function SidebarProjectsDisplay({projects, currentSearchTerm, currentProjectId, currentEditMode}: SidebarProjectsDisplayProps) {
+    const router = useRouter()
+
+    const updateSearchTerm = (newSearchTerm: string) => {
+        router.push(`?isEdit=${currentEditMode}&projectId=${currentProjectId}&search=${newSearchTerm}`)
+    }
+
+    const updateProjectIdx = (newProjectId: number) => {
+        router.push(`?isEdit=${currentEditMode}&projectId=${newProjectId}&search=${currentSearchTerm}`)
+    }
+
+    const handleProjectChanged = (project: Project) => {
+        updateProjectIdx(project.id)
+        // TODO: shoot update api
+    }
+
+    return (
+        <>
+            <SearchBar
+                className="ml-0"
+                placeholder="Search Projects"
+                defaultValue={currentSearchTerm}
+                onBlur={(e) => updateSearchTerm(e.target.value)}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                        updateSearchTerm(e.currentTarget.value)
+                    }
+                }}
+            />
+            <div className="flex flex-col w-full mt-2 gap-1 pr-4">
+                {projects.map((project) => (
+                    <Button
+                        className="justify-start"
+                        variant={project.id === currentProjectId ? "secondary" : "ghost"}
+                        key={project.id}
+                        onClick={() => handleProjectChanged(project)}
+                    >
+                        {project.name}
+                    </Button>
+                ))}
+            </div>
+        </>
+    )
+}