[WIP] front api exchanges

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

@@ -0,0 +1,154 @@
+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/FilterForms/index.tsx

@@ -0,0 +1,44 @@
+import { Group, MultiSelect } from "@mantine/core";
+import { t } from "../../../config/i18n";
+import { useMemo } from "react";
+
+export type FilterFormsProps = {
+    seasons: string[];
+    productors: string[];
+    filters: URLSearchParams;
+    onFilterChange: (values: string[], filter: string) => void;
+}
+
+export function FilterForms({seasons, productors, filters, onFilterChange}: FilterFormsProps) {
+    const defaultProductors = useMemo(() => {
+        return filters.getAll("productors")
+    }, [filters]);
+    const defaultSeasons = useMemo(() => {
+        return filters.getAll("seasons")
+    }, [filters]);
+    
+    return (
+        <Group>
+            <MultiSelect
+                aria-label={t("Filter by season")}
+                placeholder={t("Filter by season")}
+                data={seasons}
+                defaultValue={defaultSeasons}
+                onChange={(values: string[]) => {
+                    onFilterChange(values, 'seasons')
+                }}
+                clearable
+            />
+            <MultiSelect
+                aria-label={t("Filter by productor")}
+                placeholder={t("Filter by productor")}
+                data={productors}
+                defaultValue={defaultProductors}
+                onChange={(values: string[]) => {
+                    onFilterChange(values, 'productors')
+                }}
+                clearable
+            />
+        </Group>
+    );
+}

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

@@ -1,10 +1,10 @@
 import { Flex, Grid, Select, Stack, Text, TextInput, Title } from "@mantine/core";
-import { t } from "../../config/i18n";
 import { IconUser } from "@tabler/icons-react";
-import ShipmentCard from "../../components/ShipmentCard";
-import { getForm } from "../../services/api";
+import { getForm } from "../../../services/api";
+import { t } from "../../../config/i18n";
+import ShipmentCard from "../../../components/ShipmentCard";
 
-export function ContractForm() {
+export function ReadForm() {
     const { isPending, error, data } = getForm(1);
     console.log(isPending, error, data);
     return (
@@ -14,7 +14,7 @@ export function ContractForm() {
             align={"flex-start"}
             direction={"column"}
         >
-            <Stack>
+            {/* <Stack>
                 <Title>{t("form contract")}</Title>
                 <Text>{t("contract description that is rather long to show how text will be displayed even with unnecessary elements like this end of sentence")}</Text>
             </Stack>
@@ -73,7 +73,7 @@ export function ContractForm() {
                         unit: "piece"
                     }}
                 />
-            </Stack>
+            </Stack> */}
         </Flex>
     );
 }

frontend/src/pages/Forms/index.tsx

@@ -0,0 +1,92 @@
+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 { t } from "../../config/i18n";
+import { Link, useSearchParams } from "react-router";
+import { IconPlus } from "@tabler/icons-react";
+import { useCallback, useMemo } from "react";
+import { FilterForms } from "./FilterForms";
+
+export function Forms() {
+    const [ searchParams, setSearchParams ] = useSearchParams();
+    
+    const { isPending, error, data } = getForms(searchParams);
+    const { data: allForms } = getForms();
+
+    const seasons = useMemo(() => {
+        return allForms?.map((form: Form) => (form.season))
+            .filter((season, index, array) => array.indexOf(season) === index)
+    }, [allForms])
+ 
+    const productors = useMemo(() => {
+        return allForms?.map((form: Form) => (form.productor.name))
+            .filter((productor, index, array) => array.indexOf(productor) === index)
+    }, [allForms])
+
+    const onFilterChange = useCallback((values: string[], filter: string) => {
+        setSearchParams(prev => {
+            const params = new URLSearchParams(prev);
+            params.delete(filter)
+            
+            values.forEach(value => {
+                params.append(filter, value);
+            });
+
+            return params;
+        });
+    }, [searchParams, setSearchParams])
+
+    if (!data || isPending)
+        return (<Loader color="blue"/>);
+
+    return (
+        <Stack w={{base: "100%", sm: "50%", 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"
+                    >
+                        <IconPlus/>
+                    </ActionIcon>
+                </Tooltip>
+            </Group>
+            <FilterForms
+                productors={productors || []}
+                seasons={seasons || []}
+                filters={searchParams}
+                onFilterChange={onFilterChange}
+            />
+            <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>
+            ))
+            }
+            </Flex>
+        </Stack>
+    );
+}