104 lines
4.2 KiB
Svelte
104 lines
4.2 KiB
Svelte
<script lang="ts">
|
|
import type { GroupUpdateEdit, ResponseGroups, SWEvent } from "@type/event";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
|
|
import { CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Command } from "@components/ui/command";
|
|
import { ChevronsUpDownIcon, PlusIcon, CheckIcon, MinusIcon } from "lucide-svelte";
|
|
import { Button } from "@components/ui/button";
|
|
import { cn } from "@components/utils";
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@components/ui/dialog";
|
|
import GroupEdit from "./GroupEdit.svelte";
|
|
import { eventRepo } from "@components/repo/event";
|
|
|
|
let {
|
|
event,
|
|
groups = $bindable(),
|
|
value = $bindable(),
|
|
}: {
|
|
event: SWEvent;
|
|
groups: ResponseGroups[];
|
|
value: number | null;
|
|
} = $props();
|
|
|
|
let selectedGroup = $derived(groups.find((group) => group.id === value));
|
|
|
|
let createOpen = $state(false);
|
|
let groupSelectOpen = $state(false);
|
|
|
|
async function handleGroupSave(group: GroupUpdateEdit) {
|
|
let g = await $eventRepo.createGroup(event.id, group);
|
|
groups.push(g);
|
|
value = g.id;
|
|
createOpen = false;
|
|
groupSelectOpen = false;
|
|
}
|
|
</script>
|
|
|
|
<Dialog bind:open={createOpen}>
|
|
<Popover bind:open={groupSelectOpen}>
|
|
<PopoverTrigger>
|
|
{#snippet child({ props })}
|
|
<Button id="fight-group" variant="outline" class="justify-between" {...props} role="combobox">
|
|
{selectedGroup?.name || "Keine Gruppe"}
|
|
<ChevronsUpDownIcon class="ml-2 size-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
{/snippet}
|
|
</PopoverTrigger>
|
|
<PopoverContent class="p-0">
|
|
<Command>
|
|
<CommandInput placeholder="Gruppe suchen..." />
|
|
<CommandList>
|
|
<CommandGroup>
|
|
<CommandItem value={"new"} onSelect={() => (createOpen = true)}>
|
|
<PlusIcon class={"mr-2 size-4"} />
|
|
Neue Gruppe
|
|
</CommandItem>
|
|
|
|
<CommandGroup heading="Gruppen">
|
|
<CommandItem
|
|
value={"none"}
|
|
onSelect={() => {
|
|
value = null;
|
|
groupSelectOpen = false;
|
|
}}
|
|
>
|
|
{#if value === null}
|
|
<CheckIcon class={"mr-2 size-4"} />
|
|
{:else}
|
|
<MinusIcon class={"mr-2 size-4"} />
|
|
{/if}
|
|
Keine Gruppe
|
|
</CommandItem>
|
|
|
|
{#each groups as group}
|
|
<CommandItem
|
|
value={group.id.toString()}
|
|
onSelect={() => {
|
|
value = group.id;
|
|
groupSelectOpen = false;
|
|
}}
|
|
>
|
|
<CheckIcon class={cn("mr-2 size-4", value !== group.id && "text-transparent")} />
|
|
{group.name}
|
|
</CommandItem>
|
|
{/each}
|
|
</CommandGroup>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Neue Gruppe erstellen</DialogTitle>
|
|
<DialogDescription>Hier kannst du eine neue Gruppe erstellen</DialogDescription>
|
|
</DialogHeader>
|
|
<GroupEdit group={null} onSave={handleGroupSave}>
|
|
{#snippet actions(dirty, submit)}
|
|
<DialogFooter>
|
|
<Button disabled={!dirty} onclick={submit}>Speichern</Button>
|
|
</DialogFooter>
|
|
{/snippet}
|
|
</GroupEdit>
|
|
</DialogContent>
|
|
</Dialog>
|