show only authorized projects

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

@@ -25,22 +25,42 @@ Comments:
     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
+    x: "33.337885333938"
+    y: "22.007722007722"
+  date: 2024-11-11T16:47:45+01:00
+  id: m3d768ay
+  type: comment
+  isRead: false
 - 
   page:
     uri: projects/miss-dior-blooming-bouquet
     title: Miss Dior Blooming Bouquet
   file:
     uuid: file://s0lNtRA0Z7ybTCWG
-  replies: [ ]
-  text: autre test
+  replies:
+    - 
+      page:
+        uri: projects/miss-dior-blooming-bouquet
+        title: Miss Dior Blooming Bouquet
+      file:
+        uuid: file://s0lNtRA0Z7ybTCWG
+      replies: [ ]
+      text: réponse
+      author:
+        name: Adrien Payet
+        email: adrien.payet@outlook.com
+        uuid: user://WWjXgPWk
+        role: admin
+      position:
+        pageIndex: 1
+      date: 2024-11-11T16:47:58+01:00
+      id: m3d76io7
+      type: comment
+      isRead: false
+      parentId: m3d76dn1
+  text: test 2
   author:
     name: Adrien Payet
     email: adrien.payet@outlook.com
@@ -48,9 +68,30 @@ Comments:
     role: admin
   position:
     pageIndex: 1
-    x: '69.533340454102'
-    y: 117
-  date: 2024-11-11T14:40:41+01:00
-  id: m3d2mtm8
+    x: "77.594135956086"
+    y: "61.776061776062"
+  date: 2024-11-11T16:47:52+01:00
+  id: m3d76dn1
+  type: comment
+  isRead: false
+- 
+  page:
+    uri: projects/miss-dior-blooming-bouquet
+    title: Miss Dior Blooming Bouquet
+  file:
+    uuid: file://s0lNtRA0Z7ybTCWG
+  replies: [ ]
+  text: 3e com
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  position:
+    pageIndex: 1
+    x: '31.698764940525'
+    y: '51.544401544402'
+  date: 2024-11-11T16:48:12+01:00
+  id: m3d76sxu
   type: comment
   isRead: false

public/site/plugins/comments/routes/reply.php

