drew/barkman
1
0
Fork 0
mirror of https://github.com/BarkProductions/barkman.git synced 2026-06-12 22:11:54 +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>
);
}
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 {InventoryItem} from "./types.ts";
import {useQuery} from "@tanstack/react-query";
function ItemDetail() {
let params = useParams();
const params = useParams();
const { isPending, error, data, isFetching } = useQuery({
queryKey: ['inventory', params.itemId],
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,
)
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)
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 (
<>
<Text c="red">Item Detail</Text>
<div>{isFetching ? 'Updating...' : ''}</div>
<Text>ID: {data.id}</Text>
<Text>Brand: {data.brand}</Text>
<Text>Name: {data.name}</Text>
<Text>Status: {data.status}</Text>
<Text>Serial Number: {data.serialNumber}</Text>
<Text>Rental Price: ${data.rentalPrice}</Text>
<Text>Replacement Cost: ${data.replacementCost}</Text>
<Text>Notes: {data.notes}</Text>
<Link to={`/editItem/${data.id}`}>Edit</Link>
<Container fluid>
<Title order={1}>Item Detail</Title>
<div>{isFetching ? 'Updating...' : ''}</div>
<Text>ID: {data.id}</Text>
<Text>Brand: {data.brand}</Text>
<Text>Name: {data.name}</Text>
<Text>Status: {data.status}</Text>
<Text>Serial Number: {data.serialNumber}</Text>
<Text>Rental Price: ${data.rentalPrice}</Text>
<Text>Replacement Cost: ${data.replacementCost}</Text>
<Text>Notes: {data.notes}</Text>
<Link to={`/editItem/${data.id}`}>Edit</Link>
</Container>
</>
)
}