feat: add image handling to recipes
- Implemented image downloading and optimization in QuickImportService. - Added imageUrl field to CreateRecipeDto for recipe creation. - Created an endpoint in RecipesController to update recipe images. - Enhanced RecipesService to handle image URL updates and optimizations. - Updated Docker Compose to mount a volume for recipe images. - Refactored frontend to display images in recipe grids and detail views. - Added a new utility function for downloading and optimizing images. - Created a new API route for handling image uploads. - Introduced RecipeGrid component for better recipe display. - Updated RecipeDetailClient to manage image updates and display. - Added migration for new imageUrl column in the Recipe table.
This commit is contained in:
Nils-Johan Gynther
@@ -0,0 +1,141 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import type { Recipe } from '../../features/inventory/types';
|
||||
|
||||
function RecipePlaceholder({ name }: { name: string }) {
|
||||
const initial = name.trim().charAt(0).toUpperCase() || '?';
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '160px',
|
||||
background: '#e9ecef',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: 700,
|
||||
color: '#868e96',
|
||||
borderRadius: '8px 8px 0 0',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
{initial}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RecipeGrid({ recipes }: { recipes: Recipe[] }) {
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
const filtered = recipes.filter((r) =>
|
||||
r.name.toLowerCase().includes(search.toLowerCase()),
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: '1.25rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Sök efter recept..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '0.6rem 1rem',
|
||||
fontSize: '1rem',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '24px',
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 && (
|
||||
<p style={{ color: '#868e96', textAlign: 'center', marginTop: '2rem' }}>
|
||||
{search ? 'Inga recept matchar sökningen.' : 'Inga recept tillagda ännu.'}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
|
||||
gap: '1rem',
|
||||
}}
|
||||
>
|
||||
{filtered.map((recipe) => (
|
||||
<Link
|
||||
key={recipe.id}
|
||||
href={`/recipes/${recipe.id}`}
|
||||
style={{ textDecoration: 'none', color: 'inherit' }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #dee2e6',
|
||||
borderRadius: '8px',
|
||||
overflow: 'hidden',
|
||||
transition: 'box-shadow 0.15s',
|
||||
background: '#fff',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={(e) =>
|
||||
((e.currentTarget as HTMLDivElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.12)')
|
||||
}
|
||||
onMouseLeave={(e) =>
|
||||
((e.currentTarget as HTMLDivElement).style.boxShadow = 'none')
|
||||
}
|
||||
>
|
||||
{recipe.imageUrl ? (
|
||||
<img
|
||||
src={recipe.imageUrl}
|
||||
alt={recipe.name}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '160px',
|
||||
objectFit: 'cover',
|
||||
display: 'block',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<RecipePlaceholder name={recipe.name} />
|
||||
)}
|
||||
<div style={{ padding: '0.75rem 1rem' }}>
|
||||
<h3
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{recipe.name}
|
||||
</h3>
|
||||
{recipe.description && (
|
||||
<p
|
||||
style={{
|
||||
margin: '0.25rem 0 0',
|
||||
fontSize: '0.85rem',
|
||||
color: '#868e96',
|
||||
overflow: 'hidden',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
{recipe.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,498 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useTransition } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import type {
|
||||
Recipe,
|
||||
Product,
|
||||
RecipeInventoryPreview,
|
||||
} from '../../../features/inventory/types';
|
||||
import { fetchJson } from '../../../lib/api';
|
||||
import { parseErrorResponse } from '../../../lib/error-handler';
|
||||
|
||||
// ──────────────────────────────────────────────
|
||||
// Hjälpfunktioner
|
||||
// ──────────────────────────────────────────────
|
||||
|
||||
function SimpleMarkdownPreview({ text }: { text: string }) {
|
||||
return (
|
||||
<div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.7 }}>
|
||||
{text.split('\n').map((line, i) => {
|
||||
if (line.startsWith('# ')) return <h3 key={i} style={{ margin: '0.5rem 0 0.25rem', fontSize: '1.3em', fontWeight: 700 }}>{line.slice(2)}</h3>;
|
||||
if (line.startsWith('## ')) return <h4 key={i} style={{ margin: '0.5rem 0 0.25rem', fontSize: '1.1em', fontWeight: 700 }}>{line.slice(3)}</h4>;
|
||||
if (line.startsWith('- ') || line.startsWith('* ')) return <div key={i} style={{ marginLeft: '1.5rem' }}>• {line.slice(2)}</div>;
|
||||
if (line.trim() === '') return <div key={i} style={{ height: '0.5rem' }} />;
|
||||
return <div key={i}>{line}</div>;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: 'enough' | 'missing' | 'unit_mismatch' }) {
|
||||
const styles = {
|
||||
enough: { label: 'Räcker', color: '#1f5f2c', background: '#ecf8ee', border: '#b9e0bf' },
|
||||
missing: { label: 'Saknas', color: '#8b0000', background: '#ffeaea', border: '#f1b5b5' },
|
||||
unit_mismatch: { label: 'Enhetskonflikt', color: '#8a4b00', background: '#fff4e5', border: '#f0cf9b' },
|
||||
}[status];
|
||||
|
||||
return (
|
||||
<span style={{
|
||||
padding: '0.15rem 0.5rem',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 600,
|
||||
borderRadius: '4px',
|
||||
color: styles.color,
|
||||
background: styles.background,
|
||||
border: `1px solid ${styles.border}`,
|
||||
}}>
|
||||
{styles.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const UNIT_OPTIONS = [
|
||||
{ value: '', label: 'Välj enhet' },
|
||||
{ value: 'g', label: 'g (gram)' },
|
||||
{ value: 'kg', label: 'kg (kilogram)' },
|
||||
{ value: 'hg', label: 'hg (hektogram)' },
|
||||
{ value: 'ml', label: 'ml (milliliter)' },
|
||||
{ value: 'dl', label: 'dl (deciliter)' },
|
||||
{ value: 'l', label: 'l (liter)' },
|
||||
{ value: 'st', label: 'st (styck)' },
|
||||
{ value: 'tsk', label: 'tsk (tesked)' },
|
||||
{ value: 'msk', label: 'msk (matsked)' },
|
||||
{ value: 'port', label: 'port (portioner)' },
|
||||
{ value: 'efter smak', label: 'Efter smak' },
|
||||
{ value: 'förp', label: 'förp (förpackning)' },
|
||||
{ value: 'klyfta', label: 'klyfta' },
|
||||
];
|
||||
|
||||
// ──────────────────────────────────────────────
|
||||
// Huvud-komponent
|
||||
// ──────────────────────────────────────────────
|
||||
|
||||
export default function RecipeDetailClient({ recipe: initialRecipe }: { recipe: Recipe }) {
|
||||
const router = useRouter();
|
||||
const [recipe, setRecipe] = useState(initialRecipe);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Redigeringsformulär-state
|
||||
const [form, setForm] = useState({
|
||||
name: initialRecipe.name,
|
||||
description: initialRecipe.description || '',
|
||||
instructions: initialRecipe.instructions || '',
|
||||
imageUrl: initialRecipe.imageUrl || '',
|
||||
ingredients: initialRecipe.ingredients.map((ing) => ({
|
||||
productId: ing.productId,
|
||||
quantity: String(ing.quantity),
|
||||
unit: ing.unit,
|
||||
note: ing.note || '',
|
||||
})),
|
||||
});
|
||||
|
||||
// Produktlista för ingrediens-väljare
|
||||
const [products, setProducts] = useState<Product[]>([]);
|
||||
|
||||
// Inventarieförhandsgranskning
|
||||
const [preview, setPreview] = useState<RecipeInventoryPreview | null>(null);
|
||||
const [previewError, setPreviewError] = useState<string | null>(null);
|
||||
const [isPreviewing, startPreviewTransition] = useTransition();
|
||||
|
||||
// Bilduppdatering
|
||||
const [imageUrlInput, setImageUrlInput] = useState('');
|
||||
const [imageError, setImageError] = useState<string | null>(null);
|
||||
const [isUploadingImage, setIsUploadingImage] = useState(false);
|
||||
|
||||
// localStorage: gilla
|
||||
useEffect(() => {
|
||||
const liked = localStorage.getItem(`recipe-liked-${recipe.id}`) === 'true';
|
||||
setIsLiked(liked);
|
||||
}, [recipe.id]);
|
||||
|
||||
// Ladda produkter för redigera-läge
|
||||
useEffect(() => {
|
||||
if (isEditing && products.length === 0) {
|
||||
fetchJson<Product[]>('/api/products').then(setProducts).catch(console.error);
|
||||
}
|
||||
}, [isEditing, products.length]);
|
||||
|
||||
// ── Gilla ──
|
||||
const toggleLike = () => {
|
||||
const next = !isLiked;
|
||||
setIsLiked(next);
|
||||
localStorage.setItem(`recipe-liked-${recipe.id}`, String(next));
|
||||
};
|
||||
|
||||
// ── Inventarieförhandsgranskning ──
|
||||
const loadPreview = () => {
|
||||
setPreviewError(null);
|
||||
startPreviewTransition(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/recipe-preview-proxy?id=${recipe.id}`, { cache: 'no-store' });
|
||||
if (!res.ok) throw new Error(await parseErrorResponse(res));
|
||||
setPreview(await res.json());
|
||||
} catch (err) {
|
||||
setPreviewError(err instanceof Error ? err.message : 'Fel vid hämtning av inventariedata');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// ── Ta bort recept ──
|
||||
const handleDelete = async () => {
|
||||
if (!confirm(`Ta bort receptet "${recipe.name}"? Det går inte att ångra.`)) return;
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
const res = await fetch(`/api/recipes/${recipe.id}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error(await parseErrorResponse(res));
|
||||
router.push('/recipes');
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Kunde inte ta bort receptet.');
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ── Spara redigering ──
|
||||
const handleSave = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const body = {
|
||||
...form,
|
||||
ingredients: form.ingredients.map((ing) => ({
|
||||
...ing,
|
||||
quantity: Number(ing.quantity),
|
||||
})),
|
||||
};
|
||||
const res = await fetch(`/api/recipes/${recipe.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!res.ok) throw new Error(await parseErrorResponse(res));
|
||||
const updated: Recipe = await res.json();
|
||||
setRecipe(updated);
|
||||
setIsEditing(false);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Kunde inte spara receptet.');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ── Uppdatera bild ──
|
||||
const handleImageUpdate = async () => {
|
||||
if (!imageUrlInput.trim()) return;
|
||||
setIsUploadingImage(true);
|
||||
setImageError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/recipes/${recipe.id}/image`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ sourceUrl: imageUrlInput.trim() }),
|
||||
});
|
||||
if (!res.ok) throw new Error(await parseErrorResponse(res));
|
||||
const updated: Recipe = await res.json();
|
||||
setRecipe(updated);
|
||||
setForm((f) => ({ ...f, imageUrl: updated.imageUrl || '' }));
|
||||
setImageUrlInput('');
|
||||
} catch (err) {
|
||||
setImageError(err instanceof Error ? err.message : 'Kunde inte hämta bilden.');
|
||||
} finally {
|
||||
setIsUploadingImage(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ── Ingrediens-hjälpfunktioner (redigera-läge) ──
|
||||
const setIngredientField = (idx: number, field: string, value: string | number) => {
|
||||
setForm((f) => {
|
||||
const ings = [...f.ingredients];
|
||||
ings[idx] = { ...ings[idx], [field]: value };
|
||||
return { ...f, ingredients: ings };
|
||||
});
|
||||
};
|
||||
|
||||
const addIngredient = () =>
|
||||
setForm((f) => ({
|
||||
...f,
|
||||
ingredients: [...f.ingredients, { productId: 0, quantity: '', unit: '', note: '' }],
|
||||
}));
|
||||
|
||||
const removeIngredient = (idx: number) =>
|
||||
setForm((f) => {
|
||||
const ings = [...f.ingredients];
|
||||
ings.splice(idx, 1);
|
||||
return { ...f, ingredients: ings };
|
||||
});
|
||||
|
||||
// ──────────────────────────────────────────────
|
||||
// VY-LÄGE
|
||||
// ──────────────────────────────────────────────
|
||||
if (!isEditing) {
|
||||
return (
|
||||
<div>
|
||||
{/* Bild */}
|
||||
{recipe.imageUrl ? (
|
||||
<img
|
||||
src={recipe.imageUrl}
|
||||
alt={recipe.name}
|
||||
style={{ width: '100%', maxHeight: '400px', objectFit: 'cover', borderRadius: '8px', marginBottom: '1.25rem', display: 'block' }}
|
||||
/>
|
||||
) : (
|
||||
<div style={{
|
||||
width: '100%', height: '200px', background: '#e9ecef', borderRadius: '8px',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: '4rem', fontWeight: 700, color: '#868e96', marginBottom: '1.25rem',
|
||||
}}>
|
||||
{recipe.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Titel + knappar */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: '0.75rem', marginBottom: '1rem' }}>
|
||||
<h1 style={{ margin: 0, fontSize: '1.75rem' }}>{recipe.name}</h1>
|
||||
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||
<button onClick={toggleLike} style={btnStyle(isLiked ? '#e53e3e' : undefined)}>
|
||||
{isLiked ? '♥ Gillad' : '♡ Gilla'}
|
||||
</button>
|
||||
<button onClick={loadPreview} disabled={isPreviewing} style={btnStyle()}>
|
||||
{isPreviewing ? 'Hämtar...' : 'Inventariegranskning'}
|
||||
</button>
|
||||
<button onClick={() => setIsEditing(true)} style={btnStyle()}>Redigera</button>
|
||||
<button onClick={handleDelete} disabled={isDeleting} style={btnStyle('#e53e3e')}>
|
||||
{isDeleting ? 'Tar bort...' : 'Ta bort'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p style={errorStyle}>{error}</p>}
|
||||
|
||||
{recipe.description && (
|
||||
<p style={{ color: '#555', marginBottom: '1.25rem', fontSize: '1.05rem' }}>{recipe.description}</p>
|
||||
)}
|
||||
|
||||
{/* Ingredienser */}
|
||||
<section style={sectionStyle}>
|
||||
<h2 style={sectionTitle}>Ingredienser</h2>
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.4rem' }}>
|
||||
{recipe.ingredients.map((ing) => (
|
||||
<li key={ing.id} style={{ display: 'flex', gap: '0.5rem', alignItems: 'baseline' }}>
|
||||
<span style={{ fontWeight: 600, minWidth: '60px', textAlign: 'right' }}>
|
||||
{Number(ing.quantity)} {ing.unit}
|
||||
</span>
|
||||
<span>{ing.product.canonicalName || ing.product.name}</span>
|
||||
{ing.note && <span style={{ color: '#868e96', fontSize: '0.875rem' }}>({ing.note})</span>}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Instruktioner */}
|
||||
{recipe.instructions && (
|
||||
<section style={sectionStyle}>
|
||||
<h2 style={sectionTitle}>Instruktioner</h2>
|
||||
<SimpleMarkdownPreview text={recipe.instructions} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Inventarieförhandsgranskning */}
|
||||
{(preview || previewError) && (
|
||||
<section style={{ ...sectionStyle, marginTop: '1.5rem' }}>
|
||||
<h2 style={sectionTitle}>Inventariegranskning</h2>
|
||||
{previewError && <p style={errorStyle}>{previewError}</p>}
|
||||
{preview && (
|
||||
<>
|
||||
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1rem', fontSize: '0.9rem' }}>
|
||||
<span>Totalt: <strong>{preview.summary.totalIngredients}</strong></span>
|
||||
<span style={{ color: '#1f5f2c' }}>Räcker: <strong>{preview.summary.enoughCount}</strong></span>
|
||||
<span style={{ color: '#8b0000' }}>Saknas: <strong>{preview.summary.missingCount}</strong></span>
|
||||
{preview.summary.unitMismatchCount > 0 && (
|
||||
<span style={{ color: '#8a4b00' }}>Enhetskonflikt: <strong>{preview.summary.unitMismatchCount}</strong></span>
|
||||
)}
|
||||
</div>
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.5rem' }}>
|
||||
{preview.ingredients.map((ing) => (
|
||||
<li key={ing.ingredientId} style={{
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
padding: '0.5rem 0.75rem', borderRadius: '6px', border: '1px solid #eee',
|
||||
flexWrap: 'wrap', gap: '0.5rem',
|
||||
}}>
|
||||
<span>
|
||||
<strong>{ing.productName}</strong>
|
||||
{' '}<span style={{ color: '#555', fontSize: '0.875rem' }}>
|
||||
{ing.requiredQuantity} {ing.requiredUnit}
|
||||
{ing.status !== 'enough' && ing.missingQuantity > 0 && (
|
||||
<> — saknar <strong>{ing.missingQuantity} {ing.requiredUnit}</strong></>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
<StatusBadge status={ing.status} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ──────────────────────────────────────────────
|
||||
// REDIGERA-LÄGE
|
||||
// ──────────────────────────────────────────────
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
|
||||
<h1 style={{ margin: 0 }}>Redigera recept</h1>
|
||||
<button onClick={() => setIsEditing(false)} style={btnStyle()}>Avbryt</button>
|
||||
</div>
|
||||
|
||||
{error && <p style={errorStyle}>{error}</p>}
|
||||
|
||||
<form onSubmit={handleSave} style={{ display: 'grid', gap: '1.25rem' }}>
|
||||
{/* Bild-uppdatering */}
|
||||
<section style={sectionStyle}>
|
||||
<h2 style={sectionTitle}>Bild</h2>
|
||||
{recipe.imageUrl && (
|
||||
<img src={recipe.imageUrl} alt="" style={{ width: '100%', maxHeight: '200px', objectFit: 'cover', borderRadius: '6px', marginBottom: '0.75rem' }} />
|
||||
)}
|
||||
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
||||
<input
|
||||
type="url"
|
||||
placeholder="https://... (bild-URL)"
|
||||
value={imageUrlInput}
|
||||
onChange={(e) => setImageUrlInput(e.target.value)}
|
||||
style={inputStyle}
|
||||
/>
|
||||
<button type="button" onClick={handleImageUpdate} disabled={isUploadingImage || !imageUrlInput.trim()} style={btnStyle()}>
|
||||
{isUploadingImage ? 'Hämtar...' : 'Uppdatera bild'}
|
||||
</button>
|
||||
</div>
|
||||
{imageError && <p style={{ ...errorStyle, marginTop: '0.5rem' }}>{imageError}</p>}
|
||||
</section>
|
||||
|
||||
{/* Grundinfo */}
|
||||
<section style={sectionStyle}>
|
||||
<h2 style={sectionTitle}>Receptdetaljer</h2>
|
||||
<label style={labelStyle}>Receptnamn *</label>
|
||||
<input type="text" required value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} style={{ ...inputStyle, marginBottom: '1rem' }} />
|
||||
|
||||
<label style={labelStyle}>Beskrivning</label>
|
||||
<textarea value={form.description} onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))} rows={3} style={{ ...inputStyle, fontFamily: 'inherit', resize: 'vertical', marginBottom: '1rem' }} />
|
||||
|
||||
<label style={labelStyle}>Instruktioner</label>
|
||||
<textarea value={form.instructions} onChange={(e) => setForm((f) => ({ ...f, instructions: e.target.value }))} rows={8} style={{ ...inputStyle, fontFamily: 'inherit', resize: 'vertical' }} />
|
||||
</section>
|
||||
|
||||
{/* Ingredienser */}
|
||||
<section style={sectionStyle}>
|
||||
<h2 style={sectionTitle}>Ingredienser</h2>
|
||||
{form.ingredients.map((ing, idx) => (
|
||||
<div key={idx} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto auto auto', gap: '0.5rem', marginBottom: '0.75rem', alignItems: 'center' }}>
|
||||
<select
|
||||
value={ing.productId}
|
||||
onChange={(e) => setIngredientField(idx, 'productId', Number(e.target.value))}
|
||||
style={inputStyle}
|
||||
>
|
||||
<option value={0}>Välj produkt...</option>
|
||||
{products.map((p) => (
|
||||
<option key={p.id} value={p.id}>{p.canonicalName || p.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Mängd"
|
||||
value={ing.quantity}
|
||||
min={0}
|
||||
step="any"
|
||||
onChange={(e) => setIngredientField(idx, 'quantity', e.target.value)}
|
||||
style={{ ...inputStyle, width: '80px' }}
|
||||
/>
|
||||
<select
|
||||
value={ing.unit}
|
||||
onChange={(e) => setIngredientField(idx, 'unit', e.target.value)}
|
||||
style={{ ...inputStyle, width: '120px' }}
|
||||
>
|
||||
{UNIT_OPTIONS.map((u) => <option key={u.value} value={u.value}>{u.label}</option>)}
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Not (valfri)"
|
||||
value={ing.note}
|
||||
onChange={(e) => setIngredientField(idx, 'note', e.target.value)}
|
||||
style={{ ...inputStyle, width: '110px' }}
|
||||
/>
|
||||
<button type="button" onClick={() => removeIngredient(idx)} style={{ ...btnStyle('#e53e3e'), whiteSpace: 'nowrap' }}>Ta bort</button>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" onClick={addIngredient} style={btnStyle()}>+ Lägg till ingrediens</button>
|
||||
</section>
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.75rem' }}>
|
||||
<button type="submit" disabled={isSaving} style={btnStyle('#0070f3')}>
|
||||
{isSaving ? 'Sparar...' : 'Spara ändringar'}
|
||||
</button>
|
||||
<button type="button" onClick={() => setIsEditing(false)} style={btnStyle()}>Avbryt</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ──────────────────────────────────────────────
|
||||
// Stilkonstanter
|
||||
// ──────────────────────────────────────────────
|
||||
|
||||
function btnStyle(bg?: string): React.CSSProperties {
|
||||
return {
|
||||
padding: '0.45rem 0.9rem',
|
||||
background: bg || '#f0f0f0',
|
||||
color: bg ? '#fff' : '#333',
|
||||
border: '1px solid ' + (bg || '#ccc'),
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: 500,
|
||||
whiteSpace: 'nowrap',
|
||||
};
|
||||
}
|
||||
|
||||
const sectionStyle: React.CSSProperties = {
|
||||
border: '1px solid #dee2e6',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
};
|
||||
|
||||
const sectionTitle: React.CSSProperties = {
|
||||
margin: '0 0 0.75rem',
|
||||
fontSize: '1.1rem',
|
||||
fontWeight: 700,
|
||||
};
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: '100%',
|
||||
padding: '0.6rem 0.75rem',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '6px',
|
||||
fontSize: '0.95rem',
|
||||
boxSizing: 'border-box',
|
||||
};
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
display: 'block',
|
||||
fontWeight: 600,
|
||||
marginBottom: '0.35rem',
|
||||
};
|
||||
|
||||
const errorStyle: React.CSSProperties = {
|
||||
color: 'crimson',
|
||||
background: '#ffe5e5',
|
||||
padding: '0.6rem 0.75rem',
|
||||
borderRadius: '6px',
|
||||
margin: 0,
|
||||
};
|
||||
@@ -1,11 +1,15 @@
|
||||
'use client';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import { fetchJson } from '../../../../lib/api';
|
||||
import { parseErrorResponse } from '../../../../lib/error-handler';
|
||||
import type { Product, Recipe } from '../../../../features/inventory/types';
|
||||
import Navigation from '../../../Navigation';
|
||||
interface Props {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
// Detaljsidan hanterar nu både visning och redigering.
|
||||
// Omdirigera från gammal /edit-URL till /recipes/[id]
|
||||
export default async function EditRecipeRedirect({ params }: Props) {
|
||||
const { id } = await params;
|
||||
redirect(`/recipes/${id}`);
|
||||
}
|
||||
|
||||
const MARKDOWN_HELP = `
|
||||
**Fetstil:** **text** eller __text__
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
import { fetchJson } from '../../../lib/api';
|
||||
import type { Recipe } from '../../../features/inventory/types';
|
||||
import Navigation from '../../Navigation';
|
||||
import RecipeDetailClient from './RecipeDetailClient';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export default async function RecipeDetailPage({ params }: Props) {
|
||||
const { id } = await params;
|
||||
let recipe: Recipe;
|
||||
|
||||
try {
|
||||
recipe = await fetchJson<Recipe>(`/api/recipes/${id}`);
|
||||
} catch {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<main style={{ padding: '1rem', maxWidth: '900px', margin: '0 auto' }}>
|
||||
<Navigation />
|
||||
<RecipeDetailClient recipe={recipe} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import Link from 'next/link';
|
||||
import { fetchJson } from '../../lib/api';
|
||||
import type { Recipe } from '../../features/inventory/types';
|
||||
import RecipePreview from './RecipePreview';
|
||||
import Navigation from '../Navigation';
|
||||
import RecipeGrid from './RecipeGrid';
|
||||
|
||||
export default async function RecipesPage() {
|
||||
const recipes = await fetchJson<Recipe[]>('/api/recipes');
|
||||
@@ -22,36 +22,12 @@ export default async function RecipesPage() {
|
||||
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} />
|
||||
<RecipeGrid recipes={recipes} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function parseQuantityInput(input: string, defaultUnit: string) {
|
||||
const match = input.trim().match(/^([\d.,]+)\s*([a-zA-Z]*)$/);
|
||||
if (!match) return { quantity: NaN, unit: defaultUnit };
|
||||
let [, num, unit] = match;
|
||||
num = num.replace(',', '.');
|
||||
unit = unit.toLowerCase() || defaultUnit;
|
||||
const value = parseFloat(num);
|
||||
// Konvertera alltid till defaultUnit
|
||||
if (defaultUnit === 'kg') {
|
||||
if (unit === 'g' || unit === 'gram') return { quantity: value / 1000, unit: 'kg' };
|
||||
if (unit === 'hg' || unit === 'hektogram') return { quantity: value / 10, unit: 'kg' };
|
||||
if (unit === 'kg' || unit === 'kilogram' || unit === '') return { quantity: value, unit: 'kg' };
|
||||
}
|
||||
if (defaultUnit === 'g') {
|
||||
if (unit === 'kg' || unit === 'kilogram') return { quantity: value * 1000, unit: 'g' };
|
||||
if (unit === 'hg' || unit === 'hektogram') return { quantity: value * 100, unit: 'g' };
|
||||
if (unit === 'g' || unit === 'gram' || unit === '') return { quantity: value, unit: 'g' };
|
||||
}
|
||||
// Lägg till fler konverteringar vid behov
|
||||
return { quantity: value, unit: defaultUnit };
|
||||
}
|
||||
Reference in New Issue
Block a user