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

Add layout enhancements to ItemDetail and EditItem components

Browse Source
This commit is contained in:
Drew Rautenberg
2025-01-22 11:26:18 -06:00
parent 146dca7679
commit 22101fa212
2 changed files with 60 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
barkmanui/src/features/inventory/EditItem.tsx
+34 -23
View File
@@ -1,5 +1,5 @@
import {Button, Group, TextInput, Text, Textarea, NumberInput} from '@mantine/core';
import { useForm } from '@mantine/form';
import {Button, Group, TextInput, Text, Textarea, NumberInput, Container, Title, Flex} from '@mantine/core';
import {useForm} from '@mantine/form';
import {useParams} from "react-router";
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
import {InventoryItem} from "./types.ts";
@@ -22,11 +22,10 @@ function EditItem() {
notes: "",
},
validate: {
},
validate: {},
});
const { isPending, error, data, isFetching } = useQuery({
const {isPending, error, data, isFetching} = useQuery({
queryKey: ['inventory', params.itemId],
queryFn: async (): Promise<InventoryItem> => {
const response = await fetch(
@@ -79,25 +78,37 @@ function EditItem() {
return (
<form onSubmit={form.onSubmit(async (values) => await
updateItem.mutateAsync(values))}>
<div>{isFetching ? 'Updating...' : ''}</div>
<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')}/>
<Container fluid>
<Flex mih={50}
gap="md"
justify="flex-start"
align="flex-start"
direction="column"
wrap="wrap">
<Group justify="flex-end" mt="md">
<Button type="submit">Submit</Button>
</Group>
<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')}/>
<Group justify="flex-end" mt="md">
<Button type="submit">Submit</Button>
</Group>
</Flex>
</Container>
</form>
);
}