FR: List All Tutorials For Admins

frontend/app/(planner)/[planner]/events/events-overview-page.tsx

@@ -9,7 +9,6 @@ import {FerrisWheel, PlusCircle} from "lucide-react";
 import {Button} from "@/components/ui/button";
 import {ManagementPageHeader} from "@/components/management-page-header";
 import {EventDialog} from "@/components/event-calendar/event-dialog";
-import {Dialog} from "@/components/ui/dialog";
 import {columns} from "@/app/(planner)/[planner]/columns";
 import {DataTable} from "@/app/(planner)/[planner]/data-table";
 import {useRefetch} from "@/components/providers";

frontend/app/(planner)/[planner]/tutorials/[tutorial]/page.tsx

@@ -0,0 +1,15 @@
+import { extractId } from "@/lib/utils";
+import { TutorialPage } from "@/components/tutorial-page";
+
+export default async function TutorialDetailPage({
+  params,
+}: {
+  params: Promise<{ tutorial: string }>;
+}) {
+  const { tutorial } = await params;
+  return (
+    <>
+      <TutorialPage eventID={extractId(tutorial) ?? 0} />
+    </>
+  );
+}

frontend/app/(planner)/[planner]/tutorials/layout.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import {ManagementPageHeader} from "@/components/management-page-header";
+import {RefetchProvider, useUser} from "@/components/providers";
+import {SidebarNav} from "@/components/sidebar-nav";
+import {EventsOfUmbrellaDocument} from "@/lib/gql/generated/graphql";
+import {extractId, slugify} from "@/lib/utils";
+import {GraduationCap} from "lucide-react";
+import React, {useCallback, useEffect, useState} from "react";
+import {usePathname} from "next/navigation";
+import {getClient} from "@/lib/graphql";
+
+interface ProfileTutorialsLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function UmbrellaTutorialsLayout({
+                                                  children,
+                                                }: ProfileTutorialsLayoutProps) {
+  const {sid} = useUser();
+  const pathname = usePathname();
+  const umbrellaID = extractId(pathname);
+  const [events, setEvents] = useState<{
+    title: string;
+    description: React.JSX.Element;
+    href: string;
+  }[]>([])
+
+  const fetchEvents = useCallback(async () => {
+    if (!umbrellaID) return;
+
+    const client = getClient(sid!);
+    const eventData = await client.request(EventsOfUmbrellaDocument, {umbrellaIDs: [umbrellaID]})
+
+    // INFO: this was absolutely vibe coded
+    const normalizedPath = pathname.replace(/\/$/, "");
+    const tutorialsBase = normalizedPath.includes("/tutorials")
+      ? normalizedPath.replace(/\/tutorials(\/.*)?$/, "/tutorials")
+      : `${normalizedPath}/tutorials`;
+    // INFO: vibe code ends here.
+
+    const eventInfos = eventData.events
+      .filter(event => !!event.tutorials?.length)
+      .map((event) => {
+        const slug = `${slugify(event.title)}-${event.ID}`;
+        return {
+          title: event.title,
+          description: <>{new Date(event.from).toLocaleDateString()}</>,
+          href: `${tutorialsBase}/${slug}`
+        };
+      });
+
+    setEvents(eventInfos)
+  }, [umbrellaID]);
+
+  useEffect(() => {
+    void fetchEvents()
+  }, [umbrellaID])
+
+
+  return (
+    <div className="space-y-6">
+      <ManagementPageHeader
+        iconNode={<GraduationCap/>}
+        title={"Tutorien"}
+        description={"Hier findest du alle Tutorien dieses Programms."}
+      />
+
+      {events ? (
+        <div className="flex flex-col space-y-5 lg:flex-row lg:space-y-0">
+          <aside>
+            <SidebarNav items={events ?? []}/>
+          </aside>
+          <RefetchProvider>
+            <div className="w-full lg:ml-4">{children}</div>
+          </RefetchProvider>
+        </div>
+      ) : (
+        <div className={"w-full p-10 text-center"}>
+          Dieses Programm scheint noch keine Tutorien zu haben
+        </div>
+      )}
+    </div>
+  );
+}

frontend/app/(planner)/[planner]/tutorials/page.tsx

@@ -1,10 +1,5 @@
-
-export const metadata = {
-  title: "Tutorien",
-}
-
-export default function OverviewPage() {
+export default function SettingsProfilePage() {
   return (
-    <p>Tutorien</p>
-  )
+    <></>
+  );
 }

frontend/app/(settings)/profile/tutorials/[tutorial]/page.tsx

@@ -1,5 +1,5 @@
 import { extractId } from "@/lib/utils";
-import { TutorialPage } from "./tutorial-page";
+import { TutorialPage } from "@/components/tutorial-page";
 
 export default async function TutorialDetailPage({
   params,
@@ -9,7 +9,7 @@ export default async function TutorialDetailPage({
   const { tutorial } = await params;
   return (
     <>
-      <TutorialPage id={extractId(tutorial) ?? 0} />
+      <TutorialPage eventID={extractId(tutorial) ?? 0} onlyCurrentUser/>
     </>
   );
 }

frontend/components/dialog/events/event-dialog.tsx

@@ -96,11 +96,12 @@ export default function EventDialog({
               ...e.umbrella?.registrationForm,
             },
           },
-          tutorials: e.tutorials?.map((t) => ({
+          tutorials: e.tutorials?.map((tutorial) => ({
             ...defaultTutorial,
-            ...t,
+            ...tutorial,
             event: { ...defaultEvent, ID: id! },
-            tutors: t.tutors?.map((tu) => ({ ...defaultUser, ...tu })),
+            tutors: tutorial.tutors?.map((tutor) => ({ ...defaultUser, ...tutor })),
+            students: tutorial.students?.map((student) => ({ ...defaultUser, ...student })),
           })),
         });
       }

frontend/app/(settings)/profile/tutorials/[tutorial]/students-columns.tsx → frontend/components/tables/students-table/students-columns.tsx

@@ -4,7 +4,7 @@ import { User } from "@/lib/gql/generated/graphql";
 import { ColumnDef } from "@tanstack/react-table";
 import { SquareMinus } from "lucide-react";
 import React from "react";
-import { StudentTableDialogState } from "@/app/(settings)/profile/tutorials/[tutorial]/tutorial-page";
+import { StudentTableDialogState } from "@/components/tutorial-page";
 
 export default function StudentsColumns(
   setDialog: React.Dispatch<React.SetStateAction<StudentTableDialogState>>

frontend/app/(settings)/profile/tutorials/[tutorial]/students-table.tsx → frontend/components/tables/students-table/students-table.tsx

@@ -15,8 +15,8 @@ import {Input} from "@/components/ui/input";
 import {DataTablePagination} from "@/components/tables/data-table-pagination";
 import {DataTableViewOptions} from "@/components/tables/data-table-view-options";
 import {User} from "@/lib/gql/generated/graphql";
-import {StudentTableDialogState} from "@/app/(settings)/profile/tutorials/[tutorial]/tutorial-page";
-import StudentsColumns from "@/app/(settings)/profile/tutorials/[tutorial]/students-columns";
+import {StudentTableDialogState} from "@/components/tutorial-page";
+import StudentsColumns from "@/components/tables/students-table/students-columns";
 
 interface StudentTableProps {
   data: User[];