add delete modal

frontend/src/components/DeleteModal/index.tsx

@@ -0,0 +1,76 @@
+import { t } from "@/config/i18n";
+import type { DeleteDependencies } from "@/services/resources/common";
+import { Button, Group, List, Modal, Text, type ModalBaseProps } from "@mantine/core";
+import { IconCancel, IconCheck } from "@tabler/icons-react";
+import { Link } from "react-router";
+
+export type DeleteModalProps = ModalBaseProps & {
+    handleSubmit: (id: number) => void;
+    entityType: string;
+    entity: {name: string, id: number};
+    dependencies: DeleteDependencies[];
+}
+
+export function DeleteModal({
+    opened, 
+    onClose, 
+    handleSubmit, 
+    entityType,
+    entity,
+    dependencies
+}: DeleteModalProps) {
+    return (
+        <Modal
+            opened={opened}
+            onClose={onClose}
+            title={t("delete entity", { capfirst: true, entity: t(entityType)})}
+        >
+            <Text>{`${t("are you sure you want to delete", {capfirst: true})} : "${entity.name}"`}</Text>
+            <Text>{`${t("this will also delete", {capfirst: true})} :`}</Text>
+            {
+                <List>
+                    {
+                        dependencies?.map((dependency) => (
+                            <List.Item 
+                                key={dependency.id}
+                            >
+                                {
+                                    dependency.type === 'contract' ? `${t(dependency.type, {capfirst: true})} - ${dependency.name}` :
+                                    <Link
+                                        to={`/dashboard/${dependency.type}s/${dependency.id}/edit`}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                        {`${t(dependency.type, {capfirst: true})} - ${dependency.name}`}
+                                    </Link>
+
+                                }
+                            </List.Item>
+                        ))
+                    }
+                </List>
+            }
+            <Group mt="sm" justify="space-between">
+                <Button
+                    variant="filled"
+                    color="red"
+                    aria-label={t("cancel", { capfirst: true })}
+                    leftSection={<IconCancel />}
+                    onClick={onClose}
+                >
+                    {t("cancel", { capfirst: true })}
+                </Button>
+                <Button
+                    variant="filled"
+                    aria-label={t("delete entity", { capfirst: true, entity: t(entityType)})}
+                    leftSection={<IconCheck />}
+                    onClick={() => {
+                        handleSubmit(entity.id);
+                    }}
+                >
+                    {t("delete", { capfirst: true})}
+                </Button>
+            </Group>
+        </Modal>
+    );
+}

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

@@ -1,9 +1,11 @@
 import { ActionIcon, Badge, Table, Tooltip } from "@mantine/core";
 import { useNavigate, useSearchParams } from "react-router";
-import { useDeleteForm } from "@/services/api";
+import { useDeleteForm, useGetDeleteDependencies } from "@/services/api";
 import { IconEdit, IconX } from "@tabler/icons-react";
 import { t } from "@/config/i18n";
 import type { Form } from "@/services/resources/forms";
+import { DeleteModal } from "@/components/DeleteModal";
+import { useDisclosure } from "@mantine/hooks";
 
 export type FormRowProps = {
     form: Form;
@@ -13,7 +15,8 @@ export default function FormRow({ form }: FormRowProps) {
     const [searchParams] = useSearchParams();
     const deleteMutation = useDeleteForm();
     const navigate = useNavigate();
-
+    const [deleteOpened, { open: deleteOpen, close: deleteClose }] = useDisclosure(false);
+    const {data: deleteDependencies} = useGetDeleteDependencies("form", form.id);
     return (
         <Table.Tr key={form.id}>
             <Table.Td>
@@ -29,7 +32,7 @@ export default function FormRow({ form }: FormRowProps) {
             <Table.Td>{form.productor.name}</Table.Td>
             <Table.Td>{form.referer.name}</Table.Td>
             <Table.Td>
-                <Tooltip label={t("edit productor", { capfirst: true })}>
+                <Tooltip label={t("edit form", { capfirst: true })}>
                     <ActionIcon
                         size="sm"
                         mr="5"
@@ -43,14 +46,22 @@ export default function FormRow({ form }: FormRowProps) {
                         <IconEdit />
                     </ActionIcon>
                 </Tooltip>
-                <Tooltip label={t("remove productor", { capfirst: true })}>
+                <DeleteModal
+                    opened={deleteOpened}
+                    onClose={deleteClose}
+                    handleSubmit={(id: number) => {
+                        deleteMutation.mutate(id);
+                    }}
+                    entityType={"form"}
+                    entity={form}
+                    dependencies={deleteDependencies || []}
+                />
+                <Tooltip label={t("remove form", { capfirst: true })}>
                     <ActionIcon
                         color="red"
                         size="sm"
                         mr="5"
-                        onClick={() => {
-                            deleteMutation.mutate(form.id);
-                        }}
+                        onClick={deleteOpen}
                     >
                         <IconX />
                     </ActionIcon>