Add Markdown support and preview functionality in recipe creation and editing pages
This commit is contained in:
Nils-Johan Gynther
@@ -6,6 +6,40 @@ import { fetchJson } from '../../../../lib/api';
|
|||||||
import { parseErrorResponse } from '../../../../lib/error-handler';
|
import { parseErrorResponse } from '../../../../lib/error-handler';
|
||||||
import type { Product, Recipe } from '../../../../features/inventory/types';
|
import type { Product, Recipe } from '../../../../features/inventory/types';
|
||||||
|
|
||||||
|
const MARKDOWN_HELP = `
|
||||||
|
**Fetstil:** **text** eller __text__
|
||||||
|
*Kursiv:* *text* eller _text_
|
||||||
|
• Punktlista: - punkt eller * punkt
|
||||||
|
# Rubrik 1
|
||||||
|
## Rubrik 2
|
||||||
|
### Rubrik 3
|
||||||
|
`;
|
||||||
|
|
||||||
|
function SimpleMarkdownPreview({ text }: { text: string }) {
|
||||||
|
const lines = text.split('\n');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, wordBreak: 'break-word' }}>
|
||||||
|
{lines.map((line, i) => {
|
||||||
|
// Enkel bearbetning
|
||||||
|
if (line.startsWith('# ')) {
|
||||||
|
return <h3 key={i} style={{ margin: '0.5rem 0 0.25rem 0', fontSize: '1.3em', fontWeight: 700 }}>{line.slice(2)}</h3>;
|
||||||
|
}
|
||||||
|
if (line.startsWith('## ')) {
|
||||||
|
return <h4 key={i} style={{ margin: '0.5rem 0 0.25rem 0', 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default function EditRecipePage() {
|
export default function EditRecipePage() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
@@ -22,6 +56,7 @@ export default function EditRecipePage() {
|
|||||||
const [isSaving, setIsSaving] = useState(false);
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
const [isDeleting, setIsDeleting] = useState(false);
|
const [isDeleting, setIsDeleting] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [showPreview, setShowPreview] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
@@ -137,121 +172,289 @@ export default function EditRecipePage() {
|
|||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
<main style={{ padding: '1.5rem', maxWidth: '800px', margin: '0 auto' }}>
|
<main style={{ padding: '1.5rem', maxWidth: '100%', margin: '0 auto' }}>
|
||||||
<p>Laddar recept...</p>
|
<p>Laddar recept...</p>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main style={{ padding: '1.5rem', maxWidth: '800px', margin: '0 auto' }}>
|
<main style={{ padding: '1rem', maxWidth: '1000px', margin: '0 auto' }}>
|
||||||
<h1>Redigera recept</h1>
|
<h1 style={{ marginBottom: '1rem' }}>Redigera recept</h1>
|
||||||
|
|
||||||
{error && <p style={{ color: 'red' }}>{error}</p>}
|
{error && <p style={{ color: 'crimson', backgroundColor: '#ffe5e5', padding: '0.75rem', borderRadius: '4px', marginBottom: '1rem' }}>{error}</p>}
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1rem' }}>
|
<form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1.5rem' }}>
|
||||||
<div style={{ display: 'grid', gap: '0.5rem' }}>
|
{/* Receptdetaljer */}
|
||||||
<label>
|
<section style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||||
Receptnamn:
|
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>Receptdetaljer</h2>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
|
||||||
|
Receptnamn *
|
||||||
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={recipe.name}
|
value={recipe.name}
|
||||||
onChange={(e) => setRecipe({ ...recipe, name: e.target.value })}
|
onChange={(e) => setRecipe({ ...recipe, name: e.target.value })}
|
||||||
required
|
required
|
||||||
style={{ width: '100%', padding: '0.5rem' }}
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</label>
|
</div>
|
||||||
|
|
||||||
<label>
|
<div>
|
||||||
Beskrivning:
|
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
|
||||||
|
Beskrivning
|
||||||
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
value={recipe.description}
|
value={recipe.description}
|
||||||
onChange={(e) => setRecipe({ ...recipe, description: e.target.value })}
|
onChange={(e) => setRecipe({ ...recipe, description: e.target.value })}
|
||||||
style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
|
placeholder="Kort beskrivning av receptet..."
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '100px',
|
||||||
|
fontFamily: 'inherit',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</label>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
|
||||||
|
Instruktioner
|
||||||
|
</label>
|
||||||
|
<div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
|
||||||
|
<strong>Markdown-stöd:</strong>
|
||||||
|
<div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<label>
|
|
||||||
Instruktioner:
|
|
||||||
<textarea
|
<textarea
|
||||||
value={recipe.instructions}
|
value={recipe.instructions}
|
||||||
onChange={(e) => setRecipe({ ...recipe, instructions: e.target.value })}
|
onChange={(e) => setRecipe({ ...recipe, instructions: e.target.value })}
|
||||||
style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
|
placeholder="Skriv instruktioner här. Du kan använda Markdown för formatering."
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '150px',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Ingredienser</h2>
|
<button
|
||||||
{recipe.ingredients.map((ingredient, index) => (
|
type="button"
|
||||||
<div key={index} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr auto', gap: '0.5rem', alignItems: 'center' }}>
|
onClick={() => setShowPreview(!showPreview)}
|
||||||
<select
|
style={{
|
||||||
value={ingredient.productId}
|
marginTop: '0.5rem',
|
||||||
onChange={(e) => handleIngredientChange(index, 'productId', Number(e.target.value))}
|
padding: '0.5rem 1rem',
|
||||||
required
|
background: '#f0f0f0',
|
||||||
style={{ padding: '0.5rem' }}
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<option value={0}>Välj produkt</option>
|
{showPreview ? '✕ Dölj förhandsvisning' : '👁 Visa förhandsvisning'}
|
||||||
{products.length > 0 ? products.map((product) => (
|
</button>
|
||||||
<option key={product.id} value={product.id}>
|
|
||||||
{product.name}
|
|
||||||
</option>
|
|
||||||
)) : <option disabled>Kunde inte ladda produkter</option>}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<input
|
{showPreview && recipe.instructions && (
|
||||||
type="text"
|
<div style={{
|
||||||
placeholder="Mängd"
|
marginTop: '1rem',
|
||||||
value={ingredient.quantity}
|
padding: '1rem',
|
||||||
onChange={(e) => handleIngredientChange(index, 'quantity', e.target.value)}
|
background: '#fafafa',
|
||||||
required
|
border: '1px solid #ddd',
|
||||||
style={{ padding: '0.5rem' }}
|
borderRadius: '4px',
|
||||||
/>
|
maxHeight: '300px',
|
||||||
|
overflowY: 'auto',
|
||||||
|
}}>
|
||||||
|
<strong>Förhandvisning:</strong>
|
||||||
|
<SimpleMarkdownPreview text={recipe.instructions} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<select
|
{/* Ingredienser */}
|
||||||
value={ingredient.unit}
|
<section style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||||
onChange={(e) => handleIngredientChange(index, 'unit', e.target.value)}
|
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>Ingredienser</h2>
|
||||||
required
|
|
||||||
style={{ padding: '0.5rem' }}
|
{recipe.ingredients.map((ingredient, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
|
||||||
|
gap: '0.5rem',
|
||||||
|
alignItems: 'flex-end',
|
||||||
|
padding: '0.75rem',
|
||||||
|
background: '#f9f9f9',
|
||||||
|
borderRadius: '4px',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{UNIT_OPTIONS.map((opt) => (
|
<select
|
||||||
<option key={opt.value} value={opt.value}>
|
value={ingredient.productId}
|
||||||
{opt.label}
|
onChange={(e) => handleIngredientChange(index, 'productId', Number(e.target.value))}
|
||||||
</option>
|
required
|
||||||
))}
|
style={{
|
||||||
</select>
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value={0}>Välj produkt</option>
|
||||||
|
{products.length > 0 ? products.map((product) => (
|
||||||
|
<option key={product.id} value={product.id}>
|
||||||
|
{product.name}
|
||||||
|
</option>
|
||||||
|
)) : <option disabled>Kunde inte ladda produkter</option>}
|
||||||
|
</select>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Notering (valfritt)"
|
placeholder="Mängd"
|
||||||
value={ingredient.note || ''}
|
value={ingredient.quantity}
|
||||||
onChange={(e) => handleIngredientChange(index, 'note', e.target.value)}
|
onChange={(e) => handleIngredientChange(index, 'quantity', e.target.value)}
|
||||||
style={{ padding: '0.5rem' }}
|
required
|
||||||
/>
|
style={{
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
<button type="button" onClick={() => removeIngredient(index)} style={{ padding: '0.5rem' }}>
|
<select
|
||||||
Ta bort
|
value={ingredient.unit}
|
||||||
</button>
|
onChange={(e) => handleIngredientChange(index, 'unit', e.target.value)}
|
||||||
</div>
|
required
|
||||||
))}
|
style={{
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{UNIT_OPTIONS.map((opt) => (
|
||||||
|
<option key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
|
||||||
{products.length === 0 && (
|
<input
|
||||||
<div style={{ color: 'red' }}>
|
type="text"
|
||||||
Kunde inte ladda produkter. Kontrollera API:et.
|
placeholder="Notering (valfritt)"
|
||||||
</div>
|
value={ingredient.note || ''}
|
||||||
)}
|
onChange={(e) => handleIngredientChange(index, 'note', e.target.value)}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'space-between' }}>
|
<button
|
||||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
type="button"
|
||||||
<button type="button" onClick={addIngredient} style={{ padding: '0.5rem' }}>
|
onClick={() => removeIngredient(index)}
|
||||||
Lägg till ingrediens
|
style={{
|
||||||
</button>
|
padding: '0.75rem 1rem',
|
||||||
<button type="submit" disabled={isSaving || isDeleting} style={{ padding: '0.5rem' }}>
|
background: '#fee',
|
||||||
{isSaving ? 'Uppdaterar...' : 'Uppdatera recept'}
|
color: '#c00',
|
||||||
|
border: '1px solid #faa',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
✕ Ta bort
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{products.length === 0 && (
|
||||||
|
<div style={{ color: 'crimson', background: '#ffe5e5', padding: '0.75rem', borderRadius: '4px' }}>
|
||||||
|
Kunde inte ladda produkter. Kontrollera API:et.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={addIngredient}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem 1rem',
|
||||||
|
background: '#e8f5e9',
|
||||||
|
color: '#2e7d32',
|
||||||
|
border: '1px solid #81c784',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
+ Lägg till ingrediens
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Knappar */}
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: '0.75rem',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
flexDirection: window.innerWidth < 600 ? 'column' : 'row',
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSaving || isDeleting}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem 1.5rem',
|
||||||
|
background: '#0070f3',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isSaving ? '⏳ Uppdaterar...' : '💾 Uppdatera recept'}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => router.push('/recipes')}
|
onClick={() => router.push('/recipes')}
|
||||||
style={{ padding: '0.5rem', background: '#f0f0f0', color: '#333', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}
|
style={{
|
||||||
|
padding: '0.75rem 1.5rem',
|
||||||
|
background: '#f0f0f0',
|
||||||
|
color: '#333',
|
||||||
|
border: '1px solid #ccc',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Avbryt
|
Avbryt
|
||||||
</button>
|
</button>
|
||||||
@@ -276,9 +479,19 @@ export default function EditRecipePage() {
|
|||||||
setIsDeleting(false);
|
setIsDeleting(false);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
style={{ padding: '0.5rem 1rem', background: '#c0392b', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
|
style={{
|
||||||
|
padding: '0.75rem 1.5rem',
|
||||||
|
background: '#c0392b',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{isDeleting ? 'Raderar...' : 'Radera recept'}
|
{isDeleting ? '⏳ Raderar...' : '🗑 Radera recept'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -6,6 +6,39 @@ import { fetchJson } from '../../../lib/api';
|
|||||||
import { parseErrorResponse } from '../../../lib/error-handler';
|
import { parseErrorResponse } from '../../../lib/error-handler';
|
||||||
import type { Product } from '../../../features/inventory/types';
|
import type { Product } from '../../../features/inventory/types';
|
||||||
|
|
||||||
|
const MARKDOWN_HELP = `
|
||||||
|
**Fetstil:** **text** eller __text__
|
||||||
|
*Kursiv:* *text* eller _text_
|
||||||
|
• Punktlista: - punkt eller * punkt
|
||||||
|
# Rubrik 1
|
||||||
|
## Rubrik 2
|
||||||
|
### Rubrik 3
|
||||||
|
`;
|
||||||
|
|
||||||
|
function SimpleMarkdownPreview({ text }: { text: string }) {
|
||||||
|
const lines = text.split('\n');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, wordBreak: 'break-word' }}>
|
||||||
|
{lines.map((line, i) => {
|
||||||
|
if (line.startsWith('# ')) {
|
||||||
|
return <h3 key={i} style={{ margin: '0.5rem 0 0.25rem 0', fontSize: '1.3em', fontWeight: 700 }}>{line.slice(2)}</h3>;
|
||||||
|
}
|
||||||
|
if (line.startsWith('## ')) {
|
||||||
|
return <h4 key={i} style={{ margin: '0.5rem 0 0.25rem 0', 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default function CreateRecipePage() {
|
export default function CreateRecipePage() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [recipe, setRecipe] = useState({
|
const [recipe, setRecipe] = useState({
|
||||||
@@ -17,6 +50,7 @@ export default function CreateRecipePage() {
|
|||||||
const [products, setProducts] = useState<Product[]>([]);
|
const [products, setProducts] = useState<Product[]>([]);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [showPreview, setShowPreview] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchJson<Product[]>('/api/products')
|
fetchJson<Product[]>('/api/products')
|
||||||
@@ -100,108 +134,281 @@ export default function CreateRecipePage() {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main style={{ padding: '1.5rem', maxWidth: '800px', margin: '0 auto' }}>
|
<main style={{ padding: '1rem', maxWidth: '1000px', margin: '0 auto' }}>
|
||||||
<h1>Lägg till nytt recept</h1>
|
<h1 style={{ marginBottom: '1rem' }}>Lägg till nytt recept</h1>
|
||||||
|
|
||||||
{error && <p style={{ color: 'red' }}>{error}</p>}
|
{error && <p style={{ color: 'crimson', backgroundColor: '#ffe5e5', padding: '0.75rem', borderRadius: '4px', marginBottom: '1rem' }}>{error}</p>}
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1rem' }}>
|
<form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1.5rem' }}>
|
||||||
<div style={{ display: 'grid', gap: '0.5rem' }}>
|
{/* Receptdetaljer */}
|
||||||
<label>
|
<section style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||||
Receptnamn:
|
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>Receptdetaljer</h2>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
|
||||||
|
Receptnamn *
|
||||||
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={recipe.name}
|
value={recipe.name}
|
||||||
onChange={(e) => setRecipe({ ...recipe, name: e.target.value })}
|
onChange={(e) => setRecipe({ ...recipe, name: e.target.value })}
|
||||||
required
|
required
|
||||||
style={{ width: '100%', padding: '0.5rem' }}
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</label>
|
</div>
|
||||||
|
|
||||||
<label>
|
<div>
|
||||||
Beskrivning:
|
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
|
||||||
|
Beskrivning
|
||||||
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
value={recipe.description}
|
value={recipe.description}
|
||||||
onChange={(e) => setRecipe({ ...recipe, description: e.target.value })}
|
onChange={(e) => setRecipe({ ...recipe, description: e.target.value })}
|
||||||
style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
|
placeholder="Kort beskrivning av receptet..."
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '100px',
|
||||||
|
fontFamily: 'inherit',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</label>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
|
||||||
|
Instruktioner
|
||||||
|
</label>
|
||||||
|
<div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
|
||||||
|
<strong>Markdown-stöd:</strong>
|
||||||
|
<div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<label>
|
|
||||||
Instruktioner:
|
|
||||||
<textarea
|
<textarea
|
||||||
value={recipe.instructions}
|
value={recipe.instructions}
|
||||||
onChange={(e) => setRecipe({ ...recipe, instructions: e.target.value })}
|
onChange={(e) => setRecipe({ ...recipe, instructions: e.target.value })}
|
||||||
style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
|
placeholder="Skriv instruktioner här. Du kan använda Markdown för formatering."
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '150px',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Ingredienser</h2>
|
<button
|
||||||
{recipe.ingredients.map((ingredient, index) => (
|
type="button"
|
||||||
<div key={index} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr auto', gap: '0.5rem', alignItems: 'center' }}>
|
onClick={() => setShowPreview(!showPreview)}
|
||||||
<select
|
style={{
|
||||||
value={ingredient.productId}
|
marginTop: '0.5rem',
|
||||||
onChange={(e) => handleIngredientChange(index, 'productId', Number(e.target.value))}
|
padding: '0.5rem 1rem',
|
||||||
required
|
background: '#f0f0f0',
|
||||||
style={{ padding: '0.5rem' }}
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<option value={0}>Välj produkt</option>
|
{showPreview ? '✕ Dölj förhandsvisning' : '👁 Visa förhandsvisning'}
|
||||||
{products.length > 0 ? products.map((product) => (
|
|
||||||
<option key={product.id} value={product.id}>
|
|
||||||
{product.name}
|
|
||||||
</option>
|
|
||||||
)) : <option disabled>Kunde inte ladda produkter</option>}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Mängd"
|
|
||||||
value={ingredient.quantity}
|
|
||||||
onChange={(e) => handleIngredientChange(index, 'quantity', e.target.value)}
|
|
||||||
required
|
|
||||||
style={{ padding: '0.5rem' }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<select
|
|
||||||
value={ingredient.unit}
|
|
||||||
onChange={(e) => handleIngredientChange(index, 'unit', e.target.value)}
|
|
||||||
required
|
|
||||||
style={{ padding: '0.5rem' }}
|
|
||||||
>
|
|
||||||
{UNIT_OPTIONS.map((opt) => (
|
|
||||||
<option key={opt.value} value={opt.value}>
|
|
||||||
{opt.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<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>
|
</button>
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{products.length === 0 && (
|
{showPreview && recipe.instructions && (
|
||||||
<div style={{ color: 'red' }}>
|
<div style={{
|
||||||
Kunde inte ladda produkter. Kontrollera API:et.
|
marginTop: '1rem',
|
||||||
|
padding: '1rem',
|
||||||
|
background: '#fafafa',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
maxHeight: '300px',
|
||||||
|
overflowY: 'auto',
|
||||||
|
}}>
|
||||||
|
<strong>Förhandsvisning:</strong>
|
||||||
|
<SimpleMarkdownPreview text={recipe.instructions} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</section>
|
||||||
|
|
||||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
{/* Ingredienser */}
|
||||||
<button type="button" onClick={addIngredient} style={{ padding: '0.5rem' }}>
|
<section style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||||
Lägg till ingrediens
|
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>Ingredienser</h2>
|
||||||
|
|
||||||
|
{recipe.ingredients.map((ingredient, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
|
||||||
|
gap: '0.5rem',
|
||||||
|
alignItems: 'flex-end',
|
||||||
|
padding: '0.75rem',
|
||||||
|
background: '#f9f9f9',
|
||||||
|
borderRadius: '4px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
value={ingredient.productId}
|
||||||
|
onChange={(e) => handleIngredientChange(index, 'productId', Number(e.target.value))}
|
||||||
|
required
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value={0}>Välj produkt</option>
|
||||||
|
{products.length > 0 ? products.map((product) => (
|
||||||
|
<option key={product.id} value={product.id}>
|
||||||
|
{product.name}
|
||||||
|
</option>
|
||||||
|
)) : <option disabled>Kunde inte ladda produkter</option>}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Mängd"
|
||||||
|
value={ingredient.quantity}
|
||||||
|
onChange={(e) => handleIngredientChange(index, 'quantity', e.target.value)}
|
||||||
|
required
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={ingredient.unit}
|
||||||
|
onChange={(e) => handleIngredientChange(index, 'unit', e.target.value)}
|
||||||
|
required
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{UNIT_OPTIONS.map((opt) => (
|
||||||
|
<option key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Notering (valfritt)"
|
||||||
|
value={ingredient.note || ''}
|
||||||
|
onChange={(e) => handleIngredientChange(index, 'note', e.target.value)}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => removeIngredient(index)}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem 1rem',
|
||||||
|
background: '#fee',
|
||||||
|
color: '#c00',
|
||||||
|
border: '1px solid #faa',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
✕ Ta bort
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{products.length === 0 && (
|
||||||
|
<div style={{ color: 'crimson', background: '#ffe5e5', padding: '0.75rem', borderRadius: '4px' }}>
|
||||||
|
Kunde inte ladda produkter. Kontrollera API:et.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={addIngredient}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem 1rem',
|
||||||
|
background: '#e8f5e9',
|
||||||
|
color: '#2e7d32',
|
||||||
|
border: '1px solid #81c784',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
+ Lägg till ingrediens
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" disabled={isLoading} style={{ padding: '0.5rem' }}>
|
</section>
|
||||||
{isLoading ? 'Sparar...' : 'Spara recept'}
|
|
||||||
|
{/* Knappar */}
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: '0.75rem',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
}}>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem 1.5rem',
|
||||||
|
background: '#0070f3',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isLoading ? '⏳ Sparar...' : '💾 Spara recept'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => router.push('/recipes')}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem 1.5rem',
|
||||||
|
background: '#f0f0f0',
|
||||||
|
color: '#333',
|
||||||
|
border: '1px solid #ccc',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '1rem',
|
||||||
|
minHeight: '44px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Avbryt
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
Reference in New Issue
Block a user