comments reactive

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt

@@ -27,51 +27,9 @@ Comments:
     role: admin
   position:
     pageIndex: 1
-    x: "22.956789508989"
+    x: "19.132179426191"
-    y: "22.586872586873"
+    y: "21.235521235521"
-  date: 2024-11-16T12:04:11+01:00
+  date: 2024-11-16T12:15:12+01:00
-  id: m3k28t8f
+  id: m3k2mztq
-  type: comment
-  isRead: false
-- 
-  page:
-    uri: projects/miss-dior-blooming-bouquet
-    title: Miss Dior Blooming Bouquet
-  file:
-    uuid: file://s0lNtRA0Z7ybTCWG
-  replies: [ ]
-  text: encore
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  position:
-    pageIndex: 1
-    x: "24.049536437931"
-    y: "37.451737451737"
-  date: 2024-11-16T12:04:32+01:00
-  id: m3k299rb
-  type: comment
-  isRead: false
-- 
-  page:
-    uri: projects/miss-dior-blooming-bouquet
-    title: Miss Dior Blooming Bouquet
-  file:
-    uuid: file://s0lNtRA0Z7ybTCWG
-  replies: [ ]
-  text: et encore
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  position:
-    pageIndex: 1
-    x: '67.486226863373'
-    y: '53.088803088803'
-  date: 2024-11-16T12:05:20+01:00
-  id: m3k2ab7h
   type: comment
   isRead: false

src/components/comments/Comment.vue

@@ -52,6 +52,7 @@ import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
+import { useDialogStore } from "../../stores/dialog";
 
 dayjs.locale("fr");
 
@@ -64,6 +65,7 @@ const emits = defineEmits(["update:file", "close:comment"]);
 
 const { user } = useUserStore();
 const api = useApiStore();
+const dialog = useDialogStore();
 
 //  Functions
 function setStatus(comment) {
@@ -111,7 +113,7 @@ async function readNotification(notificationId) {
 async function deleteComment(event, comment) {
   event.stopPropagation();
   const newFile = await api.deleteComment(comment);
-  emits("update:file", newFile);
+  dialog.updateFile(newFile);
   if (comment.parentId) {
     emits("close:comment");
   }

src/components/comments/Comments.vue

@@ -134,12 +134,6 @@ const sortedReplies = ref(null);
 watch(openedComment, (newVal) => {
   sortedReplies.value = newVal ? newVal.replies.slice().reverse() : null;
 });
-watch(
-  () => comments,
-  (newVal) => {
-    sortedComments.value = newVal.reverse();
-  }
-);
 watch(isAddOpen, (newVal) => {
   if (newVal) {
     setTimeout(() => {
@@ -191,6 +185,7 @@ async function replyComment(newComment) {
   const newFile = await api.replyComment(newComment);
   newCommentText.value = "";
   isAddOpen.value = false;
+  dialog.updateFile(newFile);
   openedComment.value = newFile.comments.find(
     (item) => item.id === openedComment.value.id
   );

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

@@ -17,7 +17,7 @@
       <VPdfViewer
         :darkMode="true"
         :initialThumbnailsVisible="true"
-        :src="file.url"
+        :src="openedFile.url"
         local="fr_FR"
         @loaded="onPdfLoaded"
       />
@@ -42,10 +42,11 @@ import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
 import { ref, watch } from "vue";
 import { useDialogStore } from "../../../stores/dialog";
 import { useRoute, useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
 
 const dialog = useDialogStore();
-dialog.openedFile = dialog.content.files[0];
+const { openedFile, comments } = storeToRefs(useDialogStore());
-const file = dialog.openedFile;
+openedFile.value = dialog.content.files[0];
 
 const router = useRouter();
 const route = useRoute();
@@ -69,15 +70,12 @@ watch(isCommentsOpen, (newVal) => {
   }
 });
 
-watch(
+watch(openedFile, (newVal) => {
-  () => file,
+  removeCommentBubbles();
-  (newVal) => {
+  if (newVal.comments) {
-    removeCommentBubbles();
+    setCommentBubbles();
-    if (newVal.comments) {
-      setCommentBubbles();
-    }
   }
-);
+});
 
 // Functions
 const onPdfLoaded = () => {
@@ -121,8 +119,8 @@ const onPdfLoaded = () => {
 };
 
 function setCommentBubbles() {
-  if (!file.comments) return;
+  if (!comments.value) return;
-  file.comments.forEach((comment) => {
+  comments.value.forEach((comment) => {
     const bubble = document.createElement("a");
 
     bubble.classList.add("comment-bubble");