reply comment 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

@@ -20,7 +20,46 @@ m2ucagze:
   position:
     x: null
     y: null
-  replies: [ ]
+  replies:
+    m2umbiak:
+      pageUri: >
+        projects/miss-dior-blooming-bouquet/client-brief
+      fileUuid: file://s0lNtRA0Z7ybTCWG
+      filePageIndex: 1
+      text: réponse
+      user:
+        name: Adrien Payet
+        email: adrien.payet@outlook.com
+        uuid: user://WWjXgPWk
+        role: admin
+      date: 2024-10-29T16:44:08+01:00
+      id: m2umbiak
+    m2umh277:
+      pageUri: >
+        projects/miss-dior-blooming-bouquet/client-brief
+      fileUuid: file://s0lNtRA0Z7ybTCWG
+      filePageIndex: 1
+      text: deuxième réponse
+      user:
+        name: Adrien Payet
+        email: adrien.payet@outlook.com
+        uuid: user://WWjXgPWk
+        role: admin
+      date: 2024-10-29T16:48:27+01:00
+      id: m2umh277
+    m2umjmbx:
+      pageUri: >
+        projects/miss-dior-blooming-bouquet/client-brief
+      fileUuid: file://s0lNtRA0Z7ybTCWG
+      filePageIndex: 1
+      text: troisième commentaire
+      user:
+        name: Adrien Payet
+        email: adrien.payet@outlook.com
+        uuid: user://WWjXgPWk
+        role: admin
+      date: 2024-10-29T16:50:27+01:00
+      id: m2umjmbx
   text: com1
   user:
     name: Adrien Payet

public/site/plugins/comments/index.php

@@ -5,5 +5,6 @@ Kirby::plugin('adrienpayet/pdc-comments', [
     require(__DIR__ . '/routes/create.php'),
     require(__DIR__ . '/routes/update.php'),
     require(__DIR__ . '/routes/delete.php'),
+    require(__DIR__ . '/routes/reply.php'),
   ]
 ]);

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

@@ -1,7 +1,7 @@
 <?php
 
 return [
-  'pattern' => '(:all)create-comment.json',
+  'pattern' => '(:all)reply-comment.json',
   'method' => 'POST',
   'action'  => function () {
       $json = file_get_contents('php://input');
@@ -17,7 +17,7 @@ return [
       $newComment = [
         'pageUri' => $data->pageUri,
         'fileUuid' => (string) $file->uuid(),
-        'filePageTarget' => $data->targetPage,
+        'filePageIndex' => $data->filePageIndex,
         'text' => $data->text,
         'user' => [
           'name' => (string) $user->name(),

src/components/comments/Comments.vue

@@ -16,12 +16,18 @@
           <button
             class="btn | justify-start w-full | bg-white-10 text-white | px-8"
             data-icon="chevron-single-left"
-            @click="openedComment = null"
+            @click="
+              openedComment = null;
+              isAddOpen = false;
+            "
           >
             <span>Retour à la liste</span>
           </button>
-          <Comment :comment="openedComment" />
+          <Comment :comment="openedComment" data-opened="true" />
-          <div v-if="openedComment?.replies?.length > 0" class="replies">
+          <div
+            v-if="Object.values(openedComment.replies).length > 0"
+            class="replies"
+          >
             <Comment
               v-for="(reply, commentIndex) in Object.values(
                 openedComment.replies
@@ -36,7 +42,7 @@
       <template v-else> état aucun commentaire </template>
     </div>
     <button
-      v-if="!openedComment && !isAddOpen"
+      v-if="!openedComment"
       id="create-comment"
       class="btn btn--white-20 | w-full"
       @click="isAddOpen = true"
@@ -44,10 +50,10 @@
       Ajouter un commentaire
     </button>
     <button
-      v-else
+      v-else-if="openedComment && !isAddOpen"
       id="reply-comment"
       class="btn btn--white-20 | justify-start w-full | text-white-50"
-      @click="isReplyOpen = true"
+      @click="isAddOpen = true"
     >
       Répondre…
     </button>
@@ -57,7 +63,7 @@
       action=""
       method="post"
       class="flow | bg-white-20 | p-12 | rounded-xl"
-      @submit="addComment"
+      @submit="handleSubmit"
     >
       <label class="sr-only" for="comment">Votre commentaire</label>
       <textarea
@@ -70,7 +76,7 @@
       ></textarea>
       <footer class="flex">
         <input type="submit" class="btn btn--tranparent" />
-        <button class="btn btn--white-10" @click="closeAddField()">
+        <button class="btn btn--white-10" @click="isAddOpen = false">
           Annuler
         </button>
       </footer>
@@ -107,10 +113,10 @@ const isAddOpen = ref(false);
 const emits = defineEmits(["update:file"]);
 
 // Functions
-async function addComment(event) {
+function handleSubmit(event) {
   event.preventDefault();
   const date = dayjs().format();
-  const comment = {
+  const newComment = {
     pageUri: page.uri + "/client-brief",
     filePageIndex: currentPageIndex,
     fileName: file.name,
@@ -119,7 +125,24 @@ async function addComment(event) {
     date,
     id: uniqid(),
   };
-  const newFile = await api.addComment(comment);
+  if (openedComment.value) {
+    replyComment(newComment);
+  } else {
+    addComment(newComment);
+  }
+}
+
+async function replyComment(newComment) {
+  newComment.parentId = openedComment.value.id;
+  const newFile = await api.replyComment(newComment);
+  newCommentText.value = "";
+  isAddOpen.value = false;
+  openedComment.value = newFile.comments[openedComment.value.id];
+  emits("update:file", newFile);
+}
+
+async function addComment(newComment) {
+  const newFile = await api.addComment(newComment);
   newCommentText.value = "";
   isAddOpen.value = false;
   emits("update:file", newFile);

src/stores/api.js

@@ -144,6 +144,29 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
+  async function replyComment(comment) {
+    const headers = {
+      method: "POST",
+      body: JSON.stringify(comment),
+    };
+
+    try {
+      const response = await fetch("/reply-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 de la réponse' :",
+        commentaire,
+        error
+      );
+      throw error;
+    }
+  }
+
   async function readNotification(userUuid, group, notificationId) {
     const headers = {
       method: "POST",
@@ -175,6 +198,7 @@ export const useApiStore = defineStore("api", () => {
     fetchData,
     fetchRoute,
     addComment,
+    replyComment,
     readNotification,
   };
 });