Skip to content

Commit

Permalink
restructuring
Browse files Browse the repository at this point in the history
  • Loading branch information
dheidemann committed Nov 1, 2024
1 parent fbf44c3 commit 348a2fd
Show file tree
Hide file tree
Showing 66 changed files with 2,961 additions and 1,342 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

import { ColumnDef } from "@tanstack/react-table";
import { Checkbox } from "@/components/ui/checkbox";
import { TutorFormEventsQuery } from "@/lib/gql/generated/graphql";
import { eventBroker } from "@/lib/eventBroker";
import { Badge } from "@/components/ui/badge";
import {Event} from "@/lib/gql/generated/graphql";

export const columns: ColumnDef<TutorFormEventsQuery["events"][0]>[] = [
export const columns: ColumnDef<Event>[] = [
{
accessorKey: "isSelected",
header: "",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import {TutorFormEventsQuery} from "@/lib/gql/generated/graphql";
import {Event} from "@/lib/gql/generated/graphql";
import { columns } from "./columns";
import { DataTable } from "./data-table";
import { getEvents } from "@/app/actions";
import { useEffect, useState } from "react";

const EventTable = () => {
const [data, setData] = useState<TutorFormEventsQuery | null>(null);
const [data, setData] = useState<Event[] | null>(null);

useEffect(() => {
const fetchData = async () => {
const result = await getEvents();
setData(result);
};

fetchData();
Expand All @@ -22,7 +19,7 @@ const EventTable = () => {

return (
<div className="w-full h-full mx-auto">
<DataTable columns={columns} data={data.events} />
<DataTable columns={columns} data={data} />
</div>
);
};
Expand Down
21 changes: 21 additions & 0 deletions frontend/app/(form-tutor)/form-tutor/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
title: "Tutor:innen Anmeldung",
description: "Anmeldung für Tutor:innen des Vorkurs",
};

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
"use client";
"use client"

import { useFormState } from "react-dom";
import { SubmitButton } from "./submit-button";
import { FieldError } from "./field-error";
import { EMPTY_FORM_STATE } from "@/lib/to-form-state";
import { addTutor } from "@/app/actions";
import EventTable from "./event-table";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import dynamic from "next/dynamic";

const EventTable = dynamic(() => import("@/app/form-tutor/ui/table/event-table"), {
ssr: false,
});

const TutorRegistrationForm = () => {
export default function Page() {
const inputDivStyling = "w-full my-1 grow-0";
const tableDivStyling = "my-5 md:min-h-32 grow";
const [formState, action] = useFormState(addTutor, EMPTY_FORM_STATE);

const action = () => {
alert("hello")
}

return (
<div className="w-full h-full">
<div className="w-full mt-3">
<h1 className="text-center font-bold text-2xl mb-2"> Anmeldung Vorkurstutor:in </h1>
<form action={action} className="flex flex-col w-[85%] md:w-[50%] xl:w-[35%] md:h-[calc(100vh-10rem)] mx-auto pb-3">
<div className={inputDivStyling}>
<Input type="text" name="fn" placeholder="Vorname" />
Expand All @@ -34,11 +32,9 @@ const TutorRegistrationForm = () => {
<div className={tableDivStyling}>
<EventTable />
</div>
<FieldError formState={formState} name="text" />

<SubmitButton label="Anmelden" loading="Bitte warten"/>
<Button className="submit">Anmelden</Button>
</form>
</div>
</div>
);
};

export { TutorRegistrationForm };
}
10 changes: 10 additions & 0 deletions frontend/app/(planner)/applications/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@

export const metadata = {
title: "Anmeldungen",
}

export default function OverviewPage() {
return (
<p>Anmeldungen</p>
)
}
112 changes: 112 additions & 0 deletions frontend/app/(planner)/events/columns.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import { DataTableColumnHeader } from "@/components/data-table-column-header";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Event } from "@/lib/gql/generated/graphql";
import { formatDateToDDMM, formatDateToHHMM } from "@/lib/utils";
import { ColumnDef } from "@tanstack/react-table";
import { MoreHorizontal } from "lucide-react";

export const columns: ColumnDef<Event>[] = [
{
id: "select",
header: ({ table }) => (
<Checkbox
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && "indeterminate")
}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label="Alle auswählen"
/>
),
cell: ({ row }) => (
<Checkbox
checked={row.getIsSelected()}
onCheckedChange={(value) => row.toggleSelected(!!value)}
aria-label="Reihe auswählen"
/>
),
},
{
accessorKey: "title",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Titel" />
),
},
{
accessorKey: "date",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Datum" />
),
cell: ({ row }) => {
return formatDateToDDMM(new Date(row.original.from));
},
},
{
accessorKey: "from",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Von" />
),
cell: ({ row }) => {
return formatDateToHHMM(new Date(row.original.from));
},
},
{
accessorKey: "to",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Bis" />
),
cell: ({ row }) => {
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>
),
},
{
id: "actions",
enableHiding: false,
cell: ({ row }) => {
const event = row.original;

return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Menü öffnen</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Optionen</DropdownMenuLabel>
<DropdownMenuItem>Bearbeiten</DropdownMenuItem>
<DropdownMenuItem>Löschen</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
139 changes: 139 additions & 0 deletions frontend/app/(planner)/events/data-table.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
"use client";

import {
ColumnDef,
ColumnFiltersState,
SortingState,
VisibilityState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";

import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {DataTablePagination} from "@/components/data-table-pagination";
import {DataTableViewOptions} from "@/components/data-table-view-options";
import {useUmbrella} from "@/components/providers";

interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
}

export function DataTable<TData, TValue>({
columns,
data,
}: DataTableProps<TData, TValue>) {
const {setCloseupID} = useUmbrella()

const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});

const table = useReactTable({
data,
columns,
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"
/>
<DataTableViewOptions table={table} />
</div>
<div className="rounded-md border overflow-hidden">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead 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 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} />
</div>
);
}
Loading

0 comments on commit 348a2fd

Please sign in to comment.