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

<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2025 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<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 { 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";

    let { data = $bindable() }: { data: ExtendedEvent } = $props();

    let fights = $state(data.fights);

    let sorting = $state<SortingState>([]);
    let columnFilters = $state<ColumnFiltersState>([]);
    let selection = $state<RowSelectionState>({});

    const table = createSvelteTable({
        get data() {
            return fights;
        },
        initialState: {
            columnOrder: ["auswahl", "begegnung", "group"],
        },
        state: {
            get sorting() {
                return sorting;
            },
            get columnFilters() {
                return columnFilters;
            },
            get grouping() {
                return ["group"];
            },
            get rowSelection() {
                return selection;
            },
        },
        onSortingChange: (updater) => {
            if (typeof updater === "function") {
                sorting = updater(sorting);
            } else {
                sorting = updater;
            }
        },
        onColumnFiltersChange: (updater) => {
            if (typeof updater === "function") {
                columnFilters = updater(columnFilters);
            } else {
                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(),
    });

    let createOpen = $state(false);

    async function handleSave(fight: EventFightEdit) {
        await $eventRepo.createFight(data.event.id.toString(), {
            ...fight,
            blueTeam: fight.blueTeam.id,
            redTeam: fight.redTeam.id,
        });

        fights = await $eventRepo.listFights(data.event.id.toString());
        createOpen = false;
    }
</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>
</div>

<Table>
    <TableHeader>
        {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
            <TableRow>
                {#each headerGroup.headers as header (header.id)}
                    <TableHead>
                        {#if !header.isPlaceholder}
                            <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
                        {/if}
                    </TableHead>
                {/each}
            </TableRow>
        {/each}
    </TableHeader>
    <TableBody>
        {#each table.getRowModel().rows as groupRow (groupRow.id)}
            {#if groupRow.getIsGrouped()}
                <TableRow class="font-bold">
                    <TableCell colspan={columns.length - 1}>
                        <Checkbox
                            checked={groupRow.getIsSelected()}
                            indeterminate={groupRow.getIsSomeSelected() && !groupRow.getIsSelected()}
                            onCheckedChange={() => groupRow.toggleSelected()}
                            class="mr-4"
                        />
                        {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"}>
                        {#each row.getVisibleCells() as cell (cell.id)}
                            <TableCell>
                                <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
                            </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>
                        </TableCell>
                    </TableRow>
                {/each}
            {: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>
            </TableRow>
        {/each}
    </TableBody>
</Table>