96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
<template>
|
|
<div class="rooms-page">
|
|
<room-widget v-for="room in filteredRooms" v-bind="room" :key="room.name"></room-widget>
|
|
<add-room></add-room>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ROOMS_QUERY from '@/graphql/gql/roomsQuery.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.filterForGroup;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
visibleFor(room, userGroup) {
|
|
return !userGroup || room.userGroup.id === userGroup;
|
|
}
|
|
},
|
|
|
|
apollo: {
|
|
roomQuery: {
|
|
query: ROOMS_QUERY,
|
|
manual: true,
|
|
result({data, loading, networkStatus}) {
|
|
if (!loading) {
|
|
this.rooms = this.$getRidOfEdges(data).allRooms
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
rooms: []
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.rooms-page {
|
|
display: -ms-grid;
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
}
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-column-gap: 30px;
|
|
grid-row-gap: 30px;
|
|
grid-auto-rows: 260px;
|
|
padding: 50px 45px;
|
|
max-width: 1440px;
|
|
width: 100%;
|
|
justify-self: center;
|
|
box-sizing: border-box;
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
-ms-grid-columns: 1fr 1fr 1fr;
|
|
-ms-grid-rows: 260px;
|
|
|
|
/*
|
|
* SHAME SHAME SHAME
|
|
* this is very hacky, but we have a dynamic amount of elements. better to be safe than sorry
|
|
* SHAME SHAME SHAME
|
|
*/
|
|
@for $i from 1 to 101 {
|
|
& > :nth-child(#{$i}) {
|
|
@if ($i%3) == 0 {
|
|
-ms-grid-column: 3;
|
|
} @else {
|
|
-ms-grid-column: ($i%3);
|
|
}
|
|
|
|
-ms-grid-row: floor(($i - 1)/3)+1;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|