Project Detail Page part 5

src/_temp_types/projects.ts

@@ -5,7 +5,7 @@ export type ProjectRequirement = {
   attribute: number;
   operator: RequirementOperator;
   // The number of students with this attribute required as described by the RequirementOperator
-  value: number;
+  subject: number;
 };
 
 export enum RequirementOperator {
@@ -25,8 +25,7 @@ export enum RequirementOperator {
 export type Project = {
   id: number;
   name: string;
-  // Specifies the number of teams that can work on this project
-  numberOfTeams: number;
+  number_of_teams: number; // Specifies the number of teams that can work on this project
   requirements?: ProjectRequirement[];
 };
 

src/app/(app)/course/[courseId]/project-sets/[projectSetId]/(components)/ProjectRequirementsTable.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import {DataTable} from "@/components/ui/data-table"
+import {Text} from "@/components/ui/text"
+import {ProjectRequirement, RequirementOperator} from "@/_temp_types/projects"
+import {ColumnDef} from "@tanstack/react-table"
+import {DataTableColumnHeader} from "@/components/ui/data-table-column-header"
+import {
+  useProjectsContext,
+} from "@/app/(app)/course/[courseId]/project-sets/[projectSetId]/(hooks)"
+import {toast} from "@/hooks/use-toast"
+import {Button} from "@/components/ui/button"
+import {useState} from "react"
+import {Pencil1Icon, ExitIcon} from "@radix-ui/react-icons"
+
+const persistedColumnDefs: ColumnDef<ProjectRequirement>[] = [
+  {
+    accessorKey: "attribute",
+    header: ({column}) => (
+      <DataTableColumnHeader column={column} title={"Attribute"}/>
+    ),
+  },
+  {
+    accessorKey: "operator",
+    header: "Operator",
+    cell: ({row}) => {
+      const operator = row.original.operator
+      // Check if operator is a valid RequirementOperator
+      if (!Object.keys(RequirementOperator).includes(operator as RequirementOperator)) {
+        toast({
+          title: `Invalid operator "${operator}" in Project Requirement.`,
+          variant: "destructive",
+        })
+        return null
+      }
+      return RequirementOperator[operator as string as keyof typeof RequirementOperator]
+    },
+  },
+  {
+    accessorKey: "subject",
+    header: "Value",
+  },
+]
+
+export const ProjectRequirementsTable = () => {
+  const columns = persistedColumnDefs
+
+  const {currentProject} = useProjectsContext()
+  // TODO: Implement edit mode
+  const [isEditing, setIsEditing] = useState(false)
+
+
+  // TODO: Implement conversion of Attribute and Attribute Value.
+  return (
+    <div className="w-full">
+      {currentProject ? <>
+        <div className="flex flex-col w-full">
+          <div className="flex justify-between items-center">
+            <Text as="h3" element="h3">
+              {currentProject.name}
+            </Text>
+            <div className="flex items-center gap-2">
+              {/* TODO: Implement edit mode */}
+              <Button variant="outline" size="sm" onClick={() => setIsEditing(!isEditing)}>
+                {isEditing ? (
+                  <>
+                    <ExitIcon className="mr-2"/> Exit Edit Mode
+                  </>
+                ) : (
+                  <>
+                    <Pencil1Icon className="mr-2"/> Enter Edit Mode
+                  </>
+                )}
+
+              </Button>
+            </div>
+          </div>
+          <div className="flex items-center mt-2">
+            {/* TODO: Implement edit mode */}
+            <Text element="p" as="smallText">
+              This project can be completed
+              by {currentProject.number_of_teams} team{currentProject.number_of_teams > 1 && 's'}.
+            </Text>
+          </div>
+        </div>
+        <div className="flex flex-col mt-5">
+          <div className="flex justify-between items-end">
+            <Text as="p" element="p" className="font-bold">
+              Requirements
+            </Text>
+            {isEditing && <Button size="sm">Add requirements</Button>}
+          </div>
+          <div>
+            <DataTable<ProjectRequirement>
+              columns={columns}
+              data={currentProject?.requirements ?? []}
+            />
+          </div>
+        </div>
+      </> : (
+        <div>
+          No project found.
+        </div>
+      )}
+    </div>)
+}

src/app/(app)/course/[courseId]/project-sets/[projectSetId]/(components)/index.tsx

@@ -1,3 +1,4 @@
 export {ProjectSetSelect, type ProjectSetSelectProps} from './ProjectSetSelect'
 export {SidebarProjectList} from './SidebarProjectList'
+export {ProjectRequirementsTable} from './ProjectRequirementsTable'
 export {ProjectSetSidebar} from './ProjectSetSidebar'

src/app/(app)/course/[courseId]/project-sets/[projectSetId]/page.tsx

@@ -2,6 +2,7 @@ import {toast} from "@/hooks/use-toast"
 import {type ApiTeamSetTemplate} from "@/_temp_types/api/teams"
 import PageView from "@/components/views/Page"
 import {
+  ProjectRequirementsTable,
   ProjectSetSidebar,
 } from "./(components)"
 import {ProjectsProvider, ProjectSearchProvider} from "./(hooks)"
@@ -38,7 +39,13 @@ const ProjectSetPage = async ({params: {courseId, projectSetId}}: ProjectPageTyp
   >
     <ProjectsProvider>
       <ProjectSearchProvider>
-        <ProjectSetSidebar allProjectSets={await getOutlinedProjectSetsData()}/>
+        <div className="container mx-auto p-0">
+          <div className="flex w-full gap-10">
+            <ProjectSetSidebar allProjectSets={await getOutlinedProjectSetsData()}/>
+            <div className="border-r border-gray-300 h-[55vh]"/>
+            <ProjectRequirementsTable />
+          </div>
+        </div>
       </ProjectSearchProvider>
     </ProjectsProvider>
   </PageView>

src/app/(app)/course/[courseId]/students/(table)/columns.tsx

@@ -4,7 +4,7 @@ import { Student } from "@/_temp_types/student"
 import { ColumnDef } from "@tanstack/react-table"
 import { Text } from "@/components/ui/text"
 import { Badge } from "@/components/ui/badge"
-import { DataTableColumnHeader } from "@/components/ui/table-column-header"
+import { DataTableColumnHeader } from "@/components/ui/data-table-column-header"
 
 type SectionFilterValue = string[];