feat: allow deleting entries from calendar

Author: stampaaaron

apps/backend/db/migrations/.snapshot-postgres.json

@@ -558,7 +558,7 @@
           "unsigned": false,
           "autoincrement": false,
           "primary": false,
-          "nullable": false,
+          "nullable": true,
           "mappedType": "integer"
         }
       },
@@ -607,6 +607,7 @@
             "id"
           ],
           "referencedTableName": "public.entry",
+          "deleteRule": "cascade",
           "updateRule": "cascade"
         }
       },

apps/backend/db/migrations/Migration20241210094456.ts

@@ -0,0 +1,23 @@
+import { Migration } from "@mikro-orm/migrations";
+
+export class Migration20241210094456 extends Migration {
+  override async up(): Promise<void> {
+    this.addSql(`alter table "entry_language" drop constraint "entry_language_entry_id_foreign";`);
+
+    this.addSql(`alter table "entry_language" alter column "entry_id" type int using ("entry_id"::int);`);
+    this.addSql(`alter table "entry_language" alter column "entry_id" drop not null;`);
+    this.addSql(
+      `alter table "entry_language" add constraint "entry_language_entry_id_foreign" foreign key ("entry_id") references "entry" ("id") on update cascade on delete cascade;`
+    );
+  }
+
+  override async down(): Promise<void> {
+    this.addSql(`alter table "entry_language" drop constraint "entry_language_entry_id_foreign";`);
+
+    this.addSql(`alter table "entry_language" alter column "entry_id" type int using ("entry_id"::int);`);
+    this.addSql(`alter table "entry_language" alter column "entry_id" set not null;`);
+    this.addSql(
+      `alter table "entry_language" add constraint "entry_language_entry_id_foreign" foreign key ("entry_id") references "entry" ("id") on update cascade;`
+    );
+  }
+}

apps/backend/src/research/entry-languages/entry-language.entity.ts

@@ -1,4 +1,4 @@
-import { Check, Entity, ManyToOne, Property } from "@mikro-orm/core";
+import { Cascade, Check, Entity, ManyToOne, Property } from "@mikro-orm/core";
 import { BaseEntity } from "../../common/entities/base.entity";
 import { Language } from "../../defaults/languages/language.entity";
 import { Entry } from "../entries/entry.entity";
@@ -12,6 +12,6 @@ export class EntryLanguage extends BaseEntity {
   @ManyToOne()
   language!: Language;
 
-  @ManyToOne()
+  @ManyToOne({ cascade: [Cascade.ALL] })
   entry!: Entry;
 }

apps/frontend/src/components/questionnaire/calendar/EntryForm.tsx

@@ -18,7 +18,8 @@ export type EntryFormValues = {
 };
 
 const messages = i18n("entityForm", {
-  addDialectAction: "Add dialect",
+  actionAddDialect: "Add dialect",
+  actionDelete: "Delete",
   labelCarer: "Carer",
   labelLanguage: "Language",
   validationRatio: "Ratio must be between 1 and 100.",
@@ -28,11 +29,12 @@ const messages = i18n("entityForm", {
 
 type EntityFormProps = {
   onSave: (entity: EntryFormValues) => void;
+  onDelete?: () => void;
   entry?: Partial<EntryFormValues>;
   actionLabel: string;
 };
 
-export function EntityForm({ onSave, actionLabel, entry }: EntityFormProps) {
+export function EntityForm({ onSave, onDelete, actionLabel, entry }: EntityFormProps) {
   const t = useStore(messages);
   const f = useForm<EntryFormValues>({
     initialValues: {
@@ -121,15 +123,22 @@ export function EntityForm({ onSave, actionLabel, entry }: EntityFormProps) {
           }}
           variant="light"
         >
-          {t.addDialectAction}
+          {t.actionAddDialect}
         </Button>
         <Group>
           <TimeInput flex={1} {...f.getInputProps("startedAt")} />
           -
           <TimeInput flex={1} {...f.getInputProps("endedAt")} />
         </Group>
 
-        <Button type="submit">{actionLabel}</Button>
+        <Group justify="flex-end">
+          {onDelete && (
+            <Button onClick={onDelete} variant="outline" color="uzhOrange">
+              {t.actionDelete}
+            </Button>
+          )}
+          <Button type="submit">{actionLabel}</Button>
+        </Group>
       </Stack>
     </form>
   );

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

@@ -47,6 +47,7 @@ function QuestionnaireEntries() {
 
   const createMutation = $api.useMutation("post", "/entries");
   const updateMutation = $api.useMutation("patch", "/entries/{id}");
+  const deleteMutation = $api.useMutation("delete", "/entries/{id}");
   const { data: questionnaire, refetch } = $api.useSuspenseQuery("get", "/questionnaires/{id}", { params: { path: { id: p.id } } });
 
   const events: ExtendedEvent[] =
@@ -59,7 +60,7 @@ function QuestionnaireEntries() {
       backgroundColor: theme.colors[theme.primaryColor][4],
     })) ?? [];
 
-  const handleReset = () => {
+  const reset = () => {
     refetch();
     close();
     setSelectedWeekday(undefined);
@@ -76,7 +77,7 @@ function QuestionnaireEntries() {
       questionnaire: questionnaire.id,
     };
 
-    createMutation.mutate({ body: entryRequest }, { onSuccess: handleReset });
+    createMutation.mutate({ body: entryRequest }, { onSuccess: reset });
   };
 
   const handleUpdate = (id: number, { carer, ...rest }: Partial<EntryFormValues>, weekday?: number) => {
@@ -87,7 +88,11 @@ function QuestionnaireEntries() {
       questionnaire: questionnaire.id,
     };
 
-    updateMutation.mutate({ body: entryRequest, params: { path: { id: id.toString() } } }, { onSuccess: handleReset });
+    updateMutation.mutate({ body: entryRequest, params: { path: { id: id.toString() } } }, { onSuccess: reset });
+  };
+
+  const handleDelete = (id: number) => {
+    deleteMutation.mutate({ params: { path: { id: id.toString() } } }, { onSuccess: reset });
   };
 
   const handleOnSave = (entry: EntryFormValues | Partial<EntryFormValues>) => {
@@ -105,7 +110,12 @@ function QuestionnaireEntries() {
   return (
     <>
       <Modal opened={opened} onClose={close} size="md">
-        <EntityForm onSave={handleOnSave} entry={entryDraft} actionLabel={t.addEntityLabel} />
+        <EntityForm
+          onSave={handleOnSave}
+          onDelete={entryUpdatingId ? () => handleDelete(entryUpdatingId) : undefined}
+          entry={entryDraft}
+          actionLabel={t.addEntityLabel}
+        />
       </Modal>
       <form onSubmit={handleSubmit}>
         <Stack>