109 lines
2.2 KiB
Vue
109 lines
2.2 KiB
Vue
<template>
|
|
<div class="rooms-page">
|
|
<room-widget v-for="room in filteredRooms" v-bind="room" :key="room.name"></room-widget>
|
|
<add-room class="rooms-page__add-room" v-if="canAddRoom" data-cy="add-room"></add-room>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
|
|
import ME_QUERY from '@/graphql/gql/meQuery.gql'
|
|
|
|
import RoomWidget from '@/components/rooms/RoomWidget.vue';
|
|
import AddRoom from '@/components/rooms/AddRoom.vue';
|
|
|
|
export default {
|
|
components: {
|
|
RoomWidget,
|
|
AddRoom
|
|
},
|
|
|
|
computed: {
|
|
filteredRooms() {
|
|
return this.rooms.filter(room => this.visibleFor(room, this.currentFilter));
|
|
},
|
|
currentFilter() {
|
|
return this.$store.state.filterForSchoolClass;
|
|
},
|
|
canAddRoom() {
|
|
return this.me.permissions.includes('users.can_manage_school_class_content')
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
visibleFor(room, schoolClass) {
|
|
return !schoolClass || room.schoolClass.id === schoolClass;
|
|
}
|
|
},
|
|
|
|
apollo: {
|
|
rooms: {
|
|
query: ROOMS_QUERY,
|
|
update(data) {
|
|
return this.$getRidOfEdges(data).rooms
|
|
}
|
|
},
|
|
me: {
|
|
query: ME_QUERY,
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
rooms: [],
|
|
me: {
|
|
permissions: []
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.rooms-page {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: start;
|
|
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
}
|
|
|
|
padding: 50px 15px;
|
|
@include desktop {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
-ms-grid-columns: 1fr 30px 1fr 30px 1fr;
|
|
padding: 50px 45px;
|
|
}
|
|
grid-column-gap: 30px;
|
|
grid-row-gap: 30px;
|
|
grid-auto-rows: 260px;
|
|
max-width: 1440px;
|
|
width: 100%;
|
|
justify-self: center;
|
|
box-sizing: border-box;
|
|
|
|
&__add-room {
|
|
visibility: hidden;
|
|
|
|
@include desktop {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
& > div {
|
|
flex: 0 0 30%;
|
|
margin-bottom: $large-spacing;
|
|
margin-right: 1%;
|
|
|
|
@supports (display: grid) {
|
|
margin-bottom: inherit;
|
|
margin-right: inherit;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|