Refactor inventory forms to include unit and location options; update quantity input handling
This commit is contained in:
Nils-Johan Gynther
@@ -38,10 +38,12 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
const form = e.currentTarget;
|
||||
const formData = new FormData(form);
|
||||
|
||||
const raw = formData.get('amountUsed') as string;
|
||||
const { quantity, unit: parsedUnit } = parseQuantityInput(raw, unit);
|
||||
formData.set('amountUsed', String(quantity));
|
||||
formData.set('unit', parsedUnit);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await consumeInventoryItem(formData);
|
||||
@@ -67,9 +69,7 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
|
||||
<br />
|
||||
<input
|
||||
name="amountUsed"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
type="text"
|
||||
required
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
/>
|
||||
@@ -109,4 +109,15 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
|
||||
{error ? <p style={{ color: 'crimson', margin: 0 }}>{error}</p> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 || defaultUnit;
|
||||
if (defaultUnit === 'kg' && (unit === 'g' || unit === 'gram')) return { quantity: parseFloat(num) / 1000, unit: 'kg' };
|
||||
if (defaultUnit === 'g' && (unit === 'kg' || unit === 'kilogram')) return { quantity: parseFloat(num) * 1000, unit: 'g' };
|
||||
return { quantity: parseFloat(num), unit };
|
||||
}
|
||||
@@ -13,6 +13,38 @@ function toDateInputValue(value: string | null) {
|
||||
return value.slice(0, 10);
|
||||
}
|
||||
|
||||
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 || defaultUnit;
|
||||
if (defaultUnit === 'kg' && (unit === 'g' || unit === 'gram')) return { quantity: parseFloat(num) / 1000, unit: 'kg' };
|
||||
if (defaultUnit === 'g' && (unit === 'kg' || unit === 'kilogram')) return { quantity: parseFloat(num) * 1000, unit: 'g' };
|
||||
return { quantity: parseFloat(num), unit };
|
||||
}
|
||||
|
||||
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)' },
|
||||
];
|
||||
|
||||
const LOCATION_OPTIONS = [
|
||||
{ value: '', label: 'Välj plats' },
|
||||
{ value: 'Kyl', label: 'Kyl' },
|
||||
{ value: 'Frys', label: 'Frys' },
|
||||
{ value: 'Skafferi', label: 'Skafferi' },
|
||||
{ value: 'Annat', label: 'Annat' },
|
||||
];
|
||||
|
||||
export default function InventoryEditForm({ item }: Props) {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
@@ -43,10 +75,13 @@ export default function InventoryEditForm({ item }: Props) {
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
const form = e.currentTarget;
|
||||
const formData = new FormData(form);
|
||||
|
||||
const raw = formData.get('quantity') as string;
|
||||
const unit = formData.get('unit') as string;
|
||||
const { quantity, unit: parsedUnit } = parseQuantityInput(raw, unit);
|
||||
formData.set('quantity', String(quantity));
|
||||
formData.set('unit', parsedUnit);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await updateInventoryItem(formData);
|
||||
@@ -79,9 +114,8 @@ export default function InventoryEditForm({ item }: Props) {
|
||||
<br />
|
||||
<input
|
||||
name="quantity"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
type="text"
|
||||
required
|
||||
defaultValue={item.quantity}
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
/>
|
||||
@@ -90,23 +124,33 @@ export default function InventoryEditForm({ item }: Props) {
|
||||
<label>
|
||||
Enhet
|
||||
<br />
|
||||
<input
|
||||
<select
|
||||
name="unit"
|
||||
type="text"
|
||||
defaultValue={item.unit}
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
/>
|
||||
>
|
||||
{UNIT_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Plats
|
||||
<br />
|
||||
<input
|
||||
<select
|
||||
name="location"
|
||||
type="text"
|
||||
defaultValue={item.location || ''}
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
/>
|
||||
>
|
||||
{LOCATION_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
|
||||
@@ -12,16 +12,51 @@ export default function InventoryForm({ products }: Props) {
|
||||
const [isPending, setIsPending] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
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)' },
|
||||
];
|
||||
|
||||
const LOCATION_OPTIONS = [
|
||||
{ value: '', label: 'Välj plats' },
|
||||
{ value: 'Kyl', label: 'Kyl' },
|
||||
{ value: 'Frys', label: 'Frys' },
|
||||
{ value: 'Skafferi', label: 'Skafferi' },
|
||||
{ value: 'Annat', label: 'Annat' },
|
||||
];
|
||||
|
||||
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 || defaultUnit;
|
||||
if (defaultUnit === 'kg' && (unit === 'g' || unit === 'gram')) return { quantity: parseFloat(num) / 1000, unit: 'kg' };
|
||||
if (defaultUnit === 'g' && (unit === 'kg' || unit === 'kilogram')) return { quantity: parseFloat(num) * 1000, unit: 'g' };
|
||||
return { quantity: parseFloat(num), unit };
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setIsPending(true);
|
||||
|
||||
const form = e.currentTarget;
|
||||
const formData = new FormData(form);
|
||||
|
||||
const raw = formData.get('quantity') as string;
|
||||
const unit = formData.get('unit') as string;
|
||||
const { quantity, unit: parsedUnit } = parseQuantityInput(raw, unit);
|
||||
formData.set('quantity', String(quantity));
|
||||
formData.set('unit', parsedUnit);
|
||||
try {
|
||||
await createInventoryItem(formData);
|
||||
form.reset();
|
||||
@@ -60,9 +95,7 @@ export default function InventoryForm({ products }: Props) {
|
||||
<br />
|
||||
<input
|
||||
name="quantity"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
type="text"
|
||||
required
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
/>
|
||||
@@ -71,24 +104,32 @@ export default function InventoryForm({ products }: Props) {
|
||||
<label>
|
||||
Enhet
|
||||
<br />
|
||||
<input
|
||||
<select
|
||||
name="unit"
|
||||
type="text"
|
||||
required
|
||||
placeholder="g, kg, st, dl..."
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
/>
|
||||
>
|
||||
{UNIT_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</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
|
||||
name="location"
|
||||
required
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
>
|
||||
{LOCATION_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
|
||||
@@ -106,24 +106,7 @@ export default async function InventoryPage({ searchParams }: InventoryPageProps
|
||||
|
||||
return (
|
||||
<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>
|
||||
<h1 style={{ marginBottom: '1.5rem' }}>Varor hemma</h1>
|
||||
|
||||
<ProductForm />
|
||||
<InventoryForm products={products} />
|
||||
|
||||
Reference in New Issue
Block a user