Add sorting by name functionality and implement AdminProductList component for product management

This commit is contained in:
Nils-Johan Gynther
2026-04-10 19:10:50 +02:00
parent 33cb4e5328
commit 556a0fdc30
5 changed files with 172 additions and 40 deletions
+33 -5
View File
@@ -11,6 +11,7 @@ type Props = {
export default function InventoryForm({ products }: Props) {
const [isPending, setIsPending] = useState(false);
const [error, setError] = useState<string | null>(null);
const [isOpen, setIsOpen] = useState(false);
const UNIT_OPTIONS = [
{ value: '', label: 'Välj enhet' },
@@ -56,8 +57,32 @@ export default function InventoryForm({ products }: Props) {
}
return (
<form
onSubmit={async (e) => {
<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);
@@ -82,11 +107,12 @@ export default function InventoryForm({ products }: Props) {
gap: '0.75rem',
padding: '1rem',
border: '1px solid #ddd',
borderRadius: '8px',
marginBottom: '1.5rem',
borderTop: 'none',
borderRadius: '0 0 8px 8px',
marginBottom: '0',
}}
>
<h2 style={{ margin: 0 }}>Lägg till hemmavara</h2>
<h2 style={{ margin: 0, display: 'none' }}>Lägg till hemmavara</h2>
<label>
Produkt
@@ -187,5 +213,7 @@ export default function InventoryForm({ products }: Props) {
{error ? <p style={{ color: 'crimson', margin: 0 }}>{error}</p> : null}
</form>
)}
</div>
);
}