pdf viewer : show draft bubble

public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf.txt

@@ -16,8 +16,8 @@ Comments:
       url: file://3vTh1tMFeFM2JxaN
   position:
     pageIndex: 1
-    x: '26.50821702805'
+    x: "26.50821702805"
-    y: '62.355212355212'
+    y: "62.355212355212"
   replies: [ ]
   text: test
   author:
@@ -29,6 +29,146 @@ Comments:
   id: m3n5k0mb
   type: comment
   isRead: false
+- 
+  location:
+    page:
+      uri: >
+        projects/miss-dior-blooming-bouquet/proposal
+      title: Offre commerciale
+    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
+    project:
+      title: Miss Dior Blooming Bouquet
+      uri: projects/miss-dior-blooming-bouquet
+    file:
+      uuid: file://3vTh1tMFeFM2JxaN
+      url: file://3vTh1tMFeFM2JxaN
+  position:
+    pageIndex: 1
+    x: "67.213040131138"
+    y: "36.872586872587"
+  replies: [ ]
+  text: test2
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-11-19T15:53:46+01:00
+  id: m3okrmlt
+  type: comment
+  isRead: false
+- 
+  location:
+    page:
+      uri: >
+        projects/miss-dior-blooming-bouquet/proposal
+      title: Offre commerciale
+    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
+    project:
+      title: Miss Dior Blooming Bouquet
+      uri: projects/miss-dior-blooming-bouquet
+    file:
+      uuid: file://3vTh1tMFeFM2JxaN
+      url: file://3vTh1tMFeFM2JxaN
+  position:
+    pageIndex: 1
+    x: "98.083140873747"
+    y: "79.343629343629"
+  replies: [ ]
+  text: test3
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-11-19T15:53:57+01:00
+  id: m3okrvaa
+  type: comment
+  isRead: false
+- 
+  location:
+    page:
+      uri: >
+        projects/miss-dior-blooming-bouquet/proposal
+      title: Offre commerciale
+    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
+    project:
+      title: Miss Dior Blooming Bouquet
+      uri: projects/miss-dior-blooming-bouquet
+    file:
+      uuid: file://3vTh1tMFeFM2JxaN
+      url: file://3vTh1tMFeFM2JxaN
+  position:
+    pageIndex: 1
+    x: "65.027546273254"
+    y: "55.791505791506"
+  replies: [ ]
+  text: test4
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-11-19T15:54:03+01:00
+  id: m3okrzsb
+  type: comment
+  isRead: false
+- 
+  location:
+    page:
+      uri: >
+        projects/miss-dior-blooming-bouquet/proposal
+      title: Offre commerciale
+    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
+    project:
+      title: Miss Dior Blooming Bouquet
+      uri: projects/miss-dior-blooming-bouquet
+    file:
+      uuid: file://3vTh1tMFeFM2JxaN
+      url: file://3vTh1tMFeFM2JxaN
+  position:
+    pageIndex: 1
+    x: "75.408642098202"
+    y: "20.849420849421"
+  replies: [ ]
+  text: test
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-11-19T16:27:21+01:00
+  id: m3olyt8i
+  type: comment
+  isRead: false
+- 
+  location:
+    page:
+      uri: >
+        projects/miss-dior-blooming-bouquet/proposal
+      title: Offre commerciale
+    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0#comment-m3olyt8i'
+    project:
+      title: Miss Dior Blooming Bouquet
+      uri: projects/miss-dior-blooming-bouquet
+    file:
+      uuid: file://3vTh1tMFeFM2JxaN
+      url: file://3vTh1tMFeFM2JxaN
+  position:
+    pageIndex: 1
+    x: '27.327777224757'
+    y: '78.185328185328'
+  replies: [ ]
+  text: test198
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-11-19T16:53:10+01:00
+  id: m3omw0ci
+  type: comment
+  isRead: false
 
 ----
 

src/components/comments/Comments.vue

@@ -91,7 +91,7 @@
         placeholder="Ajouter un commentaire…"
         rows="5"
         class="text-sm | rounded-lg bg-black p-12"
-        v-model="newCommentText"
+        v-model="draftComment.text"
       ></textarea>
       <footer class="flex">
         <input type="submit" class="btn btn--tranparent" />
@@ -118,27 +118,30 @@ import { useRoute } from "vue-router";
 
 dayjs.locale("fr");
 
+const emits = defineEmits(["show-draft-bubble", "hide-draft-bubble"]);
+
 const { user } = useUserStore();
 const { page } = usePageStore();
 const dialog = useDialogStore();
 const { comments, openedFile } = storeToRefs(useDialogStore());
 const api = useApiStore();
 
+const draftComment = ref({});
 const openedComment = ref(null);
 
-const newCommentPageIndex = ref(null);
-const newCommentPosition = ref(null);
-const newCommentText = ref("");
 const isAddOpen = ref(false);
 const route = useRoute();
 const waitingForCommentPosition = ref(false);
 
