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,7 +50,12 @@
     },
 
     methods: {
-      deleteRoom() {
+      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: {
@@ -63,11 +71,11 @@
                     console.log(`found room index ${index} - rooms length ${rooms.length}`);
                     const slicedRooms = [
                       ...rooms.slice(0, index),
-                  ...rooms.slice(index+1)
+                      ...rooms.slice(index + 1),
                     ];
                     console.log(`slicedRooms length ${slicedRooms.length}`);
                     const data = {
-                  rooms: slicedRooms
+                      rooms: slicedRooms,
                     };
                     store.writeQuery({query: ROOMS_QUERY, data});
                   }
@@ -77,6 +85,10 @@
                 });
               },
             });
+          })
+          .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)