feat(recipe): Edit-Modus für Zutaten, Schritte und Meta
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s
Auf der Rezept-Detail-Seite ein neuer „Bearbeiten"-Button (Pencil-Icon) in der Action-Bar. Klick schaltet RecipeView auf RecipeEditor um. Im Editor: - Titel, Beschreibung, Portionen, Vorbereitungs-/Koch-/Gesamtzeit als inline-Inputs. - Zutaten: pro Zeile Menge, Einheit, Name, Notiz + Trash-Icon zum Entfernen. „+ Zutat hinzufügen"-Dashed-Button am Listenende. - Schritte: nummerierte Textareas, Trash-Icon, „+ Schritt hinzufügen". - Mengen akzeptieren Komma- oder Punkt-Dezimalen. - Empty-Items werden beim Speichern automatisch aussortiert. Backend: - Neue Repo-Funktionen updateRecipeMeta(id, patch), replaceIngredients, replaceSteps — letztere in einer Transaction mit delete+insert und FTS-Refresh. - PATCH /api/recipes/[id] akzeptiert jetzt zusätzlich description, servings_default, servings_unit, prep_time_min, cook_time_min, total_time_min, cuisine, category, ingredients[], steps[]. Vorher nur title/hidden_from_recent; diese beiden bleiben als Kurz-Fall erhalten, damit bestehende Aufrufer unverändert laufen. - Zod-Schema mit expliziten Grenzen (max-Länge, positive Mengen). Tests: 3 neue Cases für updateRecipeMeta, replaceIngredients (inkl. FTS-Update), replaceSteps. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
403
src/lib/components/RecipeEditor.svelte
Normal file
403
src/lib/components/RecipeEditor.svelte
Normal file
@@ -0,0 +1,403 @@
|
||||
<script lang="ts">
|
||||
import { Plus, Trash2, GripVertical } from 'lucide-svelte';
|
||||
import type { Recipe, Ingredient, Step } from '$lib/types';
|
||||
|
||||
type Props = {
|
||||
recipe: Recipe;
|
||||
saving?: boolean;
|
||||
onsave: (patch: {
|
||||
title: string;
|
||||
description: string | null;
|
||||
servings_default: number | null;
|
||||
prep_time_min: number | null;
|
||||
cook_time_min: number | null;
|
||||
total_time_min: number | null;
|
||||
ingredients: Ingredient[];
|
||||
steps: Step[];
|
||||
}) => void | Promise<void>;
|
||||
oncancel: () => void;
|
||||
};
|
||||
|
||||
let { recipe, saving = false, onsave, oncancel }: Props = $props();
|
||||
|
||||
let title = $state(recipe.title);
|
||||
let description = $state(recipe.description ?? '');
|
||||
let servings = $state<number | ''>(recipe.servings_default ?? '');
|
||||
let prepMin = $state<number | ''>(recipe.prep_time_min ?? '');
|
||||
let cookMin = $state<number | ''>(recipe.cook_time_min ?? '');
|
||||
let totalMin = $state<number | ''>(recipe.total_time_min ?? '');
|
||||
|
||||
type DraftIng = {
|
||||
qty: string;
|
||||
unit: string;
|
||||
name: string;
|
||||
note: string;
|
||||
};
|
||||
type DraftStep = { text: string };
|
||||
|
||||
let ingredients = $state<DraftIng[]>(
|
||||
recipe.ingredients.map((i) => ({
|
||||
qty: i.quantity !== null ? String(i.quantity).replace('.', ',') : '',
|
||||
unit: i.unit ?? '',
|
||||
name: i.name,
|
||||
note: i.note ?? ''
|
||||
}))
|
||||
);
|
||||
let steps = $state<DraftStep[]>(
|
||||
recipe.steps.map((s) => ({ text: s.text }))
|
||||
);
|
||||
|
||||
function addIngredient() {
|
||||
ingredients = [...ingredients, { qty: '', unit: '', name: '', note: '' }];
|
||||
}
|
||||
function removeIngredient(idx: number) {
|
||||
ingredients = ingredients.filter((_, i) => i !== idx);
|
||||
}
|
||||
function addStep() {
|
||||
steps = [...steps, { text: '' }];
|
||||
}
|
||||
function removeStep(idx: number) {
|
||||
steps = steps.filter((_, i) => i !== idx);
|
||||
}
|
||||
|
||||
function parseQty(raw: string): number | null {
|
||||
const cleaned = raw.trim().replace(',', '.');
|
||||
if (!cleaned) return null;
|
||||
const n = Number(cleaned);
|
||||
return Number.isFinite(n) ? n : null;
|
||||
}
|
||||
|
||||
function toNumOrNull(v: number | ''): number | null {
|
||||
return v === '' ? null : v;
|
||||
}
|
||||
|
||||
async function save() {
|
||||
const cleanedIngredients: Ingredient[] = ingredients
|
||||
.filter((i) => i.name.trim())
|
||||
.map((i, idx) => {
|
||||
const qty = parseQty(i.qty);
|
||||
const unit = i.unit.trim() || null;
|
||||
const name = i.name.trim();
|
||||
const note = i.note.trim() || null;
|
||||
const rawParts: string[] = [];
|
||||
if (qty !== null) rawParts.push(String(qty).replace('.', ','));
|
||||
if (unit) rawParts.push(unit);
|
||||
rawParts.push(name);
|
||||
return {
|
||||
position: idx + 1,
|
||||
quantity: qty,
|
||||
unit,
|
||||
name,
|
||||
note,
|
||||
raw_text: rawParts.join(' ')
|
||||
};
|
||||
});
|
||||
const cleanedSteps: Step[] = steps
|
||||
.filter((s) => s.text.trim())
|
||||
.map((s, idx) => ({ position: idx + 1, text: s.text.trim() }));
|
||||
|
||||
await onsave({
|
||||
title: title.trim() || recipe.title,
|
||||
description: description.trim() || null,
|
||||
servings_default: toNumOrNull(servings),
|
||||
prep_time_min: toNumOrNull(prepMin),
|
||||
cook_time_min: toNumOrNull(cookMin),
|
||||
total_time_min: toNumOrNull(totalMin),
|
||||
ingredients: cleanedIngredients,
|
||||
steps: cleanedSteps
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="editor">
|
||||
<div class="meta">
|
||||
<label class="field">
|
||||
<span class="lbl">Titel</span>
|
||||
<input type="text" bind:value={title} placeholder="Rezeptname" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span class="lbl">Beschreibung</span>
|
||||
<textarea bind:value={description} rows="2" placeholder="Kurze Beschreibung (optional)"></textarea>
|
||||
</label>
|
||||
<div class="row">
|
||||
<label class="field small">
|
||||
<span class="lbl">Portionen</span>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
bind:value={servings}
|
||||
placeholder="—"
|
||||
/>
|
||||
</label>
|
||||
<label class="field small">
|
||||
<span class="lbl">Vorb. (min)</span>
|
||||
<input type="number" min="0" bind:value={prepMin} placeholder="—" />
|
||||
</label>
|
||||
<label class="field small">
|
||||
<span class="lbl">Kochen (min)</span>
|
||||
<input type="number" min="0" bind:value={cookMin} placeholder="—" />
|
||||
</label>
|
||||
<label class="field small">
|
||||
<span class="lbl">Gesamt (min)</span>
|
||||
<input type="number" min="0" bind:value={totalMin} placeholder="—" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="block">
|
||||
<h2>Zutaten</h2>
|
||||
<ul class="ing-list">
|
||||
{#each ingredients as ing, idx (idx)}
|
||||
<li class="ing-row">
|
||||
<span class="grip" aria-hidden="true"><GripVertical size={16} /></span>
|
||||
<input class="qty" type="text" bind:value={ing.qty} placeholder="Menge" aria-label="Menge" />
|
||||
<input class="unit" type="text" bind:value={ing.unit} placeholder="Einheit" aria-label="Einheit" />
|
||||
<input class="name" type="text" bind:value={ing.name} placeholder="Zutat" aria-label="Zutat" />
|
||||
<input class="note" type="text" bind:value={ing.note} placeholder="Notiz" aria-label="Notiz" />
|
||||
<button class="del" type="button" aria-label="Zutat entfernen" onclick={() => removeIngredient(idx)}>
|
||||
<Trash2 size={16} strokeWidth={2} />
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<button class="add" type="button" onclick={addIngredient}>
|
||||
<Plus size={16} strokeWidth={2} />
|
||||
<span>Zutat hinzufügen</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="block">
|
||||
<h2>Zubereitung</h2>
|
||||
<ol class="step-list">
|
||||
{#each steps as step, idx (idx)}
|
||||
<li class="step-row">
|
||||
<span class="num">{idx + 1}</span>
|
||||
<textarea
|
||||
bind:value={step.text}
|
||||
rows="3"
|
||||
placeholder="Schritt beschreiben …"
|
||||
></textarea>
|
||||
<button class="del" type="button" aria-label="Schritt entfernen" onclick={() => removeStep(idx)}>
|
||||
<Trash2 size={16} strokeWidth={2} />
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
<button class="add" type="button" onclick={addStep}>
|
||||
<Plus size={16} strokeWidth={2} />
|
||||
<span>Schritt hinzufügen</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div class="foot">
|
||||
<button class="btn ghost" type="button" onclick={oncancel} disabled={saving}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button class="btn primary" type="button" onclick={save} disabled={saving}>
|
||||
{saving ? 'Speichere …' : 'Speichern'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
background: white;
|
||||
border: 1px solid #e4eae7;
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
}
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.lbl {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
}
|
||||
.field input,
|
||||
.field textarea {
|
||||
padding: 0.55rem 0.7rem;
|
||||
font-size: 0.95rem;
|
||||
border: 1px solid #cfd9d1;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
background: white;
|
||||
min-height: 40px;
|
||||
}
|
||||
.field textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.small {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
}
|
||||
.block {
|
||||
background: white;
|
||||
border: 1px solid #e4eae7;
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
}
|
||||
.block h2 {
|
||||
font-size: 1.05rem;
|
||||
margin: 0 0 0.75rem;
|
||||
color: #2b6a3d;
|
||||
}
|
||||
.ing-list,
|
||||
.step-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.ing-row {
|
||||
display: grid;
|
||||
grid-template-columns: 16px 70px 70px 1fr 90px 40px;
|
||||
gap: 0.35rem;
|
||||
align-items: center;
|
||||
}
|
||||
.grip {
|
||||
color: #bbb;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.ing-row input {
|
||||
padding: 0.5rem 0.55rem;
|
||||
border: 1px solid #cfd9d1;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
min-height: 38px;
|
||||
font-family: inherit;
|
||||
min-width: 0;
|
||||
}
|
||||
.step-row {
|
||||
display: grid;
|
||||
grid-template-columns: 32px 1fr 40px;
|
||||
gap: 0.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
.num {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #2b6a3d;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.step-row textarea {
|
||||
padding: 0.55rem 0.7rem;
|
||||
border: 1px solid #cfd9d1;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
min-height: 70px;
|
||||
}
|
||||
.del {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid #f1b4b4;
|
||||
background: white;
|
||||
color: #c53030;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.del:hover {
|
||||
background: #fdf3f3;
|
||||
}
|
||||
.add {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.55rem 0.9rem;
|
||||
border: 1px dashed #cfd9d1;
|
||||
background: white;
|
||||
color: #2b6a3d;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
.add:hover {
|
||||
background: #f4f8f5;
|
||||
}
|
||||
.foot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
.btn {
|
||||
padding: 0.7rem 1.25rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #cfd9d1;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
min-height: 44px;
|
||||
}
|
||||
.btn.ghost {
|
||||
color: #666;
|
||||
}
|
||||
.btn.primary {
|
||||
background: #2b6a3d;
|
||||
color: white;
|
||||
border-color: #2b6a3d;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: progress;
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.ing-row {
|
||||
grid-template-columns: 70px 1fr 40px;
|
||||
grid-template-areas:
|
||||
'qty name del'
|
||||
'unit unit del'
|
||||
'note note note';
|
||||
}
|
||||
.grip {
|
||||
display: none;
|
||||
}
|
||||
.ing-row .qty {
|
||||
grid-area: qty;
|
||||
}
|
||||
.ing-row .unit {
|
||||
grid-area: unit;
|
||||
}
|
||||
.ing-row .name {
|
||||
grid-area: name;
|
||||
}
|
||||
.ing-row .note {
|
||||
grid-area: note;
|
||||
}
|
||||
.ing-row .del {
|
||||
grid-area: del;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user