delete comment / reply working

2024-10-30 16:32:13 +01:00 · 2024-10-30 16:32:13 +01:00 · ac48b4166a
commit ac48b4166a
parent 58c08690f8
5 changed files with 131 additions and 59 deletions
--- a/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
+++ b/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
@ -19,53 +19,15 @@ Comments:
  file:
    uuid: file://s0lNtRA0Z7ybTCWG
    pageIndex: 1
-  replies:
-    - 
-      page:
-        uri: projects/miss-dior-blooming-bouquet
-        title: Miss Dior Blooming Bouquet
-      file:
-        uuid: file://s0lNtRA0Z7ybTCWG
-        pageIndex: 1
-      replies: [ ]
-      text: Test de réponse
-      author:
-        name: Adrien Payet
-        email: adrien.payet@outlook.com
-        uuid: user://WWjXgPWk
-        role: admin
-      date: 2024-10-30T12:26:44+01:00
-      id: m2vskcko
-      type: comment
-      isRead: false
-      parentId: m2vsk6jn
-    - 
-      page:
-        uri: projects/miss-dior-blooming-bouquet
-        title: Miss Dior Blooming Bouquet
-      file:
-        uuid: file://s0lNtRA0Z7ybTCWG
-        pageIndex: 1
-      replies: [ ]
-      text: deuxième réponse
-      author:
-        name: Adrien Payet
-        email: adrien.payet@outlook.com
-        uuid: user://WWjXgPWk
-        role: admin
-      date: 2024-10-30T12:27:42+01:00
-      id: m2vslkxg
-      type: comment
-      isRead: false
-      parentId: m2vsk6jn
-  text: Un premier commentaire
+  replies: [ ]
+  text: Un certain commentaire
  author:
    name: Adrien Payet
    email: adrien.payet@outlook.com
    uuid: user://WWjXgPWk
    role: admin
-  date: 2024-10-30T12:26:37+01:00
-  id: m2vsk6jn
+  date: 2024-10-30T16:26:22+01:00
+  id: m2w14iph
  type: comment
  isRead: false
  position:
--- a/public/site/plugins/comments/routes/delete.php
+++ b/public/site/plugins/comments/routes/delete.php
@ -7,14 +7,50 @@ return [
      $json = file_get_contents('php://input');
      $data = json_decode($json);

-      $page = page($data->pageUri);
-      $file = $page->file($data->fileName);
-      $user = kirby()->user($data->userUuid);
-
+      $page = page($data->page->uri);
+      $file = $page->file($data->file->uuid);
+      $isReply = $data->parentId ?? false;

      $comments = $file->comments()->isEmpty() == true ? [] : Yaml::decode($file->comments()->value());

-      unset($comments[$data->id] );
+      foreach ($comments as $key => &$comment) {
+        if ($isReply) {
+          if ($comment['id'] === $data->parentId) {
+            foreach ($comment['replies'] as $replyKey => $reply) {
+              if ($reply['id'] === $data->id) {
+                unset($comment['replies'][$replyKey]);
+                $comment['replies'] = array_values($comment['replies']);
+              }
+            }
+          }
+        } else {
+          if ($comment['id'] === $data->id) {
+            unset($comments[$key]);
+          }
+        }
+      }
+
+      $comments = array_values($comments); // Réindexe les commentaires
+
+      foreach (kirby()->users() as $user) {
+        try {
+          $notifications = $user->notifications()->isNotEmpty() 
+              ? Yaml::decode($user->notifications()->value())
+              : [];          
+              
+          foreach ($notifications as $key => $notification) {
+            if ($notification['id'] === $data->id) {
+              unset($notifications[$key]);
+            }
+          }
+    
+          $user->update([
+            'notifications' => $notifications
+          ]);
+        } catch (\Throwable $th) {
+          throw new Exception("Error updating notifications: " . $th->getMessage() . ' line ' . $th->getLine(), 1);
+        }
+      }
      
      $newFile = $file->update([
        'comments' => $comments
@ -22,4 +58,4 @@ return [

      return getFileData($newFile);
  }
-];
+];
--- a/src/components/comments/Comment.vue
+++ b/src/components/comments/Comment.vue
@ -8,20 +8,36 @@
          •
        </template>
        <span class="comment__page">Page {{ comment.file.pageIndex }}</span>
-        <time class="comment__date" :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
-          formatDate(comment.date)
-        }}</time>
+        <time
+          class="comment__date"
+          :datetime="dayjs(comment.date).format('YYYY-MM-DD')"
+          >{{ formatDate(comment.date) }}</time
+        >
      </p>
    </header>
    <p class="comment__body">
      {{ comment.text }}
    </p>
