Mop/amap
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add shipments create and form create

Browse Source
This commit is contained in:
Julien Aldon
2026-02-11 17:35:28 +01:00
parent 3b2b36839f
commit 1813e2893e
14 changed files with 539 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/components/CreateShipmentModal/index.tsx
View File

@@ -1,56 +0,0 @@
import { Button, Group, Loader, Modal, Text, TextInput, Title, type ModalBaseProps } from "@mantine/core";
import { t } from "../../config/i18n";
import { useForm } from "@mantine/form";
import { IconCancel, IconPlus } from "@tabler/icons-react";
import { DatePickerInput } from "@mantine/dates";
import { createShipment, type ShipmentCreate } from "../../services/api";
import { useEffect } from "react";
export function CreateShipmentModal({opened, onClose}: ModalBaseProps) {
const form = useForm<ShipmentCreate>();
const mutation = createShipment();
return (
<Modal
size="50%"
opened={opened}
onClose={onClose}
title={t("create shipment")}
>
<Title order={4}>{t("informations")}</Title>
<TextInput
label={t("shipment name")}
placeholder={t("shipment name")}
radius="sm"
withAsterisk
{...form.getInputProps('name')}
/>
<DatePickerInput
label={t("shipment date")}
placeholder={t("shipment date")}
radius="sm"
withAsterisk
{...form.getInputProps('date')}
/>
{mutation.isError ? <Text>{t("an error occured")}:{mutation.error.message}</Text> : null}
{mutation.isSuccess ? <Text>{t("success")}</Text> : null}
<Group mt="sm" justify="space-between">
<Button
variant="filled"
color="red"
aria-label={t("cancel")}
leftSection={<IconCancel/>}
onClick={onClose}
>{t("cancel")}</Button>
<Button
variant="filled"
aria-label={t("create shipment")}
leftSection={mutation.isPending ? <Loader/> : <IconPlus/>}
onClick={() => {
mutation.mutate({...form.getValues(), product_ids: []});
}}
>{t("create shipment")}</Button>
</Group>
</Modal>
);
}

8
frontend/src/pages/Forms/FilterForms/index.tsx → frontend/src/components/Forms/FilterForms/index.tsx
View File

