This commit is contained in:
2026-07-23 13:34:38 -05:00
parent 85678f5742
commit 10ca133a7a
2 changed files with 35 additions and 28 deletions
+31 -24
View File
@@ -1,4 +1,5 @@
import {Button, Group, TextInput, Container, Title, Flex} from '@mantine/core'; import {Button, Group, TextInput, NumberInput, Container, Title, Flex} from '@mantine/core';
import { DateTimePicker } from '@mantine/dates';
import {useForm} from '@mantine/form'; import {useForm} from '@mantine/form';
import {useMutation} from "@tanstack/react-query"; import {useMutation} from "@tanstack/react-query";
import {NewJob} from "./types.ts"; import {NewJob} from "./types.ts";
@@ -12,25 +13,27 @@ function AddJob() {
const navigate = useNavigate(); const navigate = useNavigate();
const customerQuery = useCustomerList(); const customerQuery = useJobList();
const newJobForm = useForm<NewJob>({ const newJobForm = useForm<NewJob>({
mode: 'uncontrolled', mode: 'uncontrolled',
initialValues: { initialValues: {
customerId: 0,
name: "", name: "",
company: "", startDate: new Date(),
email: "", endDate: new Date(),
phone: "",
address: "", address: "",
venue: "",
notes: "",
}, },
validate: {}, validate: {},
}); });
const updateCustomer = useMutation({ const updateJob = useMutation({
mutationFn: async (values: newJob) => { mutationFn: async (values: NewJob) => {
const result = await fetch(import.meta.env.VITE_API_URL + '/customers', { const result = await fetch(import.meta.env.VITE_API_URL + '/jobs', {
method: 'POST', method: 'POST',
body: JSON.stringify(values), body: JSON.stringify(values),
headers: { headers: {
@@ -43,10 +46,10 @@ function AddJob() {
icon: <IconCheck size={20}/>, icon: <IconCheck size={20}/>,
color: "teal", color: "teal",
title: "All good!", title: "All good!",
message: "Customer Created", message: "Job Created",
position: 'top-center', position: 'top-center',
}); });
navigate("/customers"); navigate("/jobs");
} }
@@ -58,7 +61,7 @@ function AddJob() {
message: "Something went wrong", message: "Something went wrong",
position: 'top-center', position: 'top-center',
}); });
throw new Error('Failed to create customer'); throw new Error('Failed to create job');
} }
}, },
@@ -74,8 +77,8 @@ function AddJob() {
return ( return (
<> <>
<form onSubmit={newCustomerForm.onSubmit(async (values) => await <form onSubmit={newJobForm.onSubmit(async (values) => await
updateCustomer.mutateAsync(values))}> updateJob.mutateAsync(values))}>
<Container m="lg"> <Container m="lg">
<Flex mih={50} <Flex mih={50}
gap="md" gap="md"
@@ -85,16 +88,20 @@ function AddJob() {
wrap="wrap"> wrap="wrap">
<Title order={1}>Add Item</Title> <Title order={1}>Add Item</Title>
<TextInput withAsterisk key={newCustomerForm.key('name')} size="md" label="Name" <NumberInput withAsterisk key={newJobForm.key('customerId')} size="md" label="Customer ID"
placeholder="Name" {...newCustomerForm.getInputProps('name')}/> placeholder="Customer ID" {...newJobForm.getInputProps('customerId')}/>
<TextInput size="md" key={newCustomerForm.key('company')} label="Company" <TextInput withAsterisk key={newJobForm.key('name')} size="md" label="Name"
placeholder="Company"{...newCustomerForm.getInputProps('company')}/> placeholder="Name" {...newJobForm.getInputProps('name')}/>
<TextInput withAsterisk size="md" key={newCustomerForm.key('email')} label="Email" <DateTimePicker withAsterisk key={newJobForm.key('startDate')} size="md" label="Start Date"
placeholder="Email" {...newCustomerForm.getInputProps('email')}/> placeholder="Start Date" {...newJobForm.getInputProps('startDate')}/>
<TextInput size="md" key={newCustomerForm.key('phone')} label="Phone" <DateTimePicker withAsterisk key={newJobForm.key('endDate')} size="md" label="End Date"
placeholder="Phone" {...newCustomerForm.getInputProps('phone')}/> placeholder="End Date" {...newJobForm.getInputProps('endDate')}/>
<TextInput size="md" key={newCustomerForm.key('address')} label="Address" <TextInput size="md" key={newJobForm.key('address')} label="Address"
placeholder="Address" {...newCustomerForm.getInputProps('address')}/> placeholder="Address" {...newJobForm.getInputProps('address')}/>
<TextInput size="md" key={newJobForm.key('venue')} label="Venue"
placeholder="Venue"{...newJobForm.getInputProps('venue')}/>
<TextInput size="md" key={newJobForm.key('notes')} label="Notes"
placeholder="Notes" {...newJobForm.getInputProps('notes')}/>
<Group justify="flex-end" mt="md"> <Group justify="flex-end" mt="md">
<Button type="submit">Submit</Button> <Button type="submit">Submit</Button>
@@ -106,4 +113,4 @@ function AddJob() {
); );
} }
export default AddCustomer; export default AddJob;
+4 -4
View File
@@ -7,8 +7,8 @@ export interface Job {
startDate: Date; startDate: Date;
endDate: Date; endDate: Date;
totalPrice: string, totalPrice: string,
venue: number, venue: string,
address: number, address: string,
notes: string, notes: string,
} }
@@ -17,7 +17,7 @@ export interface NewJob {
name: string, name: string,
startDate: Date; startDate: Date;
endDate: Date; endDate: Date;
venue: number, venue: string,
address: number, address: string,
notes: string, notes: string,
} }