feat(wishlist): per-user Wünsche + Header-Badge mit Gesamtzahl
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m16s
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m16s
Schema-Änderung (Migration 005):
- Tabelle wishlist umgestellt auf PK (recipe_id, profile_id)
- wishlist_like-Tabelle zusammengelegt — Liken WAR schon "will ich auch",
also werden alle bestehenden Likes Memberships auf der neuen Tabelle.
- Alt-Einträge mit added_by_profile_id werden migriert, anonyme gehen
verloren (war inkonsistent, jetzt erzwingen wir profile_id NOT NULL).
Repository:
- listWishlist aggregiert pro Rezept: wanted_by_count, wanted_by_names
(kommagetrennt), on_my_wishlist für das aktive Profil
- listWishlistProfileIds(recipeId) für den Recipe-Page-Loader
- countWishlistRecipes für das Header-Badge (DISTINCT recipe_id)
- addToWishlist/removeFromWishlist/isOnMyWishlist alle mit profile_id
als Pflicht
API:
- POST /api/wishlist: profile_id jetzt Pflicht (nullable raus)
- DELETE /api/wishlist/[recipe_id]?profile_id=X (nur eigenes Entry)
- /api/wishlist/[recipe_id]/like komplett entfernt (Konzept obsolet)
- Neu: GET /api/wishlist/count → { count: <distinct recipes> }
UI:
- Header-Heart bekommt rotes Badge mit Zahl der Wunschliste-Rezepte.
wishlistStore in $lib/client/wishlist.svelte.ts hält den Count reaktiv;
Refresh auf Mount, nach Add/Remove, beim Öffnen der Wunschliste.
- Recipe-Detail: Loader liefert wishlist_profile_ids; onMyWishlist ist
ein $derived. Toggle fragt aktives Profil (alertAction sonst), mutiert
die lokale Liste + ruft wishlistStore.refresh.
- Wunschliste-Seite: Heart toggelt eigenen Wunsch, Count zeigt Gesamt-
wünsche, kommagetrennte Namen zeigen "wer will". Trash-Button
entfernt — Heart-off reicht jetzt.
Tests (99 → 99, 8 neu geschrieben):
- Per-User-Add/Remove, aggregierte Counts, on_my_wishlist, Cascades bei
Recipe/Profile-Delete, countWishlistRecipes = DISTINCT.
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { Heart, Trash2, CookingPot } from 'lucide-svelte';
|
||||
import { Heart, CookingPot } from 'lucide-svelte';
|
||||
import { profileStore } from '$lib/client/profile.svelte';
|
||||
import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
|
||||
import { wishlistStore } from '$lib/client/wishlist.svelte';
|
||||
import { alertAction } from '$lib/client/confirm.svelte';
|
||||
import type { WishlistEntry, SortKey } from '$lib/server/wishlist/repository';
|
||||
|
||||
let entries = $state<WishlistEntry[]>([]);
|
||||
@@ -26,36 +27,34 @@
|
||||
void load();
|
||||
});
|
||||
|
||||
async function toggleLike(entry: WishlistEntry) {
|
||||
async function toggleMine(entry: WishlistEntry) {
|
||||
if (!profileStore.active) {
|
||||
await alertAction({
|
||||
title: 'Kein Profil gewählt',
|
||||
message: 'Tippe oben rechts auf „Profil wählen", um zu liken.'
|
||||
message: 'Tippe oben rechts auf „Profil wählen", um mitzuwünschen.'
|
||||
});
|
||||
return;
|
||||
}
|
||||
const method = entry.liked_by_me ? 'DELETE' : 'PUT';
|
||||
await fetch(`/api/wishlist/${entry.recipe_id}/like`, {
|
||||
method,
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ profile_id: profileStore.active.id })
|
||||
});
|
||||
const profileId = profileStore.active.id;
|
||||
if (entry.on_my_wishlist) {
|
||||
await fetch(`/api/wishlist/${entry.recipe_id}?profile_id=${profileId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
} else {
|
||||
await fetch('/api/wishlist', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ recipe_id: entry.recipe_id, profile_id: profileId })
|
||||
});
|
||||
}
|
||||
await load();
|
||||
void wishlistStore.refresh();
|
||||
}
|
||||
|
||||
async function remove(entry: WishlistEntry) {
|
||||
const ok = await confirmAction({
|
||||
title: 'Von der Wunschliste entfernen?',
|
||||
message: `„${entry.title}" wird aus der Wunschliste entfernt. Das Rezept selbst bleibt gespeichert.`,
|
||||
confirmLabel: 'Entfernen',
|
||||
destructive: true
|
||||
});
|
||||
if (!ok) return;
|
||||
await fetch(`/api/wishlist/${entry.recipe_id}`, { method: 'DELETE' });
|
||||
await load();
|
||||
}
|
||||
|
||||
onMount(load);
|
||||
onMount(() => {
|
||||
void load();
|
||||
void wishlistStore.refresh();
|
||||
});
|
||||
|
||||
function resolveImage(p: string | null): string | null {
|
||||
if (!p) return null;
|
||||
@@ -100,11 +99,11 @@
|
||||
<div class="text">
|
||||
<div class="title">{e.title}</div>
|
||||
<div class="meta">
|
||||
{#if e.added_by_name}
|
||||
<span>von {e.added_by_name}</span>
|
||||
{#if e.wanted_by_names}
|
||||
<span class="wanted-by">{e.wanted_by_names}</span>
|
||||
{/if}
|
||||
{#if e.source_domain}
|
||||
<span>· {e.source_domain}</span>
|
||||
<span class="src">· {e.source_domain}</span>
|
||||
{/if}
|
||||
{#if e.avg_stars !== null}
|
||||
<span>· ★ {e.avg_stars.toFixed(1)}</span>
|
||||
@@ -115,18 +114,15 @@
|
||||
<div class="actions">
|
||||
<button
|
||||
class="like"
|
||||
class:active={e.liked_by_me}
|
||||
aria-label={e.liked_by_me ? 'Unlike' : 'Like'}
|
||||
onclick={() => toggleLike(e)}
|
||||
class:active={e.on_my_wishlist}
|
||||
aria-label={e.on_my_wishlist ? 'Ich will das nicht mehr' : 'Ich will das auch'}
|
||||
onclick={() => toggleMine(e)}
|
||||
>
|
||||
<Heart size={18} strokeWidth={2} fill={e.liked_by_me ? 'currentColor' : 'none'} />
|
||||
{#if e.like_count > 0}
|
||||
<span class="count">{e.like_count}</span>
|
||||
<Heart size={18} strokeWidth={2} fill={e.on_my_wishlist ? 'currentColor' : 'none'} />
|
||||
{#if e.wanted_by_count > 0}
|
||||
<span class="count">{e.wanted_by_count}</span>
|
||||
{/if}
|
||||
</button>
|
||||
<button class="del" aria-label="Entfernen" onclick={() => remove(e)}>
|
||||
<Trash2 size={18} strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
@@ -175,7 +171,8 @@
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
.big {
|
||||
font-size: 3rem;
|
||||
color: #8fb097;
|
||||
display: inline-flex;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
.hint {
|
||||
@@ -215,7 +212,7 @@
|
||||
background: #eef3ef;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 2rem;
|
||||
color: #8fb097;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.text {
|
||||
@@ -239,15 +236,16 @@
|
||||
font-size: 0.82rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.wanted-by {
|
||||
color: #2b6a3d;
|
||||
font-weight: 500;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.6rem 0.5rem 0;
|
||||
justify-content: center;
|
||||
}
|
||||
.like,
|
||||
.del {
|
||||
.like {
|
||||
min-width: 48px;
|
||||
min-height: 44px;
|
||||
border-radius: 10px;
|
||||
@@ -259,6 +257,7 @@
|
||||
justify-content: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 1.05rem;
|
||||
color: #444;
|
||||
}
|
||||
.like.active {
|
||||
color: #c53030;
|
||||
|
||||
Reference in New Issue
Block a user