Add sorting by name functionality and implement AdminProductList component for product management
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user