88 lines
3.0 KiB
Svelte
88 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { addGift } from '$lib/remotes/db.remote';
|
|
import { GiftStatus, type Gift } from '@prisma/client';
|
|
import { Plus } from 'lucide-svelte';
|
|
import Modal from '../atoms/Modal.svelte';
|
|
|
|
let { personId, personName } = $props();
|
|
|
|
let isOpen = $state(false);
|
|
const initGift = {
|
|
name: '',
|
|
price: 0,
|
|
url: '',
|
|
description: '',
|
|
status: 'PLANNED'
|
|
} as const;
|
|
let gift: Omit<Gift, 'id' | 'personId'> = $state(initGift);
|
|
|
|
const open = () => {
|
|
isOpen = true;
|
|
};
|
|
|
|
const close = () => {
|
|
isOpen = false;
|
|
};
|
|
|
|
const handleAddGift = () => {
|
|
addGift({
|
|
personId,
|
|
gift: {
|
|
name: gift.name,
|
|
price: gift.price ?? 0,
|
|
url: gift.url ?? '',
|
|
description: gift.description ?? '',
|
|
status: gift.status
|
|
}
|
|
}).then(close);
|
|
|
|
gift = initGift;
|
|
};
|
|
|
|
const inputClasses = [
|
|
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
|
|
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
|
|
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
|
|
];
|
|
</script>
|
|
|
|
<button
|
|
class="w-full border-dashed border-2 mt-4 hover:bg-red-50 hover:border-red-200 hover:text-red-600 flex items-center justify-center gap-2 transition-all duration-200 cursor-pointer p-2"
|
|
onclick={open}
|
|
>
|
|
<Plus class="w-4 h-4" />
|
|
Dodaj prezent dla {personName}
|
|
</button>
|
|
|
|
{#if isOpen}
|
|
<Modal {isOpen} heading="Dodaj nową osobę" onClose={close}>
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend text-black/70">Nazwa</legend>
|
|
<input type="text" bind:value={gift.name} placeholder="Prezentu" class={inputClasses} />
|
|
</fieldset>
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend text-black/70">Cena</legend>
|
|
<input type="number" bind:value={gift.price} placeholder="Cena" class={inputClasses} />
|
|
</fieldset>
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend text-black/70">URL</legend>
|
|
<input type="url" bind:value={gift.url} placeholder="URL" class={inputClasses} />
|
|
</fieldset>
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend text-black/70">Opis</legend>
|
|
<textarea bind:value={gift.description} placeholder="Opis"></textarea>
|
|
</fieldset>
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend text-black/70">Status</legend>
|
|
<select bind:value={gift.status} class={inputClasses}>
|
|
{#each Object.values(GiftStatus) as status}
|
|
<option value={status}>{status}</option>
|
|
{/each}
|
|
</select>
|
|
</fieldset>
|
|
<div class="flex justify-end mt-6">
|
|
<button class="btn btn-error" onclick={handleAddGift}>Dodaj prezent</button>
|
|
</div>
|
|
</Modal>
|
|
{/if}
|