feat: add TypeScript definitions for next-auth session with accessToken and user details
Test Suite / test (24.15.0) (push) Has been cancelled
Test Suite / test (24.15.0) (push) Has been cancelled
This commit is contained in:
Nils-Johan Gynther
@@ -0,0 +1,234 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import type { Product } from '../../features/inventory/types';
|
||||
import { UNIT_OPTIONS } from '../../lib/units';
|
||||
|
||||
type Props = {
|
||||
products: Product[];
|
||||
onCreated?: () => void;
|
||||
};
|
||||
|
||||
export default function InventoryForm({ products, onCreated }: Props) {
|
||||
const [isPending, setIsPending] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
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.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 };
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ marginBottom: '1.5rem' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen((v) => !v)}
|
||||
style={{
|
||||
padding: '0.6rem 1rem',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '6px',
|
||||
background: '#fff',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<span>Lägg till hemmavara</span>
|
||||
<span>{isOpen ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<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 {
|
||||
const payload: Record<string, unknown> = {
|
||||
productId: Number(formData.get('productId')),
|
||||
quantity,
|
||||
unit: parsedUnit,
|
||||
};
|
||||
const location = String(formData.get('location') || '').trim();
|
||||
if (location) payload.location = location;
|
||||
payload.opened = formData.get('opened') === 'on';
|
||||
const brand = String(formData.get('brand') || '').trim();
|
||||
if (brand) payload.brand = brand;
|
||||
const suitableFor = String(formData.get('suitableFor') || '').trim();
|
||||
if (suitableFor) payload.suitableFor = suitableFor;
|
||||
const bestBeforeDate = String(formData.get('bestBeforeDate') || '').trim();
|
||||
if (bestBeforeDate) payload.bestBeforeDate = bestBeforeDate;
|
||||
|
||||
const res = await fetch('/api/admin/inventory-item', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data?.error || 'Kunde inte spara');
|
||||
}
|
||||
form.reset();
|
||||
if (onCreated) onCreated();
|
||||
else router.refresh();
|
||||
} 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',
|
||||
borderTop: 'none',
|
||||
borderRadius: '0 0 8px 8px',
|
||||
marginBottom: '0',
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: 0, display: 'none' }}>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="text"
|
||||
required
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Enhet
|
||||
<br />
|
||||
<select
|
||||
name="unit"
|
||||
required
|
||||
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' }}
|
||||
>
|
||||
{LOCATION_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user