Internal: Fix unread message count in inbox icon - refs BT#21695

assets/vue/components/layout/TopbarLoggedIn.vue

@@ -19,7 +19,7 @@
 
       <PrimeButton
         :badge="btnInboxBadge"
-        :class="{ 'item-button--unread': btnInboxBadge }"
+        :class="{ 'item-button--unread': !!btnInboxBadge }"
         :icon="chamiloIconToClass['inbox']"
         badge-class="item-button__badge"
         class="item-button"
@@ -35,7 +35,7 @@
         class="user-avatar"
         shape="circle"
         unstyled
-        @click="toogleUserMenu"
+        @click="toggleUserMenu"
       />
     </div>
   </div>
@@ -118,15 +118,16 @@ const userSubmenuItems = computed(() => [
   },
 ])
 
-function toogleUserMenu(event) {
+function toggleUserMenu(event) {
   elUserSubmenu.value.toggle(event)
 }
 
 const headerLogo = headerLogoPath
 
-const btnInboxBadge = computed(() =>
-  messageRelUserStore.countUnread > 9 ? "9+" : messageRelUserStore.countUnread.toString(),
-)
+const btnInboxBadge = computed(() => {
+  const unreadCount = messageRelUserStore.countUnread
+  return unreadCount > 20 ? "9+" : unreadCount > 0 ? unreadCount.toString() : null
+})
 
 messageRelUserStore.findUnreadCount().catch((e) => notification.showErrorNotification(e))
 </script>

assets/vue/services/message.js

@@ -17,6 +17,12 @@ async function create(message) {
   return await baseService.post("/api/messages", message)
 }
 
+async function countUnreadMessages(params) {
+  const queryParams = new URLSearchParams(params).toString()
+  return await baseService.get(`/api/messages?${queryParams}`)
+}
+
 export const messageService = {
   create,
+  countUnreadMessages,
 }

assets/vue/store/messageRelUserStore.js

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia"
 import { useSecurityStore } from "./securityStore"
-import messageRelUSerService from "../services/messagereluser"
+import { messageService } from "../services/message"
+import { MESSAGE_TYPE_INBOX } from "../components/message/constants"
 
 export const useMessageRelUserStore = defineStore("messageRelUser", {
   state: () => ({
@@ -10,16 +11,25 @@ export const useMessageRelUserStore = defineStore("messageRelUser", {
     async findUnreadCount() {
       const securityStore = useSecurityStore()
 
-      const response = await messageRelUSerService.findAll({
-        params: {
-          read: false,
-          receiver: securityStore.user["@id"],
+      try {
+        const params = {
+          "order[sendDate]": "desc",
+          "receivers.read": false,
+          "receivers.receiver": securityStore.user["@id"],
           itemsPerPage: 1,
-        },
-      })
-      const json = await response.json()
+          msgType: MESSAGE_TYPE_INBOX,
+        }
+        const response = await messageService.countUnreadMessages(params)
 
-      this.countUnread = json["hydra:totalItems"]
+        if (response && response["hydra:totalItems"] !== undefined) {
+          this.countUnread = response["hydra:totalItems"]
+        } else {
+          this.countUnread = 0
+        }
+      } catch (error) {
+        console.error("Error fetching unread count:", error)
+        this.countUnread = 0
+      }
     },
   },
 })