add i18n, products, productors and forms as tables

frontend/src/components/Forms/Row/index.tsx

@@ -0,0 +1,123 @@
+import { ActionIcon, Table, Tooltip } from "@mantine/core";
+import { useNavigate } from "react-router";
+import { deleteForm, getForm} from "@/services/api";
+import { IconEdit, IconX } from "@tabler/icons-react";
+import { t } from "@/config/i18n";
+import type { Form, FormInputs } from "@/services/resources/forms";
+import FormModal from "@/components/Forms/Modal";
+
+export type FormRowProps = {
+    form: Form;
+    isEdit: boolean;
+    closeModal: () => void;
+    handleSubmit: (form: FormInputs, id?: number) => void;
+}
+
+export default function FormRow({
+    form, 
+    isEdit, 
+    closeModal, 
+    handleSubmit
+}: FormRowProps) {
+    const deleteMutation = deleteForm();
+    const navigate = useNavigate();
+    const {data: currentForm, isPending} = getForm(form.id);
+    
+    return (
+        <Table.Tr key={form.id}>
+            <FormModal
+                opened={isEdit} 
+                onClose={closeModal} 
+                currentForm={currentForm} 
+                handleSubmit={handleSubmit}
+            />
+            <Table.Td>{form.name}</Table.Td>
+            <Table.Td>{form.season}</Table.Td>
+            <Table.Td>{form.start}</Table.Td>
+            <Table.Td>{form.end}</Table.Td>
+            <Table.Td>{form.productor.name}</Table.Td>
+            <Table.Td>{form.referer.name}</Table.Td>
+            <Table.Td>
+                <Tooltip label={t("edit productor", {capfirst: true})}>
+                    <ActionIcon 
+                        size="sm" 
+                        mr="5"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(`/dashboard/forms/${form.id}/edit`);
+                        }}
+                    >
+                        <IconEdit/>
+                    </ActionIcon>
+                </Tooltip>
+                <Tooltip label={t("remove productor", {capfirst: true})}>
+                    <ActionIcon 
+                        color="red" 
+                        size="sm" 
+                        mr="5"
+                        onClick={() => {
+                            deleteMutation.mutate(form.id);
+                        }}
+                    >
+                        <IconX/>
+                    </ActionIcon>
+                </Tooltip>
+            </Table.Td>
+        </Table.Tr>
+        // <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", {capfirst: true})}
+        //             onClick={(e) => {
+        //                 e.stopPropagation();
+        //                 navigate(`/dashboard/forms/${form.id}/edit`);
+        //             }}
+        //         >
+        //             <IconEdit/>
+        //         </ActionIcon>
+        //         <ActionIcon
+        //             size={"sm"}
+        //             aria-label={t("delete form", {capfirst: true})}
+        //             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>
+    );
+}