kochwas/src/lib/components/RecipeEditor.svelte

<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>