diff --git a/src/lib/components/wishlist/ClaimWishlistSection.svelte b/src/lib/components/wishlist/ClaimWishlistSection.svelte new file mode 100644 index 0000000..00f8746 --- /dev/null +++ b/src/lib/components/wishlist/ClaimWishlistSection.svelte @@ -0,0 +1,55 @@ + + +{#if isAuthenticated} +
+ {#if isOwner} + +

+ {t.wishlist.alreadyInDashboard} +

+ {:else} +
+ +
+

+ {#if hasClaimed} + You have claimed this wishlist. It will appear in your dashboard. + {:else} + Claim this wishlist to add it to your dashboard for easy access. + {/if} +

+ {/if} +
+{/if} diff --git a/src/lib/components/wishlist/DangerZone.svelte b/src/lib/components/wishlist/DangerZone.svelte new file mode 100644 index 0000000..165d057 --- /dev/null +++ b/src/lib/components/wishlist/DangerZone.svelte @@ -0,0 +1,46 @@ + + +
+
+ + + {#if unlocked} +
{ + if (!confirm(t.wishlist.deleteConfirm)) { + cancel(); + return; + } + return async ({ result }) => { + if (result.type === "success") { + window.location.href = "/dashboard"; + } + }; + }} + > + +
+ {/if} +
+
diff --git a/src/lib/utils/wishlistUpdates.ts b/src/lib/utils/wishlistUpdates.ts new file mode 100644 index 0000000..bd0f9d2 --- /dev/null +++ b/src/lib/utils/wishlistUpdates.ts @@ -0,0 +1,57 @@ +/** + * Utility functions for updating wishlist properties + */ + +type UpdateField = { + [key: string]: string; +}; + +async function updateWishlist(field: UpdateField): Promise { + const response = await fetch("?/updateWishlist", { + method: "POST", + headers: { + "Content-Type": "application/x-www-form-urlencoded", + }, + body: new URLSearchParams(field), + }); + + if (!response.ok) { + console.error(`Failed to update wishlist: ${Object.keys(field)[0]}`); + return false; + } + return true; +} + +export async function updateTitle(title: string): Promise { + return updateWishlist({ title }); +} + +export async function updateDescription(description: string | null): Promise { + return updateWishlist({ description: description || "" }); +} + +export async function updateColor(color: string | null): Promise { + return updateWishlist({ color: color || "" }); +} + +export async function updateEndDate(endDate: string | null): Promise { + return updateWishlist({ endDate: endDate || "" }); +} + +export async function reorderItems(items: Array<{ id: string; order: number }>): Promise { + const response = await fetch("?/reorderItems", { + method: "POST", + headers: { + "Content-Type": "application/x-www-form-urlencoded", + }, + body: new URLSearchParams({ + items: JSON.stringify(items), + }), + }); + + if (!response.ok) { + console.error("Failed to update item order"); + return false; + } + return true; +} diff --git a/src/routes/wishlist/[token]/edit/+page.svelte b/src/routes/wishlist/[token]/edit/+page.svelte index 227ef20..ad12704 100644 --- a/src/routes/wishlist/[token]/edit/+page.svelte +++ b/src/routes/wishlist/[token]/edit/+page.svelte @@ -8,17 +8,14 @@ import WishlistHeader from "$lib/components/wishlist/WishlistHeader.svelte"; import WishlistActionButtons from "$lib/components/wishlist/WishlistActionButtons.svelte"; import EditableItemsList from "$lib/components/wishlist/EditableItemsList.svelte"; + import ClaimWishlistSection from "$lib/components/wishlist/ClaimWishlistSection.svelte"; + import DangerZone from "$lib/components/wishlist/DangerZone.svelte"; import type { Item } from "$lib/server/schema"; - import { Button } from "$lib/components/ui/button"; - import { enhance } from "$app/forms"; - import { languageStore } from '$lib/stores/language.svelte'; import SearchBar from "$lib/components/ui/SearchBar.svelte"; - import UnlockButton from "$lib/components/ui/UnlockButton.svelte"; + import * as wishlistUpdates from "$lib/utils/wishlistUpdates"; let { data }: { data: PageData } = $props(); - const t = $derived(languageStore.t); - let showAddForm = $state(false); let rearranging = $state(false); let editingItem = $state(null); @@ -76,88 +73,7 @@ id: item.id, order: index, })); - - const response = await fetch("?/reorderItems", { - method: "POST", - headers: { - "Content-Type": "application/x-www-form-urlencoded", - }, - body: new URLSearchParams({ - items: JSON.stringify(updates), - }), - }); - - if (!response.ok) { - console.error("Failed to update item order"); - } - } - - async function handleTitleUpdate(title: string): Promise { - const response = await fetch("?/updateWishlist", { - method: "POST", - headers: { - "Content-Type": "application/x-www-form-urlencoded", - }, - body: new URLSearchParams({ - title: title, - }), - }); - - if (!response.ok) { - console.error("Failed to update wishlist title"); - return false; - } - return true; - } - - async function handleDescriptionUpdate(description: string | null): Promise { - const response = await fetch("?/updateWishlist", { - method: "POST", - headers: { - "Content-Type": "application/x-www-form-urlencoded", - }, - body: new URLSearchParams({ - description: description || "", - }), - }); - - if (!response.ok) { - console.error("Failed to update wishlist description"); - return false; - } - return true; - } - - async function handleColorUpdate(color: string | null) { - const response = await fetch("?/updateWishlist", { - method: "POST", - headers: { - "Content-Type": "application/x-www-form-urlencoded", - }, - body: new URLSearchParams({ - color: color || "", - }), - }); - - if (!response.ok) { - console.error("Failed to update wishlist color"); - } - } - - async function handleEndDateUpdate(endDate: string | null) { - const response = await fetch("?/updateWishlist", { - method: "POST", - headers: { - "Content-Type": "application/x-www-form-urlencoded", - }, - body: new URLSearchParams({ - endDate: endDate || "", - }), - }); - - if (!response.ok) { - console.error("Failed to update wishlist end date"); - } + await wishlistUpdates.reorderItems(updates); } function handleToggleAddForm() { @@ -198,10 +114,10 @@ - {#if data.isAuthenticated} -
- {#if data.isOwner} - -

- {t.wishlist.alreadyInDashboard} -

- {:else} -
- -
-

- {#if data.hasClaimed} - You have claimed this wishlist. It will appear in your dashboard. - {:else} - Claim this wishlist to add it to your dashboard for easy access. - {/if} -

- {/if} -
- {/if} + -
-
- - - {#if rearranging} -
{ - if ( - !confirm(t.wishlist.deleteConfirm) - ) { - cancel(); - return; - } - return async ({ result }) => { - if (result.type === "success") { - window.location.href = "/dashboard"; - } - }; - }} - > - -
- {/if} -
-
+