From c7deefa5636e5e1f95839e86a2910682330024cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 18 Jul 2023 17:33:45 +0200
Subject: [PATCH] Close small chat if one changes to the chat room page

---
 webapp/components/Chat/Chat.vue | 16 +++++++++++-----
 webapp/layouts/default.vue      | 14 +++++++++-----
 webapp/pages/chat.vue           | 12 ++++++------
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index 43994ef5d..42dd1cf98 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/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 } }) => {
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 27efcdd89..13e5bdb95 100644
--- a/webapp/layouts/default.vue
+++ b/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 })
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index e2a577c5e..920cbabe9 100644
--- a/webapp/pages/chat.vue
+++ b/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({