139 lines
3.2 KiB
Vue
139 lines
3.2 KiB
Vue
<template>
|
|
<div class="room-widget" :class="roomClass">
|
|
<router-link :to="{name: 'room', params: {slug: slug}}" tag="div" class="room-widget__content">
|
|
<h2 class="room-widget__title">{{title}}</h2>
|
|
<room-group-widget v-bind="schoolClass"></room-group-widget>
|
|
<entry-count-widget :entryCount="entryCount"></entry-count-widget>
|
|
</router-link>
|
|
<widget-footer v-if="canEditRoom">
|
|
<li class="popover-links__link"><a @click="deleteRoom()">Raum löschen</a></li>
|
|
<li class="popover-links__link"><a @click="editRoom()">Raum bearbeiten</a></li>
|
|
</widget-footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import DELETE_ROOM_MUTATION from '@/graphql/gql/mutations/deleteRoom.gql';
|
|
import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
|
|
|
|
import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
|
|
import EntryCountWidget from '@/components/rooms/EntryCountWidget';
|
|
import WidgetFooter from '@/components/WidgetFooter';
|
|
|
|
import {meQuery} from '@/graphql/queries';
|
|
|
|
export default {
|
|
props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id'],
|
|
|
|
components: {
|
|
EntryCountWidget,
|
|
RoomGroupWidget,
|
|
WidgetFooter
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
showMenu: false,
|
|
me: {
|
|
permissions: []
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
roomClass() {
|
|
return `room-widget--${this.appearance}`
|
|
},
|
|
canEditRoom() {
|
|
return this.me.permissions.includes('users.can_manage_school_class_content');
|
|
}
|
|
},
|
|
|
|
apollo: {
|
|
me: meQuery
|
|
},
|
|
|
|
methods: {
|
|
deleteRoom() {
|
|
const theId = this.id
|
|
this.$apollo.mutate({
|
|
mutation: DELETE_ROOM_MUTATION,
|
|
variables: {
|
|
input: {
|
|
id: theId
|
|
}
|
|
},
|
|
update(store, {data: {deleteRoom: {success}}}) {
|
|
if (success) {
|
|
const data = store.readQuery({query: ROOMS_QUERY});
|
|
if (data) {
|
|
data.rooms.edges.splice(data.rooms.edges.findIndex(edge => edge.node.id === theId), 1);
|
|
store.writeQuery({query: ROOMS_QUERY, data});
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
editRoom() {
|
|
this.$router.push({name: 'edit-room', params: {id: this.id}});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.room-widget {
|
|
display: -ms-grid;
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
}
|
|
height: 260px;
|
|
grid-template-rows: 210px 1fr;
|
|
/*overflow: hidden;*/
|
|
@include widget-shadow;
|
|
border: 0;
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
-ms-grid-rows: 210px 1fr;
|
|
-ms-grid-columns: 1fr;
|
|
|
|
@include skillbox-colors;
|
|
|
|
svg {
|
|
width: 30px;
|
|
fill: $color-darkgrey-1;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
&__content {
|
|
padding: 22px;
|
|
color: $color-darkgrey-1;
|
|
cursor: pointer;
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
display: -ms-grid;
|
|
-ms-grid-rows: 80px 30px 30px;
|
|
& > :nth-child(1) {
|
|
-ms-grid-row: 1;
|
|
}
|
|
& > :nth-child(2) {
|
|
-ms-grid-row: 2;
|
|
}
|
|
& > :nth-child(3) {
|
|
-ms-grid-row: 3;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
font-size: 1.375rem;
|
|
}
|
|
}
|
|
</style>
|