@@ -20,7 +20,9 @@ return [
         'page' => $page,
         'parentId' => $data->parentId,
         'file' => $file,
-        'filePageIndex' => $data->filePageIndex,
+        'position' => [
+          'pageIndex' => $data->position->pageIndex,
+        ],
         'text' => $data->text,
         'author' => $user,
         'date' => (string) $data->date,

public/site/templates/projects.json.php

@@ -1,9 +1,10 @@
 <?php
-$children = $page->children()->map(function ($child) {
+$children = $page->children()->filter(function ($child) {
+  return kirby()->user()->role() === 'admin' || $child->managers()->toUsers()->has(kirby()->user());
+})->map(function ($child) {  
   return [
     'title' => $child->title()->value(),
     'url' => $child->url(),
-    'uri' => $child->uri(),
     'uri' => '/' . $child->uri(),
     'modified' => $child->modified('Y-MM-d'),
     'currentStep' => $child->currentStep()->value(),
@@ -12,6 +13,7 @@ $children = $page->children()->map(function ($child) {
   ];
 })->values();
 
+
 $specificData = [
   "children" => $children,
 ];

src/components/Menu.vue

@@ -48,7 +48,7 @@
           }}</span>
         </li>
       </ul>
-      <details open>
+      <details v-if="currentProjects.length" open>
         <summary>Projets en cours</summary>
         <ul>
           <li v-for="project in currentProjects">
@@ -58,7 +58,7 @@
           </li>
         </ul>
       </details>
-      <details>
+      <details v-if="archivedProjects.length">
         <summary>Projets archivés</summary>
         <ul>
           <li v-for="project in archivedProjects">

src/components/comments/Comment.vue

@@ -1,5 +1,9 @@
 <template>
-  <article class="comment | flow" :data-status="setStatus(comment)">
+  <article
+    :id="`comment-${comment.id}`"
+    class="comment | flow"
+    :data-status="setStatus(comment)"
+  >
     <header>
       <p>
         <strong>{{ comment.author.name ?? comment.author.email }}</strong>
@@ -126,7 +130,12 @@ async function deleteComment(event, comment) {
   border-radius: var(--rounded-lg);
   padding: var(--space-12);
   color: var(--color-grey-400);
+  transition: border-color 0.1s ease-in-out;
 }
+.comment.highlight {
+  border-color: #fff;
+}
+
 .comment header p {
   display: flex;
   gap: var(--space-8);

src/components/comments/Comments.vue

@@ -137,19 +137,44 @@ const sortedReplies = ref(null);
 watch(openedComment, (newVal) => {
   sortedReplies.value = newVal ? newVal.replies.slice().reverse() : null;
 });
-
+watch(
+  () => file,
+  (newVal) => {
+    if (newVal.comments) {
+      sortedComments.value = newVal.comments;
+    }
+  }
+);
 watch(
   () => comments,
   (newVal) => {
     sortedComments.value = newVal.reverse();
   }
 );
+watch(isAddOpen, (newVal) => {
+  if (newVal) {
+    setTimeout(() => {
+      document.querySelector("textarea#comment").focus();
+    }, 100);
+  }
+});
 
 const viewContainer = document.querySelector(".vpv-pages-inner-container");
 
+window.addEventListener("keydown", (event) => {
+  if (
+    isAddOpen.value &&
+    event.key === "Enter" &&
+    (event.metaKey || event.ctrlKey)
+  ) {
+    handleSubmit();
+  }
+});
 // Functions
-function handleSubmit(event) {
-  event.preventDefault();
+function handleSubmit(event = null) {
+  if (event) {
+    event.preventDefault();
+  }
   const date = dayjs().format();
   const newComment = {
     pageUri: page.uri + "/client-brief",
@@ -160,8 +185,8 @@ function handleSubmit(event) {
     position:
       {
         pageIndex: newCommentPageIndex.value,
-        x: newCommentPosition.value.x,
-        y: newCommentPosition.value.y,
+        x: newCommentPosition.value?.x,
+        y: newCommentPosition.value?.y,
       } ?? false,
     id: uniqid(),
   };
@@ -192,7 +217,6 @@ async function addComment(newComment) {
 }
 
 function changeFile(newFile) {
-  console.log(newFile);
   emits("update:file", newFile);
 }
 
@@ -229,9 +253,12 @@ function handleCommentPositionClick(event) {
   const y = mouseTop - viewRect.top + pageScroll;
   const x = event.clientX - pageRect.left;
 
+  const relativeX = (x / pageRect.width) * 100;
+  const relativeY = (y / pageRect.height) * 100;
+
   newCommentPosition.value = {
-    x,
-    y,
+    x: relativeX,
+    y: relativeY,
   };
   isAddOpen.value = true;
   toggleCommentPositionMode(false);
@@ -256,6 +283,7 @@ function handleCommentPositionClick(event) {
   padding: var(--space-24) var(--space-32);
 }
 .comments {
+  scroll-behavior: smooth;
   overflow-y: auto;
   height: calc(100% - 3.5rem);
   margin-bottom: 1rem;

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

@@ -67,9 +67,21 @@ const currentPageIndex = ref(1);
 watch(isCommentsOpen, (newVal) => {
   if (newVal) {
     setCommentBubbles();
+  } else {
+    removeCommentBubbles();
   }
 });
 
+watch(
+  () => file,
+  (newVal) => {
+    removeCommentBubbles();
+    if (newVal.comments) {
+      setCommentBubbles();
+    }
+  }
+);
+
 // Functions
 const onPdfLoaded = () => {
   const wrapper = document.querySelector(".vpv-pages-inner-container");
@@ -116,26 +128,54 @@ function changeFile(newFile) {
 }
 
 function setCommentBubbles() {
+  console.log(file.comments);
+  if (!file.comments) return;
   file.comments.forEach((comment) => {
-    const bubble = document.createElement("button");
+    const bubble = document.createElement("a");
+
     bubble.classList.add("comment-bubble");
-    bubble.style.left = comment.position.x + "px";
-    bubble.style.top = comment.position.y + "px";
+    bubble.style.left = comment.position.x + "%";
+    bubble.style.top = comment.position.y + "%";
+    bubble.href = "#comment-" + comment.id;
+
     const container = document.querySelector(
       `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
     );
 
     container.appendChild(bubble);
+
+    setTimeout(() => {
+      bubble.addEventListener("mouseenter", () => highlight(comment));
+      bubble.addEventListener("mouseleave", () => unhighlight(comment));
+    }, 100);
+  });
+}
+
+function highlight(comment) {
+  const target = document.querySelector("#comment-" + comment.id);
+  target.classList.add("highlight");
+}
+function unhighlight(comment) {
+  const target = document.querySelector("#comment-" + comment.id);
+  target.classList.remove("highlight");
+}
+
+function removeCommentBubbles() {
+  document.querySelectorAll(".comment-bubble").forEach((bubble) => {
+    bubble.parentNode.removeChild(bubble);
   });
 }
 </script>
 
 <style>
-button.comment-bubble {
+.comment-bubble {
   position: absolute;
+  display: block;
   width: 1.2rem;
   height: 1.2rem;
   background: url("/assets/svg/comment-bubble.svg") no-repeat !important;
+  cursor: pointer !important;
+  z-index: 999;
 }
 #vpv-container {
   width: var(--dialog-max-w);

src/views/Kanban.vue

@@ -209,7 +209,6 @@ function updateFile(newFile) {
   page.value.files.push(newFile);
 
   file.value = page.value.files[0];
-  console.log(file.value);
 }
 </script>