Website/src/components/moderator/pages/event/EventEdit.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 { Input } from "@components/ui/input";
    import { Label } from "@components/ui/label";
    import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
    import type { SWEvent } from "@type/event.ts";
    import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
    import { fromAbsolute } from "@internationalized/date";
    import { Button, buttonVariants } from "@components/ui/button";
    import { ChevronsUpDown } from "lucide-svelte";
    import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
    import { schemTypes } from "@stores/stores.ts";
    import Check from "lucide-svelte/icons/check";
    import { cn } from "@components/utils.ts";
    import { Switch } from "@components/ui/switch";
    import { eventRepo } from "@repo/event.ts";
    import {
        AlertDialog,
        AlertDialogAction,
        AlertDialogCancel,
        AlertDialogContent,
        AlertDialogDescription,
        AlertDialogFooter,
        AlertDialogHeader,
        AlertDialogTitle,
        AlertDialogTrigger,
    } from "@components/ui/alert-dialog";

    const { event }: { event: SWEvent } = $props();

    let rootEvent: SWEvent = $state(event);

    let eventName = $state(rootEvent.name);
    let eventDeadline = $state(fromAbsolute(rootEvent.deadline, "Europe/Berlin"));
    let eventStart = $state(fromAbsolute(rootEvent.start, "Europe/Berlin"));
    let eventEnd = $state(fromAbsolute(rootEvent.end, "Europe/Berlin"));
    let eventTeamSize = $state(rootEvent.maxTeamMembers);
    let eventSchematicType = $state(rootEvent.schemType);
    let eventPublicsOnly = $state(rootEvent.publicSchemsOnly);

    let dirty = $derived(
        eventName !== rootEvent.name ||
            eventDeadline.toDate().getTime() !== rootEvent.deadline ||
            eventStart.toDate().getTime() !== rootEvent.start ||
            eventEnd.toDate().getTime() !== rootEvent.end ||
            eventTeamSize !== rootEvent.maxTeamMembers ||
            eventSchematicType !== rootEvent.schemType ||
            eventPublicsOnly !== rootEvent.publicSchemsOnly
    );

    async function updateEvent() {
        rootEvent = await $eventRepo.updateEvent(event.id.toString(), {
            name: eventName,
            deadline: eventDeadline.toDate().getTime(),
            start: eventStart.toDate().getTime(),
            end: eventEnd.toDate().getTime(),
            maxTeamMembers: eventTeamSize,
            schemType: eventSchematicType,
            publicSchemsOnly: eventPublicsOnly,
        });
    }
</script>

<div class="flex flex-col gap-2">
    <Label for="event-name">Name</Label>
    <Input id="event-name" bind:value={eventName} />
    <Label>Deadline</Label>
    <DateTimePicker bind:value={eventDeadline} />
    <Label>Start</Label>
    <DateTimePicker bind:value={eventStart} />
    <Label>End</Label>
    <DateTimePicker bind:value={eventEnd} />
    <Label for="event-size">Teamsize</Label>
    <Input id="event-size" bind:value={eventTeamSize} type="number" />
    <Label>Schematic Type</Label>
    <Popover>
        <PopoverTrigger>
            {#snippet child({ props })}
                <Button variant="outline" class="justify-between" {...props} role="combobox">
                    {$schemTypes.find((value) => value.db === eventSchematicType)?.name || eventSchematicType || "Select a schematic type..."}
                    <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
                </Button>
            {/snippet}
        </PopoverTrigger>
        <PopoverContent class="p-0">
            <Command>
                <CommandInput placeholder="Search schematic types..." />
                <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}
                                onSelect={() => {
                                    eventSchematicType = type.db;
                                }}
                            >
                                <Check class={cn("mr-2 size-4", eventSchematicType !== type.db && "text-transparent")} />
                                {type.name}
                            </CommandItem>
                        {/each}
                    </CommandGroup>
                </CommandList>
            </Command>
        </PopoverContent>
    </Popover>
    <Label for="event-publics">Publics Schematics Only</Label>
    <Switch id="event-publics" bind:checked={eventPublicsOnly} />
    <div class="flex flex-row justify-end border-t pt-2 gap-4">
        <AlertDialog>
            <AlertDialogTrigger class={buttonVariants({ variant: "destructive" })}>Delete</AlertDialogTrigger>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                    <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                    <AlertDialogAction disabled>Delete</AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
        <Button disabled={!dirty} onclick={updateEvent}>Update</Button>
    </div>
</div>