Add confirm dialog and custom text to room and room entry delete actions

Resolves MS-524

client/src/components/modals/Confirm.vue

@@ -9,7 +9,7 @@
       </h3>
     </template>
     <p class="confirm-dialog__content">
-      Wollen Sie diesen Eintrag wirklich löschen?
+      {{ message }}
     </p>
     <template #footer>
       <div>
@@ -48,6 +48,13 @@
         }
         return 'Bestätigung';
       },
+      message() {
+        const {payload} = this.$modal.state;
+        if (payload && payload.message) {
+          return payload.message;
+        }
+        return 'Wollen Sie diesen Eintrag wirklich löschen?';
+      }
     },
 
     methods: {

client/src/components/rooms/RoomActions.vue

@@ -1,5 +1,8 @@
 <template>
-  <more-actions data-cy="room-actions">
+  <more-actions
+    v-slot="{toggle}"
+    data-cy="room-actions"
+  >
     <popover-link
       icon="pen-icon"
       text="Bearbeiten"
@@ -15,7 +18,7 @@
       icon="trash-icon"
       text="Löschen"
       data-cy="delete-room"
-      @link-action="deleteRoom()"
+      @link-action="deleteRoom(toggle)"
     />
   </more-actions>
 </template>
@@ -47,36 +50,45 @@
     },
 
     methods: {
-      deleteRoom() {
-        this.$apollo.mutate({
-          mutation: DELETE_ROOM_MUTATION,
-          variables: {
-            input: {
-              id: this.id,
-            },
-          },
-          update: (store, {data: {deleteRoom: {success}}}) => {
-            if (success) {
-              const {rooms} = store.readQuery({query: ROOMS_QUERY});
-              if (rooms) {
-                const index = rooms.findIndex(room => room.id === this.id);
-                console.log(`found room index ${index} - rooms length ${rooms.length}`);
-                const slicedRooms = [
-                  ...rooms.slice(0, index),
-                  ...rooms.slice(index+1)
-                ];
-                console.log(`slicedRooms length ${slicedRooms.length}`);
-                const data = {
-                  rooms: slicedRooms
-                };
-                store.writeQuery({query: ROOMS_QUERY, data});
-              }
-            }
-            this.$router.push({
-              name: ROOMS_PAGE,
+      deleteRoom(toggle) {
+        toggle();
+        this.$modal.open('confirm', {
+          title: 'Raum löschen',
+          message: 'Willst du diesen Raum wirklich löschen? Wenn du diesen Raum löschst, werden auch alle dazugehörigen Einträge und Kommentare gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.',
+        }).then(() => {
+            this.$apollo.mutate({
+              mutation: DELETE_ROOM_MUTATION,
+              variables: {
+                input: {
+                  id: this.id,
+                },
+              },
+              update: (store, {data: {deleteRoom: {success}}}) => {
+                if (success) {
+                  const {rooms} = store.readQuery({query: ROOMS_QUERY});
+                  if (rooms) {
+                    const index = rooms.findIndex(room => room.id === this.id);
+                    console.log(`found room index ${index} - rooms length ${rooms.length}`);
+                    const slicedRooms = [
+                      ...rooms.slice(0, index),
+                      ...rooms.slice(index + 1),
+                    ];
+                    console.log(`slicedRooms length ${slicedRooms.length}`);
+                    const data = {
+                      rooms: slicedRooms,
+                    };
+                    store.writeQuery({query: ROOMS_QUERY, data});
+                  }
+                }
+                this.$router.push({
+                  name: ROOMS_PAGE,
+                });
+              },
             });
-          },
-        });
+          })
+          .catch(() => {
+          });
+
       },
       editRoom() {
         this.$router.push({name: 'edit-room', params: {id: this.id}});

client/src/components/rooms/RoomEntryActions.vue

@@ -48,7 +48,10 @@
     methods: {
       deleteRoomEntry(slug, toggle) {
         toggle();
-        this.$modal.open('confirm')
+        this.$modal.open('confirm', {
+            title: 'Eintrag löschen',
+            message: 'Willst du diesen Eintrag wirklich löschen? Wenn du diesen Eintrag löschst, werden auch alle dazugehörigen Kommentare gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.',
+          })
           .then(() => {
             this.$apollo.mutate({
               mutation: DELETE_ROOM_ENTRY_MUTATION,

server/rooms/models.py

@@ -59,7 +59,7 @@ class ModuleRoomSlug(TitleSlugDescriptionModel):
 
 class Comment(models.Model):
     text = models.TextField()
-    room_entry = models.ForeignKey(RoomEntry, related_name='comments', on_delete=models.PROTECT)
+    room_entry = models.ForeignKey(RoomEntry, related_name='comments', on_delete=models.CASCADE)
     owner = models.ForeignKey(get_user_model(), related_name='comments', on_delete=models.PROTECT)
     created = models.DateTimeField(auto_now_add=True)