Add functionality to room delete button

client/src/components/rooms/RoomPopover.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="room-popover">
-    <a class="room-popover__link">Raum löschen</a>
+    <a class="room-popover__link" @click="$emit('delete', id)">Raum löschen</a>
     <router-link :to="{name: 'edit-room', params: {id: id}}" class="room-popover__link">Raum bearbeiten</router-link>
   </div>
 </template>

client/src/components/rooms/RoomWidget.vue

@@ -10,13 +10,16 @@
         <a @click="showMenu = !showMenu" class="room-widget__more-link">
           <ellipses></ellipses>
         </a>
-        <room-popover :id="id" v-if="showMenu"></room-popover>
+        <room-popover @delete="deleteRoom" :id="id" v-if="showMenu"></room-popover>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+  import DELETE_ROOM_MUTATION from '@/graphql/gql/mutations/deleteRoom.gql';
+  import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
+
   import Ellipses from '@/components/icons/Ellipses.vue';
   import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
   import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
@@ -42,6 +45,30 @@
       roomClass() {
         return `room-widget--${this.appearance}`
       }
+    },
+
+    methods: {
+      deleteRoom(id) {
+        this.$apollo.mutate({
+          mutation: DELETE_ROOM_MUTATION,
+          variables: {
+            input: {
+              id
+            }
+          },
+          update(store, {data: {deleteRoom: {success}}}) {
+            try {
+              if (success) {
+                const data = store.readQuery({query: ROOMS_QUERY});
+                data.allRooms.edges.splice(data.allRooms.edges.findIndex(edge => edge.node.id === id), 1);
+                store.writeQuery({query: ROOMS_QUERY, data});
+              }
+            } catch (e) {
+              // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
+            }
+          }
+        })
+      }
     }
   }
 </script>

client/src/graphql/gql/mutations/deleteRoom.gql

@@ -0,0 +1,12 @@
+mutation DeleteRoom($input: DeleteRoomInput!) {
+  deleteRoom(input: $input) {
+    success
+    errors
+  }
+}
+
+#{
+#  "input": {
+#    "id": "Um9vbU5vZGU6MjY="
+#  }
+#}

server/rooms/mutations.py

@@ -41,6 +41,22 @@ class UpdateRoom(MutateRoom):
         room = graphene.Argument(UpdateRoomArgument)  # NB: can't be named ChangeRoomInput, otherwise graphene complains
 
 
+class DeleteRoom(relay.ClientIDMutation):
+    class Input:
+        id = graphene.ID(required=True)
+
+    success = graphene.Boolean()
+    errors = graphene.List(graphene.String)
+
+    @classmethod
+    def mutate_and_get_payload(cls, *args, **kwargs):
+        id = kwargs.get('id')
+        room = get_object(Room, id)
+        room.delete()
+        return cls(success=True)
+
+
 class RoomMutations:
     update_room = UpdateRoom.Field()
     add_room = AddRoom.Field()
+    delete_room = DeleteRoom.Field()