fix delete modal

backend/src/contracts/contracts.py

@@ -203,7 +203,7 @@ def get_contract_files(
     user: models.User = Depends(get_current_user)
 ):
     """Get all contract files for a given form"""
-    if not service.is_allowed(session, user, form_id):
+    if not form_service.is_allowed(session, user, form_id):
         raise HTTPException(
             status_code=403,
             detail=messages.Messages.not_allowed('contracts', 'get')

backend/src/forms/forms.py

@@ -49,7 +49,6 @@ async def preview_delete(
             session,
             _id
         )
-        print(result)
     except exceptions.FormNotFoundError as error:
         raise HTTPException(status_code=404, detail=str(error)) from error
     return result

backend/src/forms/service.py

@@ -116,7 +116,6 @@ def get_delete_dependencies(
     form = result.first()
     if not form:
         raise exceptions.FormNotFoundError(messages.Messages.not_found('form'))
-    print(_id)
     statement_shipment = (
         select(models.Shipment)
         .where(models.Shipment.form_id == _id)

frontend/src/components/DeleteModal/index.tsx

@@ -1,5 +1,5 @@
 import { t } from "@/config/i18n";
-import type { DeleteDependencies } from "@/services/resources/common";
+import { useGetDeleteDependencies } from "@/services/api";
 import { Button, Group, List, Modal, Text, type ModalBaseProps } from "@mantine/core";
 import { IconCancel, IconCheck } from "@tabler/icons-react";
 import { Link } from "react-router";
@@ -7,8 +7,7 @@ import { Link } from "react-router";
 export type DeleteModalProps = ModalBaseProps & {
     handleSubmit: (id: number) => void;
     entityType: string;
-    entity: {name: string, id: number};
+    entity?: {name: string, id: number} | undefined;
-    dependencies: DeleteDependencies[];
 }
 
 export function DeleteModal({
@@ -17,8 +16,12 @@ export function DeleteModal({
     handleSubmit, 
     entityType,
     entity,
-    dependencies
 }: DeleteModalProps) {
+    if (!entity) {
+        return null
+    }
+    const {data: deleteDependencies} = useGetDeleteDependencies(entityType, entity.id);
+
     return (
         <Modal
             opened={opened}
@@ -26,11 +29,11 @@ export function DeleteModal({
             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>
+            {deleteDependencies && deleteDependencies.length > 0 ? <Text>{`${t("this will also delete", {capfirst: true})} :`}</Text> : null}
             {
                 <List>
                     {
-                        dependencies?.map((dependency) => (
+                        deleteDependencies?.map((dependency) => (
                             <List.Item 
                                 key={dependency.id}
                             >
@@ -66,6 +69,7 @@ export function DeleteModal({
                     leftSection={<IconCheck />}
                     onClick={() => {
                         handleSubmit(entity.id);
+                        onClose();
                     }}
                 >
                     {t("delete", { capfirst: true})}

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

@@ -1,11 +1,9 @@
 import { ActionIcon, Badge, Table, Tooltip } from "@mantine/core";
 import { useNavigate, useSearchParams } from "react-router";
-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,10 +11,7 @@ export type FormRowProps = {
 
 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>
@@ -46,22 +41,17 @@ export default function FormRow({ form }: FormRowProps) {
                         <IconEdit />
                     </ActionIcon>
                 </Tooltip>
-                <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={deleteOpen}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/forms/${form.id}/delete${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
                     >
                         <IconX />
                     </ActionIcon>

frontend/src/pages/Forms/index.tsx

@@ -1,5 +1,5 @@
 import { Stack, Loader, Title, Group, ActionIcon, Tooltip, Table, ScrollArea } from "@mantine/core";
-import { useCreateForm, useEditForm, useGetForm, useGetReferentForms } from "@/services/api";
+import { useCreateForm, useDeleteForm, useEditForm, useGetForm, useGetReferentForms } from "@/services/api";
 import { t } from "@/config/i18n";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
 import { IconPlus } from "@tabler/icons-react";
@@ -8,6 +8,7 @@ import FormModal from "@/components/Forms/Modal";
 import FormRow from "@/components/Forms/Row";
 import type { Form, FormInputs } from "@/services/resources/forms";
 import FilterForms from "@/components/Forms/Filter";
+import { DeleteModal } from "@/components/DeleteModal";
 
 export function Forms() {
     const [searchParams, setSearchParams] = useSearchParams();
@@ -16,14 +17,15 @@ export function Forms() {
 
     const isCreate = location.pathname === "/dashboard/forms/create";
     const isEdit = location.pathname.includes("/edit");
+    const isDelete = location.pathname.includes("/delete");
 
     const editId = useMemo(() => {
-        if (isEdit) {
+        if (isEdit || isDelete) {
             return location.pathname.split("/")[3];
         }
         return null;
     }, [location, isEdit]);
-
+        
     const closeModal = useCallback(() => {
         navigate(`/dashboard/forms${searchParams ? `?${searchParams.toString()}` : ""}`);
     }, [navigate, searchParams]);
@@ -51,6 +53,7 @@ export function Forms() {
 
     const createFormMutation = useCreateForm();
     const editFormMutation = useEditForm();
+    const deleteFormMutation = useDeleteForm();
 
     const handleCreateForm = useCallback(
         async (form: FormInputs) => {
@@ -146,6 +149,15 @@ export function Forms() {
                 currentForm={currentForm}
                 handleSubmit={handleEditForm}
             />
+            <DeleteModal
+                opened={isDelete}
+                onClose={closeModal}
+                handleSubmit={(id: number) => {
+                    deleteFormMutation.mutate(id);
+                }}
+                entityType={"form"}
+                entity={currentForm}
+            />
             <ScrollArea type="auto">
                 <Table striped>
                     <Table.Thead>

frontend/src/router.tsx

@@ -45,6 +45,7 @@ export const router = createBrowserRouter([
                             { path: "users/:id/edit", Component: Users },
                             { path: "forms", Component: Forms },
                             { path: "forms/:id/edit", Component: Forms },
+                            { path: "forms/:id/delete", Component: Forms },
                             { path: "forms/create", Component: Forms },
                             { path: "shipments", Component: Shipments },
                             { path: "shipments/:id/edit", Component: Shipments },

frontend/src/services/api.ts

@@ -327,13 +327,12 @@ export function useGetDeleteDependencies(
     id?: number,
 ) {
     return useQuery<DeleteDependencies[]>({
-        queryKey: [`${entity}_delete_preview`],
+        queryKey: [`${entity}_delete_preview_${id}`],
         queryFn: () =>
             fetchWithAuth(`${Config.backend_uri}/${entity}s/${id}/preview-delete`, {
                 credentials: "include",
             }).then((res) => {
                 const result = res.json()
-                console.log(result)
                 return result
             }),
         enabled: !!id,