new item works

This commit is contained in:
2025-01-29 14:38:27 -06:00
parent 451f108a3f
commit aa4ff86d3e
2 changed files with 43 additions and 51 deletions
+35 -50
View File
@@ -1,38 +1,27 @@
import {Button, Group, TextInput, Text, Textarea, NumberInput, Container, Title, Flex} from '@mantine/core'; import {Button, Group, TextInput, NumberInput, Container, Title, Flex} from '@mantine/core';
import {useForm} from '@mantine/form'; import {useForm} from '@mantine/form';
import {useParams} from "react-router"; import {useMutation} from "@tanstack/react-query";
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"; import {NewItem} from "./types.ts";
import {InventoryItem} from "./types.ts";
import {useEffect} from "react";
type EditableInventoryItem = Omit<InventoryItem, 'id'>; function AddItem() {
function EditItem() { const newItemForm = useForm<NewItem>({
const params = useParams();
const editItemForm = useForm<EditableInventoryItem>({
mode: 'uncontrolled', mode: 'uncontrolled',
initialValues: { initialValues: {
name: "", name: "",
brand: "", brand: "",
statusId: "",
status: {name: "", id: ""},
serialNumber: "", serialNumber: "",
rentalPrice: 0, rentalPrice: 0,
replacementCost: 0, replacementCost: 0,
notes: "",
}, },
validate: {}, validate: {},
}); });
const updateItem = useMutation({ const updateItem = useMutation({
mutationFn: async (values: EditableInventoryItem) => { mutationFn: async (values: NewItem) => {
const result = await fetch(import.meta.env.VITE_API_URL + '/inventory' , { const result = await fetch(import.meta.env.VITE_API_URL + '/inventory', {
method: 'POST', method: 'POST',
body: JSON.stringify(values), body: JSON.stringify(values),
headers: { headers: {
@@ -50,41 +39,37 @@ function EditItem() {
return ( return (
<> <>
<form onSubmit={editItemForm.onSubmit(async (values) => await <form onSubmit={newItemForm.onSubmit(async (values) => await
updateItem.mutateAsync(values))}> updateItem.mutateAsync(values))}>
<Container m="lg"> <Container m="lg">
<Flex mih={50} <Flex mih={50}
gap="md" gap="md"
justify="flex-start" justify="flex-start"
align="flex-start" align="flex-start"
direction="column" direction="column"
wrap="wrap"> wrap="wrap">
<Title order={1}>Add Item</Title> <Title order={1}>Add Item</Title>
<TextInput withAsterisk key={editItemForm.key('brand')} size="md" label="Brand" <TextInput withAsterisk key={newItemForm.key('brand')} size="md" label="Brand"
placeholder="Brand" {...editItemForm.getInputProps('brand')}/> placeholder="Brand" {...newItemForm.getInputProps('brand')}/>
<TextInput withAsterisk key={editItemForm.key('name')} size="md" label="Name" <TextInput withAsterisk key={newItemForm.key('name')} size="md" label="Name"
placeholder="Name" {...editItemForm.getInputProps('name')}/> placeholder="Name" {...newItemForm.getInputProps('name')}/>
<TextInput size="md" key={editItemForm.key('statusId')} label="Status" <TextInput size="md" key={newItemForm.key('serialNumber')} label="Serial Number"
placeholder="Status" {...editItemForm.getInputProps('statusId')}/> placeholder="Serial Number"{...newItemForm.getInputProps('serialNumber')}/>
<TextInput size="md" key={editItemForm.key('serialNumber')} label="Serial Number" <NumberInput size="md" key={newItemForm.key('rentalPrice')} label="Rental Price"
placeholder="Serial Number"{...editItemForm.getInputProps('serialNumber')}/> placeholder="Rental Price" {...newItemForm.getInputProps('rentalPrice')}/>
<NumberInput size="md" key={editItemForm.key('rentalPrice')} label="Rental Price" <NumberInput size="md" key={newItemForm.key('replacementCost')} label="Replacement Cost"
placeholder="Rental Price" {...editItemForm.getInputProps('rentalPrice')}/> placeholder="Replacement Cost" {...newItemForm.getInputProps('replacementCost')}/>
<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"> <Group justify="flex-end" mt="md">
<Button type="submit">Submit</Button> <Button type="submit">Submit</Button>
</Group> </Group>
</Flex> </Flex>
</Container> </Container>
</form> </form>
</> </>
); );
} }
export default EditItem; export default AddItem;
+8 -1
View File
@@ -8,5 +8,12 @@ export interface InventoryItem {
rentalPrice: number, rentalPrice: number,
replacementCost: number, replacementCost: number,
notes: string, notes: string,
}
export interface NewItem {
brand: string,
name: string,
serialNumber: string,
rentalPrice: number,
replacementCost: number,
} }