Merge pull request #558 from Adamant-im/feat/show-unread-count-over-t…

…he-back-button

feat:show unread count over the back button

src/components/Chat/ChatToolbar.vue

@@ -1,6 +1,14 @@
 <template>
   <v-toolbar flat height="56" :class="`${className}`" color="transparent">
     <v-btn icon @click="goBack">
+      <v-badge
+        v-if="numOfNewMessages > 0"
+        :value="numOfNewMessages"
+        color="primary"
+        :class="`${className}__messages-counter`"
+        :content="numOfNewMessages > 99 ? '99+' : numOfNewMessages"
+      >
+      </v-badge>
       <v-icon icon="mdi-arrow-left" />
     </v-btn>
     <div v-if="!isWelcomeChat(partnerId)">
@@ -61,6 +69,9 @@ export default {
           displayName: value
         })
       }
+    },
+    numOfNewMessages() {
+      return this.$store.getters['chat/numWithoutTheCurrentChat'](this.partnerId)
     }
   },
   data: () => ({
@@ -95,6 +106,11 @@ export default {
   flex-grow: 0;
   flex-shrink: 0;
 
+  &__messages-counter {
+    position: relative;
+    top: -14px;
+    left: -2px;
+  }
   &__textfield-container {
     width: 100%;
   }

src/store/modules/chat/index.js

@@ -220,6 +220,12 @@ const getters = {
     return senderIds.reduce((acc, senderId) => state.chats[senderId].numOfNewMessages + acc, 0)
   },
 
+  numWithoutTheCurrentChat: (state, getters) => (senderId) => {
+    const totalNumOfNewMessages = getters.totalNumOfNewMessages
+    const numOfNewMessages = getters.numOfNewMessages(senderId)
+    return totalNumOfNewMessages - numOfNewMessages
+  },
+
   /**
    * Get unread messages from all chats.
    * @returns {Message[]}