Website/src/components/moderator/pages/players/Table.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 {
        type ColumnFiltersState,
        getCoreRowModel, getFilteredRowModel,
        getPaginationRowModel, getSortedRowModel,
        type PaginationState,
        type SortingState,
    } from "@tanstack/table-core";
    import {
        createSvelteTable,
        FlexRender,
    } from "@components/ui/data-table/index";
    import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@components/ui/table";
    import {Button} from "@components/ui/button";
    import {Input} from "@components/ui/input";
    import {Select} from "@components/ui/select";
    import {SelectContent, SelectItem, SelectTrigger} from "@components/ui/select/index.js";
    import type {Player} from "@type/data";
    import { columns } from "./columns";

    let { data }: { data: Player[] } = $props();

    let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 25 });
    let sorting = $state<SortingState>([]);
    let columnFilters = $state<ColumnFiltersState>([]);

    const table = createSvelteTable({
        get data() {
            return data;
        },
        state: {
            get pagination() {
                return pagination;
            },
            get sorting() {
                return sorting;
            },
            get columnFilters() {
                return columnFilters;
            },
        },
        onPaginationChange: (updater) => {
            if (typeof updater === "function") {
                pagination = updater(pagination);
            } else {
                pagination = updater;
            }
        },
        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(),
        getPaginationRowModel: getPaginationRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
    });
</script>

<div class="rounded-md border m-4">
    <div class="flex items-center p-4 border-b">
        <Input
                placeholder="Filter Players..."
                value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
                onchange={(e) => {
        table.getColumn("name")?.setFilterValue(e.currentTarget.value);
      }}
                oninput={(e) => {
        table.getColumn("name")?.setFilterValue(e.currentTarget.value);
      }}
                class="max-w-sm"
        />
        <div class="flex items-center px-4">
            <Select type="single" value={pagination.pageSize.toString()} onValueChange={(e) => pagination = { pageSize: +e, pageIndex: 0 }}>
                <SelectTrigger>{pagination.pageSize}</SelectTrigger>
                <SelectContent>
                    <SelectItem value="5">5</SelectItem>
                    <SelectItem value="10">10</SelectItem>
                    <SelectItem value="25">25</SelectItem>
                    <SelectItem value="50">50</SelectItem>
                    <SelectItem value="100">100</SelectItem>
                    <SelectItem value="200">200</SelectItem>
                </SelectContent>
            </Select>
        </div>
    </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 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>
    <div class="flex items-center justify-end space-x-2 p-4 border-t">
        <Button
                variant="outline"
                size="sm"
                onclick={() => table.previousPage()}
                disabled={!table.getCanPreviousPage()}
        >
            Previous
        </Button>
        <span>{pagination.pageIndex + 1}/{table.getPageCount()}</span>
        <Button
                variant="outline"
                size="sm"
                onclick={() => table.nextPage()}
                disabled={!table.getCanNextPage()}
        >
            Next
        </Button>
    </div>
</div>