add / readNotification working

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt

@@ -27,3 +27,53 @@ Comments:
     username: Utilisateur Dior
     date: 2024-10-28T16:52:39+01:00
     id: m2t76m4t
+  m2t7pg5m:
+    fileUuid: file://s0lNtRA0Z7ybTCWG
+    page: 1
+    text: Nouveau commentaire
+    username: Adrien Payet
+    date: 2024-10-28T17:07:18+01:00
+    id: m2t7pg5m
+  m2t82m8c:
+    fileUuid: file://s0lNtRA0Z7ybTCWG
+    page: 1
+    text: test
+    username: Adrien Payet
+    date: 2024-10-28T17:17:32+01:00
+    id: m2t82m8c
+  m2t83fp2:
+    fileUuid: file://s0lNtRA0Z7ybTCWG
+    page: 1
+    text: tt
+    username: Adrien Payet
+    date: 2024-10-28T17:18:11+01:00
+    id: m2t83fp2
+  m2t83syr:
+    fileUuid: file://s0lNtRA0Z7ybTCWG
+    page: 1
+    text: test
+    username: Adrien Payet
+    date: 2024-10-28T17:18:28+01:00
+    id: m2t83syr
+  m2t85i0w:
+    fileUuid: file://s0lNtRA0Z7ybTCWG
+    page: 1
+    text: test
+    username: Adrien Payet
+    date: 2024-10-28T17:19:47+01:00
+    id: m2t85i0w
+  m2t8ayc5:
+    fileUuid: file://s0lNtRA0Z7ybTCWG
+    page: 1
+    text: test
+    username: Adrien Payet
+    date: 2024-10-28T17:24:01+01:00
+    id: m2t8ayc5
+2:
+  m2t8bv59:
+    fileUuid: file://s0lNtRA0Z7ybTCWG
+    page: 2
+    text: test 40
+    username: Adrien Payet
+    date: 2024-10-28T17:24:44+01:00
+    id: m2t8bv59

public/site/config/config.php

@@ -27,6 +27,7 @@ return [
     require(__DIR__ . '/routes/remove-file.php'),
     require(__DIR__ . '/routes/upload-pdf.php'),
     require(__DIR__ . '/routes/add-comment.php'),
+    require(__DIR__ . '/routes/read-notification.php'),
   ],
   'hooks' => [
     'page.create:after' => require_once(__DIR__ . '/hooks/create-steps.php'),

public/site/config/routes/read-notification.php

@@ -0,0 +1,15 @@
+<?php
+
+return [
+  'pattern' => '(:all)read-notification.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/user-methods/index.php

@@ -13,6 +13,9 @@ Kirby::plugin('adrienpayet/pdc-user-methods', [
             $notifications[$group] = [];
           }
 
+          
+          $data['isRead'] = false;
+          
           $notifications[$group][$data['id']] = $data;
 
           $otherUser->update([
@@ -22,6 +25,20 @@ Kirby::plugin('adrienpayet/pdc-user-methods', [
           throw new Exception("Error updating notifications: " . $th->getMessage() . ' line ' . $th->getLine(), 1);
         }
       }
+    },
+    'readNotification' => function ($group, $notificationId) {
+      $notifications = Yaml::decode($this->notifications()->value());
+
+      try {
+        $notifications[$group][$notificationId]['isRead'] = true;
+      } catch (\Throwable $th) {
+        //throw $th;
+      }
+      
+      $this->update([
+        "notifications" => $notifications
+      ]);
+      return $notifications;
     }
   ]
 ]);

src/components/comments/Comments.vue

@@ -8,6 +8,7 @@
           :key="pageIndex + commentIndex"
           class="comment | flow"
           :data-status="setStatus(comment)"
+          @click="readNotification(comment)"
         >
           <header>
             <p>
@@ -66,6 +67,7 @@ import uniqid from "uniqid";
 import { ref } from "vue";
 import { useUserStore } from "../../stores/user";
 import { usePageStore } from "../../stores/page";
+import { useApiStore } from "../../stores/api";
 
 dayjs.locale("fr");
 
@@ -76,13 +78,14 @@ const { currentPageIndex, file, comments } = defineProps({
 });
 const { user } = useUserStore();
 const { page } = usePageStore();
+const api = useApiStore();
 
 const newCommentText = ref("");
 const isAddOpen = ref(false);
 const emits = defineEmits(["update:file"]);
 
 // Functions
-function addComment(event) {
+async function addComment(event) {
   event.preventDefault();
   const date = dayjs().format();
   const comment = {
@@ -94,22 +97,9 @@ function addComment(event) {
     date,
     id: uniqid(),
   };
-
+  const newFile = await api.addComment(comment);
-  const headers = {
+  newCommentText.value = "";
-    method: "POST",
+  isAddOpen.value = false;
-    body: JSON.stringify(comment),
-  };
-
-  fetch("/add-comment.json", headers)
-    .then((res) => res.json())
-    .then((newFile) => {
-      newCommentText.value = "";
-      isAddOpen.value = false;
-      emits("update:file", newFile);
-    })
-    .catch((error) => {
-      console.error("Erreur lors de la sauvegarde :", error);
-    });
 }
 
 function formatDate(date) {
@@ -134,7 +124,7 @@ function closeAddField() {
 
 function setStatus(comment) {
   try {
-    if (user?.notifications?.comments.hasOwnProperty(comment.id)) {
+    if (!user?.notifications?.comments[comment.id].isRead) {
       return "unread";
     } else {
       return undefined;
@@ -143,4 +133,14 @@ function setStatus(comment) {
     return undefined;
   }
 }
+
+async function readNotification(notificationId) {
+  const newNotifications = await api.readNotification(
+    user.uuid,
+    "comments",
+    notificationId
+  );
+
+  user.notifications = newNotifications;
+}
 </script>

src/stores/api.js

@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import uniqid from "uniqid";
 
 export const useApiStore = defineStore("api", () => {
   /**
@@ -120,5 +121,60 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
-  return { fetchDataThroughKQL, fetchData, fetchRoute };
+  async function addComment(comment) {
+    const headers = {
+      method: "POST",
+      body: JSON.stringify(comment),
+    };
+
+    try {
+      const response = await fetch("/add-comment.json", headers);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const newFile = await response.json();
+      return newFile;
+    } catch (error) {
+      console.error(
+        "Une erreur s'est produite lors de l'ajout du commentaire :",
+        commentaire,
+        error
+      );
+      throw error;
+    }
+  }
+
+  async function readNotification(userUuid, group, notificationId) {
+    const headers = {
+      method: "POST",
+      body: JSON.stringify({
+        userUuid,
+        notificationId,
+        group,
+      }),
+    };
+    try {
+      const response = await fetch("/read-notification.json", headers);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const newNotifications = await response.json();
+      return newNotifications;
+    } catch (error) {
+      console.error(
+        "Une erreur s'est produite lors de la lecture de la notification n°",
+        notificationId,
+        error
+      );
+      throw error;
+    }
+  }
+
+  return {
+    fetchDataThroughKQL,
+    fetchData,
+    fetchRoute,
+    addComment,
+    readNotification,
+  };
 });