diff --git a/public/assets/svg/comment-bubble.svg b/public/assets/svg/comment-bubble.svg new file mode 100644 index 0000000..87e2cb3 --- /dev/null +++ b/public/assets/svg/comment-bubble.svg @@ -0,0 +1,6 @@ + + + + + + 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 cb27a3c..f7bcb37 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 @@ -6,4 +6,51 @@ Uuid: s0lNtRA0Z7ybTCWG ---- -Template: document \ No newline at end of file +Template: document + +---- + +Comments: + +- + page: + uri: projects/miss-dior-blooming-bouquet + title: Miss Dior Blooming Bouquet + file: + uuid: file://s0lNtRA0Z7ybTCWG + replies: [ ] + text: test + author: + name: Adrien Payet + email: adrien.payet@outlook.com + uuid: user://WWjXgPWk + role: admin + date: 2024-11-11T14:30:48+01:00 + id: m3d2a41o + type: comment + isRead: false + position: + pageIndex: 1 + x: "225.5333404541" + y: 181 +- + page: + uri: projects/miss-dior-blooming-bouquet + title: Miss Dior Blooming Bouquet + file: + uuid: file://s0lNtRA0Z7ybTCWG + replies: [ ] + text: autre test + author: + name: Adrien Payet + email: adrien.payet@outlook.com + uuid: user://WWjXgPWk + role: admin + position: + pageIndex: 1 + x: '69.533340454102' + y: 117 + date: 2024-11-11T14:40:41+01:00 + id: m3d2mtm8 + type: comment + isRead: false \ 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 708a183..0b4b41a 100644 --- a/public/site/plugins/comments/routes/create.php +++ b/public/site/plugins/comments/routes/create.php @@ -19,8 +19,8 @@ return [ $data = [ 'page' => $page, 'file' => $file, - 'filePageIndex' => $data->filePageIndex, 'position' => [ + 'pageIndex' => $data->position->pageIndex, 'x' => $data->position->x, 'y' => $data->position->y ], diff --git a/public/site/plugins/comments/src/BaseComment.php b/public/site/plugins/comments/src/BaseComment.php index 446f4c1..7b86fea 100644 --- a/public/site/plugins/comments/src/BaseComment.php +++ b/public/site/plugins/comments/src/BaseComment.php @@ -5,7 +5,6 @@ namespace adrienpayet\comments; class BaseComment { protected $page; protected $file; - protected $filePageIndex; protected $position; protected $replies; protected $text; @@ -18,7 +17,7 @@ class BaseComment { public function __construct($data) { $page = $data['page']; $file = $data['file']; - $filePageIndex = $data['filePageIndex']; + $position = $data['position']; $replies = $data['replies'] ?? []; $text = $data['text']; $author = $data['author']; @@ -32,7 +31,6 @@ class BaseComment { ]; $this->file = [ 'uuid' => (string) $file->uuid(), - 'pageIndex' => $filePageIndex, ]; $this->replies = $replies ?? []; $this->text = $text; @@ -46,6 +44,7 @@ class BaseComment { $this->id = $id; $this->type = $type; $this->isRead = false; + $this->position = $position; } public function page() { @@ -94,6 +93,10 @@ class BaseComment { return $this->isRead; } + public function pageIndex() { + $this->position['pageIndex']; + } + public function toArray() { return [ 'page' => $this->page, @@ -101,6 +104,7 @@ class BaseComment { 'replies' => $this->replies, 'text' => $this->text, 'author' => $this->author, + 'position' => $this->position, 'date' => $this->date, 'id' => $this->id, 'type' => $this->type, diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue index ea12e38..d2fa74b 100644 --- a/src/components/comments/Comments.vue +++ b/src/components/comments/Comments.vue @@ -153,13 +153,13 @@ function handleSubmit(event) { const date = dayjs().format(); const newComment = { pageUri: page.uri + "/client-brief", - filePageIndex: newCommentPageIndex.value, fileName: file.name, userUuid: user.uuid, text: newCommentText.value, date, position: { + pageIndex: newCommentPageIndex.value, x: newCommentPosition.value.x, y: newCommentPosition.value.y, } ?? false, @@ -168,6 +168,7 @@ function handleSubmit(event) { if (openedComment.value) { replyComment(newComment); } else { + console.log(newComment); addComment(newComment); } } diff --git a/src/components/project/client-brief/PdfViewer.vue b/src/components/project/client-brief/PdfViewer.vue index 02736b8..95c5365 100644 --- a/src/components/project/client-brief/PdfViewer.vue +++ b/src/components/project/client-brief/PdfViewer.vue @@ -34,7 +34,7 @@ v-if="isCommentsOpen" :current-page-index="currentPageIndex" :file="file" - :comments="file.comments" + :comments="file.comments ?? []" @update:file="changeFile" /> @@ -64,6 +64,12 @@ watch(isOpen, (newValue) => { const isCommentsOpen = ref(false); const currentPageIndex = ref(1); +watch(isCommentsOpen, (newVal) => { + if (newVal) { + setCommentBubbles(); + } +}); + // Functions const onPdfLoaded = () => { const wrapper = document.querySelector(".vpv-pages-inner-container"); @@ -108,9 +114,29 @@ const onPdfLoaded = () => { function changeFile(newFile) { emits("update:file", newFile); } + +function setCommentBubbles() { + file.comments.forEach((comment) => { + const bubble = document.createElement("button"); + bubble.classList.add("comment-bubble"); + bubble.style.left = comment.position.x + "px"; + bubble.style.top = comment.position.y + "px"; + const container = document.querySelector( + `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container` + ); + + container.appendChild(bubble); + }); +}