new comment showing in comments panel

src/components/comments/Comments.vue

@@ -105,24 +105,20 @@
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import uniqid from "uniqid";
-import { watch, ref } from "vue";
+import { watch, ref, computed } from "vue";
 import { useUserStore } from "../../stores/user";
 import { usePageStore } from "../../stores/page";
 import { useApiStore } from "../../stores/api";
 import { useDialogStore } from "../../stores/dialog";
 import Comment from "./Comment.vue";
+import { storeToRefs } from "pinia";
 
 dayjs.locale("fr");
 
-const { currentPageIndex, file, comments } = defineProps({
-  currentPageIndex: Number,
-  file: Object,
-  comments: Array,
-});
-
 const { user } = useUserStore();
 const { page } = usePageStore();
 const dialog = useDialogStore();
+const { comments, openedFile } = storeToRefs(useDialogStore());
 const api = useApiStore();
 
 const openedComment = ref(null);
@@ -131,22 +127,13 @@ const newCommentPageIndex = ref(null);
 const newCommentPosition = ref(null);
 const newCommentText = ref("");
 const isAddOpen = ref(false);
-const emits = defineEmits(["update:file"]);
 
-const sortedComments = ref(comments.reverse());
+const sortedComments = computed(() => comments.value.reverse());
 const sortedReplies = ref(null);
 
 watch(openedComment, (newVal) => {
   sortedReplies.value = newVal ? newVal.replies.slice().reverse() : null;
 });
-watch(
-  () => file,
-  (newVal) => {
-    if (newVal.comments) {
-      sortedComments.value = newVal.comments;
-    }
-  }
-);
 watch(
   () => comments,
   (newVal) => {
@@ -180,7 +167,7 @@ function handleSubmit(event = null) {
   const date = dayjs().format();
   const newComment = {
     pageUri: page.uri + "/client-brief",
-    fileName: file.name,
+    fileName: openedFile.value.name,
     userUuid: user.uuid,
     text: newCommentText.value,
     date,
@@ -207,7 +194,6 @@ async function replyComment(newComment) {
   openedComment.value = newFile.comments.find(
     (item) => item.id === openedComment.value.id
   );
-  emits("update:file", newFile);
 }
 
 async function addComment(newComment) {
@@ -215,9 +201,7 @@ async function addComment(newComment) {
   newCommentText.value = "";
   isAddOpen.value = false;
 
-  dialog.content.files = dialog.content.files.map((file) =>
-    file.id === newFile.id ? newFile : file
-  );
+  dialog.updateFile(newFile);
 }
 
 function closeComment() {

src/components/project/client-brief/PdfViewer.vue

@@ -30,12 +30,7 @@
       >
         <span class="sr-only">Afficher les commentaires</span>
       </button>
-      <Comments
-        v-if="isCommentsOpen"
-        :current-page-index="currentPageIndex"
-        :file="file"
-        :comments="file.comments ?? []"
-      />
+      <Comments v-if="isCommentsOpen" />
     </div>
   </Dialog>
 </template>
@@ -48,7 +43,9 @@ import { ref, watch } from "vue";
 import { useDialogStore } from "../../../stores/dialog";
 import { useRoute, useRouter } from "vue-router";
 
-const file = useDialogStore().content.files[0];
+const dialog = useDialogStore();
+dialog.openedFile = dialog.content.files[0];
+const file = dialog.openedFile;
 
 const router = useRouter();
 const route = useRoute();
@@ -124,7 +121,6 @@ const onPdfLoaded = () => {
 };
 
 function setCommentBubbles() {
-  console.log(file.comments);
   if (!file.comments) return;
   file.comments.forEach((comment) => {
     const bubble = document.createElement("a");

src/stores/api.js

@@ -137,7 +137,6 @@ export const useApiStore = defineStore("api", () => {
     } catch (error) {
       console.error(
         "Une erreur s'est produite lors de l'ajout du commentaire :",
-        commentaire,
         error
       );
       throw error;

src/stores/dialog.js

@@ -1,8 +1,19 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 
 export const useDialogStore = defineStore("dialog", () => {
   const content = ref(null);
+  const openedFile = ref(null);
+  const comments = computed(() => {
+    return openedFile.value.comments;
+  });
 
-  return { content };
+  function updateFile(newFile) {
+    content.value.files = content.value.files.map((file) =>
+      file.id === newFile.id ? newFile : file
+    );
+    openedFile.value = newFile;
+  }
+
+  return { content, openedFile, comments, updateFile };
 });