changed order to job - updated model,

2026-08-11 11:42:03 +00:00 · 2026-07-22 19:49:24 -05:00
parent c2c48b4cb1
commit ddd90aa5a5
5 changed files with 611 additions and 32 deletions
@@ -0,0 +1,109 @@
+import {Button, Group, TextInput, Container, Title, Flex} from '@mantine/core';
+import {useForm} from '@mantine/form';
+import {useMutation} from "@tanstack/react-query";
+import {NewJob} from "./types.ts";
+import {useNavigate} from "react-router";
+import {IconX, IconCheck} from '@tabler/icons-react';
+import {notifications} from '@mantine/notifications';
+import useJobList from "./hooks/useJobList.tsx";
+
+
+function AddJob() {
+
+    const navigate = useNavigate();
+
+    const customerQuery = useCustomerList();
+
+    const newJobForm = useForm<NewJob>({
+        mode: 'uncontrolled',
+        initialValues: {
+            name: "",
+            company: "",
+            email: "",
+            phone: "",
+            address: "",
+        },
+
+        validate: {},
+    });
+
+    const updateCustomer = useMutation({
+        mutationFn: async (values: newJob) => {
+
+            const result = await fetch(import.meta.env.VITE_API_URL + '/customers', {
+                method: 'POST',
+                body: JSON.stringify(values),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            if (result.ok) {
+                notifications.show({
+                    icon: <IconCheck size={20}/>,
+                    color: "teal",
+                    title: "All good!",
+                    message: "Customer Created",
+                    position: 'top-center',
+                });
+                navigate("/customers");
+
+            }
+
+            if (!result.ok) {
+                notifications.show({
+                    icon: <IconX size={20}/>,
+                    color: "red",
+                    title: "Bummer!",
+                    message: "Something went wrong",
+                    position: 'top-center',
+                });
+                throw new Error('Failed to create customer');
+            }
+
+        },
+
+
+    })
+
+    if (customerQuery.isPending) return 'Loading...'
+    if (customerQuery.error) return 'An error has occurred: ' + customerQuery.error.message
+
+
+
+
+    return (
+        <>
+            <form onSubmit={newCustomerForm.onSubmit(async (values) => await
+                updateCustomer.mutateAsync(values))}>
+                <Container m="lg">
+                    <Flex mih={50}
+                          gap="md"
+                          justify="flex-start"
+                          align="flex-start"
+                          direction="column"
+                          wrap="wrap">
+
+                        <Title order={1}>Add Item</Title>
+                        <TextInput withAsterisk key={newCustomerForm.key('name')} size="md" label="Name"
+                                   placeholder="Name" {...newCustomerForm.getInputProps('name')}/>
+                        <TextInput size="md" key={newCustomerForm.key('company')} label="Company"
+                                   placeholder="Company"{...newCustomerForm.getInputProps('company')}/>
+                        <TextInput withAsterisk size="md" key={newCustomerForm.key('email')} label="Email"
+                                     placeholder="Email" {...newCustomerForm.getInputProps('email')}/>
+                        <TextInput size="md" key={newCustomerForm.key('phone')} label="Phone"
+                                     placeholder="Phone" {...newCustomerForm.getInputProps('phone')}/>
+                        <TextInput size="md" key={newCustomerForm.key('address')} label="Address"
+                                     placeholder="Address" {...newCustomerForm.getInputProps('address')}/>
+
+                        <Group justify="flex-end" mt="md">
+                            <Button type="submit">Submit</Button>
+                        </Group>
+                    </Flex>
+                </Container>
+            </form>
+        </>
+    );
+}
+
+export default AddCustomer;