Generalize popover for widgets

client/src/components/rooms/RoomWidget.vue

@@ -10,7 +10,12 @@
         <a @click="showMenu = !showMenu" class="room-widget__more-link">
           <ellipses></ellipses>
         </a>
-        <room-popover @delete="deleteRoom" @hide-me="showMenu = false" :id="id" v-if="showMenu"></room-popover>
+        <widget-popover entity="Raum"
+                        @delete="deleteRoom"
+                        @hide-me="showMenu = false"
+                        @edit="editRoom"
+                        :id="id"
+                        v-if="showMenu"></widget-popover>
       </div>
     </div>
   </div>
@@ -23,7 +28,7 @@
   import Ellipses from '@/components/icons/Ellipses.vue';
   import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
   import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
-  import RoomPopover from '@/components/rooms/RoomPopover';
+  import WidgetPopover from '@/components/rooms/WidgetPopover';
 
   export default {
     props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id'],
@@ -32,7 +37,7 @@
       RoomEntryCountWidget,
       Ellipses,
       RoomGroupWidget,
-      RoomPopover
+      WidgetPopover
     },
 
     data() {
@@ -66,6 +71,9 @@
             }
           }
         })
+      },
+      editRoom(id) {
+        this.$router.push({name: 'edit-room', params: {id: id}});
       }
     }
   }

client/src/components/rooms/WidgetPopover.vue

@@ -1,13 +1,13 @@
 <template>
   <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>
+    <a class="room-popover__link" @click="$emit('delete', id)">{{entity}} löschen</a>
+    <a class="room-popover__link" @click="$emit('edit', id)">{{entity}} bearbeiten</a>
   </div>
 </template>
 
 <script>
   export default {
-    props: ['id'],
+    props: ['id', 'entity'],
 
     methods: {
       hidePopover() {
@@ -20,7 +20,6 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
-  @import "@/styles/_mixins.scss";
 
   .room-popover {
     position: absolute;
@@ -29,7 +28,6 @@
     display: grid;
     background-color: $color-white;
     padding: 20px;
-    width: 240px;
     z-index: 10;
     @include widget-shadow;