-    <footer v-if="comment.replies?.length > 0" class="comment__replies">
-      <p>{{ comment.replies.length }} réponse{{ comment.replies.length > 1 ? 's' : '' }}</p>
-      <!-- TODO: n'afficher que s'il s'agit du commentaire de l'utilisateur actuellement connecté -->
-      <div class="comment__ctas | mt-8">
-        <button class="btn btn--transparent btn--icon btn--sm" data-icon="edit"><span class="sr-only">Éditer</span></button>
-        <button class="btn btn--transparent btn--icon btn--sm" data-icon="delete"><span class="sr-only">Supprimer</span></button>
+    <footer class="comment__replies">
+      <p v-if="comment.replies?.length > 0">
+        {{ comment.replies.length }} réponse{{
+          comment.replies.length > 1 ? "s" : ""
+        }}
+      </p>
+      <div
+        v-if="comment.author.uuid === user.uuid"
+        class="comment__ctas | mt-8"
+      >
+        <button class="btn btn--transparent btn--icon btn--sm" data-icon="edit">
+          <span class="sr-only">Éditer</span>
+        </button>
+        <button
+          class="btn btn--transparent btn--icon btn--sm"
+          data-icon="delete"
+          @click="deleteComment($event, comment)"
+        >
+          <span class="sr-only">Supprimer</span>
+        </button>
      </div>
    </footer>
  </article>
@ -30,6 +46,8 @@
 <script setup>
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
+import { useUserStore } from "../../stores/user";
+import { useApiStore } from "../../stores/api";

 dayjs.locale("fr");

@ -38,6 +56,11 @@ const { comment, commentIndex } = defineProps({
  commentIndex: Number,
 });

+const emits = defineEmits(["update:file", "close:comment"]);
+
+const { user } = useUserStore();
+const api = useApiStore();
+
 //  Functions
 function setStatus(comment) {
  try {
@ -80,6 +103,15 @@ async function readNotification(notificationId) {

  user.notifications = newNotifications;
 }
+
+async function deleteComment(event, comment) {
+  event.stopPropagation();
+  const newFile = await api.deleteComment(comment);
+  emits("update:file", newFile);
+  if (comment.parentId) {
+    emits("close:comment");
+  }
+}
 </script>

 <style scoped>
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@ -10,6 +10,8 @@
            :commentIndex="comments.length - commentIndex"
            :key="comment.id"
            @click="openedComment = comment"
+            @update:file="changeFile"
+            @close:comment="closeComment"
          />
        </template>
        <template v-else>
@ -23,13 +25,20 @@
          >
            <span>Retour à la liste</span>
          </button>
-          <Comment :comment="openedComment" data-opened="true" />
+          <Comment
+            :comment="openedComment"
+            data-opened="true"
+            @update:file="changeFile"
+            @close:comment="closeComment"
+          />
          <div v-if="sortedReplies.length > 0" class="replies | flow">
            <Comment
              v-for="(reply, commentIndex) in sortedReplies"
              :comment="reply"
              :commentIndex="sortedReplies.length - commentIndex"
              :key="reply.id"
+              @update:file="changeFile"
+              @close:comment="closeComment"
            />
          </div>
        </template>
@ -154,6 +163,15 @@ async function addComment(newComment) {
  isAddOpen.value = false;
  emits("update:file", newFile);
 }
+
+function changeFile(newFile) {
+  console.log(newFile);
+  emits("update:file", newFile);
+}
+
+function closeComment() {
+  openedComment.value = null;
+}
 </script>

 <style>
@ -208,4 +226,4 @@ async function addComment(newComment) {
 #comments-container form footer > * {
  flex-grow: 1;
 }
-</style>
+</style>
--- a/src/stores/api.js
+++ b/src/stores/api.js
@ -144,6 +144,29 @@ export const useApiStore = defineStore("api", () => {
    }
  }

+  async function deleteComment(comment) {
+    const headers = {
+      method: "POST",
+      body: JSON.stringify(comment),
+    };
+
+    try {
+      const response = await fetch("/delete-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 la suppression du commentaire :",
+        comment,
+        error
+      );
+      throw error;
+    }
+  }
+
  async function replyComment(comment) {
    const headers = {
      method: "POST",
@ -198,6 +221,7 @@ export const useApiStore = defineStore("api", () => {
    fetchData,
    fetchRoute,
    addComment,
+    deleteComment,
    replyComment,
    readNotification,
  };