mirror of
https://github.com/BarkProductions/barkman.git
synced 2026-06-13 06:11:55 +00:00
new item works
This commit is contained in:
@@ -1,36 +1,25 @@
|
|||||||
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',
|
||||||
@@ -50,7 +39,7 @@ 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}
|
||||||
@@ -62,20 +51,16 @@ function EditItem() {
|
|||||||
|
|
||||||
<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>
|
||||||
@@ -87,4 +72,4 @@ function EditItem() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default EditItem;
|
export default AddItem;
|
||||||
@@ -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,
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user