#88 - edit comment fonctional but not styled

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) {