@@ -20,8 +20,8 @@ export function FilterForms({seasons, productors, filters, onFilterChange}: Filt
return (
<Group>
<MultiSelect
aria-label={t("Filter by season")}
placeholder={t("Filter by season")}
aria-label={t("filter by season")}
placeholder={t("filter by season")}
data={seasons}
defaultValue={defaultSeasons}
onChange={(values: string[]) => {
@@ -30,8 +30,8 @@ export function FilterForms({seasons, productors, filters, onFilterChange}: Filt
clearable
/>
<MultiSelect
aria-label={t("Filter by productor")}
placeholder={t("Filter by productor")}
aria-label={t("filter by productor")}
placeholder={t("filter by productor")}
data={productors}
defaultValue={defaultProductors}
onChange={(values: string[]) => {

77
frontend/src/components/Forms/FormCard/index.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { ActionIcon, Badge, Box, Group, Paper, Text, Title } from "@mantine/core";
import { Link, useNavigate } from "react-router";
import { deleteForm, getForm, type Form, type Shipment } from "../../../services/api";
import { IconEdit, IconX } from "@tabler/icons-react";
import { t } from "../../../config/i18n";
import FormModal, { type FormInputs } from "../FormModal";
export type FormCardProps = {
form: Form;
isEdit: boolean;
closeModal: () => void;
handleSubmit: (form: FormInputs, id?: number) => void;
}
export default function FormCard({form, isEdit, closeModal, handleSubmit}: FormCardProps) {
const deleteMutation = deleteForm();
const navigate = useNavigate();
const {data: currentForm, isPending} = getForm(form.id);
return (
<Paper
key={form.id}
shadow="xl"
p="xl"
miw={{base: "100vw", md: "25vw", lg:"20vw"}}
>
{/* TODO: Show only to logged users */}
<FormModal
opened={isEdit}
onClose={closeModal}
currentForm={currentForm}
handleSubmit={handleSubmit}
/>
<Group justify="space-between" mb="sm">
<ActionIcon
size={"sm"}
aria-label={t("edit form")}
onClick={(e) => {
e.stopPropagation();
navigate(`/form/${form.id}/edit`);
}}
>
<IconEdit/>
</ActionIcon>
<ActionIcon
size={"sm"}
aria-label={t("delete form")}
color="red"
onClick={() => {
deleteMutation.mutate(form.id);
}}
>
<IconX/>
</ActionIcon>
</Group>
<Box
component={Link}
to={`/form/${form.id}`}
>
<Group justify="space-between" wrap="nowrap">
<Title
order={3}
textWrap="wrap"
lineClamp={1}
>
{form.name}
</Title>
<Badge>{form.season}</Badge>
</Group>
<Group justify="space-between">
<Text>{form.productor.name}</Text>
<Text>{form.referer.name}</Text>
</Group>
</Box>
</Paper>
);
}

201
frontend/src/components/Forms/FormModal/index.tsx Normal file
View File

@@ -0,0 +1,201 @@
import { ActionIcon, Button, Collapse, Group, Modal, NumberInput, Select, TextInput, type ModalBaseProps } from "@mantine/core";
import { t } from "../../../config/i18n";
import { DatePickerInput } from "@mantine/dates";
import { IconCancel, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
import { getProductors, getUsers, type Form, type Shipment } from "../../../services/api";
import { useForm } from "@mantine/form";
import { useCallback, useEffect, useMemo } from "react";
import { useDisclosure } from "@mantine/hooks";
import ShipmentForm from "../../ShipmentForm";
export type FormInputs = {
name: string;
season: string;
start: string | null;
end: string | null;
productor_id: string;
referer_id: string;
shipments: ShipmentInputs[];
}
export type ShipmentInputs = {
name: string | null;
date: string | null;
id: number | null;
form_id: number | null;
}
export type FormModalProps = ModalBaseProps & {
currentForm?: Form;
handleSubmit: (form: FormInputs, id?: number) => void;
}
export default function FormModal({opened, onClose, currentForm, handleSubmit}: FormModalProps) {
const {data: productors} = getProductors();
const {data: users} = getUsers();
const form = useForm<FormInputs>({
initialValues: {
name: "",
season: "",
start: null,
end: null,
productor_id: "",
referer_id: "",
shipments: [],
}
});
useEffect(() => {
if (currentForm) {
form.initialize({
...currentForm,
start: currentForm.start || null,
end: currentForm.end || null,
shipments: currentForm.shipments || [],
productor_id: String(currentForm.productor.id),
referer_id: String(currentForm.referer.id)
});
}
}, [currentForm]);
const usersSelect = useMemo(() => {
return users?.map(user => ({value: String(user.id), label: `${user.name}`}))
}, [users])
const productorsSelect = useMemo(() => {
return productors?.map(prod => ({value: String(prod.id), label: `${prod.name}`}))
}, [productors])
const [openedShipents, { toggle: toggleShipments }] = useDisclosure(true);
const editShipmentElement = useCallback((index: number, shipment: ShipmentInputs) => {
form.setFieldValue('shipments', (prev) => {
return prev.map((elem, id) => {
if (id === index)
return {...shipment}
return elem;
})
});
}, [form])
const deleteShipmentElement = useCallback((index: number) => {
form.setFieldValue('shipments', (prev) => {
return prev.filter((_, i) => i === index)
});
}, [form])
return (
<Modal
opened={opened}
onClose={onClose}
title={currentForm ? t("edit form") : t('create form')}
>
<TextInput
label={t("form name")}
placeholder={t("form name")}
radius="sm"
withAsterisk
{...form.getInputProps('name')}
/>
<TextInput
label={t("contact season")}
placeholder={t("contact season")}
radius="sm"
withAsterisk
{...form.getInputProps('season')}
/>
<DatePickerInput
label={t("start date")}
placeholder={t("start date")}
withAsterisk
{...form.getInputProps('start')}
/>
<DatePickerInput
label={t("end date")}
placeholder={t("end date")}
withAsterisk
{...form.getInputProps('end')}
/>
<Select
label={t("referer")}
placeholder={t("referer")}
nothingFoundMessage={t("nothing found")}
withAsterisk
clearable
allowDeselect
searchable
data={usersSelect || []}
{...form.getInputProps('referer_id')}
/>
<Select
label={t("productor")}
placeholder={t("productor")}
nothingFoundMessage={t("nothing found")}
withAsterisk
clearable
allowDeselect
searchable
data={productorsSelect || []}
{...form.getInputProps('productor_id')}
/>
<Group align="end">
<NumberInput
label={t("number of shipment")}
placeholder={t("number of shipment")}
radius="sm"
withAsterisk
flex="2"
value={form.getValues().shipments.length}
defaultValue={form.getValues().shipments.length}
onChange={(value: number | string) => {
const target = Number(value);
form.setFieldValue('shipments', (prev) => {
const itemsToAdd = Array.from(
{length: target - prev.length},
() => ({name: "", date: "", form_id: null, id: null})
);
return (
target > prev.length ?
[...prev, ...itemsToAdd] :
prev.slice(0, target)
);
})
}}
/>
<ActionIcon onClick={toggleShipments} disabled={form.getValues().shipments.length === 0}>
{openedShipents ? <IconChevronUp/> : <IconChevronDown/>}
</ActionIcon>
</Group>
<Collapse in={openedShipents}>
{
form.getValues().shipments.map((value, index) =>
<ShipmentForm
key={index}
index={index}
setShipmentElement={editShipmentElement}
deleteShipmentElement={deleteShipmentElement}
shipment={value}
/>
)
}
</Collapse>
<Group mt="sm" justify="space-between">
<Button
variant="filled"
color="red"
aria-label={t("cancel")}
leftSection={<IconCancel/>}
onClick={() => {
form.reset();
onClose();
}}
>{t("cancel")}</Button>
<Button
variant="filled"
aria-label={currentForm ? t("edit form") : t('create form')}
onClick={() => handleSubmit(form.getValues(), currentForm?.id)}
>{currentForm ? t("edit form") : t('create form')}</Button>
</Group>
</Modal>
);
}

63
frontend/src/components/ShipmentForm/index.tsx Normal file
View File

@@ -0,0 +1,63 @@
import { ActionIcon, Group, TextInput, Tooltip } from "@mantine/core";
import { DatePickerInput } from "@mantine/dates";
import { t } from "../../config/i18n";
import type { Shipment } from "../../services/api";
import { IconX } from "@tabler/icons-react";
import type { ShipmentInputs } from "../Forms/FormModal";
export type ShipmentFormProps = {
index: number;
setShipmentElement: (index: number, shipment: ShipmentInputs) => void;
deleteShipmentElement: (index: number) => void;
shipment: ShipmentInputs;
}
export default function ShipmentForm({
index,
setShipmentElement,
deleteShipmentElement,
shipment
}: ShipmentFormProps) {
return (
<Group justify="space-between" key={`shipment_${index}`}>
<Group grow maw="80%">
<TextInput
label={t("shipment name")}
placeholder={t("shipment name")}
radius="sm"
withAsterisk
value={shipment.name || ""}
onChange={(event) => {
const value = event.target.value;
setShipmentElement(index, {...shipment, name: value})
}}
/>
<DatePickerInput
label={t("shipment date")}
placeholder={t("shipment date")}
radius="sm"
withAsterisk
value={shipment.date}
onChange={(event) => {
const value = event || "";
setShipmentElement(index, {...shipment, date: value})
}}
/>
</Group>
<Tooltip label={t("remove shipment")}>
<ActionIcon
flex={{base: "1", md: "0"}}
style={{alignSelf: "flex-end"}}
color="red"
aria-label={t("remove shipment")}
onClick={() => {
deleteShipmentElement(index)
}}
>
<IconX/>
</ActionIcon>
</Tooltip>
</Group>
)
}

154
frontend/src/pages/Forms/CreateForm/index.tsx
View File

@@ -1,154 +0,0 @@
import { ActionIcon, Button, Group, Loader, Modal, MultiSelect, Select, Stack, Text, TextInput, Title, Tooltip } from "@mantine/core";
import { t } from "../../../config/i18n";
import { DatePickerInput } from "@mantine/dates";
import { useForm } from "@mantine/form";
import { IconCancel, IconPlus } from "@tabler/icons-react";
import { CreateProductorModal } from "../../../components/CreateProductorModal";
import { useDisclosure } from "@mantine/hooks";
import { CreateShipmentModal } from "../../../components/CreateShipmentModal";
import { createForm, getProductors, getShipments, getUsers, type FormCreate } from "../../../services/api";
import { useEffect, useMemo } from "react";
import { useNavigate } from "react-router";
export function CreateForms() {
const form = useForm<FormCreate>()
const navigate = useNavigate()
const [openedProductor, { open: openProductor, close: closeProductor }] = useDisclosure(false);
const [openedShipent, { open: openShipment, close: closeShipment }] = useDisclosure(false);
const {data: shipments} = getShipments();
const {data: productors} = getProductors();
const {data: users} = getUsers();
const mutation = createForm();
const usersSelect = useMemo(() => {
return users?.map(user => ({value: String(user.id), label: `${user.name}`}))
}, [users])
const productorsSelect = useMemo(() => {
return productors?.map(prod => ({value: String(prod.id), label: `${prod.name}`}))
}, [productors])
const shipmentsSelect = useMemo(() => {
return shipments?.map(ship => ({value: String(ship.id), label: `${ship.name} ${ship.date}`}))
}, [shipments])
if (mutation.isSuccess)
navigate('/forms')
return (
<Stack w={{base: "100%", sm: "50%", lg: "60%"}}>
<Title order={2}>{t("create form")}</Title>
<TextInput
label={t("form name")}
placeholder={t("form name")}
radius="sm"
withAsterisk
{...form.getInputProps('name')}
/>
<TextInput
label={t("contact season")}
placeholder={t("contact season")}
radius="sm"
withAsterisk
{...form.getInputProps('season')}
/>
<DatePickerInput
label={t("start date")}
placeholder={t("start date")}
withAsterisk
{...form.getInputProps('start')}
/>
<DatePickerInput
label={t("end date")}
placeholder={t("end date")}
withAsterisk
{...form.getInputProps('end')}
/>
<Group>
<Select
label={t("referer")}
placeholder={t("referer")}
nothingFoundMessage={t("nothing found")}
withAsterisk
clearable
allowDeselect
searchable
data={usersSelect || []}
{...form.getInputProps('referer_id')}
/>
</Group>
<Group>
<Select
label={t("productor")}
placeholder={t("productor")}
nothingFoundMessage={t("nothing found")}
withAsterisk
clearable
allowDeselect
searchable
data={productorsSelect || []}
{...form.getInputProps('productor_id')}
/>
<Tooltip label={t("create new productor")}>
<ActionIcon
onClick={openProductor}
aria-label={t("create new productor")}
>
<IconPlus/>
</ActionIcon>
</Tooltip>
<CreateProductorModal
opened={openedProductor}
onClose={closeProductor}
/>
</Group>
<Group>
<MultiSelect
label={t("shipment")}
placeholder={t("shipment")}
nothingFoundMessage={t("nothing found")}
withAsterisk
clearable
searchable
data={shipmentsSelect || []}
{...form.getInputProps('shipment')}
/>
<Tooltip label={t("create new shipment")}>
<ActionIcon
onClick={openShipment}
aria-label={t("create new shipment")}
>
<IconPlus/>
</ActionIcon>
</Tooltip>
<CreateShipmentModal
opened={openedShipent}
onClose={closeShipment}
/>
</Group>
{mutation.isError ? <Text>{t("an error occured")}:{mutation.error.message}</Text> : null}
{mutation.isSuccess ? <Text>{t("success")}</Text> : null}
<Group mt="sm" justify="space-between">
<Button
variant="filled"
color="red"
aria-label={t("cancel")}
leftSection={<IconCancel/>}
onClick={() => {
console.log(form.getValues())
}}
>{t("cancel")}</Button>
<Button
variant="filled"
aria-label={t("create form")}
leftSection={mutation.isPending ? <Loader/> : <IconPlus/>}
onClick={() => {
mutation.mutate(form.getValues());
}}
>{t("create form")}</Button>
</Group>
</Stack>
);
}

4
frontend/src/pages/Forms/ReadForm/index.tsx
View File

@@ -5,8 +5,8 @@ import { t } from "../../../config/i18n";
import ShipmentCard from "../../../components/ShipmentCard";
export function ReadForm() {
const { isPending, error, data } = getForm(1);
console.log(isPending, error, data);
// const { isPending, error, data } = getForm(1);
// console.log(isPending, error, data);
return (
<Flex
w={{base: "100%", sm: "50%", lg: "60%"}}

127
frontend/src/pages/Forms/index.tsx
View File

@@ -1,15 +1,26 @@
import { Stack, Loader, Text, Title, Paper, Group, Badge, ActionIcon, Grid, Flex, Select, MultiSelect, Tooltip } from "@mantine/core";
import { getForms, type Form } from "../../services/api";
import { Stack, Loader, Title, Group, ActionIcon, Flex, Tooltip } from "@mantine/core";
import { createForm, createShipment, editForm, editShipment, getForms, type Form } from "../../services/api";
import { t } from "../../config/i18n";
import { Link, useSearchParams } from "react-router";
import { useLocation, useNavigate, useSearchParams } from "react-router";
import { IconPlus } from "@tabler/icons-react";
import { useCallback, useMemo } from "react";
import { FilterForms } from "./FilterForms";
import { FilterForms } from "../../components/Forms/FilterForms";
import FormCard from "../../components/Forms/FormCard";
import FormModal, { type FormInputs, type ShipmentInputs } from "../../components/Forms/FormModal";
export function Forms() {
const [ searchParams, setSearchParams ] = useSearchParams();
const { isPending, error, data } = getForms(searchParams);
const location = useLocation();
const navigate = useNavigate();
const isCreate = location.pathname === "/form/create";
const isEdit = location.pathname.includes("/edit");
const closeModal = () => {
navigate("/forms");
};
const { isPending, data } = getForms(searchParams);
const { data: allForms } = getForms();
const seasons = useMemo(() => {
@@ -22,6 +33,77 @@ export function Forms() {
.filter((productor, index, array) => array.indexOf(productor) === index)
}, [allForms])
const createFormMutation = createForm();
const editFormMutation = editForm();
const createShipmentsMutation = createShipment();
const editShipmentsMutation = editShipment();
const handleCreateForm = useCallback(async (form: FormInputs) => {
if (!form.start || !form.end)
return;
const newForm = await createFormMutation.mutateAsync({
...form,
shipment_ids: [],
start: form?.start,
end: form?.start,
productor_id: Number(form.productor_id),
referer_id: Number(form.referer_id)
});
form.shipments.map(async (shipment: ShipmentInputs) => {
if (!shipment.name || !shipment.date)
return
const newShipment = {
name: shipment.name,
date: shipment.date,
}
return await createShipmentsMutation.mutateAsync(
{...newShipment, form_id: newForm.id}
);
});
closeModal();
}, []);
const handleEditForm = useCallback(async (form: FormInputs, id?: number) => {
if (!id)
return;
// edit all existing shipments
// edit form
form.shipments.filter(el => el.id).map(async (shipment) => {
if (!shipment.name || !shipment.date || !shipment.form_id || !shipment.id)
return
const newShipment = {
name: shipment.name,
date: shipment.date,
form_id: shipment.form_id,
}
await editShipmentsMutation.mutate({id: shipment.id, shipment: newShipment})
});
const newForm = await editFormMutation.mutateAsync({
id: id,
form: {
...form,
shipment_ids: [],
start: form.start,
end: form.start,
productor_id: Number(form.productor_id),
referer_id: Number(form.referer_id)
}
});
// if shipments to add -> create shipments
form.shipments.filter(el => el.id === null).map(async (shipment) => {
if (!shipment.name || !shipment.date)
return
const newShipment = {
name: shipment.name,
date: shipment.date,
}
return await createShipmentsMutation.mutateAsync(
{...newShipment, form_id: newForm.id}
);
});
closeModal();
}, []);
const onFilterChange = useCallback((values: string[], filter: string) => {
setSearchParams(prev => {
const params = new URLSearchParams(prev);
@@ -39,18 +121,21 @@ export function Forms() {
return (<Loader color="blue"/>);
return (
<Stack w={{base: "100%", sm: "50%", lg: "60%"}}>
<Stack w={{base: "100%", sm: "60%", lg: "60%"}}>
<Group justify="space-between">
<Title order={1}>{t("All forms")}</Title>
<Tooltip label={t("create new form")}>
<ActionIcon
size="xl"
component={Link}
to="/forms/create"
onClick={(e) => {
e.stopPropagation();
navigate(`/form/create`);
}}
>
<IconPlus/>
</ActionIcon>
</Tooltip>
<FormModal opened={isCreate} onClose={closeModal} handleSubmit={handleCreateForm}/>
</Group>
<FilterForms
productors={productors || []}
@@ -61,29 +146,7 @@ export function Forms() {
<Flex gap="md" wrap="wrap" justify="center">
{
data?.map((form: Form) => (
<Paper
key={form.id}
shadow="xl"
p="xl"
maw={{base: "100vw", md: "30vw", lg:"15vw"}}
component={Link}
to={`/form/${form.id}`}
>
<Group justify="space-between" wrap="nowrap">
<Title
order={3}
textWrap="wrap"
lineClamp={1}
>
{form.name}
</Title>
<Badge>{form.season}</Badge>
</Group>
<Group justify="space-between">
<Text>{form.productor.name}</Text>
<Text>{form.referer.name}</Text>
</Group>
</Paper>
<FormCard form={form} isEdit={isEdit} closeModal={closeModal} handleSubmit={handleEditForm}/>
))
}
</Flex>

4
frontend/src/router.tsx
View File

@@ -6,7 +6,6 @@ import Root from "./root";
import { Home } from "./pages/Home";
import { Forms } from "./pages/Forms";
import { ReadForm } from "./pages/Forms/ReadForm"
import { CreateForms } from "./pages/Forms/CreateForm";
// import { CreateForms } from "./pages/Forms/CreateForm";
export const router = createBrowserRouter([
@@ -17,8 +16,9 @@ export const router = createBrowserRouter([
children: [
{ index: true, Component: Home },
{ path: "/forms", Component: Forms },
{ path: "/forms/create", Component: CreateForms },
{ path: "/form/:id", Component: ReadForm },
{ path: "/form/:id/edit", Component: Forms },
{ path: "/form/create", Component: Forms },
],
},
]);

104
frontend/src/services/api.ts
View File

@@ -11,13 +11,8 @@ export type Productor = {
export type Shipment = {
name: string;
date: string;
id: number;
}
export type ShipmentCreate = {
name: string;
date: string;
product_ids?: number[];
id?: number;
form_id: number;
}
export type Form = {
@@ -38,7 +33,17 @@ export type FormCreate = {
end: string;
productor_id: number;
referer_id: number;
shipments: Shipment[];
shipment_ids: Shipment[];
}
export type FormEdit = {
name?: string | null;
season?: string | null;
start?: string | null;
end?: string | null;
productor_id?: number | null;
referer_id?: number | null;
shipment_ids: Shipment[];
}
export type Product = {
@@ -63,7 +68,8 @@ export function getForm(id: number): UseQueryResult<Form, Error> {
return useQuery<Form>({
queryKey: ['form'],
queryFn: () => (
fetch(`${Config.backend_uri}/forms/${id}`).then((res) => res.json())
fetch(`${Config.backend_uri}/forms/${id}`)
.then((res) => res.json())
),
});
}
@@ -114,14 +120,39 @@ export function createShipment() {
const queryClient = useQueryClient()
return useMutation({
mutationFn: (newShipment: ShipmentCreate) => {
mutationFn: (newShipment: Shipment) => {
return fetch(`${Config.backend_uri}/shipments`, {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(newShipment),
});
// TODO change product ids hardcode here
body: JSON.stringify({...newShipment, product_ids: []}),
}).then((res) => res.json());
},
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ['shipments'] })
}
})
}
export type ShipmentEditPayload = {
id: number;
shipment: Shipment;
}
export function editShipment() {
const queryClient = useQueryClient()
return useMutation({
mutationFn: ({id, shipment}: ShipmentEditPayload) => {
return fetch(`${Config.backend_uri}/shipments/${id}`, {
method: 'PUT',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({...shipment}),
}).then((res) => res.json());
},
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ['shipments'] })
@@ -140,7 +171,7 @@ export function createProductor() {
"Content-Type": "application/json"
},
body: JSON.stringify(newProductor),
});
}).then((res) => res.json());
},
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ['productors'] })
@@ -159,10 +190,51 @@ export function createForm() {
"Content-Type": "application/json"
},
body: JSON.stringify(newForm),
});
}).then((res) => res.json());
},
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ['forms'] })
}
})
}
});
}
export function deleteForm() {
const queryClient = useQueryClient()
return useMutation({
mutationFn: (id: number) => {
return fetch(`${Config.backend_uri}/forms/${id}`, {
method: 'DELETE',
headers: {
"Content-Type": "application/json"
},
}).then((res) => res.json());
},
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ['forms'] })
}
});
}
export type FormEditPayload = {
id: number;
form: FormEdit;
}
export function editForm() {
const queryClient = useQueryClient()
return useMutation({
mutationFn: ({id, form}: FormEditPayload) => {
return fetch(`${Config.backend_uri}/forms/${id}`, {
method: 'PUT',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(form),
}).then((res) => res.json());
},
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ['forms'] })
}
});
}