refactor: abstract dashboard lists into components
This commit is contained in:
rasmusq
157
src/lib/components/dashboard/WishlistSection.svelte
Normal file
157
src/lib/components/dashboard/WishlistSection.svelte
Normal file
@@ -0,0 +1,157 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import WishlistGrid from '$lib/components/dashboard/WishlistGrid.svelte';
|
||||
import WishlistCard from '$lib/components/dashboard/WishlistCard.svelte';
|
||||
import { enhance } from '$app/forms';
|
||||
import { Star } from 'lucide-svelte';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import SearchBar from '$lib/components/ui/SearchBar.svelte';
|
||||
import UnlockButton from '$lib/components/ui/UnlockButton.svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
type WishlistItem = any; // You can make this more specific based on your types
|
||||
|
||||
let {
|
||||
title,
|
||||
description,
|
||||
items,
|
||||
emptyMessage,
|
||||
emptyDescription,
|
||||
emptyActionLabel,
|
||||
emptyActionHref,
|
||||
showCreateButton = false,
|
||||
hideIfEmpty = false,
|
||||
actions
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
items: WishlistItem[];
|
||||
emptyMessage: string;
|
||||
emptyDescription?: string;
|
||||
emptyActionLabel?: string;
|
||||
emptyActionHref?: string;
|
||||
showCreateButton?: boolean;
|
||||
hideIfEmpty?: boolean;
|
||||
actions: Snippet<[WishlistItem, boolean]>; // item, unlocked
|
||||
} = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
|
||||
let unlocked = $state(false);
|
||||
let searchQuery = $state('');
|
||||
|
||||
// Filter items based on search query
|
||||
const filteredItems = $derived(() => {
|
||||
if (!searchQuery.trim()) return items;
|
||||
|
||||
return items.filter(item => {
|
||||
const title = item.title || item.wishlist?.title || '';
|
||||
const description = item.description || item.wishlist?.description || '';
|
||||
const query = searchQuery.toLowerCase();
|
||||
|
||||
return title.toLowerCase().includes(query) || description.toLowerCase().includes(query);
|
||||
});
|
||||
});
|
||||
|
||||
// Sort items by favorite, end date, then created date
|
||||
const sortedItems = $derived(() => {
|
||||
return [...filteredItems()].sort((a, b) => {
|
||||
// Handle both direct wishlists and saved wishlists
|
||||
const aItem = a.wishlist || a;
|
||||
const bItem = b.wishlist || b;
|
||||
|
||||
// Sort by favorite first
|
||||
if (a.isFavorite && !b.isFavorite) return -1;
|
||||
if (!a.isFavorite && b.isFavorite) return 1;
|
||||
|
||||
// Then by end date
|
||||
const aHasEndDate = !!aItem.endDate;
|
||||
const bHasEndDate = !!bItem.endDate;
|
||||
|
||||
if (aHasEndDate && !bHasEndDate) return -1;
|
||||
if (!aHasEndDate && bHasEndDate) return 1;
|
||||
|
||||
if (aHasEndDate && bHasEndDate) {
|
||||
return new Date(aItem.endDate!).getTime() - new Date(bItem.endDate!).getTime();
|
||||
}
|
||||
|
||||
// Finally by created date (most recent first)
|
||||
const aCreatedAt = a.createdAt || aItem.createdAt;
|
||||
const bCreatedAt = b.createdAt || bItem.createdAt;
|
||||
return new Date(bCreatedAt).getTime() - new Date(aCreatedAt).getTime();
|
||||
});
|
||||
});
|
||||
|
||||
function formatEndDate(date: Date | string | null): string | null {
|
||||
if (!date) return null;
|
||||
const d = new Date(date);
|
||||
return d.toLocaleDateString(languageStore.t.date.format.short, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
function getWishlistDescription(item: any): string | null {
|
||||
const wishlist = item.wishlist || item;
|
||||
if (!wishlist) return null;
|
||||
|
||||
const lines: string[] = [];
|
||||
|
||||
const topItems = wishlist.items?.slice(0, 3).map((i: any) => i.title) || [];
|
||||
if (topItems.length > 0) {
|
||||
lines.push(topItems.join(', '));
|
||||
}
|
||||
|
||||
if (wishlist.user?.name || wishlist.user?.username) {
|
||||
const ownerName = wishlist.user.name || wishlist.user.username;
|
||||
lines.push(`${t.dashboard.by} ${ownerName}`);
|
||||
}
|
||||
|
||||
if (wishlist.endDate) {
|
||||
lines.push(`${t.dashboard.ends}: ${formatEndDate(wishlist.endDate)}`);
|
||||
}
|
||||
|
||||
return lines.length > 0 ? lines.join('\n') : null;
|
||||
}
|
||||
|
||||
// Hide entire section if hideIfEmpty is true and there are no items
|
||||
const shouldShow = $derived(() => {
|
||||
return !hideIfEmpty || items.length > 0;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if shouldShow()}
|
||||
<WishlistGrid
|
||||
{title}
|
||||
{description}
|
||||
items={sortedItems() || []}
|
||||
{emptyMessage}
|
||||
{emptyDescription}
|
||||
{emptyActionLabel}
|
||||
{emptyActionHref}
|
||||
>
|
||||
{#snippet headerAction()}
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
{#if showCreateButton}
|
||||
<Button onclick={() => (window.location.href = '/')}>{t.dashboard.createNew}</Button>
|
||||
{/if}
|
||||
<UnlockButton bind:unlocked />
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet searchBar()}
|
||||
{#if items.length > 0}
|
||||
<SearchBar bind:value={searchQuery} />
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet children(item)}
|
||||
{@const wishlist = item.wishlist || item}
|
||||
<WishlistCard
|
||||
title={wishlist.title}
|
||||
description={getWishlistDescription(item)}
|
||||
itemCount={wishlist.items?.length || 0}
|
||||
color={wishlist.color}
|
||||
>
|
||||
{@render actions(item, unlocked)}
|
||||
</WishlistCard>
|
||||
{/snippet}
|
||||
</WishlistGrid>
|
||||
{/if}
|
||||
@@ -3,371 +3,190 @@
|
||||
import type { PageData } from './$types';
|
||||
import PageContainer from '$lib/components/layout/PageContainer.svelte';
|
||||
import DashboardHeader from '$lib/components/layout/DashboardHeader.svelte';
|
||||
import WishlistGrid from '$lib/components/dashboard/WishlistGrid.svelte';
|
||||
import WishlistCard from '$lib/components/dashboard/WishlistCard.svelte';
|
||||
import WishlistSection from '$lib/components/dashboard/WishlistSection.svelte';
|
||||
import { enhance } from '$app/forms';
|
||||
import { Star } from 'lucide-svelte';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import SearchBar from '$lib/components/ui/SearchBar.svelte';
|
||||
import UnlockButton from '$lib/components/ui/UnlockButton.svelte';
|
||||
|
||||
let { data }: { data: PageData } = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
|
||||
let myWishlistsUnlocked = $state(false);
|
||||
let claimedWishlistsUnlocked = $state(false);
|
||||
let savedWishlistsUnlocked = $state(false);
|
||||
let myWishlistsSearch = $state('');
|
||||
let claimedWishlistsSearch = $state('');
|
||||
let savedWishlistsSearch = $state('');
|
||||
|
||||
// Only owned wishlists for "My Wishlists" (exclude claimed)
|
||||
const allMyWishlists = $derived(() => {
|
||||
const owned = data.wishlists || [];
|
||||
return owned;
|
||||
});
|
||||
// Only owned wishlists for "My Wishlists"
|
||||
const myWishlists = $derived(() => data.wishlists || []);
|
||||
|
||||
// Claimed wishlists (those with ownerToken, meaning they were claimed via edit link)
|
||||
const allClaimedWishlists = $derived(() => {
|
||||
const claimed = (data.savedWishlists || [])
|
||||
.filter(saved => saved.wishlist?.ownerToken) // Has edit access
|
||||
const claimedWishlists = $derived(() => {
|
||||
return (data.savedWishlists || [])
|
||||
.filter(saved => saved.wishlist?.ownerToken)
|
||||
.map(saved => ({
|
||||
...saved.wishlist,
|
||||
isFavorite: saved.isFavorite,
|
||||
isClaimed: true,
|
||||
savedId: saved.id
|
||||
}));
|
||||
return claimed;
|
||||
});
|
||||
|
||||
const sortedWishlists = $derived(() => {
|
||||
const filtered = myWishlistsSearch.trim()
|
||||
? allMyWishlists().filter(w =>
|
||||
w.title.toLowerCase().includes(myWishlistsSearch.toLowerCase()) ||
|
||||
w.description?.toLowerCase().includes(myWishlistsSearch.toLowerCase())
|
||||
)
|
||||
: allMyWishlists();
|
||||
|
||||
return [...filtered].sort((a, b) => {
|
||||
if (a.isFavorite && !b.isFavorite) return -1;
|
||||
if (!a.isFavorite && b.isFavorite) return 1;
|
||||
|
||||
const aHasEndDate = !!a.endDate;
|
||||
const bHasEndDate = !!b.endDate;
|
||||
|
||||
if (aHasEndDate && !bHasEndDate) return -1;
|
||||
if (!aHasEndDate && bHasEndDate) return 1;
|
||||
|
||||
if (aHasEndDate && bHasEndDate) {
|
||||
return new Date(a.endDate!).getTime() - new Date(b.endDate!).getTime();
|
||||
}
|
||||
|
||||
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
|
||||
});
|
||||
});
|
||||
|
||||
const sortedClaimedWishlists = $derived(() => {
|
||||
const filtered = claimedWishlistsSearch.trim()
|
||||
? allClaimedWishlists().filter(w =>
|
||||
w.title.toLowerCase().includes(claimedWishlistsSearch.toLowerCase()) ||
|
||||
w.description?.toLowerCase().includes(claimedWishlistsSearch.toLowerCase())
|
||||
)
|
||||
: allClaimedWishlists();
|
||||
|
||||
return [...filtered].sort((a, b) => {
|
||||
if (a.isFavorite && !b.isFavorite) return -1;
|
||||
if (!a.isFavorite && b.isFavorite) return 1;
|
||||
|
||||
const aHasEndDate = !!a.endDate;
|
||||
const bHasEndDate = !!b.endDate;
|
||||
|
||||
if (aHasEndDate && !bHasEndDate) return -1;
|
||||
if (!aHasEndDate && bHasEndDate) return 1;
|
||||
|
||||
if (aHasEndDate && bHasEndDate) {
|
||||
return new Date(a.endDate!).getTime() - new Date(b.endDate!).getTime();
|
||||
}
|
||||
|
||||
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
|
||||
});
|
||||
});
|
||||
|
||||
// Saved wishlists are those WITHOUT ownerToken (saved from public view only)
|
||||
const sortedSavedWishlists = $derived(() => {
|
||||
const filtered = savedWishlistsSearch.trim()
|
||||
? (data.savedWishlists || [])
|
||||
.filter(saved => !saved.wishlist?.ownerToken) // No edit access
|
||||
.filter(saved =>
|
||||
saved.wishlist?.title.toLowerCase().includes(savedWishlistsSearch.toLowerCase()) ||
|
||||
saved.wishlist?.description?.toLowerCase().includes(savedWishlistsSearch.toLowerCase())
|
||||
)
|
||||
: (data.savedWishlists || []).filter(saved => !saved.wishlist?.ownerToken);
|
||||
|
||||
return [...filtered].sort((a, b) => {
|
||||
if (a.isFavorite && !b.isFavorite) return -1;
|
||||
if (!a.isFavorite && b.isFavorite) return 1;
|
||||
|
||||
const aHasEndDate = !!a.wishlist?.endDate;
|
||||
const bHasEndDate = !!b.wishlist?.endDate;
|
||||
|
||||
if (aHasEndDate && !bHasEndDate) return -1;
|
||||
if (!aHasEndDate && bHasEndDate) return 1;
|
||||
|
||||
if (aHasEndDate && bHasEndDate) {
|
||||
return new Date(a.wishlist.endDate!).getTime() - new Date(b.wishlist.endDate!).getTime();
|
||||
}
|
||||
|
||||
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
|
||||
});
|
||||
const savedWishlists = $derived(() => {
|
||||
return (data.savedWishlists || []).filter(saved => !saved.wishlist?.ownerToken);
|
||||
});
|
||||
|
||||
function formatEndDate(date: Date | string | null): string | null {
|
||||
if (!date) return null;
|
||||
const d = new Date(date);
|
||||
return d.toLocaleDateString(languageStore.t.date.format.short, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
function getWishlistDescription(wishlist: any): string | null {
|
||||
if (!wishlist) return null;
|
||||
|
||||
const lines: string[] = [];
|
||||
|
||||
const topItems = wishlist.items?.slice(0, 3).map((item: any) => item.title) || [];
|
||||
if (topItems.length > 0) {
|
||||
lines.push(topItems.join(', '));
|
||||
}
|
||||
|
||||
if (wishlist.user?.name || wishlist.user?.username) {
|
||||
const ownerName = wishlist.user.name || wishlist.user.username;
|
||||
lines.push(`${t.dashboard.by} ${ownerName}`);
|
||||
}
|
||||
|
||||
if (wishlist.endDate) {
|
||||
lines.push(`${t.dashboard.ends}: ${formatEndDate(wishlist.endDate)}`);
|
||||
}
|
||||
|
||||
return lines.length > 0 ? lines.join('\n') : null;
|
||||
}
|
||||
|
||||
function getSavedWishlistDescription(saved: any): string | null {
|
||||
return getWishlistDescription(saved.wishlist);
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageContainer>
|
||||
<DashboardHeader userName={data.user?.name} userEmail={data.user?.email} />
|
||||
|
||||
<WishlistGrid
|
||||
<!-- My Wishlists Section -->
|
||||
<WishlistSection
|
||||
title={t.dashboard.myWishlists}
|
||||
description={t.dashboard.myWishlistsDescription}
|
||||
items={sortedWishlists() || []}
|
||||
items={myWishlists()}
|
||||
emptyMessage={t.dashboard.emptyWishlists}
|
||||
emptyActionLabel={t.dashboard.emptyWishlistsAction}
|
||||
emptyActionHref="/"
|
||||
showCreateButton={true}
|
||||
>
|
||||
{#snippet headerAction()}
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
<Button onclick={() => (window.location.href = '/')}>{t.dashboard.createNew}</Button>
|
||||
<UnlockButton bind:unlocked={myWishlistsUnlocked} />
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet searchBar()}
|
||||
{#if allMyWishlists().length > 0}
|
||||
<SearchBar bind:value={myWishlistsSearch} />
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet children(wishlist)}
|
||||
<WishlistCard
|
||||
title={wishlist.title}
|
||||
description={getWishlistDescription(wishlist)}
|
||||
itemCount={wishlist.items?.length || 0}
|
||||
color={wishlist.color}
|
||||
>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<!-- For owned wishlists, use regular favorite toggle -->
|
||||
<form method="POST" action="?/toggleFavorite" use:enhance={() => {
|
||||
{#snippet actions(wishlist, unlocked)}
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<form method="POST" action="?/toggleFavorite" use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}>
|
||||
<input type="hidden" name="wishlistId" value={wishlist.id} />
|
||||
<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
|
||||
<Button type="submit" size="sm" variant="outline">
|
||||
<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
|
||||
</Button>
|
||||
</form>
|
||||
<Button
|
||||
size="sm"
|
||||
onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
|
||||
>
|
||||
{t.dashboard.manage}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}/wishlist/${wishlist.publicToken}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
{t.dashboard.copyLink}
|
||||
</Button>
|
||||
{#if unlocked}
|
||||
<form method="POST" action="?/deleteWishlist" use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}>
|
||||
<input type="hidden" name="wishlistId" value={wishlist.id} />
|
||||
<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
|
||||
<Button type="submit" size="sm" variant="outline">
|
||||
<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
|
||||
<Button type="submit" size="sm" variant="destructive">
|
||||
{t.dashboard.delete}
|
||||
</Button>
|
||||
</form>
|
||||
<Button
|
||||
size="sm"
|
||||
onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
|
||||
>
|
||||
{t.dashboard.manage}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}/wishlist/${wishlist.publicToken}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
{t.dashboard.copyLink}
|
||||
</Button>
|
||||
{#if myWishlistsUnlocked}
|
||||
<!-- Add delete button for owned wishlists when unlocked -->
|
||||
<form method="POST" action="?/deleteWishlist" use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}>
|
||||
<input type="hidden" name="wishlistId" value={wishlist.id} />
|
||||
<Button type="submit" size="sm" variant="destructive">
|
||||
{t.dashboard.delete}
|
||||
</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</WishlistCard>
|
||||
{/snippet}
|
||||
</WishlistGrid>
|
||||
|
||||
{#if allClaimedWishlists().length > 0}
|
||||
<WishlistGrid
|
||||
title={t.dashboard.claimedWishlists}
|
||||
description={t.dashboard.claimedWishlistsDescription}
|
||||
items={sortedClaimedWishlists() || []}
|
||||
emptyMessage={t.dashboard.emptyClaimedWishlists}
|
||||
emptyDescription={t.dashboard.emptyClaimedWishlistsDescription}
|
||||
>
|
||||
{#snippet headerAction()}
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
<UnlockButton bind:unlocked={claimedWishlistsUnlocked} />
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet searchBar()}
|
||||
{#if allClaimedWishlists().length > 0}
|
||||
<SearchBar bind:value={claimedWishlistsSearch} />
|
||||
{/if}
|
||||
{/snippet}
|
||||
</div>
|
||||
{/snippet}
|
||||
</WishlistSection>
|
||||
|
||||
{#snippet children(wishlist)}
|
||||
<WishlistCard
|
||||
title={wishlist.title}
|
||||
description={getWishlistDescription(wishlist)}
|
||||
itemCount={wishlist.items?.length || 0}
|
||||
color={wishlist.color}
|
||||
<!-- Claimed Wishlists Section -->
|
||||
<WishlistSection
|
||||
title={t.dashboard.claimedWishlists}
|
||||
description={t.dashboard.claimedWishlistsDescription}
|
||||
items={claimedWishlists()}
|
||||
emptyMessage={t.dashboard.emptyClaimedWishlists}
|
||||
emptyDescription={t.dashboard.emptyClaimedWishlistsDescription}
|
||||
hideIfEmpty={true}
|
||||
>
|
||||
{#snippet actions(wishlist, unlocked)}
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<form method="POST" action="?/toggleSavedFavorite" use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}>
|
||||
<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
|
||||
<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
|
||||
<Button type="submit" size="sm" variant="outline">
|
||||
<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
|
||||
</Button>
|
||||
</form>
|
||||
<Button
|
||||
size="sm"
|
||||
onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
|
||||
>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<!-- For claimed wishlists, use saved favorite toggle -->
|
||||
<form method="POST" action="?/toggleSavedFavorite" use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}>
|
||||
<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
|
||||
<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
|
||||
<Button type="submit" size="sm" variant="outline">
|
||||
<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
|
||||
</Button>
|
||||
</form>
|
||||
<Button
|
||||
size="sm"
|
||||
onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
|
||||
>
|
||||
{t.dashboard.manage}
|
||||
{t.dashboard.manage}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}/wishlist/${wishlist.publicToken}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
{t.dashboard.copyLink}
|
||||
</Button>
|
||||
{#if unlocked}
|
||||
<form method="POST" action="?/unsaveWishlist" use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}>
|
||||
<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
|
||||
<Button type="submit" size="sm" variant="destructive">
|
||||
{t.dashboard.unclaim}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}/wishlist/${wishlist.publicToken}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
{t.dashboard.copyLink}
|
||||
</Button>
|
||||
{#if claimedWishlistsUnlocked}
|
||||
<!-- Add unclaim button for claimed wishlists -->
|
||||
<form method="POST" action="?/unsaveWishlist" use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}>
|
||||
<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
|
||||
<Button type="submit" size="sm" variant="destructive">
|
||||
{t.dashboard.unclaim}
|
||||
</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</WishlistCard>
|
||||
{/snippet}
|
||||
</WishlistGrid>
|
||||
{/if}
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</WishlistSection>
|
||||
|
||||
<WishlistGrid
|
||||
<!-- Saved Wishlists Section -->
|
||||
<WishlistSection
|
||||
title={t.dashboard.savedWishlists}
|
||||
description={t.dashboard.savedWishlistsDescription}
|
||||
items={sortedSavedWishlists() || []}
|
||||
items={savedWishlists()}
|
||||
emptyMessage={t.dashboard.emptySavedWishlists}
|
||||
emptyDescription={t.dashboard.emptySavedWishlistsDescription}
|
||||
>
|
||||
{#snippet headerAction()}
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
<UnlockButton bind:unlocked={savedWishlistsUnlocked} />
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet searchBar()}
|
||||
{#if (data.savedWishlists || []).filter(saved => !saved.wishlist?.ownerToken).length > 0}
|
||||
<SearchBar bind:value={savedWishlistsSearch} />
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet children(saved)}
|
||||
<WishlistCard
|
||||
title={saved.wishlist?.title}
|
||||
description={getSavedWishlistDescription(saved)}
|
||||
itemCount={saved.wishlist?.items?.length || 0}
|
||||
color={saved.wishlist?.color}
|
||||
>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<form method="POST" action="?/toggleSavedFavorite" use:enhance={() => {
|
||||
{#snippet actions(saved, unlocked)}
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<form method="POST" action="?/toggleSavedFavorite" use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}>
|
||||
<input type="hidden" name="savedWishlistId" value={saved.id} />
|
||||
<input type="hidden" name="isFavorite" value={saved.isFavorite} />
|
||||
<Button type="submit" size="sm" variant="outline">
|
||||
<Star class={saved.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
|
||||
</Button>
|
||||
</form>
|
||||
<Button
|
||||
size="sm"
|
||||
onclick={() => (window.location.href = `/wishlist/${saved.wishlist.publicToken}`)}
|
||||
>
|
||||
{t.dashboard.viewWishlist}
|
||||
</Button>
|
||||
{#if unlocked}
|
||||
<form method="POST" action="?/unsaveWishlist" use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}>
|
||||
<input type="hidden" name="savedWishlistId" value={saved.id} />
|
||||
<input type="hidden" name="isFavorite" value={saved.isFavorite} />
|
||||
<Button type="submit" size="sm" variant="outline">
|
||||
<Star class={saved.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
|
||||
<Button type="submit" size="sm" variant="destructive">
|
||||
{t.dashboard.unsave}
|
||||
</Button>
|
||||
</form>
|
||||
<Button
|
||||
size="sm"
|
||||
onclick={() => (window.location.href = `/wishlist/${saved.wishlist.publicToken}`)}
|
||||
>
|
||||
{t.dashboard.viewWishlist}
|
||||
</Button>
|
||||
{#if savedWishlistsUnlocked}
|
||||
<form method="POST" action="?/unsaveWishlist" use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}>
|
||||
<input type="hidden" name="savedWishlistId" value={saved.id} />
|
||||
<Button type="submit" size="sm" variant="destructive">
|
||||
{t.dashboard.unsave}
|
||||
</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</WishlistCard>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</WishlistGrid>
|
||||
</WishlistSection>
|
||||
</PageContainer>
|
||||
|
||||
Reference in New Issue
Block a user