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,38 +42,34 @@
           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">
-                <strong
-                  class="notification__type | font-medium text-primary"
-                  :data-icon="notification.type"
-                  >Nouveau
-                  {{
-                    notification.type === "comment" ? "commentaire" : "contenu"
-                  }}</strong
-                >
-                <span class="notification__client | text-grey-700">{{
-                  notification.location.project.title
-                }}</span>
-                <time
-                  datetime=""
-                  class="notification__date | text-grey-700 | ml-auto"
-                  >{{ formatDate(notification) }}</time
-                >
-              </p>
-            </header>
-            <p
-              v-if="notification.type"
-              class="notification__body | text-md font-medium | line-clamp"
-            >
-              {{ notification.text }}
+          <header>
+            <p class="flex">
+              <strong
+                class="notification__type | font-medium text-primary"
+                :data-icon="notification.type"
+                >Nouveau
+                {{
+                  notification.type === "comment" ? "commentaire" : "contenu"
+                }}</strong
+              >
+              <span class="notification__client | text-grey-700">{{
+                notification.location.project.title
+              }}</span>
+              <time
+                datetime=""
+                class="notification__date | text-grey-700 | ml-auto"
+                >{{ formatDate(notification) }}</time
+              >
             </p>
-          </router-link>
+          </header>
+          <p
+            v-if="notification.type"
+            class="notification__body | text-md font-medium | line-clamp"
+          >
+            {{ notification.text }}
+          </p>
         </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: "";