Hide room popover

client/src/components/VisibilityPopover.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="visibility-menu" v-if="show" v-click-outside="hideVisibility">
+  <div class="visibility-menu" v-if="show" v-click-outside="hidePopover">
     <h3 class="visibility-menu__title">Sichtbarkeit</h3>
     <div v-for="schoolClass in schoolClassVisibility" :key="schoolClass.id" class="visibility-menu__item">
       <checkbox :checked="!schoolClass.hidden"
@@ -59,7 +59,7 @@
           }
         });
       },
-      hideVisibility() {
+      hidePopover() {
         this.$emit('hide-me');
       }
 

client/src/components/rooms/RoomPopover.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="room-popover">
+  <div class="room-popover" v-click-outside="hidePopover">
     <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>
@@ -7,7 +7,13 @@
 
 <script>
   export default {
-    props: ['id']
+    props: ['id'],
+
+    methods: {
+      hidePopover() {
+        this.$emit('hide-me');
+      }
+    }
   }
 </script>
 

client/src/components/rooms/RoomWidget.vue

@@ -10,7 +10,7 @@
         <a @click="showMenu = !showMenu" class="room-widget__more-link">
           <ellipses></ellipses>
         </a>
-        <room-popover @delete="deleteRoom" :id="id" v-if="showMenu"></room-popover>
+        <room-popover @delete="deleteRoom" @hide-me="showMenu = false" :id="id" v-if="showMenu"></room-popover>
       </div>
     </div>
   </div>