334 data entry in calendar view clear all function

.changeset/shy-hotels-tie.md

@@ -0,0 +1,7 @@
+---
+"@quassel/frontend": minor
+"@quassel/backend": minor
+"@quassel/ui": minor
+---
+
+Allow clearing all entries from a questionnaire

apps/backend/src/research/entries/entries.controller.ts

@@ -1,5 +1,5 @@
-import { Body, Controller, Delete, Get, Param, Patch, Post } from "@nestjs/common";
-import { ApiTags, ApiOperation, ApiUnprocessableEntityResponse } from "@nestjs/swagger";
+import { Body, Controller, Delete, Get, Param, Patch, Post, Query } from "@nestjs/common";
+import { ApiTags, ApiOperation, ApiUnprocessableEntityResponse, ApiQuery } from "@nestjs/swagger";
 import { ErrorResponseDto } from "../../common/dto/error.dto";
 import { EntriesService } from "./entries.service";
 import { EntryCreationDto, EntryResponseDto, EntryMutationDto } from "./entry.dto";
@@ -44,4 +44,11 @@
   delete(@Param("id") id: string) {
     return this.entriesService.remove(+id);
   }
+
+  @Delete()
+  @ApiQuery({ name: "questionnaireId", required: true, type: Number })
+  @ApiOperation({ summary: "Delete all entries of a questionnaire" })
+  deleteAll(@Query("questionnaireId") questionnaireId: number) {
+    return this.entriesService.removeAllFromQuestionnaire(questionnaireId);
+  }
 }

apps/backend/src/research/entries/entries.service.ts

@@ -79,4 +79,8 @@
   remove(id: number) {
     return this.em.remove(this.entryRepository.getReference(id)).flush();
   }
+
+  removeAllFromQuestionnaire(questionnaireId: number) {
+    return this.entryRepository.nativeDelete({ questionnaire: questionnaireId });
+  }
 }

apps/frontend/src/api.gen.ts

@@ -268,7 +268,8 @@ export interface paths {
         put?: never;
         /** Create a entry */
         post: operations["EntriesController_create"];
-        delete?: never;
+        /** Delete all entries of a questionnaire */
+        delete: operations["EntriesController_deleteAll"];
         options?: never;
         head?: never;
         patch?: never;
@@ -1842,6 +1843,27 @@ export interface operations {
             };
         };
     };
+    EntriesController_deleteAll: {
+        parameters: {
+            query: {
+                questionnaireId: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": number;
+                };
+            };
+        };
+    };
     EntriesController_get: {
         parameters: {
             query?: never;

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

@@ -1,4 +1,4 @@
-import { Button, Group, Modal, Stack, Title, useDisclosure, useForm } from "@quassel/ui";
+import { Button, Group, IconClearAll, modals, Stack, Title, useForm, Text } from "@quassel/ui";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
@@ -14,9 +14,14 @@
   addEntityLabel: "Add",
   notificationSuccessCreateLanguage: "Successfully add a new language.",
   notificationSuccessCreateCarer: "Successfully add a new carer.",
-  gapsDialogTitle: "Gaps detected in the calendar",
+  gapsDialogTitle: "Continue with gaps?",
+  gapsDialogDescription: "There were gaps detected in the calendar. Do you want to continue anyway or highlight the gaps?",
   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() {
@@ -25,11 +30,12 @@
 
   const t = useStore(messages);
 
-  const { data: questionnaire } = $api.useSuspenseQuery("get", "/questionnaires/{id}", { params: { path: p } });
+  const { data: questionnaire, refetch } = $api.useSuspenseQuery("get", "/questionnaires/{id}", { params: { path: p } });
+
+  const removeAllEntriesMutation = $api.useMutation("delete", "/entries", { onSuccess: () => refetch() });
 
   const [gaps, setGaps] = useState<GapsPerDay>();
   const [highlightGaps, setHighlightGaps] = useState(false);
-  const [gapsDialogOpened, { open, close }] = useDisclosure();
 
   const f = useForm<{ entries: components["schemas"]["EntryResponseDto"][] }>({
     initialValues: {
@@ -50,43 +56,52 @@
     n({ to: "/questionnaire/$id/remarks", params: p });
   };
 
+  const handleGapValidation = () => {
+    modals.openConfirmModal({
+      title: t.gapsDialogTitle,
+      children: <Text size="sm">{t.gapsDialogDescription}</Text>,
+      labels: { cancel: t.gapsDialogHighlightGaps, confirm: t.gapsDialogContinueAnyway },
+      confirmProps: { variant: "light" },
+      cancelProps: { variant: "filled" },
+      onConfirm: handleSubmit,
+      onCancel: () => setHighlightGaps(true),
+    });
+  };
+
+  const handleClearEntries = () => {
+    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(() => {
     f.setValues({ entries: questionnaire.entries });
 
     if (highlightGaps) f.validate();
   }, [questionnaire]);
 
   return (
-    <>
-      <Modal opened={gapsDialogOpened} onClose={close} centered title={t.gapsDialogTitle}>
-        <Group justify="flex-end">
-          <Button onClick={handleSubmit} variant="light" type="submit">
-            {t.gapsDialogContinueAnyway}
-          </Button>
-          <Button
-            onClick={() => {
-              setHighlightGaps(true);
-              close();
-            }}
-          >
-            {t.gapsDialogHighlightGaps}
+    <form onSubmit={f.onSubmit(handleSubmit, handleGapValidation)}>
+      <Stack>
+        <Group justify="space-between">
+          <Title order={3}>{questionnaire.title}</Title>
+          <Button variant="default" onClick={handleClearEntries} rightSection={<IconClearAll />}>
+            Clear all
           </Button>
         </Group>
-      </Modal>
-      <form onSubmit={f.onSubmit(handleSubmit, open)}>
-        <Stack>
-          <Title order={3}>{questionnaire.title}</Title>
-          <QuestionnaireEntries gaps={highlightGaps ? gaps : undefined} questionnaire={questionnaire} />
-
-          <Group>
-            <Link to="/questionnaire/$id/period" params={p}>
-              <Button variant="light">{t.backAction}</Button>
-            </Link>
-            <Button type="submit">{t.formAction}</Button>
-          </Group>
-        </Stack>
-      </form>
-    </>
+        <QuestionnaireEntries gaps={highlightGaps ? gaps : undefined} questionnaire={questionnaire} />
+
+        <Group>
+          <Link to="/questionnaire/$id/period" params={p}>
+            <Button variant="light">{t.backAction}</Button>
+          </Link>
+          <Button type="submit">{t.formAction}</Button>
+        </Group>
+      </Stack>
+    </form>
   );
 }
 

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 {
@@ -123,6 +125,7 @@ export {
   IconReportAnalytics,
   IconX,
   IconInfoCircle,
+  IconClearAll,
 } from "@tabler/icons-react";
 
 export { uzhColors } from "./theme/uzh";

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>
   );