add delete 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>