Close small chat if one changes to the chat room page

webapp/components/Chat/Chat.vue

@@ -4,7 +4,7 @@
       <vue-advanced-chat
         :theme="theme"
         :current-user-id="currentUser.id"
-        :room-id="null"
+        :room-id="!singleRoom ? roomId : null"
         :template-actions="JSON.stringify(templatesText)"
         :menu-actions="JSON.stringify(menuActions)"
         :text-messages="JSON.stringify(textMessages)"
@@ -70,13 +70,20 @@ export default {
   props: {
     theme: {
       type: String,
+      default: 'light',
     },
-    singleRoomId: {
+    singleRoom: {
+      type: Boolean,
+      default: false,
+    },
+    roomId: {
       type: String,
       default: null,
     },
   },
   data() {
+    // Wolle console.log('this.singleRoom: ', this.singleRoom)
+    // console.log('this.roomId: ', this.roomId)
     return {
       menuActions: [
         // NOTE: if menuActions is empty, the related slot is not shown
@@ -139,8 +146,7 @@ export default {
       roomsLoaded: false,
       roomPage: 0,
       roomPageSize: 10,
-      singleRoom: !!this.singleRoomId || false,
-      selectedRoom: null,
+      selectedRoom: this.roomId,
       loadingRooms: true,
       messagesLoaded: false,
       messagePage: 0,
@@ -154,7 +160,7 @@ export default {
         .mutate({
           mutation: createRoom(),
           variables: {
-            userId: this.singleRoomId,
+            userId: this.roomId,
           },
         })
         .then(({ data: { CreateRoom } }) => {

webapp/layouts/default.vue

@@ -13,15 +13,14 @@
     <client-only>
       <modal />
     </client-only>
-    <div v-if="$store.getters['chat/showChat'].showChat" class="chat-modul">
-      <chat
-        :singleRoomId="$store.getters['chat/showChat'].roomID"
-        @close-single-room="closeSingleRoom"
-      />
+    <div v-if="getShowChat.showChat" class="chat-modul">
+      <chat singleRoom :roomId="getShowChat.roomID" @close-single-room="closeSingleRoom" />
     </div>
   </div>
 </template>
+
 <script>
+import { mapGetters } from 'vuex'
 import seo from '~/mixins/seo'
 import mobile from '~/mixins/mobile'
 import HeaderMenu from '~/components/HeaderMenu/HeaderMenu'
@@ -37,6 +36,11 @@ export default {
     Chat,
   },
   mixins: [seo, mobile()],
+  computed: {
+    ...mapGetters({
+      getShowChat: 'chat/showChat',
+    }),
+  },
   methods: {
     closeSingleRoom() {
       this.$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: null })

webapp/pages/chat.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <ds-heading tag="h1">{{ $t('chat.page.headline') }}</ds-heading>
-    <chat />
+    <chat :roomId="getShowChat.showChat ? getShowChat.roomID : null" />
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import Chat from '../components/Chat/Chat.vue'
 
 export default {
@@ -14,10 +14,10 @@ export default {
   mounted() {
     this.showChat({ showChat: false, roomID: null })
   },
-  data() {
-    return {
-      // former,
-    }
+  computed: {
+    ...mapGetters({
+      getShowChat: 'chat/showChat',
+    }),
   },
   methods: {
     ...mapMutations({