read comment notification working

public/site/blueprints/fields/notifications.yml

@@ -40,6 +40,5 @@ fields:
         disabled: true
   date:
     type: hidden
-  isread:
-    type: toggle
-    disabled: true
+  readby:
+    type: users

public/site/blueprints/users/admin.yml

@@ -1,6 +1,3 @@
 title: Admin
 description: Possède tous les droits et les accès, peut accéder à l’ensemble des Clients et des Projets et assigner des Projets à des Utilisateurs.
 home: /panel/pages/projects
-
-fields:
-  notifications: fields/notifications

public/site/blueprints/users/client.yml

@@ -5,12 +5,7 @@ permissions:
     panel: false
 
 fields:
-  client:
-    type: pages
-    max: 1
-    query: page('clients').children
   projects:
     label: Projets
     type: pages
     query: page('projects').children
-  notifications: fields/notifications

public/site/blueprints/users/pochet.yml

@@ -19,4 +19,3 @@ fields:
     type: pages
     query: page('projects').children
     width: 3/4
-  notifications: fields/notifications

public/site/controllers/site.php

@@ -10,11 +10,10 @@ return function ($page, $kirby, $site) {
 
   $userData = [
     "role" => (string) $kirby->user()->role(),
-    "uuid" => (string) $kirby->user()->uuid(),
-    "notifications" => Yaml::decode($kirby->user()->notifications()->value()),
+    "uuid" => (string) $kirby->user()->uuid()
   ];
 
-  if ($kirby->user()->role() == 'client' && $kirby->user()->client()->isNotEmpty()) {
+  if ($kirby->user()->client()->exists() && $kirby->user()->client()->isNotEmpty()) {
     $userData['client'] = [
       "name" => (string) $kirby->user()->client()->toPage()->title(),
       "uuid" => (string) $kirby->user()->client()->toPage()->uuid()

public/site/plugins/comments/routes/create.php

@@ -52,7 +52,7 @@ return [
       try {
         $project->createNotification($commentData);
       } catch (\Throwable $th) {
-        throw new Exception($th->getMessage() . ". Line " . $th->getLine() . " in file " . $th->getFile(), 1);
+        throw new Exception($th->getMessage() . ". line " . $th->getLine() . " in file " . $th->getFile(), 1);
       }
 
       exit;

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

@@ -6,8 +6,18 @@ return [
   'action'  => function () {
       $json = file_get_contents('php://input');
       $data = json_decode($json);
-      
-      $newNotifications = kirby()->user()->readNotification($data->notificationId);
-      return $newNotifications;
+
+      try {
+        $project = page($data->projectUuid);
+        $project->readNotification($data->notificationId);
+        return json_encode([
+          "status" => "success"
+        ]);
+      } catch (\Throwable $th) {
+        return json_encode([
+          "status" => "error",
+          "message" => $th->getMessage() . ' line ' . $th->getLine() . " in file " . $th->getFile()
+        ]);
+      }
   }
 ];

public/site/plugins/notifications/src/Notification.php

@@ -12,7 +12,7 @@ class Notification
     protected Author $author;
     protected string $date;
     protected string $id;
-    protected string $isread = "false";
+    protected array $readby = [];
 
     protected ?Position $position = null;
 
@@ -33,7 +33,7 @@ class Notification
             "author" => $this->author->toArray(),
             "date" => $this->date,
             "id" => $this->id,
-            "isread" => $this->isread,
+            "readby" => $this->readby,
         ];
 
         return $array;

public/site/plugins/notifications/src/NotificationsPage.php

@@ -31,7 +31,36 @@ class NotificationsPage extends Page {
       }
 
       $this->update([
-         'notifications' => Yaml::encode(array_values($notifications))
+         'notifications' => $notifications
       ]);
    }
+
+   public function readNotification($notificationId) {
+      $notifications = $this->notifications()->isNotEmpty()
+          ? Yaml::decode($this->notifications()->value())
+          : [];
+      
+      foreach ($notifications as $key => &$notification) {
+          if ($notification['id'] !== $notificationId) {
+              continue;
+          }
+  
+          if (!isset($notification["readby"])) {
+              $notification["readby"] = [];
+          }
+  
+          $userUuid = (string) kirby()->user()->uuid();
+          if (in_array($userUuid, $notification["readby"])) {
+              return;
+          }
+  
+          $notification["readby"][] = $userUuid;  
+          break;
+      }
+
+      $this->update([
+          'notifications' => Yaml::encode($notifications)
+      ]);
+  }
+  
 }

src/components/Menu.vue

@@ -115,15 +115,15 @@ import { useProjectStore } from "../stores/project";
 
 const route = useRoute();
 const isExpanded = ref(true);
-const { user } = storeToRefs(useUserStore());
+const { user, notifications } = storeToRefs(useUserStore());
 const { currentProjects, archivedProjects } = storeToRefs(useProjectsStore());
 const { isEmptyBrief } = useProjectStore();
 const { page } = storeToRefs(usePageStore());
 
 const unreadNotificationsCount = computed(() => {
   if (!user.value) return undefined;
-  const count = user.value.notifications.filter(
-    (notification) => notification.isread != "true"
+  const count = notifications.value.filter(
+    (notification) => !notification.isRead
   ).length;
   if (count === 0) return undefined;
   return count;
@@ -168,7 +168,7 @@ function isCurrent(navItem) {
 
 function hasUnreadNotification(project) {
   if (!user.value) return false;
-  return user.value.notifications.some((notification) => {
+  return notifications.value.some((notification) => {
     return (
       notification.isread != "true" &&
       project.uri.includes(notification.location.project.uri)

src/components/comments/Comment.vue

@@ -109,7 +109,7 @@ const getStatus = computed(() => {
   const correspondingNotification = userStore.notifications.find(
     (notification) => notification.id === comment.id
   );
-  if (correspondingNotification && correspondingNotification.isread != "true") {
+  if (correspondingNotification && !correspondingNotification.isRead) {
     return "unread";
   }
   return undefined;
@@ -143,7 +143,7 @@ function handleClick() {
 async function read() {
   if (getStatus.value !== "unread") return;
   try {
-    const newNotification = await api.readNotification(comment.id);
+    const newNotification = await api.readNotification(comment);
     console.log(newNotification);
     userStore.readNotification(comment.id);
   } catch (error) {

src/components/notifications/Comment.vue

@@ -1,7 +1,6 @@
 <template>
   <article
     class="notification | bg-white rounded-lg | p-16 | flow"
-    :data-status="notification.isread == 'true' ? 'read' : 'unread'"
     data-type="comment"
     @click="router.push(notification.location.dialoguri + '&comments=true')"
   >

src/components/notifications/Content.vue

@@ -1,7 +1,6 @@
 <template>
   <article
     class="notification | bg-white rounded-lg | p-16 | flow"
-    :data-status="notification.isread == 'true' ? 'read' : 'unread'"
     data-type="content"
     @click="
       read(notification);

src/components/notifications/Reply.vue

@@ -1,7 +1,6 @@
 <template>
   <article
     class="notification | bg-white rounded-lg | p-16 | flow"
-    :data-status="notification.isread == 'true' ? 'read' : 'unread'"
     data-type="comment"
     @click="router.push(notification.location.dialoguri + '&comments=true')"
   >

src/stores/api.js

@@ -2,35 +2,6 @@ import { defineStore } from "pinia";
 import uniqid from "uniqid";
 
 export const useApiStore = defineStore("api", () => {
-  /**
-   * Asynchronously fetches JSON data corresponding to a given path.
-   *
-   * @param {string} [path=window.location.pathname] - The path for which to fetch data.
-   *   - If no path is provided, the function will use the current page's path.
-   *   - If the path is "/", it is assumed to be the homepage, and "home.json" is fetched.
-   *   - For other paths, the function will append ".json" to the path and fetch that URL.
-   *
-   * @returns {Promise<Object>} A promise that resolves to the JSON data if the fetch is successful.
-   *
-   * @throws {Error} Will throw an error if the HTTP request fails (e.g., non-200 status code).
-   *   - The error will include the HTTP status code and a message indicating the fetch failed.
-   *
-   * @example
-   * // Fetch data for the current page
-   * fetchData().then(data => {
-   *   console.log(data);
-   * }).catch(error => {
-   *   console.error('Error fetching data:', error);
-   * });
-   *
-   * @example
-   * // Fetch data for a specific path
-   * fetchData('/about').then(data => {
-   *   console.log(data);
-   * }).catch(error => {
-   *   console.error('Error fetching data:', error);
-   * });
-   */
   async function fetchData(path = window.location.pathname) {
     const isHomePage = path === "/";
     path = path === "/" ? "/home" : path;
@@ -57,47 +28,6 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
-  function fetchDataThroughKQL() {
-    const api = "/api/query";
-
-    const username = import.meta.env.VITE_USERNAME;
-    const password = import.meta.env.VITE_PASSWORD;
-
-    const token = btoa(`${username}:${password}`);
-
-    const headers = {
-      Authorization: `Basic ${token}`,
-    };
-
-    const request = {
-      method: "post",
-      body: JSON.stringify({
-        query: `page('home')`,
-        select: {
-          testImages: {
-            query: "page.testImages.toFiles",
-            select: {
-              url: true,
-            },
-          },
-          blocks: {
-            query: "page.testBlocks.toBlocks",
-          },
-        },
-      }),
-      headers,
-    };
-
-    fetch(api, request)
-      .then((response) => response.json())
-      .then((response) => {
-        console.log(response);
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  }
-
   async function fetchRoute(path, method, data) {
     const config = {
       method: method,
@@ -212,11 +142,12 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
-  async function readNotification(notificationId) {
+  async function readNotification(comment) {
     const headers = {
       method: "POST",
       body: JSON.stringify({
-        notificationId,
+        projectUuid: comment.location.project.uuid,
+        notificationId: comment.id,
       }),
     };
     try {
@@ -278,7 +209,6 @@ export const useApiStore = defineStore("api", () => {
   }
 
   return {
-    fetchDataThroughKQL,
     fetchData,
     fetchRoute,
     addComment,

src/stores/user.js

@@ -1,26 +1,45 @@
-import { defineStore } from "pinia";
+import { defineStore, storeToRefs } from "pinia";
 import { ref, computed } from "vue";
+import { useProjectsStore } from "./projects";
 
 export const useUserStore = defineStore("user", () => {
   const user = ref(null);
 
+  const { projects } = storeToRefs(useProjectsStore());
+
   const notifications = computed(() => {
-    return typeof user.value.notifications === "array"
-      ? user.value.notifications
-      : Object.values(user.value.notifications);
+    return projects.value.reduce((acc, project) => {
+      if (!project.notifications) return acc;
+
+      const projectNotifications = project.notifications.map(
+        (notification) => ({
+          ...notification,
+          project: {
+            id: project.id,
+            name: project.title,
+          },
+          isRead:
+            notification.author.uuid === user.value.uuid ||
+            notification.readby?.includes(user.value.uuid),
+        })
+      );
+
+      return [...acc, ...projectNotifications];
+    }, []);
   });
 
   function readNotification(notificationId) {
-    user.value.notifications.forEach((notification) => {
+    notifications.value = notifications.value.map((notification) => {
       if (notification.id === notificationId) {
-        notification.isread = "true";
+        notification.isRead = true;
       }
+      return notification;
     });
   }
 
   function readAllNotifications(notificationId) {
     user.value.notifications.forEach((notification) => {
-      notification.isread = true;
+      notification.isRead = true;
     });
   }
 

src/views/Notifications.vue

@@ -44,6 +44,7 @@
         <component
           :is="notificationComponents[notification.type]"
           :notification="notification"
+          :data-status="notification.isRead ? 'read' : 'unread'"
         />
       </template>
     </section>