From 2cd2725fb7c1b869b7985031e3d964963ef419bb Mon Sep 17 00:00:00 2001
From: SebClem <seb6596@gmail.com>
Date: Wed, 26 Oct 2022 12:06:29 +0200
Subject: [PATCH] :hammer: Add counter to message viewer

---
 nextcloud_backup/frontend/src/App.vue         |  8 +++----
 .../frontend/src/components/MessageBar.vue    |  7 ++++--
 .../src/components/NavbarComponent.vue        | 10 ++++++--
 .../frontend/src/stores/counter.ts            |  8 -------
 .../frontend/src/stores/message.ts            | 23 +++++++++++++++++++
 5 files changed, 39 insertions(+), 17 deletions(-)
 delete mode 100644 nextcloud_backup/frontend/src/stores/counter.ts
 create mode 100644 nextcloud_backup/frontend/src/stores/message.ts

diff --git a/nextcloud_backup/frontend/src/App.vue b/nextcloud_backup/frontend/src/App.vue
index 17dafbe..f6838e9 100644
--- a/nextcloud_backup/frontend/src/App.vue
+++ b/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>
 
diff --git a/nextcloud_backup/frontend/src/components/MessageBar.vue b/nextcloud_backup/frontend/src/components/MessageBar.vue
index 519e73f..71f527c 100644
--- a/nextcloud_backup/frontend/src/components/MessageBar.vue
+++ b/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);
 
diff --git a/nextcloud_backup/frontend/src/components/NavbarComponent.vue b/nextcloud_backup/frontend/src/components/NavbarComponent.vue
index b6a11da..848d1bd 100644
--- a/nextcloud_backup/frontend/src/components/NavbarComponent.vue
+++ b/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 {
diff --git a/nextcloud_backup/frontend/src/stores/counter.ts b/nextcloud_backup/frontend/src/stores/counter.ts
deleted file mode 100644
index 5a9ab82..0000000
--- a/nextcloud_backup/frontend/src/stores/counter.ts
+++ /dev/null
@@ -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 };
-});
diff --git a/nextcloud_backup/frontend/src/stores/message.ts b/nextcloud_backup/frontend/src/stores/message.ts
new file mode 100644
index 0000000..d0346fe
--- /dev/null
+++ b/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 };
+});