From 6e0b2299e2b3389cff740589049029d3a11f88c2 Mon Sep 17 00:00:00 2001 From: isUnknown Date: Wed, 6 Nov 2024 16:38:46 +0100 Subject: [PATCH] comments > get absolute position of new comment --- ...-bureaux-artistiquement-consideree.pdf.txt | 65 ++++++++++++++- .../site/plugins/comments/routes/create.php | 4 +- src/components/comments/Comments.vue | 79 ++++++++++++++++--- src/components/project/ProjectStep.vue | 1 + 4 files changed, 133 insertions(+), 16 deletions(-) diff --git a/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 b/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 index f2b53ff..7b3786f 100644 --- a/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 +++ b/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 @@ -72,4 +72,67 @@ Comments: isRead: false position: x: null - y: null \ No newline at end of file + y: null +- + page: + uri: projects/miss-dior-blooming-bouquet + title: Miss Dior Blooming Bouquet + file: + uuid: file://s0lNtRA0Z7ybTCWG + pageIndex: 1 + replies: [ ] + text: test + author: + name: Adrien Payet + email: adrien.payet@outlook.com + uuid: user://WWjXgPWk + role: admin + date: 2024-11-06T16:19:29+01:00 + id: m360ymc1 + type: comment + isRead: false + position: + x: "148.03332519531" + y: 162 +- + page: + uri: projects/miss-dior-blooming-bouquet + title: Miss Dior Blooming Bouquet + file: + uuid: file://s0lNtRA0Z7ybTCWG + pageIndex: 1 + replies: [ ] + text: Nouveau commentaire positionné + author: + name: Adrien Payet + email: adrien.payet@outlook.com + uuid: user://WWjXgPWk + role: admin + date: 2024-11-06T16:33:11+01:00 + id: m361g8sk + type: comment + isRead: false + position: + x: "215.03332519531" + y: 181 +- + page: + uri: projects/miss-dior-blooming-bouquet + title: Miss Dior Blooming Bouquet + file: + uuid: file://s0lNtRA0Z7ybTCWG + pageIndex: 1 + replies: [ ] + text: commentaire positionné + author: + name: Adrien Payet + email: adrien.payet@outlook.com + uuid: user://WWjXgPWk + role: admin + date: 2024-11-06T16:35:30+01:00 + id: m361j842 + type: comment + isRead: false + position: + x: '239.03332519531' + y: 74 \ No newline at end of file diff --git a/public/site/plugins/comments/routes/create.php b/public/site/plugins/comments/routes/create.php index a3d2315..723173c 100644 --- a/public/site/plugins/comments/routes/create.php +++ b/public/site/plugins/comments/routes/create.php @@ -21,8 +21,8 @@ return [ 'file' => $file, 'filePageIndex' => $data->filePageIndex, 'position' => [ - 'x' => null, - 'y' => null + 'x' => $data->position->x, + 'y' => $data->position->y ], 'replies' => [], 'text' => $data->text, diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue index 9cadeac..c99f5dc 100644 --- a/src/components/comments/Comments.vue +++ b/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 @@ -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); +} diff --git a/src/components/project/ProjectStep.vue b/src/components/project/ProjectStep.vue index 2957695..dc4d86b 100644 --- a/src/components/project/ProjectStep.vue +++ b/src/components/project/ProjectStep.vue @@ -41,6 +41,7 @@ data-icon="document" > +