read notification working

src/components/comments/Comment.vue

@@ -86,6 +86,7 @@ import { useDialogStore } from "../../stores/dialog";
 import { computed, onMounted, ref, useTemplateRef } from "vue";
 import { storeToRefs } from "pinia";
 import { usePageStore } from "../../stores/page";
+import { useRoute } from "vue-router";
 
 dayjs.locale("fr");
 
@@ -96,6 +97,7 @@ const { comment, commentIndex } = defineProps({
 
 const emits = defineEmits(["update:file", "close:comment"]);
 
+const route = useRoute();
 const userStore = useUserStore();
 const api = useApiStore();
 const dialog = useDialogStore();
@@ -146,8 +148,7 @@ async function read() {
   if (getStatus.value !== "unread") return;
   try {
     const newNotification = await api.readNotification(comment, page.value.uri);
-    console.log(newNotification);
-    userStore.readNotification(comment.id);
+    userStore.readNotification(comment.id, route.params.id);
   } catch (error) {
     console.log("Erreur lors de la lecture de la notification : ", error);
   }

src/components/notifications/Comment.vue

@@ -2,7 +2,6 @@
   <article
     class="notification | bg-white rounded-lg | p-16 | flow"
     data-type="comment"
-    @click="router.push(href)"
   >
     <header>
       <p class="flex">
@@ -39,31 +38,8 @@
 </template>
 
 <script setup>
-import { useRouter } from "vue-router";
 import { useNotificationsStore } from "../../stores/notifications";
 
-const router = useRouter();
 const { notification } = defineProps({ notification: Object });
 const { formatDate } = useNotificationsStore();
-
-const href = getTargetPath();
-
-// Functions
-function getTargetPath() {
-  const uri = notification.location.page.uri;
-
-  const isDocumentBrief =
-    notification.location.page.template === "client-brief" &&
-    notification.location?.file.type === "document";
-
-  if (isDocumentBrief) {
-    return notification.project.uri + "?dialog=client-brief&comments=true";
-  }
-
-  if (notification.location.page.template === "track") {
-    return notification.project.uri + "?dialog=virtual-sample&comments=true";
-  }
-
-  return uri;
-}
 </script>

src/stores/user.js

@@ -7,34 +7,44 @@ export const useUserStore = defineStore("user", () => {
 
   const { projects } = storeToRefs(useProjectsStore());
 
-  const notifications = computed(() => {
-    return projects.value.reduce((acc, project) => {
-      if (!project.notifications) return acc;
+  const notifications = computed(
+    () => {
+      return projects.value.reduce((acc, project) => {
+        if (!project.notifications) return acc;
 
-      const projectNotifications = project.notifications.map((notification) => {
-        const newNotification = {
-          ...notification,
-          project: project,
-          isRead: notification.readby?.includes(user.value.uuid),
-        };
+        const projectNotifications = project.notifications.map(
+          (notification) => {
+            const newNotification = {
+              ...notification,
+              project: project,
+              isRead: notification.readby?.includes(user.value.uuid),
+            };
 
-        return newNotification;
-      });
+            return newNotification;
+          }
+        );
 
-      const userNotifications = projectNotifications.filter(
-        (notification) => notification.author.uuid !== user.value.uuid
-      );
+        const userNotifications = projectNotifications.filter(
+          (notification) => notification.author.uuid !== user.value.uuid
+        );
 
-      return [...acc, ...userNotifications];
-    }, []);
-  });
+        return [...acc, ...userNotifications];
+      }, []);
+    },
+    { deep: true }
+  );
 
-  function readNotification(notificationId) {
-    notifications.value = notifications.value.map((notification) => {
-      if (notification.id === notificationId) {
-        notification.isRead = true;
+  function readNotification(notificationId, projectSlug) {
+    projects.value = projects.value.map((project) => {
+      if (project.slug === projectSlug) {
+        project.notifications = project.notifications.map((notification) => {
+          if (notification.id === notificationId) {
+            notification.readby.push(user.value.uuid);
+          }
+          return notification;
+        });
       }
-      return notification;
+      return project;
     });
   }
 

src/views/Notifications.vue

@@ -45,6 +45,7 @@
           :is="notificationComponents[notification.type]"
           :notification="notification"
           :data-status="notification.isRead ? 'read' : 'unread'"
+          @click="router.push(getHref(notification))"
         />
       </template>
     </section>
@@ -62,10 +63,12 @@ import { useApiStore } from "../stores/api";
 import Comment from "../components/notifications/Comment.vue";
 import Reply from "../components/notifications/Reply.vue";
 import Content from "../components/notifications/Content.vue";
+import { useRouter } from "vue-router";
 
 dayjs.locale("fr");
 
 const userStore = useUserStore();
+const router = useRouter();
 const { notifications } = storeToRefs(useUserStore());
 const api = useApiStore();
 const currentTab = ref("all");
@@ -119,6 +122,25 @@ function readAll() {
     console.log("Could not read all notifications : ", error);
   }
 }
+
+// Functions
+function getHref(notification) {
+  const uri = notification.location.page.uri;
+
+  const isDocumentBrief =
+    notification.location.page.template === "client-brief" &&
+    notification.location?.file.type === "document";
+
+  if (isDocumentBrief) {
+    return notification.project.uri + "?dialog=client-brief&comments=true";
+  }
+
+  if (notification.location.page.template === "track") {
+    return notification.project.uri + "?dialog=virtual-sample&comments=true";
+  }
+
+  return uri;
+}
 </script>
 
 <style scoped>