Add EditItem component and route for editing inventory items

2026-06-13 06:11:55 +00:00 · 2025-01-18 19:47:42 -06:00
parent 28ffeb7052
commit 354823e00e
3 changed files with 61 additions and 1 deletions
@@ -0,0 +1,56 @@
+import {NumberInput, Stack, Text, Textarea, TextInput} from "@mantine/core";
+import {BarkHeader} from "../../common/components/BarkHeader.tsx";
+import {useParams} from "react-router";
+import {InventoryItem} from "./types.ts";
+import {useQuery} from "@tanstack/react-query";
+
+
+
+function EditItem() {
+    let params = useParams();
+
+    const { isPending, error, data, isFetching } = useQuery({
+        queryKey: ['inventory', params.itemId],
+        queryFn: async (): Promise<InventoryItem> => {
+            const response = await fetch(
+                import.meta.env.VITE_API_URL + '/inventory/' + params.itemId,
+            )
+
+            if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
+
+            return await response.json()
+        },
+    });
+
+    if (isPending) return 'Loading...'
+
+    if (error) return 'An error has occurred: ' + error.message
+
+    return (
+        <>
+            <BarkHeader></BarkHeader>
+            <Stack
+                h={600}
+                bg="var(--mantine-color-body)"
+                align="center"
+                justify="center"
+                gap="md"
+            >
+                <Text c="red">Edit Item</Text>
+                <div>{isFetching ? 'Updating...' : ''}</div>
+                <Text>ID: {data.id}</Text>
+                <TextInput withAsterisk size="md" label="Brand" placeholder={data.brand}/>
+                <TextInput withAsterisk size="md" label="Name" placeholder={data.name}/>
+                <TextInput size="md" label="Status" placeholder={data.status}/>
+                <TextInput size="md" label="Serial Number" placeholder={data.serialNumber}/>
+                <NumberInput size="md" label="Rental Price" placeholder={data.rentalPrice.toString()}/>
+                <NumberInput size="md" label="Replacement Cost" placeholder={data.replacementCost.toString()}/>
+                <Text>Replacement Cost: ${data.replacementCost}</Text>
+                <Textarea label="Notes" placeholder={data.notes}/>
+            </Stack>
+
+        </>
+    )
+}
+
+export default EditItem