New Dashboard

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

@@ -0,0 +1,107 @@
+<!--
+  -   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 type {ExtendedEvent} from "@type/event";
+    import {createSvelteTable, FlexRender} from "@components/ui/data-table";
+    import {
+        type ColumnFiltersState,
+        getCoreRowModel, getFilteredRowModel,
+        getPaginationRowModel, getSortedRowModel,
+        type SortingState,
+    } from "@tanstack/table-core";
+    import { columns } from "./columns"
+    import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@components/ui/table";
+
+    let { data }: { data: ExtendedEvent } = $props();
+
+    let sorting = $state<SortingState>([]);
+    let columnFilters = $state<ColumnFiltersState>([]);
+
+    const table = createSvelteTable({
+        get data() {
+            return data.fights;
+        },
+        state: {
+            get sorting() {
+                return sorting;
+            },
+            get columnFilters() {
+                return columnFilters;
+            },
+        },
+        onSortingChange: (updater) => {
+            if (typeof updater === "function") {
+                sorting = updater(sorting);
+            } else {
+                sorting = updater;
+            }
+        },
+        onColumnFiltersChange: (updater) => {
+            if (typeof updater === "function") {
+                columnFilters = updater(columnFilters);
+            } else {
+                columnFilters = updater;
+            }
+        },
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+    });
+</script>
+
+<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 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>
+        {:else}
+            <TableRow>
+                <TableCell colspan={columns.length} class="h-24 text-center">
+                    No results.
+                </TableCell>
+            </TableRow>
+        {/each}
+    </TableBody>
+</Table>