-const sortedComments = computed(() => comments.value.reverse());
+const sortedComments = computed(() => {
+  return [...comments.value].reverse();
+});
 const sortedReplies = ref(null);
 
 watch(openedComment, (newVal) => {
   sortedReplies.value = newVal ? newVal.replies.slice().reverse() : null;
 });
+
 watch(isAddOpen, (newVal) => {
   if (newVal) {
     setTimeout(() => {
@@ -147,6 +150,18 @@ watch(isAddOpen, (newVal) => {
   }
 });
 
+watch(
+  draftComment,
+  (newVal) => {
+    if (newVal.position) {
+      emits("show-draft-bubble", newVal);
+    } else {
+      emits("hide-draft-bubble");
+    }
+  },
+  { deep: true }
+);
+
 const viewContainer = document.querySelector(".vpv-pages-inner-container");
 
 window.addEventListener("keydown", (event) => {
@@ -168,13 +183,13 @@ function handleSubmit(event = null) {
     path: route.fullPath,
     fileName: openedFile ? openedFile.value.name : false,
     userUuid: user.uuid,
-    text: newCommentText.value,
+    text: draftComment.value.text,
     date,
     position:
       {
-        pageIndex: newCommentPageIndex.value,
+        pageIndex: draftComment.value.pageIndex,
-        x: newCommentPosition.value?.x,
+        x: draftComment.value.position?.x,
-        y: newCommentPosition.value?.y,
+        y: draftComment.value.position?.y,
       } ?? false,
     id: uniqid(),
   };
@@ -188,7 +203,9 @@ function handleSubmit(event = null) {
 async function replyComment(newComment) {
   newComment.parentId = openedComment.value.id;
   const newFile = await api.replyComment(newComment);
-  newCommentText.value = "";
+  draftComment.value.text = "";
+  draftComment.value.position = null;
+  draftComment.value.padeIndex = null;
   isAddOpen.value = false;
   dialog.updateFile(newFile);
   openedComment.value = newFile.comments.find(
@@ -198,7 +215,9 @@ async function replyComment(newComment) {
 
 async function addComment(newComment) {
   const newFile = await api.addComment(newComment);
-  newCommentText.value = "";
+  draftComment.value.text = "";
+  draftComment.value.position = null;
+  draftComment.value.padeIndex = null;
   isAddOpen.value = false;
 
   dialog.updateFile(newFile);
@@ -229,7 +248,7 @@ function handleCommentPositionClick(event) {
     .getAttribute("aria-label");
   const pageIndex = pageLabel.charAt(pageLabel.length - 1);
 
-  newCommentPageIndex.value = parseInt(pageIndex);
+  draftComment.value.pageIndex = parseInt(pageIndex);
 
   const viewRect = viewContainer.getBoundingClientRect();
   const pageRect = pageContainer.getBoundingClientRect();
@@ -242,7 +261,7 @@ function handleCommentPositionClick(event) {
   const relativeX = (x / pageRect.width) * 100;
   const relativeY = (y / pageRect.height) * 100;
 
-  newCommentPosition.value = {
+  draftComment.value.position = {
     x: relativeX,
     y: relativeY,
   };

src/components/project/brief/PdfViewer.vue

@@ -30,7 +30,7 @@
       >
         <span class="sr-only">Afficher les commentaires</span>
       </button>
-      <Comments v-if="isCommentsOpen" />
+      <Comments v-if="isCommentsOpen" @show-draft-bubble="showDraftBubble" />
     </div>
   </Dialog>
 </template>
@@ -57,7 +57,7 @@ openedFile.value = route.query.fileIndex
 const licenseKey = import.meta.env.VITE_VPV_LICENSE;
 useLicense({ licenseKey });
 
-// Variables
+const draftComment = ref(null);
 const isOpen = ref(true);
 watch(isOpen, (newValue) => {
   router.push({ name: route.name });
@@ -76,6 +76,7 @@ watch(isCommentsOpen, (newVal) => {
 watch(openedFile, (newVal) => {
   removeCommentBubbles();
   if (newVal.comments) {
+    console.log(newVal.comments);
     setCommentBubbles();
   }
 });
@@ -158,6 +159,22 @@ function removeCommentBubbles() {
     bubble.parentNode.removeChild(bubble);
   });
 }
+
+function showDraftBubble(draftComment) {
+  const bubble = document.createElement("a");
+
+  bubble.classList.add("comment-bubble");
+  bubble.classList.add("comment-bubble--draft");
+  bubble.style.left = draftComment.position.x + "%";
+  bubble.style.top = draftComment.position.y + "%";
+  bubble.href = "#comment-" + draftComment.id;
+
+  const container = document.querySelector(
+    `.vpv-page-inner-container[aria-label="page ${draftComment.pageIndex}"] .page-inner-container`
+  );
+
+  container.appendChild(bubble);
+}
 </script>
 
 <style>