add shipments create and form create

amapcontract/shipments/Delete one.bru

@@ -5,7 +5,7 @@ meta {
 }
 
 delete {
-  url: {{Service}}/{{Route}}/2
+  url: {{Service}}/{{Route}}/1
   body: none
   auth: inherit
 }

amapcontract/users/Delete one.bru

@@ -5,7 +5,7 @@ meta {
 }
 
 delete {
-  url: {{Service}}/{{Route}}/2
+  url: {{Service}}/{{Route}}/1
   body: none
   auth: inherit
 }

amapcontract/users/folder.bru

@@ -8,6 +8,6 @@ auth {
 
 vars:pre-request {
   Route: users
-  ExamplePOSTBody: {"name": "test", "email": "test@test.test"}
+  ExamplePOSTBody: {"name": "Julien", "email": "test@test.test"}
   ExamplePUTBody: {"name": "updatedtest", "email": "updatedtest@test.test"}
 }

backend/src/models.py

@@ -104,9 +104,10 @@ class Form(FormBase, table=True):
     id: int | None = Field(default=None, primary_key=True)
     productor: Optional['Productor'] = Relationship()
     referer: Optional['User'] = Relationship()
-    shipments: list["Shipment"] = Relationship()
+    shipments: list["Shipment"] = Relationship(cascade_delete=True)
 
 class FormUpdate(SQLModel):
+    name: str | None
     productor_id: int | None
     referer_id: int | None
     season: str | None
@@ -149,7 +150,7 @@ class ContractCreate(ContractBase):
 class ShipmentBase(SQLModel):
     name: str
     date: datetime.date
-    form_id: int | None = Field(default=None, foreign_key="form.id")
+    form_id: int | None = Field(default=None, foreign_key="form.id", ondelete="CASCADE")
 
 class ShipmentPublic(ShipmentBase):
     id: int
@@ -162,7 +163,7 @@ class Shipment(ShipmentBase, table=True):
 class ShipmentUpdate(SQLModel):
     name: str | None
     date: str | None
-    product_ids: list[int]
+    product_ids: list[int] = []
 
 class ShipmentCreate(ShipmentBase):
     product_ids: list[int] | None

frontend/src/components/CreateShipmentModal/index.tsx

@@ -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>
-    );
-}

frontend/src/components/Forms/FilterForms/index.tsx

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

frontend/src/components/Forms/FormCard/index.tsx

@@ -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>
+    );
+}

frontend/src/components/Forms/FormModal/index.tsx

@@ -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>
+    );
+}

frontend/src/components/ShipmentForm/index.tsx

@@ -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>
+
+    )
+}

frontend/src/pages/Forms/CreateForm/index.tsx

@@ -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>
-    );
-}

frontend/src/pages/Forms/ReadForm/index.tsx

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

frontend/src/pages/Forms/index.tsx

@@ -1,15 +1,26 @@
-import { Stack, Loader, Text, Title, Paper, Group, Badge, ActionIcon, Grid, Flex, Select, MultiSelect, Tooltip } from "@mantine/core";
+import { Stack, Loader, Title, Group, ActionIcon, Flex, Tooltip } from "@mantine/core";
-import { getForms, type Form } from "../../services/api";
+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 location = useLocation();
+    const navigate = useNavigate();
 
-    const { isPending, error, data } = getForms(searchParams);
+    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} 
+                        onClick={(e) => {
-                        to="/forms/create"
+                            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
+                <FormCard form={form} isEdit={isEdit} closeModal={closeModal} handleSubmit={handleEditForm}/>
-                    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>
             ))
             }
             </Flex>

frontend/src/router.tsx

@@ -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 },
     ],
   },
 ]);

frontend/src/services/api.ts

@@ -11,13 +11,8 @@ export type Productor = {
 export type Shipment = {
     name: string;
     date: string;
-    id: number;
+    id?: number;
-}
+    form_id: number;
-
-export type ShipmentCreate = {
-    name: string;
-    date: string;
-    product_ids?: 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'] })
+        }
+    });
 }