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>

frontend/src/pages/Forms/index.tsx

@@ -36,12 +36,14 @@ export function Forms() {
     const { data: allForms } = useGetReferentForms();
 
     const seasons = useMemo(() => {
+        if (!allForms) return [];
         return allForms
             ?.map((form: Form) => form.season)
             .filter((season, index, array) => array.indexOf(season) === index);
     }, [allForms]);
 
     const productors = useMemo(() => {
+        if (!allForms) return [];
         return allForms
             ?.map((form: Form) => form.productor.name)
             .filter((productor, index, array) => array.indexOf(productor) === index);

frontend/src/pages/Shipments/index.tsx

@@ -151,7 +151,7 @@ export default function Shipments() {
                         </Table.Tr>
                     </Table.Thead>
                     <Table.Tbody>
-                        {shipments.map((shipment) => (
+                        {shipments?.map((shipment) => (
                             <ShipmentRow shipment={shipment} key={shipment.id} />
                         ))}
                     </Table.Tbody>

frontend/src/services/api.ts

@@ -24,6 +24,7 @@ import type { Product, ProductCreate, ProductEditPayload } from "./resources/pro
 import type { Contract, ContractCreate } from "./resources/contracts";
 import { notifications } from "@mantine/notifications";
 import { t } from "@/config/i18n";
+import type { DeleteDependencies, EntityName } from "./resources/common";
 
 export async function refreshToken() {
     return await fetch(`${Config.backend_uri}/auth/refresh`, {method: "POST", credentials: "include"});
@@ -321,6 +322,25 @@ export function useGetForm(
     });
 }
 
+export function useGetDeleteDependencies(
+    entity: EntityName,
+    id?: number,
+) {
+    return useQuery<DeleteDependencies[]>({
+        queryKey: [`${entity}_delete_preview`],
+        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,
+    });
+}
+
+
 export function useGetForms(filters?: URLSearchParams): UseQueryResult<Form[], Error> {
     const queryString = filters?.toString();
     return useQuery<Form[]>({

frontend/src/services/resources/common.ts

@@ -0,0 +1,16 @@
+export const ENTITY_NAMES = [
+    'contract',
+    'form',
+    'productor',
+    'product',
+    'shipment',
+    'user',
+]
+
+export type EntityName = (typeof ENTITY_NAMES)[number];
+
+export type DeleteDependencies = {
+    name: string;
+    id: number;
+    type: EntityName;
+}