read notification on click working

public/site/config/routes/validate-brief.php

@@ -35,6 +35,7 @@ return [
           'uuid' => (string) kirby()->user()->uuid(),
           'role' => (string) kirby()->user()->role(),
         ],
+        'id' => Str::uuid(),
         'type' => 'content'
       ];
 

public/site/plugins/notifications/index.php

@@ -7,6 +7,7 @@ load([
 Kirby::plugin('adrienpayet/pdc-notifications', [
   'routes' => [
     require(__DIR__ . '/routes/readAll.php'),
+    require(__DIR__ . '/routes/read.php')
   ],
   'userMethods' => [
     'sendNotification' => require(__DIR__ . '/user-methods/send.php'),

public/site/plugins/notifications/routes/read.php

@@ -0,0 +1,13 @@
+<?php
+
+return [
+  'pattern' => '(:all)read-notification.json',
+  'method' => 'POST',
+  'action'  => function () {
+      $json = file_get_contents('php://input');
+      $data = json_decode($json);
+      
+      $newNotifications = kirby()->user()->readNotification($data->notificationId);
+      return $newNotifications;
+  }
+];

src/stores/api.js

@@ -197,7 +197,7 @@ export const useApiStore = defineStore("api", () => {
       }),
     };
     try {
-      const response = await fetch("/read-comment.json", headers);
+      const response = await fetch("/read-notification.json", headers);
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }

src/views/Notifications.vue

@@ -42,10 +42,7 @@
           class="notification | bg-white rounded-lg | p-16 | flow"
           :data-status="notification.isRead ? 'read' : 'unread'"
           :data-type="notification.type"
-        >
+          @click="read(notification)"
-          <router-link
-            v-if="currentTab === 'all' || !notification.isRead"
-            :to="toPath(notification.location.href)"
         >
           <header>
             <p class="flex">
@@ -73,7 +70,6 @@
           >
             {{ notification.text }}
           </p>
-          </router-link>
         </article>
       </template>
       <!-- <article
@@ -112,6 +108,7 @@ import { useUserStore } from "../stores/user";
 import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useApiStore } from "../stores/api";
+import { useRouter } from "vue-router";
 
 dayjs.locale("fr");
 
@@ -138,6 +135,8 @@ const tabs = computed(() => {
   ];
 });
 
+const router = useRouter();
+
 const sortedNotifications = computed(() => {
   return [...notifications.value].sort((a, b) => {
     return dayjs(b.date).diff(dayjs(a.date));
@@ -173,6 +172,15 @@ function readAll() {
   }
 }
 
+function read(notification) {
+  if (!notification.isRead) {
+    api.readNotification(notification.id).then((res) => {
+      router.push(toPath(notification.location.href));
+    });
+  }
+  router.push(toPath(notification.location.href));
+}
+
 function toPath(string) {
   return string.replace(window.location.origin, "");
 }
@@ -198,6 +206,7 @@ main > header [role="tablist"] {
   --flow-space: var(--space-12);
   font-size: var(--text-sm);
   position: relative;
+  cursor: pointer;
 }
 .notification[data-status="unread"]::after {
   content: "";