Tutor Registration Form

frontend/app/(form-tutor)/form-tutor/columns.tsx

@@ -1,70 +1,83 @@
-"use client";
-
-import { ColumnDef } from "@tanstack/react-table";
-import { Checkbox } from "@/components/ui/checkbox";
-import { eventBroker } from "@/lib/eventBroker";
+import { DataTableColumnHeader } from "@/components/data-table-column-header";
 import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Event } from "@/lib/gql/generated/graphql";
+import { formatDateToDDMM, formatDateToHHMM } from "@/lib/utils";
+import { ColumnDef } from "@tanstack/react-table";
 
 export const columns: ColumnDef<Event>[] = [
   {
-    accessorKey: "isSelected",
-    header: "",
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Alle auswählen"
+      />
+    ),
     cell: ({ row }) => (
       <Checkbox
-        className={"mx-auto"}
         checked={row.getIsSelected()}
         onCheckedChange={(value) => {
-          row.toggleSelected(!!value);
-
-          if (row.getIsSelected()) {
-            eventBroker.removeEvent(row.original.ID);
-          } else {
-            eventBroker.addEvent(row.original.ID);
-          }
+          row.toggleSelected(!!value)
         }}
-        aria-label="Ich kann diese Veranstaltung halten"
+        aria-label="Reihe auswählen"
       />
     ),
   },
   {
     accessorKey: "title",
-    header: () => <div className="text-left">Veranstaltung</div>,
-    cell: ({ row }) => (
-      <div>
-        <div className={"mb-0.5"}>{row.original.title}</div>
-        <Badge color={row.original.type.color ?? ""}>{row.original.type.name}</Badge>
-      </div>
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Titel" />
     ),
+    cell: ({ row }) => row.original.title,
   },
   {
-    accessorKey: "from",
-    header: () => <div className="text-left">Datum</div>,
+    accessorKey: "date",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Datum" />
+    ),
     cell: ({ row }) => {
-      const date = new Date(row.getValue("from"));
-      return date.toLocaleDateString();
+      return formatDateToDDMM(new Date(row.original.from));
     },
   },
   {
     accessorKey: "from",
-    header: () => <div className="text-left">Von</div>,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Von" />
+    ),
     cell: ({ row }) => {
-      const time = new Date(row.getValue("from"));
-      return time.toLocaleTimeString([], {
-        hour: "2-digit",
-        minute: "2-digit",
-      });
+      return formatDateToHHMM(new Date(row.original.from));
     },
   },
   {
     accessorKey: "to",
-    header: () => <div className="text-left">Bis</div>,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Bis" />
+    ),
     cell: ({ row }) => {
-      const time = new Date(row.getValue("to"));
-      return time.toLocaleTimeString([], {
-        hour: "2-digit",
-        minute: "2-digit",
-      });
+      return formatDateToHHMM(new Date(row.original.to));
     },
   },
+  {
+    accessorKey: "type",
+    header: "Art",
+    cell: ({ row }) => (
+      <Badge variant="event" color={row.original.type.color ?? ""}>
+        {row.original.type.name}
+      </Badge>
+    ),
+  },
+  {
+    accessorKey: "topic",
+    header: "Thema",
+    cell: ({ row }) => (
+      <Badge variant="event" color={row.original.topic.color ?? ""}>
+        {row.original.topic.name}
+      </Badge>
+    ),
+  },
 ];

frontend/app/(form-tutor)/form-tutor/event-table.tsx

@@ -0,0 +1,129 @@
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable, RowSelectionState,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import React from "react";
+import { Input } from "@/components/ui/input";
+import {Event} from "@/lib/gql/generated/graphql"
+import {DataTablePagination} from "@/components/data-table-pagination";
+
+interface DataTableProps {
+  columns: ColumnDef<Event>[];
+  data: Event[];
+  rowSelection: RowSelectionState;
+  setRowSelection: React.Dispatch<React.SetStateAction<RowSelectionState>>;
+}
+
+export function EventTable({
+                             columns,
+                             data,
+                             rowSelection,
+                             setRowSelection,
+                           }: DataTableProps) {
+
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const table = useReactTable({
+    data,
+    columns,
+    // Makes the row IDs use the Event IDs
+    getRowId: row => String(row.ID),
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  });
+
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center">
+        <Input
+          placeholder="Veranstaltungstitel filtern..."
+          value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("title")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+      </div>
+      <div className="rounded-md border overflow-hidden">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead  className={'text-center'} key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell className={'[&:not(:first-child)]:pl-8'} key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  Keine Ergebnisse.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} enableSelectionCounter={false} />
+    </div>
+  );
+}

frontend/app/(form-tutor)/form-tutor/page.tsx

@@ -1,9 +1,20 @@
-"use client"
+"use client";
+
+import { useState } from "react";
+import TutorRegistrationForm from "@/app/(form-tutor)/form-tutor/tutor-registration-form";
+import { SuccceededSubmissionWindow } from "@/app/(form-tutor)/form-tutor/succeeded-submission-window";
+
+export default function TutorRegistration() {
+  const [submissionSuccess, setSubmissionSuccess] = useState<boolean>(false)
+  const [userMail, setUserMail] = useState<string>("")
 
-export default function FormTutor() {
   return (
-    <>
-      <h1 className="text-xl">Deine Verfügbarkeiten</h1>
-    </>
-  );
+    <div className={'min-h-[100vh] min-w-[100vw] pt-28 p-5 flex flex-col items-center justify-center'}>
+    {(!submissionSuccess) ? (
+      <TutorRegistrationForm setSubmissionSuccess={setSubmissionSuccess} setUserMail={setUserMail} />
+    ) : (
+      <SuccceededSubmissionWindow userMail={userMail} />
+    )}
+    </div>
+  )
 }