cleaned up ui and code

This commit is contained in:
2025-01-23 11:12:43 -06:00
parent 22101fa212
commit 1daa3d23c0
5 changed files with 55 additions and 54 deletions
+18 -18
View File
@@ -10,7 +10,7 @@ type EditableInventoryItem = Omit<InventoryItem, 'id'>;
function EditItem() {
const params = useParams();
const form = useForm<EditableInventoryItem>({
const editItemForm = useForm<EditableInventoryItem>({
mode: 'uncontrolled',
initialValues: {
name: "",
@@ -67,7 +67,7 @@ function EditItem() {
useEffect(() => {
if (data) {
// Even if query.data changes, form will be initialized only once
form.initialize(data);
editItemForm.initialize(data);
}
}, [data]);
@@ -76,9 +76,9 @@ function EditItem() {
if (error) return 'An error has occurred: ' + error.message
return (
<form onSubmit={form.onSubmit(async (values) => await
<form onSubmit={editItemForm.onSubmit(async (values) => await
updateItem.mutateAsync(values))}>
<Container fluid>
<Container m="lg">
<Flex mih={50}
gap="md"
justify="flex-start"
@@ -89,20 +89,20 @@ function EditItem() {
<div>{isFetching ? 'Updating...' : ''}</div>
<Title order={1}>Edit Item</Title>
<Text>ID: {data.id}</Text>
<TextInput withAsterisk key={form.key('brand')} size="md" label="Brand"
placeholder="Brand" {...form.getInputProps('brand')}/>
<TextInput withAsterisk key={form.key('name')} size="md" label="Name"
placeholder="Name" {...form.getInputProps('name')}/>
<TextInput size="md" key={form.key('status')} label="Status"
placeholder="Status" {...form.getInputProps('status')}/>
<TextInput size="md" key={form.key('serialNumber')} label="Serial Number"
placeholder="Serial Number"{...form.getInputProps('serialNumber')}/>
<NumberInput size="md" key={form.key('rentalPrice')} label="Rental Price"
placeholder="Rental Price" {...form.getInputProps('rentalPrice')}/>
<NumberInput size="md" key={form.key('replacementCost')} label="Replacement Cost"
placeholder="Replacement Cost" {...form.getInputProps('replacementCost')}/>
<Textarea label="Notes" key={form.key('notes')}
placeholder="Notes" {...form.getInputProps('notes')}/>
<TextInput withAsterisk key={editItemForm.key('brand')} size="md" label="Brand"
placeholder="Brand" {...editItemForm.getInputProps('brand')}/>
<TextInput withAsterisk key={editItemForm.key('name')} size="md" label="Name"
placeholder="Name" {...editItemForm.getInputProps('name')}/>
<TextInput size="md" key={editItemForm.key('status')} label="Status"
placeholder="Status" {...editItemForm.getInputProps('status')}/>
<TextInput size="md" key={editItemForm.key('serialNumber')} label="Serial Number"
placeholder="Serial Number"{...editItemForm.getInputProps('serialNumber')}/>
<NumberInput size="md" key={editItemForm.key('rentalPrice')} label="Rental Price"
placeholder="Rental Price" {...editItemForm.getInputProps('rentalPrice')}/>
<NumberInput size="md" key={editItemForm.key('replacementCost')} label="Replacement Cost"
placeholder="Replacement Cost" {...editItemForm.getInputProps('replacementCost')}/>
<Textarea label="Notes" key={editItemForm.key('notes')}
placeholder="Notes" {...editItemForm.getInputProps('notes')}/>
<Group justify="flex-end" mt="md">
<Button type="submit">Submit</Button>