comments > get absolute position of new comment

src/components/comments/Comments.vue

@@ -49,7 +49,7 @@
       v-if="!openedComment && !isAddOpen"
       id="create-comment"
       class="btn btn--white-20 | w-full"
-      @click="isAddOpen = true"
+      @click="toggleCommentPositionMode(true)"
     >
       Ajouter un commentaire
     </button>
@@ -100,7 +100,7 @@
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import uniqid from "uniqid";
-import { computed, ref } from "vue";
+import { watch, ref } from "vue";
 import { useUserStore } from "../../stores/user";
 import { usePageStore } from "../../stores/page";
 import { useApiStore } from "../../stores/api";
@@ -120,19 +120,25 @@ const api = useApiStore();
 
 const openedComment = ref(null);
 
+const newCommentPageIndex = ref(null);
+const newCommentPosition = ref(null);
 const newCommentText = ref("");
 const isAddOpen = ref(false);
 const emits = defineEmits(["update:file"]);
-const sortedComments = computed(() => {
-  return comments.reverse();
-});
-const sortedReplies = computed(() => {
-  const sortedReplies =
-    openedComment.value && openedComment.value.replies
-      ? openedComment.value.replies.slice().reverse()
-      : [];
-  return sortedReplies;
-});
+const sortedComments = ref(comments.reverse());
+const sortedReplies =
+  openedComment.value && openedComment.value.replies
+    ? ref(openedComment.value.replies.slice().reverse())
+    : ref([]);
+
+watch(
+  () => comments,
+  (newVal) => {
+    sortedComments.value = newVal.reverse();
+  }
+);
+
+const viewContainer = document.querySelector(".vpv-pages-inner-container");
 
 // Functions
 function handleSubmit(event) {
@@ -140,11 +146,16 @@ function handleSubmit(event) {
   const date = dayjs().format();
   const newComment = {
     pageUri: page.uri + "/client-brief",
-    filePageIndex: currentPageIndex,
+    filePageIndex: newCommentPageIndex.value,
     fileName: file.name,
     userUuid: user.uuid,
     text: newCommentText.value,
     date,
+    position:
+      {
+        x: newCommentPosition.value.x,
+        y: newCommentPosition.value.y,
+      } ?? false,
     id: uniqid(),
   };
   if (openedComment.value) {
@@ -180,6 +191,42 @@ function changeFile(newFile) {
 function closeComment() {
   openedComment.value = null;
 }
+
+function toggleCommentPositionMode(enable) {
+  if (enable) {
+    viewContainer.classList.add("waiting-comment");
+    viewContainer.addEventListener("click", handleCommentPositionClick);
+  } else {
+    viewContainer.classList.remove("waiting-comment");
+    viewContainer.removeEventListener("click", handleCommentPositionClick);
+  }
+}
+
+function handleCommentPositionClick(event) {
+  const pageContainer = event.target.closest(".page-inner-container");
+
+  const pageLabel = pageContainer
+    .closest(".vpv-page-inner-container")
+    .getAttribute("aria-label");
+  const pageIndex = pageLabel.charAt(pageLabel.length - 1);
+
+  newCommentPageIndex.value = parseInt(pageIndex);
+
+  const viewRect = viewContainer.getBoundingClientRect();
+  const pageRect = pageContainer.getBoundingClientRect();
+  const pageScroll = viewRect.top - pageRect.top;
+
+  const mouseTop = event.clientY;
+  const y = mouseTop - viewRect.top + pageScroll;
+  const x = event.clientX - pageRect.left;
+
+  newCommentPosition.value = {
+    x,
+    y,
+  };
+  isAddOpen.value = true;
+  toggleCommentPositionMode(false);
+}
 </script>
 
 <style>
@@ -275,4 +322,10 @@ function closeComment() {
 #comments-container form footer > * {
   flex-grow: 1;
 }
+
+.vpv-pages-inner-container.waiting-comment .page-inner-container,
+.vpv-pages-inner-container.waiting-comment .vpv-text-layer-text,
+.vpv-pages-inner-container.waiting-comment .vpv-text-layer-wrapper {
+  cursor: cell !important;
+}
 </style>

src/components/project/ProjectStep.vue

@@ -41,6 +41,7 @@
               data-icon="document"
             ></div>
           </template>
+          <footer>2 commentaire(s)</footer>
         </article>
       </div>
     </router-link>