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");