drew/barkman
1
0
Fork 0
mirror of https://github.com/BarkProductions/barkman.git synced 2026-06-13 06:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

form stuff

Browse Source
This commit is contained in:
Drew Rautenberg
2025-01-20 15:42:49 -06:00
parent 2f7369c7f5
commit 90bba7f40f
1 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
barkmanui/src/features/inventory/EditItem.tsx
+23 -10
View File
@@ -3,6 +3,7 @@ import { useForm } from '@mantine/form';
import {useParams} from "react-router"; import {useParams} from "react-router";
import {useQuery} from "@tanstack/react-query"; import {useQuery} from "@tanstack/react-query";
import {InventoryItem} from "./types.ts"; import {InventoryItem} from "./types.ts";
import {useEffect} from "react";
function EditItem() { function EditItem() {
const params = useParams(); const params = useParams();
@@ -10,14 +11,20 @@ function EditItem() {
const form = useForm({ const form = useForm({
mode: 'uncontrolled', mode: 'uncontrolled',
initialValues: { initialValues: {
email: '', name: "",
termsOfService: false, brand: "",
status: "",
serialNumber: "",
rentalPrice: 0,
replacementCost: 0,
notes: "",
}, },
validate: { validate: {
}, },
}); });
const { isPending, error, data, isFetching } = useQuery({ const { isPending, error, data, isFetching } = useQuery({
queryKey: ['inventory', params.itemId], queryKey: ['inventory', params.itemId],
queryFn: async (): Promise<InventoryItem> => { queryFn: async (): Promise<InventoryItem> => {
@@ -31,22 +38,28 @@ function EditItem() {
}, },
}); });
useEffect(() => {
if (data) {
// Even if query.data changes, form will be initialized only once
form.initialize(data);
}
}, [data, form]);
if (isPending) return 'Loading...' if (isPending) return 'Loading...'
if (error) return 'An error has occurred: ' + error.message if (error) return 'An error has occurred: ' + error.message
return ( return (
<form onSubmit={form.onSubmit((values) => console.log(values))}> <form onSubmit={form.onSubmit((values) => console.log(values))}>
<div>{isFetching ? 'Updating...' : ''}</div> <div>{isFetching ? 'Updating...' : ''}</div>
<Text>ID: {data.id}</Text> <Text>ID: {data.id}</Text>
<TextInput withAsterisk size="md" label="Brand" placeholder="Brand"/> <TextInput withAsterisk key={form.key('brand')} size="md" label="Brand" placeholder="Brand"/>
<TextInput withAsterisk size="md" label="Name" placeholder="Name"/> <TextInput withAsterisk key={form.key('name')} size="md" label="Name" placeholder="Name"/>
<TextInput size="md" label="Status" placeholder="Status"/> <TextInput size="md" key={form.key('status')} label="Status" placeholder="Status"/>
<TextInput size="md" label="Serial Number" placeholder="Serial Number"/> <TextInput size="md" key={form.key('serialNumber')} label="Serial Number" placeholder="Serial Number"/>
<NumberInput size="md" label="Rental Price" placeholder="Rental Price"/> <NumberInput size="md" key={form.key('rentalPrice')} label="Rental Price" placeholder="Rental Price"/>
<NumberInput size="md" label="Replacement Cost" placeholder="Replacement Cost"/> <NumberInput size="md" key={form.key('replacementCost')} label="Replacement Cost" placeholder="Replacement Cost"/>
<Textarea label="Notes" placeholder="Notes"/> <Textarea label="Notes" key={form.key('notes')} placeholder="Notes"/>
<Group justify="flex-end" mt="md"> <Group justify="flex-end" mt="md">
<Button type="submit">Submit</Button> <Button type="submit">Submit</Button>