feat: Implement group management features with dialogs for editing and displaying group results, enhance event creation with a form, and update team and referee management UI

src/components/moderator/pages/event/EventFightList.svelte

@@ -20,23 +20,25 @@
 <script lang="ts">
     import FightEditRow from "./FightEditRow.svelte";
 
-    import GroupEditRow from "./GroupEditRow.svelte";
-
     import type { EventFightEdit, ExtendedEvent } from "@type/event";
     import { createSvelteTable, FlexRender } from "@components/ui/data-table";
     import { type ColumnFiltersState, getCoreRowModel, getFilteredRowModel, getGroupedRowModel, getSortedRowModel, type RowSelectionState, type SortingState } from "@tanstack/table-core";
     import { columns } from "./columns";
     import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@components/ui/table";
     import { Checkbox } from "@components/ui/checkbox";
-    import { Menubar, MenubarContent, MenubarItem, MenubarGroup, MenubarGroupHeading, MenubarMenu, MenubarSeparator, MenubarTrigger } from "@components/ui/menubar";
+    import { Menubar, MenubarContent, MenubarItem, MenubarGroup, MenubarGroupHeading, MenubarMenu, MenubarTrigger, MenubarSub, MenubarSubTrigger, MenubarSubContent } from "@components/ui/menubar";
     import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@components/ui/dialog";
     import FightEdit from "@components/moderator/components/FightEdit.svelte";
     import { Button } from "@components/ui/button";
     import { eventRepo } from "@components/repo/event";
+    import GroupEditDialog from "./GroupEditDialog.svelte";
+    import GroupResultsDialog from "./GroupResultsDialog.svelte";
+    import type { ResponseGroups } from "@type/event";
 
     let { data = $bindable() }: { data: ExtendedEvent } = $props();
 
     let fights = $state(data.fights);
+    let groups = $state(data.groups);
 
     let sorting = $state<SortingState>([]);
     let columnFilters = $state<ColumnFiltersState>([]);
@@ -94,6 +96,10 @@
     });
 
     let createOpen = $state(false);
+    let editGroupOpen = $state(false);
+    let selectedGroup: ResponseGroups | null = $state(null);
+    let groupResultsOpen = $state(false);
+    let selectedGroupForResults: ResponseGroups | null = $state(null);
 
     async function handleSave(fight: EventFightEdit) {
         await $eventRepo.createFight(data.event.id.toString(), {
@@ -102,48 +108,88 @@
             redTeam: fight.redTeam.id,
         });
 
-        fights = await $eventRepo.listFights(data.event.id.toString());
+        reload();
         createOpen = false;
     }
+
+    function openGroupEditDialog(group: ResponseGroups) {
+        selectedGroup = group;
+        editGroupOpen = true;
+    }
+
+    function openGroupResultsDialog(group: ResponseGroups) {
+        selectedGroupForResults = group;
+        groupResultsOpen = true;
+    }
+
+    async function reload() {
+        fights = await $eventRepo.listFights(data.event.id.toString());
+    }
 </script>
 
