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 {Button, Group, TextInput, Text, Textarea, NumberInput, Container, Title, Flex} from '@mantine/core';
import { useForm } from '@mantine/form'; import {useForm} from '@mantine/form';
import {useParams} from "react-router"; import {useParams} from "react-router";
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"; import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
import {InventoryItem} from "./types.ts"; import {InventoryItem} from "./types.ts";
@@ -22,11 +22,10 @@ function EditItem() {
notes: "", 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> => {
const response = await fetch( const response = await fetch(
@@ -79,25 +78,37 @@ function EditItem() {
return ( return (
<form onSubmit={form.onSubmit(async (values) => await <form onSubmit={form.onSubmit(async (values) => await
updateItem.mutateAsync(values))}> updateItem.mutateAsync(values))}>
<div>{isFetching ? 'Updating...' : ''}</div> <Container fluid>
<Text>ID: {data.id}</Text> <Flex mih={50}
<TextInput withAsterisk key={form.key('brand')} size="md" label="Brand" gap="md"
placeholder="Brand" {...form.getInputProps('brand')}/> justify="flex-start"
<TextInput withAsterisk key={form.key('name')} size="md" label="Name" align="flex-start"
placeholder="Name" {...form.getInputProps('name')}/> direction="column"
<TextInput size="md" key={form.key('status')} label="Status" wrap="wrap">
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"> <div>{isFetching ? 'Updating...' : ''}</div>
<Button type="submit">Submit</Button> <Title order={1}>Edit Item</Title>
</Group> <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> </form>
); );
} }
barkmanui/src/features/inventory/ItemDetail.tsx
+26 -26
View File
@@ -1,45 +1,45 @@
import {Text} from "@mantine/core"; import {Container, Text, Title} from "@mantine/core";
import {Link, useParams} from "react-router"; import {Link, useParams} from "react-router";
import {InventoryItem} from "./types.ts"; import {InventoryItem} from "./types.ts";
import {useQuery} from "@tanstack/react-query"; import {useQuery} from "@tanstack/react-query";
function ItemDetail() { function ItemDetail() {
let params = useParams(); const params = useParams();
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> => {
const response = await fetch( const response = await fetch(
import.meta.env.VITE_API_URL + '/inventory/' + params.itemId, import.meta.env.VITE_API_URL + '/inventory/' + params.itemId,
) )
if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText) if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
return await response.json() return await response.json()
}, },
}); });
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 (
<> <>
<Text c="red">Item Detail</Text> <Container fluid>
<div>{isFetching ? 'Updating...' : ''}</div> <Title order={1}>Item Detail</Title>
<Text>ID: {data.id}</Text> <div>{isFetching ? 'Updating...' : ''}</div>
<Text>Brand: {data.brand}</Text> <Text>ID: {data.id}</Text>
<Text>Name: {data.name}</Text> <Text>Brand: {data.brand}</Text>
<Text>Status: {data.status}</Text> <Text>Name: {data.name}</Text>
<Text>Serial Number: {data.serialNumber}</Text> <Text>Status: {data.status}</Text>
<Text>Rental Price: ${data.rentalPrice}</Text> <Text>Serial Number: {data.serialNumber}</Text>
<Text>Replacement Cost: ${data.replacementCost}</Text> <Text>Rental Price: ${data.rentalPrice}</Text>
<Text>Notes: {data.notes}</Text> <Text>Replacement Cost: ${data.replacementCost}</Text>
<Text>Notes: {data.notes}</Text>
<Link to={`/editItem/${data.id}`}>Edit</Link>
<Link to={`/editItem/${data.id}`}>Edit</Link>
</Container>
</> </>
) )
} }