feat: add confirm dialog for clearing all entries

Author: stampaaaron

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/entries.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, IconClearAll, Modal, Stack, Title, useDisclosure, useForm } from "@quassel/ui";
+import { Button, Group, IconClearAll, Modal, modals, Stack, Title, useDisclosure, useForm, Text } from "@quassel/ui";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
@@ -17,6 +17,10 @@ const messages = i18n("questionnaireEntries", {
   gapsDialogTitle: "Gaps detected in the calendar",
   gapsDialogContinueAnyway: "Continue anyway",
   gapsDialogHighlightGaps: "Highlight gaps",
+  confirmClearDialogTitle: "Clear all entries from this questionnaire?",
+  confirmClearDialogDescription: "When confirming, all entries from this questionnaires will be removed. This action can't be undone.",
+  confirmClearDialogCancel: "Cancel",
+  confirmClearDialogConfirm: "Clear all",
 });
 
 export function Entries() {
@@ -53,7 +57,12 @@ export function Entries() {
   };
 
   const handleClearEntries = () => {
-    removeAllEntriesMutation.mutate({ params: { query: { questionnaireId: questionnaire.id } } });
+    modals.openConfirmModal({
+      title: t.confirmClearDialogTitle,
+      children: <Text size="sm">{t.confirmClearDialogDescription}</Text>,
+      labels: { cancel: t.confirmClearDialogCancel, confirm: t.confirmClearDialogConfirm },
+      onConfirm: () => removeAllEntriesMutation.mutate({ params: { query: { questionnaireId: questionnaire.id } } }),
+    });
   };
 
   useEffect(() => {

libs/ui/package.json

@@ -33,6 +33,7 @@
     "@mantine/dates": "7.17.2",
     "@mantine/form": "7.17.2",
     "@mantine/hooks": "7.17.2",
+    "@mantine/modals": "^7.17.2",
     "@mantine/notifications": "7.17.2",
     "@tabler/icons-react": "^3.31.0",
     "dayjs": "^1.11.13",

libs/ui/src/index.ts

@@ -99,6 +99,8 @@ export { useDisclosure, useFullscreen } from "@mantine/hooks";
 
 export { notifications, type NotificationData } from "@mantine/notifications";
 
+export { modals } from "@mantine/modals";
+
 export { useForm, isInRange, isNotEmpty } from "@mantine/form";
 
 export {

libs/ui/src/theme/ThemeProvider.tsx

@@ -6,6 +6,7 @@ import utc from "dayjs/plugin/utc";
 import { DefaultMantineColor, MantineColorsTuple } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import { convertUZHColorsToMantine, UZHColor, uzhColors } from "./uzh";
+import { ModalsProvider } from "@mantine/modals";
 
 dayjs.extend(utc);
 
@@ -37,8 +38,10 @@ export function ThemeProvider({ children, ...args }: ThemeProviderProps) {
   return (
     <DatesProvider settings={{ timezone: "UTC" }}>
       <MantineProvider {...args} theme={theme}>
-        <Notifications />
-        {children}
+        <ModalsProvider>
+          <Notifications />
+          {children}
+        </ModalsProvider>
       </MantineProvider>
     </DatesProvider>
   );