-<div class="w-fit">
-    <Dialog bind:open={createOpen}>
-        <Menubar>
-            <MenubarMenu>
-                <MenubarTrigger>Mehrfach Bearbeiten</MenubarTrigger>
-                <MenubarContent>
-                    <MenubarItem disabled>Gruppe Ändern</MenubarItem>
-                    <MenubarItem disabled>Startzeit Verschieben</MenubarItem>
-                    <MenubarItem disabled>Spectate Port Ändern</MenubarItem>
-                </MenubarContent>
-            </MenubarMenu>
-            <MenubarMenu>
-                <MenubarTrigger>Erstellen</MenubarTrigger>
-                <MenubarContent>
-                    <MenubarItem onclick={() => (createOpen = true)}>Fight Erstellen</MenubarItem>
-                    <MenubarGroup>
-                        <MenubarGroupHeading>Generatoren</MenubarGroupHeading>
-                        <MenubarItem disabled>Gruppenphase</MenubarItem>
-                        <MenubarItem disabled>K.O. Phase</MenubarItem>
-                    </MenubarGroup>
-                </MenubarContent>
-            </MenubarMenu>
-        </Menubar>
-        <DialogContent>
-            <DialogHeader>
-                <DialogTitle>Fight Erstellen</DialogTitle>
-                <DialogDescription>Hier kannst du einen neuen Fight erstellen</DialogDescription>
-            </DialogHeader>
-            <FightEdit fight={null} teams={data.teams} event={data.event} groups={data.groups} onSave={handleSave}>
-                {#snippet actions(dirty, submit)}
-                    <DialogFooter>
-                        <Button disabled={!dirty} onclick={submit}>Speichern</Button>
-                    </DialogFooter>
-                {/snippet}
-            </FightEdit>
-        </DialogContent>
-    </Dialog>
+<Dialog bind:open={createOpen}>
+    <DialogContent>
+        <DialogHeader>
+            <DialogTitle>Fight Erstellen</DialogTitle>
+            <DialogDescription>Hier kannst du einen neuen Fight erstellen</DialogDescription>
+        </DialogHeader>
+        <FightEdit fight={null} teams={data.teams} event={data.event} groups={data.groups} onSave={handleSave}>
+            {#snippet actions(dirty, submit)}
+                <DialogFooter>
+                    <Button disabled={!dirty} onclick={submit}>Speichern</Button>
+                </DialogFooter>
+            {/snippet}
+        </FightEdit>
+    </DialogContent>
+</Dialog>
+
+{#if selectedGroup}
+    <GroupEditDialog bind:open={editGroupOpen} group={selectedGroup} event={data.event} bind:groups />
+{/if}
+
+{#if selectedGroupForResults}
+    <GroupResultsDialog bind:open={groupResultsOpen} group={selectedGroupForResults} teams={data.teams} {fights} />
+{/if}
+
+<div class="flex items-center justify-between">
+    <Menubar>
+        <MenubarMenu>
+            <MenubarTrigger>Mehrfach Bearbeiten</MenubarTrigger>
+            <MenubarContent>
+                <MenubarItem disabled>Gruppe Ändern</MenubarItem>
+                <MenubarItem disabled>Startzeit Verschieben</MenubarItem>
+                <MenubarItem disabled>Spectate Port Ändern</MenubarItem>
+            </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+            <MenubarTrigger>Erstellen</MenubarTrigger>
+            <MenubarContent>
+                <MenubarItem onclick={() => (createOpen = true)}>Fight Erstellen</MenubarItem>
+                <MenubarGroup>
+                    <MenubarGroupHeading>Generatoren</MenubarGroupHeading>
+                    <MenubarItem disabled>Gruppenphase</MenubarItem>
+                    <MenubarItem disabled>K.O. Phase</MenubarItem>
+                </MenubarGroup>
+            </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+            <MenubarTrigger disabled={!groups.length}>Gruppen</MenubarTrigger>
+            <MenubarContent>
+                {#each groups as group (group.id)}
+                    <MenubarSub>
+                        <MenubarSubTrigger>
+                            {group.name}
+                        </MenubarSubTrigger>
+                        <MenubarSubContent>
+                            <MenubarItem onclick={() => openGroupEditDialog(group)}>Bearbeiten</MenubarItem>
+                            <MenubarItem onclick={() => openGroupResultsDialog(group)}>Gruppen Ergebnisse</MenubarItem>
+                        </MenubarSubContent>
+                    </MenubarSub>
+                {/each}
+            </MenubarContent>
+        </MenubarMenu>
+    </Menubar>
+    <Button variant="outline" class="ml-4" onclick={reload}>Neu laden</Button>
 </div>
 
 <Table>
@@ -163,6 +209,7 @@
     <TableBody>
         {#each table.getRowModel().rows as groupRow (groupRow.id)}
             {#if groupRow.getIsGrouped()}
+                {@const group = groups.find((g) => g.id === groupRow.getValue("group"))}
                 <TableRow class="font-bold">
                     <TableCell colspan={columns.length - 1}>
                         <Checkbox
@@ -171,13 +218,9 @@
                             onCheckedChange={() => groupRow.toggleSelected()}
                             class="mr-4"
                         />
-                        {groupRow.getValue("group") ?? "Keine Gruppe"}
+                        {group?.name ?? "Keine Gruppe"}
                     </TableCell>
-                    {#if groupRow.original.group != null}
-                        <TableCell class="text-right">
-                            <GroupEditRow group={groupRow.original.group}></GroupEditRow>
-                        </TableCell>
-                    {/if}
+                    <TableCell class="text-right"></TableCell>
                 </TableRow>
                 {#each groupRow.subRows as row (row.id)}
                     <TableRow data-state={row.getIsSelected() && "selected"}>
@@ -187,12 +230,7 @@
                             </TableCell>
                         {/each}
                         <TableCell class="text-right">
-                            <FightEditRow
-                                fight={row.original}
-                                teams={data.teams}
-                                groups={data.groups}
-                                event={data.event}
-                                onupdate={(update) => (fights = fights.map((v) => (v.id === update.id ? update : v)))}
+                            <FightEditRow fight={row.original} teams={data.teams} bind:groups event={data.event} onupdate={(update) => (fights = fights.map((v) => (v.id === update.id ? update : v)))}
                             ></FightEditRow>
                         </TableCell>
                     </TableRow>