Merge pull request #6605 from Ocelot-Social-Community/6589-on-open-chat-room-page-close-or-on-change-profile-change-mini-chat

feat(webapp): on open chat room page close or on change profile and click chat change small chat

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)"
@@ -75,8 +75,13 @@ export default {
   props: {
     theme: {
       type: String,
+      default: 'light',
     },
-    singleRoomId: {
+    singleRoom: {
+      type: Boolean,
+      default: false,
+    },
+    roomId: {
       type: String,
       default: null,
     },
@@ -144,8 +149,7 @@ export default {
       roomsLoaded: false,
       roomPage: 0,
       roomPageSize: 10,
-      singleRoom: !!this.singleRoomId || false,
-      selectedRoom: null,
+      selectedRoom: this.roomId,
       loadingRooms: true,
       messagesLoaded: false,
       messagePage: 0,
@@ -159,7 +163,7 @@ export default {
         .mutate({
           mutation: createRoom(),
           variables: {
-            userId: this.singleRoomId,
+            userId: this.roomId,
           },
         })
         .then(({ data: { CreateRoom } }) => {

webapp/layouts/default.vue

@@ -13,33 +13,40 @@
     <client-only>
       <modal />
     </client-only>
-    <div v-if="$store.getters['chat/showChat'].showChat" class="chat-modul">
-      <chat-module
-        v-on:close-single-room="closeSingleRoom"
-        :singleRoomId="$store.getters['chat/showChat'].roomID"
-      />
+    <div v-if="getShowChat.showChat" class="chat-modul">
+      <chat singleRoom :roomId="getShowChat.roomID" @close-single-room="closeSingleRoom" />
     </div>
   </div>
 </template>
+
 <script>
+import { mapGetters, mapMutations } from 'vuex'
 import seo from '~/mixins/seo'
 import mobile from '~/mixins/mobile'
 import HeaderMenu from '~/components/HeaderMenu/HeaderMenu'
 import Modal from '~/components/Modal'
 import PageFooter from '~/components/PageFooter/PageFooter'
-import ChatModule from '~/components/Chat/Chat.vue'
+import Chat from '~/components/Chat/Chat.vue'
 
 export default {
   components: {
     HeaderMenu,
     Modal,
     PageFooter,
-    ChatModule,
+    Chat,
   },
   mixins: [seo, mobile()],
+  computed: {
+    ...mapGetters({
+      getShowChat: 'chat/showChat',
+    }),
+  },
   methods: {
+    ...mapMutations({
+      showChat: 'chat/SET_OPEN_CHAT',
+    }),
     closeSingleRoom() {
-      this.$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: null })
+      this.showChat({ showChat: false, roomID: null })
     },
   },
   beforeCreate() {

webapp/pages/chat.vue

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

webapp/pages/profile/_id/_slug.vue

@@ -85,7 +85,7 @@
                 content: $t('chat.userProfileButton.tooltip', { name: userName }),
                 placement: 'bottom-start',
               }"
-              @click="showChat({ showChat: true, roomID: user.id })"
+              @click="showOrChangeChat(user.id)"
             >
               {{ $t('chat.userProfileButton.label') }}
             </base-button>
@@ -182,7 +182,7 @@
 
 <script>
 import uniqBy from 'lodash/uniqBy'
-import { mapMutations } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import postListActions from '~/mixins/postListActions'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import HcFollowButton from '~/components/Button/FollowButton'
@@ -254,6 +254,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      getShowChat: 'chat/showChat',
+    }),
     myProfile() {
       return this.$route.params.id === this.$store.getters['auth/user'].id
     },
@@ -403,6 +406,12 @@ export default {
       if (type === 'following') this.followingCount = count
       if (type === 'followedBy') this.followedByCount = count
     },
+    async showOrChangeChat(roomID) {
+      if (this.getShowChat.showChat) {
+        await this.showChat({ showChat: false, roomID: null })
+      }
+      await this.showChat({ showChat: true, roomID })
+    },
   },
   apollo: {
     profilePagePosts: {