🔨 Add counter to message viewer

nextcloud_backup/frontend/src/App.vue

@@ -1,11 +1,9 @@
 <template>
   <v-app>
     <navbar-component></navbar-component>
-    <v-main>
-      
-      <message-bar></message-bar>
-      <webdav-settings-menu></webdav-settings-menu>
-    </v-main>
+    <message-bar></message-bar>
+    <webdav-settings-menu></webdav-settings-menu>
+    <v-main> </v-main>
   </v-app>
 </template>
 

nextcloud_backup/frontend/src/components/MessageBar.vue

@@ -67,11 +67,14 @@
 
 <script setup lang="ts">
 import { getMessages } from "@/services/messageService";
-import { MessageType, type Message } from "@/types/messages";
+import { useMessageStore } from "@/stores/message";
+import { MessageType } from "@/types/messages";
 import { DateTime } from "luxon";
+import { storeToRefs } from "pinia";
 import { onBeforeUnmount, ref } from "vue";
 
-const messages = ref<Message[]>([]);
+const messagesStore = useMessageStore();
+const { messages } = storeToRefs(messagesStore);
 
 const interval = setInterval(refreshMessages, 1000);
 

nextcloud_backup/frontend/src/components/NavbarComponent.vue

@@ -9,8 +9,10 @@
       </div>
     </v-app-bar-title>
     <v-spacer></v-spacer>
-    <v-btn icon id="message-btn">
-      <v-icon>mdi-bell</v-icon>
+    <v-btn icon id="message-btn" >
+      <v-badge color="error" :content="countUnreadMessages">
+        <v-icon :class="{ shake: haveUnreadMessages }">mdi-bell</v-icon>
+      </v-badge>
     </v-btn>
     <v-menu width="210px">
       <template v-slot:activator="{ props }">
@@ -36,9 +38,13 @@
 
 <script setup lang="ts">
 import { useDialogStatusStore } from "@/stores/dialogStatus";
+import { useMessageStore } from "@/stores/message";
+import { storeToRefs } from "pinia";
 import logoUrl from "../assets/logo.svg";
 
 const dialogStatusStore = useDialogStatusStore();
+const messagesStore = useMessageStore();
+const { haveUnreadMessages, countUnreadMessages } = storeToRefs(messagesStore);
 </script>
 <style scoped>
 .shake {

nextcloud_backup/frontend/src/stores/counter.ts

@@ -1,8 +0,0 @@
-import { ref } from "vue";
-import { defineStore } from "pinia";
-import type { Message } from "@/types/messages";
-
-export const useMessageStore = defineStore("message", () => {
-  const messages = ref<Message[]>([]);
-  return { messages };
-});

nextcloud_backup/frontend/src/stores/message.ts

@@ -0,0 +1,23 @@
+import { computed, ref } from "vue";
+import { defineStore } from "pinia";
+import type { Message } from "@/types/messages";
+
+export const useMessageStore = defineStore("message", () => {
+  const messages = ref<Message[]>([]);
+  const countUnreadMessages = computed(() => {
+    return messages.value.filter((value) => !value.viewed).length;
+  });
+
+  const haveUnreadMessages = computed(() => {
+    let unread = false;
+    for (const mess of messages.value) {
+      if (!mess.viewed) {
+        unread = true;
+        break;
+      }
+    }
+    return unread;
+  });
+
+  return { messages, countUnreadMessages, haveUnreadMessages };
+});