feat: Add FightEdit and GroupEdit components for enhanced event management

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

@@ -106,6 +106,15 @@
                 <CommandList>
                     <CommandEmpty>No schematic type found.</CommandEmpty>
                     <CommandGroup>
+                        <CommandItem
+                            value={"null"}
+                            onSelect={() => {
+                                eventSchematicType = null;
+                            }}
+                        >
+                            <Check class={cn("mr-2 size-4", eventSchematicType !== null && "text-transparent")} />
+                            Keinen
+                        </CommandItem>
                         {#each $schemTypes as type}
                             <CommandItem
                                 value={type.db}

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

@@ -18,6 +18,10 @@
   -->
 
 <script lang="ts">
+    import FightEditRow from "./FightEditRow.svelte";
+
+    import GroupEditRow from "./GroupEditRow.svelte";
+
     import type { 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";
@@ -25,8 +29,10 @@
     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 { Button } from "@components/ui/button";
+    import { MenuIcon } from "lucide-svelte";
 
-    let { data }: { data: ExtendedEvent } = $props();
+    let { data = $bindable() }: { data: ExtendedEvent } = $props();
 
     let sorting = $state<SortingState>([]);
     let columnFilters = $state<ColumnFiltersState>([]);
@@ -126,15 +132,20 @@
         {#each table.getRowModel().rows as groupRow (groupRow.id)}
             {#if groupRow.getIsGrouped()}
                 <TableRow class="bg-muted font-bold">
-                    <TableCell colspan={columns.length}>
+                    <TableCell colspan={columns.length - 1}>
                         <Checkbox
                             checked={groupRow.getIsSelected()}
                             indeterminate={groupRow.getIsSomeSelected() && !groupRow.getIsSelected()}
                             onCheckedChange={() => groupRow.toggleSelected()}
                             class="mr-4"
                         />
-                        Gruppe: {groupRow.getValue("group") ?? "Keine"}
+                        {groupRow.getValue("group") ?? "Keine Gruppe"}
                     </TableCell>
+                    {#if groupRow.original.group != null}
+                        <TableCell class="text-right">
+                            <GroupEditRow group={groupRow.original.group}></GroupEditRow>
+                        </TableCell>
+                    {/if}
                 </TableRow>
                 {#each groupRow.subRows as row (row.id)}
                     <TableRow data-state={row.getIsSelected() && "selected"}>
@@ -143,6 +154,9 @@
                                 <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
                             </TableCell>
                         {/each}
+                        <TableCell class="text-right">
+                            <FightEditRow fight={row.original} teams={data.teams}></FightEditRow>
+                        </TableCell>
                     </TableRow>
                 {/each}
             {:else}

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

@@ -24,7 +24,7 @@
     import RefereesList from "@components/moderator/pages/event/RefereesList.svelte";
     import TeamTable from "@components/moderator/pages/event/TeamTable.svelte";
 
-    const { event }: { event: ExtendedEvent } = $props();
+    let { event }: { event: ExtendedEvent } = $props();
 </script>
 
 <div class="flex flex-col m-4 p-4 rounded-md border gap-4">
@@ -35,12 +35,12 @@
         </div>
         <div class="md:ml-4 md:pl-4 md:border-l md:w-1/3">
             <h2 class="text-xl font-bold mb-4">Teams</h2>
-            <TeamTable {event} />
+            <TeamTable bind:event />
         </div>
         <div class="md:ml-4 md:pl-4 md:border-l md:w-1/3">
             <h2 class="text-xl font-bold mb-4">Referees</h2>
             <RefereesList {event} />
         </div>
     </div>
-    <EventFightList data={event} />
+    <EventFightList bind:data={event} />
 </div>

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import type { EventFight } from "@type/event";
+    import { Button } from "@components/ui/button";
+    import { EditIcon, MenuIcon } from "lucide-svelte";
+    import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@components/ui/dialog";
+    import FightEdit from "@components/moderator/components/FightEdit.svelte";
+    import type { Team } from "@components/types/team";
+
+    const { fight, teams }: { fight: EventFight; teams: Team[] } = $props();
+
+    function handleSave(fightData) {
+        // Handle the save action here
+        console.log("Fight data saved:", fightData);
+    }
+</script>
+
+<div>
+    <Dialog>
+        <DialogTrigger>
+            <Button variant="ghost" size="icon">
+                <EditIcon />
+            </Button>
+        </DialogTrigger>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Fight bearbeiten</DialogTitle>
+                <DialogDescription>Hier kannst du die Daten des Kampfes bearbeiten.</DialogDescription>
+            </DialogHeader>
+            <FightEdit {fight} {teams} onSave={handleSave}>
+                {#snippet actions(dirty, submit)}
+                    <DialogFooter>
+                        <Button disabled={!dirty} onclick={submit}>Speichern</Button>
+                    </DialogFooter>
+                {/snippet}
+            </FightEdit>
+        </DialogContent>
+    </Dialog>
+    <Button variant="ghost" size="icon">
+        <MenuIcon />
+    </Button>
+</div>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { ResponseGroups } from "@type/event";
+    import { Button } from "@components/ui/button";
+    import { MenuIcon } from "lucide-svelte";
+
+    let { group }: { group: ResponseGroups } = $props();
+</script>
+
+<div>
+    <Button variant="ghost" size="icon">
+        <MenuIcon />
+    </Button>
+    <Button variant="ghost" size="icon">
+        <MenuIcon />
+    </Button>
+</div>

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

@@ -26,18 +26,20 @@
     import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
     import { teams } from "@components/stores/stores";
 
-    const { event }: { event: ExtendedEvent } = $props();
+    const { event = $bindable() }: { event: ExtendedEvent } = $props();
 
     let team = $state(event.teams);
 
     async function addTeam(value: number) {
         await $eventRepo.updateTeams(event.event.id.toString(), [value]);
         team = await $eventRepo.listTeams(event.event.id.toString());
+        event.teams = team;
     }
 
     async function removeTeam(value: number) {
         await $eventRepo.deleteTeams(event.event.id.toString(), [value]);
         team = await $eventRepo.listTeams(event.event.id.toString());
+        event.teams = team;
     }
 
     let teamSearch = $state("");