76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<template>
|
|
<div class="room">
|
|
<div class="room__header">
|
|
<h1 class="room__title">{{room.title}}</h1>
|
|
<p class="room__intro">
|
|
{{room.description}}
|
|
</p>
|
|
<div class="room__meta">
|
|
<room-group-widget v-bind="room.schoolClass"></room-group-widget>
|
|
<entry-count-widget :entry-count="roomEntryCount"></entry-count-widget>
|
|
</div>
|
|
</div>
|
|
<div class="room__content">
|
|
<add-room-entry-button :parent="room" v-if="room.id">
|
|
<!--
|
|
the v-if is there for the case where the room hasn't loaded yet, but there is already an attempt to create
|
|
a new room entry. mainly happens during cypress testing, but could also happen on a very slow connection
|
|
-->
|
|
</add-room-entry-button>
|
|
<room-entry v-for="entry in room.roomEntries" v-bind="entry" :key="entry.id"></room-entry>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MODULE_ROOM_ENTRIES_QUERY from '@/graphql/gql/moduleRoomEntryQuery.gql';
|
|
import ME_QUERY from '@/graphql/gql/meQuery.gql';
|
|
import roomMixin from '@/mixins/room'
|
|
|
|
export default {
|
|
props: ['slug'],
|
|
mixins: [roomMixin],
|
|
|
|
data() {
|
|
return {
|
|
room: [],
|
|
entries: [],
|
|
me: {
|
|
selectedClass: {
|
|
id: ''
|
|
},
|
|
permissions: []
|
|
}
|
|
}
|
|
},
|
|
|
|
apollo: {
|
|
moduleRoom: {
|
|
query: MODULE_ROOM_ENTRIES_QUERY,
|
|
variables() {
|
|
return {
|
|
slug: this.slug,
|
|
classId: this.me.selectedClass.id
|
|
}
|
|
},
|
|
// manual: true,
|
|
// todo: do we really need manual here? update should do the trick too
|
|
result({data, loading, networkStatus}) {
|
|
if (!loading) {
|
|
this.room = Object.assign({}, this.$getRidOfEdges(data).moduleRoom);
|
|
this.$store.dispatch('setSpecialContainerClass', this.room.appearance);
|
|
}
|
|
},
|
|
pollInterval: 5000,
|
|
},
|
|
me: {
|
|
query: ME_QUERY,
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_room.scss";
|
|
</style>
|