#88 - edit comment fonctional but not styled

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

@@ -4,25 +4,42 @@ return [
   'pattern' => '(:all)update-comment.json',
   'method' => 'POST',
   'action'  => function () {
-      $json = file_get_contents('php://input');
-      $data = json_decode($json);
+    $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->location->page->uri);
+    $project = page($data->location->project->uri);
+    $file = $page->file($data->location->file->uuid);
+    $isReply = $data->location->parentId ?? false;
 
+    $comments = $file->comments()->isEmpty() == true ? [] : Yaml::decode($file->comments()->value());
 
-      $comments = $file->comments()->isEmpty() == true ? [] : Yaml::decode($file->comments()->value());
+    foreach ($comments as $key => &$comment) {
+      if ($isReply) {
+        if ($comment['id'] === $data->location->parentId) {
+          foreach ($comment['replies'] as $replyKey => $reply) {
+            if ($reply['id'] === $data->id) {
+              $comment['replies'][$replyKey]["text"] = $data->text;
+              $comment['replies'][$replyKey]["date"] = $data->date;
+              $comment['replies'] = array_values($comment['replies']);
+            }
+          }
+        }
+      } else {
+        if ($comment['id'] === $data->id) {
+          $comments[$key]["text"] = $data->text;
+          $comments[$key]["date"] = $data->date;
+        }
+      }
+    }
 
-      $comments[$data->id]['text'] = $data->text;
-      $comments[$data->id]['date'] = $data->date;
-      
-      $newFile = $file->update([
-        'comments' => $comments
-      ]);
+    $comments = array_values($comments);
 
-      $user->sendNotification('comments', $comments[$data->id]);
-
-      return getFileData($newFile);
+    $newFile = $file->update([
+      'comments' => $comments
+    ]);
+    
+    echo json_encode(getFileData($newFile));
+    exit;
   }
 ];

src/components/comments/Comment.vue

@@ -20,10 +20,14 @@
         >
       </p>
     </header>
-    <p class="comment__body">
+
+    <p v-if="!isEditCommentMode" class="comment__body">
       {{ comment.text }}
     </p>
-    <footer class="comment__replies">
+
+    <textarea v-else class="comment__body" v-model="draftText"></textarea>
+
+    <footer v-if="!isEditCommentMode" class="comment__replies">
       <p v-if="comment.replies?.length > 0">
         {{ comment.replies.length }} réponse{{
           comment.replies.length > 1 ? "s" : ""
@@ -33,7 +37,11 @@
         v-if="userStore.canEditComment(comment)"
         class="comment__ctas | mt-8"
       >
-        <button class="btn btn--transparent btn--icon btn--sm" data-icon="edit">
+        <button
+          class="btn btn--transparent btn--icon btn--sm"
+          data-icon="edit"
+          @click="isEditCommentMode = true"
+        >
           <span class="sr-only">Éditer</span>
         </button>
         <button
@@ -45,6 +53,18 @@
         </button>
       </div>
     </footer>
+
+    <footer v-else class="flex">
+      <input
+        type="submit"
+        class="btn btn--tranparent"
+        value="Sauvegarder"
+        @click="saveEditedComment($event)"
+      />
+      <button class="btn btn--white-10" @click="cancelEditComment($event)">
+        Annuler
+      </button>
+    </footer>
   </article>
 </template>
 
@@ -54,7 +74,7 @@ import "dayjs/locale/fr";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
 import { useDialogStore } from "../../stores/dialog";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { storeToRefs } from "pinia";
 
 dayjs.locale("fr");
@@ -69,7 +89,8 @@ const emits = defineEmits(["update:file", "close:comment"]);
 const userStore = useUserStore();
 const api = useApiStore();
 const dialog = useDialogStore();
-const { activeTracks } = storeToRefs(useDialogStore());
+const { activeTracks, isEditCommentMode } = storeToRefs(useDialogStore());
+const draftText = ref(comment.text);
 
 //  Functions
 const getStatus = computed(() => {
@@ -132,6 +153,20 @@ async function deleteComment(event) {
     emits("close:comment");
   }
 }
+
+function saveEditedComment(event) {
+  event.stopImmediatePropagation();
+  comment.text = draftText.value;
+  comment.date = dayjs().format();
+  api.updateComment(comment);
+  isEditCommentMode.value = false;
+}
+
+function cancelEditComment(event) {
+  event.stopImmediatePropagation();
+  isEditCommentMode.value = false;
+  draftText.value = comment.text;
+}
 </script>
 
 <style scoped>

src/components/comments/Comments.vue

@@ -121,9 +121,8 @@ dayjs.locale("fr");
 const { user } = useUserStore();
 const { page } = usePageStore();
 const dialog = useDialogStore();
-const { comments, openedFile, draftComment, activeTracks } = storeToRefs(
-  useDialogStore()
-);
+const { comments, openedFile, draftComment, activeTracks, isEditCommentMode } =
+  storeToRefs(useDialogStore());
 const api = useApiStore();
 
 const openedComment = ref(null);
@@ -305,6 +304,8 @@ function prepareDraftCommentInImage(event) {
 }
 
 function openComment(comment) {
+  if (isEditCommentMode.value) return;
+
   openedComment.value = comment;
 
   if (activeTracks?.value.length === 1) {

src/stores/api.js

@@ -143,6 +143,29 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
+  async function updateComment(comment) {
+    const headers = {
+      method: "POST",
+      body: JSON.stringify(comment),
+    };
+
+    try {
+      const response = await fetch("/update-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 mise à jour du commentaire :",
+        comment,
+        error
+      );
+      throw error;
+    }
+  }
+
   async function deleteComment(comment) {
     const headers = {
       method: "POST",
@@ -259,6 +282,7 @@ export const useApiStore = defineStore("api", () => {
     fetchData,
     fetchRoute,
     addComment,
+    updateComment,
     deleteComment,
     replyComment,
     readNotification,

src/stores/dialog.js

@@ -6,6 +6,7 @@ export const useDialogStore = defineStore("dialog", () => {
   const content = ref(null);
   const openedFile = ref(null);
   const activeTracks = ref(null);
+  const isEditCommentMode = ref(false);
 
   const comments = computed(() => {
     if (activeTracks.value?.length > 0) {
@@ -143,5 +144,6 @@ export const useDialogStore = defineStore("dialog", () => {
     isCommentsOpen,
     isCommentPanelEnabled,
     updateFile,
+    isEditCommentMode,
   };
 });