add delete modal

2026-03-06 15:19:07 +01:00
parent e970bb683a
commit 61710a0347
12 changed files with 216 additions and 15 deletions
--- a/frontend/src/components/DeleteModal/index.tsx
+++ b/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>
+    );
+}