Refactor player handling: replace player arrays with IDs, implement PlayerSelector component

This commit is contained in:
2025-12-02 22:23:55 +01:00
parent 7ec678ae7d
commit 5f5988e270
14 changed files with 332 additions and 304 deletions

View File

@@ -11,10 +11,10 @@
import { Input } from "@components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
import { players } from "@components/stores/stores";
import { Check } from "lucide-svelte";
import { cn } from "@components/utils";
import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
import PlayerSelector from "@components/ui/PlayerSelector.svelte";
let debounceTimer: NodeJS.Timeout;
const debounce = <T,>(value: T, func: (value: T) => void) => {
@@ -27,11 +27,11 @@
let actionText = $state("");
let serverText = $state("");
let fullText = $state("");
let actors = $state<string[]>([]);
let actors = $state<number[]>([]);
let actionTypes = $state<string[]>([]);
let timeGreater = $state<ZonedDateTime>(now("Europe/Berlin").subtract({ months: 1 }));
let timeLess = $state<ZonedDateTime>(now("Europe/Berlin"));
let serverOwner = $state<string[]>([]);
let serverOwner = $state<number[]>([]);
let velocity = $state(false);
let sorting = $state("DESC");
@@ -118,56 +118,12 @@
</SelectContent>
</Select>
<Popover>
<PopoverTrigger>
<Button variant="outline" class="mr-2 {actors && 'text-muted-foreground'}">Spieler Filter ({actors.length})</Button>
</PopoverTrigger>
<PopoverContent class="p-0">
<Command shouldFilter={false}>
<CommandInput bind:value={playerSearch} placeholder="Search players..." />
<CommandList>
<CommandEmpty>No Players found :(</CommandEmpty>
<CommandGroup heading="Players">
{#each $players.filter((v) => v.name.toLowerCase().includes(playerSearch.toLowerCase())).filter((v, i) => i < 50) as player (player.uuid)}
<CommandItem
value={player.name}
onSelect={() => (actors = actors.includes(player.uuid) ? actors.filter((v) => v !== player.uuid) : [...actors, player.uuid])}
keywords={[player.uuid]}
>
<Check class={cn("mr-2 size-4", !actors.includes(player.uuid) && "text-transparent")} />
{player.name}
</CommandItem>
{/each}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger>
<Button variant="outline" class="mr-2 {serverOwner && 'text-muted-foreground'}">Server Owner ({serverOwner.length})</Button>
</PopoverTrigger>
<PopoverContent class="p-0">
<Command shouldFilter={false}>
<CommandInput bind:value={ownerSearch} placeholder="Search players..." />
<CommandList>
<CommandEmpty>No Players found :(</CommandEmpty>
<CommandGroup heading="Players">
{#each $players.filter((v) => v.name.toLowerCase().includes(ownerSearch.toLowerCase())).filter((v, i) => i < 50) as player (player.uuid)}
<CommandItem
value={player.name}
onSelect={() => (serverOwner = serverOwner.includes(player.uuid) ? serverOwner.filter((v) => v !== player.uuid) : [...serverOwner, player.uuid])}
keywords={[player.uuid]}
>
<Check class={cn("mr-2 size-4", !serverOwner.includes(player.uuid) && "text-transparent")} />
{player.name}
</CommandItem>
{/each}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<div class="mr-2">
<PlayerSelector bind:value={actors} multiple placeholder="Spieler Filter" />
</div>
<div class="mr-2">
<PlayerSelector bind:value={serverOwner} multiple placeholder="Server Owner" />
</div>
<div class="mr-2">
<DateTimePicker bind:value={timeGreater} />
</div>