add shipments create and form create
This commit is contained in:
@@ -5,7 +5,7 @@ meta {
|
||||
}
|
||||
|
||||
delete {
|
||||
url: {{Service}}/{{Route}}/2
|
||||
url: {{Service}}/{{Route}}/1
|
||||
body: none
|
||||
auth: inherit
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ meta {
|
||||
}
|
||||
|
||||
delete {
|
||||
url: {{Service}}/{{Route}}/2
|
||||
url: {{Service}}/{{Route}}/1
|
||||
body: none
|
||||
auth: inherit
|
||||
}
|
||||
|
||||
@@ -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"}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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
77
frontend/src/components/Forms/FormCard/index.tsx
Normal 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
201
frontend/src/components/Forms/FormModal/index.tsx
Normal 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
63
frontend/src/components/ShipmentForm/index.tsx
Normal 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>
|
||||
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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%"}}
|
||||
|
||||
@@ -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 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}
|
||||
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>
|
||||
|
||||
@@ -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 },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -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'] })
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user