Add CreateRecipePage component for recipe creation with ingredients. Updated UX

2026-04-09 22:53:52 +02:00
parent 3e38cb5f98
commit 898ac2ef19
7 changed files with 293 additions and 23 deletions
@@ -2,13 +2,31 @@ import { fetchJson } from '../../../lib/api';
 import type { Product } from '../../../features/inventory/types';
 import CanonicalNameForm from './CanonicalNameForm';
 import MergePreviewForm from './MergePreviewForm';
+import Link from 'next/link';

 export default async function AdminProductsPage() {
  const products = await fetchJson<Product[]>('/api/products');

  return (
    <main style={{ padding: '1.5rem', maxWidth: '1100px', margin: '0 auto' }}>
-      <h1>Admin: Produkter</h1>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+        <h1 style={{ margin: 0 }}>Admin: Produkter</h1>
+        <Link
+          href="/recipes/create"
+          style={{
+            padding: '0.5rem 1rem',
+            background: '#0070f3',
+            color: 'white',
+            borderRadius: '4px',
+            textDecoration: 'none',
+            fontWeight: 500,
+            fontSize: '1rem',
+            transition: 'background 0.2s',
+          }}
+        >
+          Lägg till nytt recept
+        </Link>
+      </div>
      <p>Här kan du granska och standardisera produktnamn.</p>

      <MergePreviewForm products={products} />
@@ -86,15 +86,8 @@ export default async function InventoryPage({ searchParams }: InventoryPageProps

  const inventoryPath = (() => {
    const params = new URLSearchParams();
-
-    if (location) {
-      params.set('location', location);
-    }
-
-    if (sort) {
-      params.set('sort', sort);
-    }
-
+    if (location) params.set('location', location);
+    if (sort) params.set('sort', sort);
    const query = params.toString();
    return query ? `/api/inventory?${query}` : '/api/inventory';
  })();
@@ -112,8 +105,25 @@ export default async function InventoryPage({ searchParams }: InventoryPageProps
  ];

  return (
-    <main style={{ padding: '1.5rem', maxWidth: '900px', margin: '0 auto' }}>
-      <h1>Hemmavaror</h1>
+    <main style={{ padding: '1.5rem', maxWidth: '1000px', margin: '0 auto' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+        <h1 style={{ margin: 0 }}>Varor hemma</h1>
+        <Link
+          href="/recipes/create"
+          style={{
+            padding: '0.5rem 1rem',
+            background: '#0070f3',
+            color: 'white',
+            borderRadius: '4px',
+            textDecoration: 'none',
+            fontWeight: 500,
+            fontSize: '1rem',
+            transition: 'background 0.2s',
+          }}
+        >
+          Lägg till nytt recept
+        </Link>
+      </div>

      <ProductForm />
      <InventoryForm products={products} />
@@ -2,12 +2,36 @@ import Link from 'next/link';

 export default function HomePage() {
  return (
-    <main style={{ padding: '2rem' }}>
-      <h1>Recipe App</h1>
-      <p>Det här är första riktiga grunden för projektet.</p>
-      <p><Link href="/inventory">Gå till varor som finns hemma</Link></p>
-      <p><Link href="/admin/products">Gå till produktadmin</Link></p>
-      <p><Link href="/recipes">Gå till recept</Link></p>
+    <main style={{ padding: '2rem', maxWidth: '700px', margin: '0 auto' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+        <h1 style={{ margin: 0 }}>Recipe App</h1>
+        <Link
+          href="/recipes/create"
+          style={{
+            padding: '0.5rem 1rem',
+            background: '#0070f3',
+            color: 'white',
+            borderRadius: '4px',
+            textDecoration: 'none',
+            fontWeight: 500,
+            fontSize: '1rem',
+            transition: 'background 0.2s',
+          }}
+        >
+          Lägg till nytt recept
+        </Link>
+      </div>
+      <div style={{ display: 'grid', gap: '1rem' }}>
+        <Link href="/inventory" style={{ padding: '0.5rem', background: '#eee', borderRadius: '4px', textDecoration: 'none', color: '#222' }}>
+          Gå till varor som finns hemma
+        </Link>
+        <Link href="/admin/products" style={{ padding: '0.5rem', background: '#eee', borderRadius: '4px', textDecoration: 'none', color: '#222' }}>
+          Gå till produktadmin
+        </Link>
+        <Link href="/recipes" style={{ padding: '0.5rem', background: '#eee', borderRadius: '4px', textDecoration: 'none', color: '#222' }}>
+          Gå till recept
+        </Link>
+      </div>
    </main>
  );
 }
@@ -0,0 +1,182 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { fetchJson } from '../../../lib/api';
+
+export default function CreateRecipePage() {
+  const router = useRouter();
+  const [recipe, setRecipe] = useState({
+    name: '',
+    description: '',
+    instructions: '',
+    ingredients: [{ productId: 0, quantity: '', unit: '', note: '' }],
+  });
+  const [products, setProducts] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Hämta produkter vid sidladdning
+  useState(() => {
+    fetchJson('/api/products')
+      .then(setProducts)
+      .catch(console.error);
+  }, []);
+
+  const handleIngredientChange = (index: number, field: string, value: string | number) => {
+    const newIngredients = [...recipe.ingredients];
+    newIngredients[index] = { ...newIngredients[index], [field]: value };
+    setRecipe({ ...recipe, ingredients: newIngredients });
+  };
+
+  const addIngredient = () => {
+    setRecipe({
+      ...recipe,
+      ingredients: [...recipe.ingredients, { productId: 0, quantity: '', unit: '', note: '' }],
+    });
+  };
+
+  const removeIngredient = (index: number) => {
+    const newIngredients = [...recipe.ingredients];
+    newIngredients.splice(index, 1);
+    setRecipe({ ...recipe, ingredients: newIngredients });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+
+    // Konvertera quantity till number för varje ingrediens
+    const recipeToSend = {
+      ...recipe,
+      ingredients: recipe.ingredients.map((ing) => ({
+        ...ing,
+        quantity: Number(ing.quantity),
+      })),
+    };
+
+    try {
+      const response = await fetch('/api/recipes', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(recipeToSend),
+      });
+
+      if (!response.ok) {
+        throw new Error('Kunde inte spara receptet');
+      }
+
+      router.push('/recipes');
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <main style={{ padding: '1.5rem', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>Lägg till nytt recept</h1>
+
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+
+      <form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1rem' }}>
+        <div style={{ display: 'grid', gap: '0.5rem' }}>
+          <label>
+            Receptnamn:
+            <input
+              type="text"
+              value={recipe.name}
+              onChange={(e) => setRecipe({ ...recipe, name: e.target.value })}
+              required
+              style={{ width: '100%', padding: '0.5rem' }}
+            />
+          </label>
+
+          <label>
+            Beskrivning:
+            <textarea
+              value={recipe.description}
+              onChange={(e) => setRecipe({ ...recipe, description: e.target.value })}
+              style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
+            />
+          </label>
+
+          <label>
+            Instruktioner:
+            <textarea
+              value={recipe.instructions}
+              onChange={(e) => setRecipe({ ...recipe, instructions: e.target.value })}
+              style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
+            />
+          </label>
+        </div>
+
+        <h2>Ingredienser</h2>
+        {recipe.ingredients.map((ingredient, index) => (
+          <div key={index} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr auto', gap: '0.5rem', alignItems: 'center' }}>
+            <select
+              value={ingredient.productId}
+              onChange={(e) => handleIngredientChange(index, 'productId', Number(e.target.value))}
+              required
+              style={{ padding: '0.5rem' }}
+            >
+              <option value={0}>Välj produkt</option>
+              {products.map((product) => (
+                <option key={product.id} value={product.id}>
+                  {product.name}
+                </option>
+              ))}
+            </select>
+
+            <input
+              type="text"
+              placeholder="Mängd"
+              value={ingredient.quantity}
+              onChange={(e) => handleIngredientChange(index, 'quantity', e.target.value)}
+              required
+              style={{ padding: '0.5rem' }}
+            />
+
+            <input
+              type="text"
+              placeholder="Enhet (t.ex. g, st, dl)"
+              value={ingredient.unit}
+              onChange={(e) => handleIngredientChange(index, 'unit', e.target.value)}
+              required
+              style={{ padding: '0.5rem' }}
+            />
+
+            <input
+              type="text"
+              placeholder="Notering (valfritt)"
+              value={ingredient.note || ''}
+              onChange={(e) => handleIngredientChange(index, 'note', e.target.value)}
+              style={{ padding: '0.5rem' }}
+            />
+
+            <button type="button" onClick={() => removeIngredient(index)} style={{ padding: '0.5rem' }}>
+              Ta bort
+            </button>
+          </div>
+        ))}
+
+        {products.length === 0 && (
+          <div style={{ color: 'red' }}>
+            Kunde inte ladda produkter. Kontrollera API:et.
+          </div>
+        )}
+
+        <div style={{ display: 'flex', gap: '1rem' }}>
+          <button type="button" onClick={addIngredient} style={{ padding: '0.5rem' }}>
+            Lägg till ingrediens
+          </button>
+          <button type="submit" disabled={isLoading} style={{ padding: '0.5rem' }}>
+            {isLoading ? 'Sparar...' : 'Spara recept'}
+          </button>
+        </div>
+      </form>
+    </main>
+  );
+}
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { fetchJson } from '../../lib/api';
 import type { Recipe } from '../../features/inventory/types';
 import RecipePreview from './RecipePreview';
@@ -7,7 +8,24 @@ export default async function RecipesPage() {

  return (
    <main style={{ padding: '1.5rem', maxWidth: '1000px', margin: '0 auto' }}>
-      <h1>Recept</h1>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+        <h1 style={{ margin: 0 }}>Recept</h1>
+        <Link
+          href="/recipes/create"
+          style={{
+            padding: '0.5rem 1rem',
+            background: '#0070f3',
+            color: 'white',
+            borderRadius: '4px',
+            textDecoration: 'none',
+            fontWeight: 500,
+            fontSize: '1rem',
+            transition: 'background 0.2s',
+          }}
+        >
+          Lägg till nytt recept
+        </Link>
+      </div>
      <p>Här kan du jämföra recept mot nuvarande hemmavaror.</p>
      <RecipePreview recipes={recipes} />
    </main>