Refactor year management in the database layer, enhance Year model with budget field, and update UI components for year selection and dashboard display

2025-11-25 00:16:21 +01:00
parent 1030991d92
commit f31eb3dc0d
15 changed files with 498 additions and 14 deletions
--- a/src/lib/components/molecules/GiftModal.svelte
+++ b/src/lib/components/molecules/GiftModal.svelte
@@ -0,0 +1,84 @@
+<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);
+	let gift: Omit<Gift, 'id' | 'personId'> = $state({
+		name: '',
+		price: 0,
+		url: '',
+		description: '',
+		status: 'PLANNED'
+	});
+
+	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);
+	};
+
+	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}