delete comment / reply working

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>

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>