feat: Refactor event management components and introduce EventModel for better state handling

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

@@ -20,7 +20,7 @@
 <script lang="ts">
     import FightEditRow from "./FightEditRow.svelte";
 
-    import type { EventFightEdit, ExtendedEvent } from "@type/event";
+    import type { EventFight, 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";
@@ -36,11 +36,12 @@
     import type { ResponseGroups } from "@type/event";
     import { EditIcon, GroupIcon, LinkIcon } from "lucide-svelte";
     import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@components/ui/dropdown-menu";
+    import GroupSelector from "@components/moderator/components/GroupSelector.svelte";
+    import { fightRepo } from "@components/repo/fight";
+    import type { Team } from "@components/types/team";
+    import type { EventModel } from "./eventmodel.svelte";
 
-    let { data = $bindable() }: { data: ExtendedEvent } = $props();
-
-    let fights = $state(data.fights);
-    let groups = $state(data.groups);
+    let { data = $bindable(), refresh }: { data: EventModel; refresh: () => void } = $props();
 
     let sorting = $state<SortingState>([]);
     let columnFilters = $state<ColumnFiltersState>([]);
@@ -48,7 +49,7 @@
 
     const table = createSvelteTable({
         get data() {
-            return fights;
+            return data.fights;
         },
         initialState: {
             columnOrder: ["auswahl", "begegnung", "group"],
@@ -103,6 +104,9 @@
     let groupResultsOpen = $state(false);
     let selectedGroupForResults: ResponseGroups | null = $state(null);
 
+    let groupChangeOpen = $state(false);
+    let groupChangeSelected: number | null = $state(null);
+
     async function handleSave(fight: EventFightEdit) {
         await $eventRepo.createFight(data.event.id.toString(), {
             ...fight,
@@ -110,7 +114,7 @@
             redTeam: fight.redTeam.id,
         });
 
-        reload();
+        refresh();
         createOpen = false;
     }
 
@@ -123,10 +127,6 @@
         selectedGroupForResults = group;
         groupResultsOpen = true;
     }
-
-    async function reload() {
-        fights = await $eventRepo.listFights(data.event.id.toString());
-    }
 </script>
 
 <Dialog bind:open={createOpen}>
@@ -146,19 +146,53 @@
 </Dialog>
 
 {#if selectedGroup}
-    <GroupEditDialog bind:open={editGroupOpen} group={selectedGroup} event={data.event} bind:groups />
+    <GroupEditDialog bind:open={editGroupOpen} group={selectedGroup} event={data.event} bind:groups={data.groups} />
 {/if}
 
 {#if selectedGroupForResults}
-    <GroupResultsDialog bind:open={groupResultsOpen} group={selectedGroupForResults} teams={data.teams} {fights} />
+    <GroupResultsDialog bind:open={groupResultsOpen} group={selectedGroupForResults} teams={data.teams} fights={data.fights} />
 {/if}
 
+<Dialog bind:open={groupChangeOpen}>
+    <DialogContent>
+        <DialogHeader>
+            <DialogTitle>Gruppe Ändern</DialogTitle>
+            <DialogDescription>Hier kannst du die Gruppe der ausgewählten Kämpfe ändern</DialogDescription>
+        </DialogHeader>
+        <GroupSelector event={data.event} bind:groups={data.groups} bind:value={groupChangeSelected} />
+        <DialogFooter>
+            <Button
+                onclick={async () => {
+                    groupChangeOpen = false;
+                    let group = data.groups.find((g) => g.id === groupChangeSelected);
+                    if (group) {
+                        let selectedGroups = table.getSelectedRowModel().rows.map((row) => row.original);
+                        for (const g of selectedGroups) {
+                            await $fightRepo.updateFight(data.event.id, g.id, {
+                                group: group.id,
+                                spielmodus: null,
+                                map: null,
+                                blueTeam: null,
+                                redTeam: null,
+                                start: null,
+                                spectatePort: null,
+                            });
+                        }
+
+                        refresh();
+                    }
+                }}>Speichern</Button
+            >
+        </DialogFooter>
+    </DialogContent>
+</Dialog>
+
 <div class="flex items-center justify-between">
     <Menubar>
         <MenubarMenu>
             <MenubarTrigger>Mehrfach Bearbeiten</MenubarTrigger>
             <MenubarContent>
-                <MenubarItem disabled>Gruppe Ändern</MenubarItem>
+                <MenubarItem onclick={() => (groupChangeOpen = true)}>Gruppe Ändern</MenubarItem>
                 <MenubarItem disabled>Startzeit Verschieben</MenubarItem>
                 <MenubarItem disabled>Spectate Port Ändern</MenubarItem>
             </MenubarContent>
@@ -175,9 +209,9 @@
             </MenubarContent>
         </MenubarMenu>
         <MenubarMenu>
-            <MenubarTrigger disabled={!groups.length}>Gruppen</MenubarTrigger>
+            <MenubarTrigger disabled={!data.groups.length}>Gruppen</MenubarTrigger>
             <MenubarContent>
-                {#each groups as group (group.id)}
+                {#each data.groups as group (group.id)}
                     <MenubarSub>
                         <MenubarSubTrigger>
                             {group.name}
@@ -191,7 +225,7 @@
             </MenubarContent>
         </MenubarMenu>
     </Menubar>
-    <Button variant="outline" class="ml-4" onclick={reload}>Neu laden</Button>
+    <Button variant="outline" class="ml-4" onclick={refresh}>Neu laden</Button>
 </div>
 
 <Table>
@@ -205,13 +239,14 @@
                         {/if}
                     </TableHead>
                 {/each}
+                <TableHead></TableHead>
             </TableRow>
         {/each}
     </TableHeader>
     <TableBody>
         {#each table.getRowModel().rows as groupRow (groupRow.id)}
             {#if groupRow.getIsGrouped()}
-                {@const group = groups.find((g) => g.id == groupRow.getValue("group"))}
+                {@const group = data.groups.find((g) => g.id == groupRow.getValue("group"))}
                 <TableRow class="font-bold">
                     <TableCell colspan={columns.length - 1}>
                         <Checkbox
@@ -256,7 +291,12 @@
                             </TableCell>
                         {/each}
                         <TableCell class="text-right">
-                            <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
+                                fight={row.original}
+                                teams={data.teams}
+                                bind:groups={data.groups}
+                                event={data.event}
+                                onupdate={(update) => (data.fights = data.fights.map((v) => (v.id === update.id ? update : v)))}
                             ></FightEditRow>
                         </TableCell>
                     </TableRow>