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/EventFightList.svelte

@@ -18,26 +18,36 @@
   -->
 
 <script lang="ts">
-    import type {ExtendedEvent} from "@type/event";
-    import {createSvelteTable, FlexRender} from "@components/ui/data-table";
+    import type { ExtendedEvent } from "@type/event";
+    import { createSvelteTable, FlexRender } from "@components/ui/data-table";
     import {
         type ColumnFiltersState,
-        getCoreRowModel, getFilteredRowModel,
-        getPaginationRowModel, getSortedRowModel,
+        getCoreRowModel,
+        getFilteredRowModel,
+        getGroupedRowModel,
+        getPaginationRowModel,
+        getSortedRowModel,
+        type GroupingState,
+        type RowSelectionState,
         type SortingState,
     } from "@tanstack/table-core";
-    import { columns } from "./columns"
-    import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@components/ui/table";
+    import { columns } from "./columns";
+    import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@components/ui/table";
+    import { Checkbox } from "@components/ui/checkbox";
 
     let { data }: { data: ExtendedEvent } = $props();
 
     let sorting = $state<SortingState>([]);
     let columnFilters = $state<ColumnFiltersState>([]);
+    let selection = $state<RowSelectionState>({});
 
     const table = createSvelteTable({
         get data() {
             return data.fights;
         },
+        initialState: {
+            columnOrder: ["auswahl", "begegnung", "group"],
+        },
         state: {
             get sorting() {
                 return sorting;
@@ -45,6 +55,12 @@
             get columnFilters() {
                 return columnFilters;
             },
+            get grouping() {
+                return ["group"];
+            },
+            get rowSelection() {
+                return selection;
+            },
         },
         onSortingChange: (updater) => {
             if (typeof updater === "function") {
@@ -60,10 +76,20 @@
                 columnFilters = updater;
             }
         },
+        onRowSelectionChange: (updater) => {
+            if (typeof updater === "function") {
+                selection = updater(selection);
+            } else {
+                selection = updater;
+            }
+        },
         columns,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
+        getGroupedRowModel: getGroupedRowModel(),
+        groupedColumnMode: "remove",
+        getRowId: (row) => row.id.toString(),
     });
 </script>
 
@@ -74,10 +100,7 @@
                 {#each headerGroup.headers as header (header.id)}
                     <TableHead>
                         {#if !header.isPlaceholder}
-                            <FlexRender
-                                    content={header.column.columnDef.header}
-                                    context={header.getContext()}
-                            />
+                            <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
                         {/if}
                     </TableHead>
                 {/each}
@@ -85,23 +108,41 @@
         {/each}
     </TableHeader>
     <TableBody>
-        {#each table.getRowModel().rows as row (row.id)}
-            <TableRow data-state={row.getIsSelected() && "selected"}>
-                {#each row.getVisibleCells() as cell (cell.id)}
-                    <TableCell>
-                        <FlexRender
-                                content={cell.column.columnDef.cell}
-                                context={cell.getContext()}
+        {#each table.getRowModel().rows as groupRow (groupRow.id)}
+            {#if groupRow.getIsGrouped()}
+                <TableRow class="bg-muted font-bold">
+                    <TableCell colspan={columns.length}>
+                        <Checkbox
+                            checked={groupRow.getIsSelected()}
+                            indeterminate={groupRow.getIsSomeSelected() && !groupRow.getIsSelected()}
+                            onCheckedChange={() => groupRow.toggleSelected()}
+                            class="mr-4"
                         />
+                        Gruppe: {groupRow.getValue("group") ?? "Keine"}
                     </TableCell>
+                </TableRow>
+                {#each groupRow.subRows as row (row.id)}
+                    <TableRow data-state={row.getIsSelected() && "selected"}>
+                        {#each row.getVisibleCells() as cell (cell.id)}
+                            <TableCell>
+                                <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+                            </TableCell>
+                        {/each}
+                    </TableRow>
                 {/each}
-            </TableRow>
+            {:else}
+                <TableRow data-state={groupRow.getIsSelected() && "selected"}>
+                    {#each groupRow.getVisibleCells() as cell (cell.id)}
+                        <TableCell>
+                            <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+                        </TableCell>
+                    {/each}
+                </TableRow>
+            {/if}
         {:else}
             <TableRow>
-                <TableCell colspan={columns.length} class="h-24 text-center">
-                    No results.
-                </TableCell>
+                <TableCell colspan={columns.length} class="h-24 text-center">No results.</TableCell>
             </TableRow>
         {/each}
     </TableBody>
-</Table>
+</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",
+            });
+        },
+    },
+];