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

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

44
frontend/src/pages/Forms/FilterForms/index.tsx
View File

@@ -1,44 +0,0 @@
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>
);
}

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>