ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Generalize popover for widgets

This commit is contained in:
Ramon Wenger 2018-10-29 13:24:24 +01:00
parent daa8491578
commit cc99dd00b1
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/rooms/RoomWidget.vue
View File

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

8
client/src/components/rooms/RoomPopover.vue → client/src/components/rooms/WidgetPopover.vue
View File

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