77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
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>
|
|
);
|
|
} |