feat: enhance EventFightList with grouping and selection features

- Added grouping functionality to the EventFightList component, allowing fights to be grouped by their associated group.
- Implemented row selection with checkboxes for both individual fights and groups, enabling bulk selection.
- Updated columns definition to include a checkbox for selecting all rows and individual row selection checkboxes.
- Modified the checkbox component to support indeterminate state and improved styling.
- Enhanced date formatting for fight start times in the table.

src/components/moderator/pages/event/columns.ts

@@ -17,16 +17,64 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type {ColumnDef} from "@tanstack/table-core";
-import type {EventFight} from "@type/event.ts";
+import { Checkbox } from "@components/ui/checkbox";
+import { renderComponent } from "@components/ui/data-table";
+import type { ColumnDef } from "@tanstack/table-core";
+import type { EventFight } from "@type/event.ts";
 
 export const columns: ColumnDef<EventFight> = [
     {
-        accessorFn: (r) => r.blueTeam.name,
-        header: "Team Blue",
+        id: "auswahl",
+        header: ({ table }) => {
+            return renderComponent(Checkbox, {
+                checked: table.getIsAllRowsSelected(),
+                indeterminate: table.getIsSomeRowsSelected(),
+                onCheckedChange: () => {
+                    if (!table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()) {
+                        const now = new Date();
+                        const rows = table.getRowModel().rows.filter((row) => new Date(row.original.date) > now);
+
+                        if (rows.length > 0) {
+                            rows.forEach((row) => {
+                                row.toggleSelected();
+                            });
+                        } else {
+                            table.toggleAllRowsSelected(true);
+                        }
+                    } else if (table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()) {
+                        table.toggleAllRowsSelected(true);
+                    } else {
+                        table.toggleAllRowsSelected(false);
+                    }
+                },
+            });
+        },
+        cell: ({ row }) => {
+            return renderComponent(Checkbox, {
+                checked: row.getIsSelected(),
+                onCheckedChange: row.getToggleSelectedHandler(),
+            });
+        },
     },
     {
-        accessorFn: (r) => r.redTeam.name,
-        header: "Team Red",
+        accessorFn: (r) => r.blueTeam.name + " vs " + r.redTeam.name,
+        id: "begegnung",
+        header: "Begegnung",
     },
-];
+    {
+        header: "Gruppe",
+        accessorKey: "group",
+        id: "group",
+    },
+    {
+        header: "Datum",
+        accessorKey: "start",
+        id: "start",
+        cell: ({ row }) => {
+            return new Date(row.getValue("start")).toLocaleString("de-DE", {
+                dateStyle: "short",
+                timeStyle: "medium",
+            });
+        },
+    },
+];