139 lines
3.4 KiB
TypeScript
139 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { createInventoryItem } from './actions';
|
|
import type { Product } from '../../features/inventory/types';
|
|
|
|
type Props = {
|
|
products: Product[];
|
|
};
|
|
|
|
export default function InventoryForm({ products }: Props) {
|
|
const [isPending, setIsPending] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
return (
|
|
<form
|
|
onSubmit={async (e) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setIsPending(true);
|
|
|
|
const form = e.currentTarget;
|
|
const formData = new FormData(form);
|
|
|
|
try {
|
|
await createInventoryItem(formData);
|
|
form.reset();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Okänt fel');
|
|
} finally {
|
|
setIsPending(false);
|
|
}
|
|
}}
|
|
style={{
|
|
display: 'grid',
|
|
gap: '0.75rem',
|
|
padding: '1rem',
|
|
border: '1px solid #ddd',
|
|
borderRadius: '8px',
|
|
marginBottom: '1.5rem',
|
|
}}
|
|
>
|
|
<h2 style={{ margin: 0 }}>Lägg till hemmavara</h2>
|
|
|
|
<label>
|
|
Produkt
|
|
<br />
|
|
<select name="productId" required style={{ width: '100%', padding: '0.5rem' }}>
|
|
<option value="">Välj produkt</option>
|
|
{products.map((product) => (
|
|
<option key={product.id} value={product.id}>
|
|
{product.canonicalName || product.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label>
|
|
Mängd
|
|
<br />
|
|
<input
|
|
name="quantity"
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
required
|
|
style={{ width: '100%', padding: '0.5rem' }}
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
Enhet
|
|
<br />
|
|
<input
|
|
name="unit"
|
|
type="text"
|
|
required
|
|
placeholder="g, kg, st, dl..."
|
|
style={{ width: '100%', padding: '0.5rem' }}
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
Plats
|
|
<br />
|
|
<select name="location" required style={{ width: '100%', padding: '0.5rem' }}>
|
|
<option value="">Välj plats</option>
|
|
<option value="Kyl">Kyl</option>
|
|
<option value="Frys">Frys</option>
|
|
<option value="Skafferi">Skafferi</option>
|
|
<option value="Annat">Annat</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label>
|
|
Varumärke
|
|
<br />
|
|
<input
|
|
name="brand"
|
|
type="text"
|
|
placeholder="t.ex. Eldorado, Kronfågel, Garant, ICA Basic, Motti"
|
|
style={{ width: '100%', padding: '0.5rem' }}
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
Passar till
|
|
<br />
|
|
<input
|
|
name="suitableFor"
|
|
type="text"
|
|
placeholder="Wok, Gryta..."
|
|
style={{ width: '100%', padding: '0.5rem' }}
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
Bäst före
|
|
<br />
|
|
<input
|
|
name="bestBeforeDate"
|
|
type="date"
|
|
style={{ width: '100%', padding: '0.5rem' }}
|
|
/>
|
|
</label>
|
|
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
|
<input name="opened" type="checkbox" />
|
|
Öppnad
|
|
</label>
|
|
|
|
<button type="submit" disabled={isPending} style={{ padding: '0.75rem' }}>
|
|
{isPending ? 'Sparar...' : 'Lägg till'}
|
|
</button>
|
|
|
|
{error ? <p style={{ color: 'crimson', margin: 0 }}>{error}</p> : null}
|
|
</form>
|
|
);
|
|
} |