Notifications page : mark all as read working

public/site/plugins/notifications/index.php

@@ -1,9 +1,13 @@
 <?php
 
 Kirby::plugin('adrienpayet/pdc-notifications', [
+  'routes' => [
+    require(__DIR__ . '/routes/readAll.php'),
+  ],
   'userMethods' => [
     'sendNotification' => require(__DIR__ . '/user-methods/send.php'),
     'deleteNotification' => require(__DIR__ . '/user-methods/delete.php'),
-    'readNotification' => require(__DIR__ . '/user-methods/read.php')
+    'readNotification' => require(__DIR__ . '/user-methods/read.php'),
+    'readAllNotifications' => require(__DIR__ . '/user-methods/readAll.php')
   ]
 ]);

public/site/plugins/notifications/routes/mark-as-read.php

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

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

@@ -0,0 +1,10 @@
+<?php
+
+return [
+  'pattern' => '(:all)read-all-notifications.json',
+  'method' => 'GET',
+  'action'  => function () {
+      $newNotifications = kirby()->user()->readAllNotifications();
+      return $newNotifications;
+  }
+];

public/site/plugins/notifications/user-methods/readAll.php

@@ -0,0 +1,22 @@
+<?php
+
+return function() { 
+  try {
+    $notifications = $this->notifications()->isNotEmpty() 
+        ? Yaml::decode($this->notifications()->value())
+        : [];            
+    
+    $newNotification = null;
+    foreach ($notifications as $key => $notification) {
+      $notifications[$key]['isRead'] = true;
+    }
+
+    $updatedUser = $this->update([
+      'notifications' => Yaml::encode(array_values($notifications))
+    ]);
+
+    return Yaml::decode($updatedUser->notifications()->value());
+  } catch (\Throwable $th) {
+    throw new Exception("Error updating notifications: " . $th->getMessage() . ' line ' . $th->getLine(), 1);
+  }
+};

src/stores/api.js

@@ -212,6 +212,24 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
+  async function readAllNotifications() {
+    try {
+      const response = await fetch("/read-all-notifications.json");
+      if (!response.ok) {
+        console.log(response);
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      if (data.error) {
+        throw new Error(data);
+      } else {
+        console.log("All notifications read.");
+      }
+    } catch (error) {
+      throw error;
+    }
+  }
+
   return {
     fetchDataThroughKQL,
     fetchData,
@@ -220,5 +238,6 @@ export const useApiStore = defineStore("api", () => {
     deleteComment,
     replyComment,
     readNotification,
+    readAllNotifications,
   };
 });

src/stores/user.js

@@ -18,5 +18,11 @@ export const useUserStore = defineStore("user", () => {
     });
   }
 
-  return { user, notifications, readNotification };
+  function readAllNotifications(notificationId) {
+    user.value.notifications.forEach((notification) => {
+      notification.isRead = true;
+    });
+  }
+
+  return { user, notifications, readNotification, readAllNotifications };
 });

src/views/Notifications.vue

@@ -5,6 +5,7 @@
     <button
       class="btn | absolute top-0 right-gutter"
       :disabled="!sortedNotifications.length"
+      @click="readAll()"
     >
       Marquer tout come lu
     </button>
@@ -105,15 +106,16 @@
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import Tabs from "../components/Tabs.vue";
-import { usePageStore } from "../stores/page";
 import { useUserStore } from "../stores/user";
 import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
+import { useApiStore } from "../stores/api";
 
 dayjs.locale("fr");
 
-const { page } = storeToRefs(usePageStore());
+const userStore = useUserStore();
 const { notifications } = storeToRefs(useUserStore());
+const api = useApiStore();
 const currentTab = ref("all");
 const tabs = computed(() => {
   return [
@@ -161,6 +163,15 @@ function formatDate(notification) {
     return dayjs(notification.date).format("DD MMM YY");
   }
 }
+
+function readAll() {
+  try {
+    api.readAllNotifications();
+    userStore.readAllNotifications();
+  } catch (error) {
+    console.log("Could not read all notifications : ", error);
+  }
+}
 </script>
 
 <style scoped>