add i18n, products, productors and forms as tables
This commit is contained in:
216
frontend/src/components/Forms/Modal/index.tsx
Normal file
216
frontend/src/components/Forms/Modal/index.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
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 } from "@/services/api";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { useCallback, useEffect, useMemo } from "react";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import type { Form, FormInputs } from "@/services/resources/forms";
|
||||
import type { ShipmentInputs } from "@/services/resources/shipments";
|
||||
import ShipmentForm from "@/components/Shipments/Form";
|
||||
|
||||
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: [],
|
||||
},
|
||||
validate: {
|
||||
name: (value) =>
|
||||
!value ? `${t("a name", {capfirst: true})} ${t('is required')}` : null,
|
||||
season: (value) =>
|
||||
!value ? `${t("a season", {capfirst: true})} ${t('is required')}` : null,
|
||||
start: (value) =>
|
||||
!value ? `${t("a start date", {capfirst: true})} ${t('is required')}` : null,
|
||||
end: (value) =>
|
||||
!value ? `${t("a end date", {capfirst: true})} ${t('is required')}` : null,
|
||||
productor_id: (value) =>
|
||||
!value ? `${t("a productor", {capfirst: true})} ${t('is required')}` : null,
|
||||
referer_id: (value) =>
|
||||
!value ? `${t("a referer", {capfirst: true})} ${t('is required')}` : null
|
||||
}
|
||||
});
|
||||
|
||||
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", {capfirst: true})}
|
||||
placeholder={t("form name", {capfirst: true})}
|
||||
radius="sm"
|
||||
withAsterisk
|
||||
{...form.getInputProps('name')}
|
||||
/>
|
||||
<TextInput
|
||||
label={t("contact season", {capfirst: true})}
|
||||
placeholder={t("contact season", {capfirst: true})}
|
||||
radius="sm"
|
||||
withAsterisk
|
||||
{...form.getInputProps('season')}
|
||||
/>
|
||||
<DatePickerInput
|
||||
label={t("start date", {capfirst: true})}
|
||||
placeholder={t("start date", {capfirst: true})}
|
||||
withAsterisk
|
||||
{...form.getInputProps('start')}
|
||||
/>
|
||||
<DatePickerInput
|
||||
label={t("end date", {capfirst: true})}
|
||||
placeholder={t("end date", {capfirst: true})}
|
||||
withAsterisk
|
||||
{...form.getInputProps('end')}
|
||||
/>
|
||||
<Select
|
||||
label={t("referer", {capfirst: true})}
|
||||
placeholder={t("referer", {capfirst: true})}
|
||||
nothingFoundMessage={t("nothing found", {capfirst: true})}
|
||||
withAsterisk
|
||||
clearable
|
||||
allowDeselect
|
||||
searchable
|
||||
data={usersSelect || []}
|
||||
{...form.getInputProps('referer_id')}
|
||||
/>
|
||||
<Select
|
||||
label={t("productor", {capfirst: true})}
|
||||
placeholder={t("productor", {capfirst: true})}
|
||||
nothingFoundMessage={t("nothing found", {capfirst: true})}
|
||||
withAsterisk
|
||||
clearable
|
||||
allowDeselect
|
||||
searchable
|
||||
data={productorsSelect || []}
|
||||
{...form.getInputProps('productor_id')}
|
||||
/>
|
||||
<Group align="end">
|
||||
<NumberInput
|
||||
label={t("number of shipment", {capfirst: true})}
|
||||
placeholder={t("number of shipment", {capfirst: true})}
|
||||
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", {capfirst: true})}
|
||||
leftSection={<IconCancel/>}
|
||||
onClick={() => {
|
||||
form.reset();
|
||||
form.clearErrors();
|
||||
onClose();
|
||||
}}
|
||||
>{t("cancel", {capfirst: true})}</Button>
|
||||
<Button
|
||||
variant="filled"
|
||||
aria-label={currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}
|
||||
onClick={() => {
|
||||
form.validate();
|
||||
if (form.isValid())
|
||||
handleSubmit(form.getValues(), currentForm?.id)
|
||||
}}
|
||||
>{currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}</Button>
|
||||
</Group>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user