From cd9de2572a1a2444c7ca79d95ff96aa335edc83f Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 19 Feb 2025 15:31:57 +0100
Subject: [PATCH] show comments corresponding to current file

---
 src/components/comments/Comment.vue           | 67 ++++++++++---------
 .../project/virtual-sample/VirtualSample.vue  | 41 ++++++------
 src/stores/dialog.js                          |  7 +-
 3 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/src/components/comments/Comment.vue b/src/components/comments/Comment.vue
index f1b5ceb..e504654 100644
--- a/src/components/comments/Comment.vue
+++ b/src/components/comments/Comment.vue
@@ -13,9 +13,10 @@
         <strong>{{ comment.author.name ?? comment.author.email }}</strong>
         <template v-if="commentIndex">
           <span class="comment__id">#{{ commentIndex }}</span>
-          •
         </template>
-        <span class="comment__page">Page {{ comment.position.pageIndex }}</span>
+        <span v-if="comment.position.pageIndex" class="comment__page">
+          • Page {{ comment.position.pageIndex }}
+        </span>
         <time
           class="comment__date"
           :datetime="dayjs(comment.date).format('YYYY-MM-DD')"
@@ -39,7 +40,7 @@
     <footer v-if="!comment.isEditMode" class="comment__replies">
       <p v-if="comment.replies?.length > 0">
         {{ comment.replies.length }} réponse{{
-          comment.replies.length > 1 ? "s" : ""
+          comment.replies.length > 1 ? 's' : ''
         }}
       </p>
       <div
@@ -78,24 +79,24 @@
 </template>
 
 <script setup>
-import dayjs from "dayjs";
-import "dayjs/locale/fr";
-import { useUserStore } from "../../stores/user";
-import { useApiStore } from "../../stores/api";
-import { useDialogStore } from "../../stores/dialog";
-import { computed, onMounted, ref, useTemplateRef } from "vue";
-import { storeToRefs } from "pinia";
-import { usePageStore } from "../../stores/page";
-import { useRoute } from "vue-router";
+import dayjs from 'dayjs';
+import 'dayjs/locale/fr';
+import { useUserStore } from '../../stores/user';
+import { useApiStore } from '../../stores/api';
+import { useDialogStore } from '../../stores/dialog';
+import { computed, onMounted, ref, useTemplateRef } from 'vue';
+import { storeToRefs } from 'pinia';
+import { usePageStore } from '../../stores/page';
+import { useRoute } from 'vue-router';
 
-dayjs.locale("fr");
+dayjs.locale('fr');
 
 const { comment, commentIndex } = defineProps({
   comment: Object,
   commentIndex: Number,
 });
 
-const emits = defineEmits(["update:file", "close:comment"]);
+const emits = defineEmits(['update:file', 'close:comment']);
 
 const route = useRoute();
 const userStore = useUserStore();
@@ -104,7 +105,7 @@ const dialog = useDialogStore();
 const { activeTracks, openedComment } = storeToRefs(useDialogStore());
 const draftText = ref(comment.text);
 const editField = ref(null);
-const commentNode = useTemplateRef("comment-node");
+const commentNode = useTemplateRef('comment-node');
 const { page } = storeToRefs(usePageStore());
 let correspondingMarker = null;
 
@@ -114,29 +115,29 @@ const getStatus = computed(() => {
     (notification) => notification.id === comment.id
   );
   if (correspondingNotification && !correspondingNotification.isRead) {
-    return "unread";
+    return 'unread';
   }
   return undefined;
 });
 
 function formatDate() {
-  const todayNumber = parseInt(dayjs().format("YYMMD"));
-  const dateNumber = parseInt(dayjs(comment.date).format("YYMMD"));
+  const todayNumber = parseInt(dayjs().format('YYMMD'));
+  const dateNumber = parseInt(dayjs(comment.date).format('YYMMD'));
 
   if (dateNumber === todayNumber) {
     return "Aujourd'hui";
   }
 
   if (dateNumber === todayNumber - 1) {
-    return "hier";
+    return 'hier';
   }
 
-  return dayjs(comment.date).format("D MMM YY");
+  return dayjs(comment.date).format('D MMM YY');
 }
 
 function closeAddField() {
   isAddOpen.value = false;
-  newCommentText.value = "";
+  newCommentText.value = '';
 }
 
 function handleClick() {
@@ -145,14 +146,14 @@ function handleClick() {
 }
 
 async function read() {
-  if (getStatus.value !== "unread") return;
+  if (getStatus.value !== 'unread') return;
   try {
     const newNotification = await api.readNotification(
       comment.id,
       page.value.uri
     );
   } catch (error) {
-    console.log("Erreur lors de la lecture de la notification : ", error);
+    console.log('Erreur lors de la lecture de la notification : ', error);
   }
 }
 
@@ -179,8 +180,8 @@ async function deleteComment(event) {
   } else {
     dialog.updateFile(newFile);
   }
-  if (comment.type === "comment-reply") {
-    emits("close:comment");
+  if (comment.type === 'comment-reply') {
+    emits('close:comment');
   }
 }
 
@@ -206,19 +207,19 @@ function editComment(event) {
 }
 
 function hightlightCorrespondingMarker() {
-  if (comment.type === "comment-reply") return;
+  if (comment.type === 'comment-reply') return;
 
   const correspondingMarker = document.querySelector(
     `.comment-marker[href="#comment-${comment.id}"]`
   );
   if (!correspondingMarker) return;
 
-  commentNode.value.classList.add("highlight");
-  correspondingMarker.classList.add("active");
-  correspondingMarker.classList.add("big");
+  commentNode.value.classList.add('highlight');
+  correspondingMarker.classList.add('active');
+  correspondingMarker.classList.add('big');
 }
 function unhightlightCorrespondingMarker() {
-  if (comment.type === "comment-reply") return;
+  if (comment.type === 'comment-reply') return;
 
   const correspondingMarker = document.querySelector(
     `.comment-marker[href="#comment-${comment.id}"]`
@@ -226,8 +227,8 @@ function unhightlightCorrespondingMarker() {
   if (!correspondingMarker) return;
   if (openedComment.value) return;
 
-  commentNode.value.classList.remove("highlight");
-  correspondingMarker.classList.remove("active");
-  correspondingMarker.classList.remove("big");
+  commentNode.value.classList.remove('highlight');
+  correspondingMarker.classList.remove('active');
+  correspondingMarker.classList.remove('big');
 }
 </script>
diff --git a/src/components/project/virtual-sample/VirtualSample.vue b/src/components/project/virtual-sample/VirtualSample.vue
index d01558a..9dc0d45 100644
--- a/src/components/project/virtual-sample/VirtualSample.vue
+++ b/src/components/project/virtual-sample/VirtualSample.vue
@@ -66,8 +66,8 @@
       >
         <span>{{
           !isLoopAnimationEnabled
-            ? "Animation en boucle"
-            : "Arrêter l’animation"
+            ? 'Animation en boucle'
+            : 'Arrêter l’animation'
         }}</span>
       </button>
       <button
@@ -79,7 +79,7 @@
         @click="isCommentsOpen = !isCommentsOpen"
       >
         <span class="sr-only"
-          >{{ isCommentsOpen ? "Masquer" : "Afficher" }} les commentaires</span
+          >{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span
         >
       </button>
     </template>
@@ -92,17 +92,17 @@
 </template>
 
 <script setup>
-import Comments from "../../comments/Comments.vue";
-import Dialog from "primevue/dialog";
-import DynamicView from "./DynamicView.vue";
-import StaticView from "./StaticView.vue";
-import DTLPanel from "../../design-to-light/DTLPanel.vue";
-import { storeToRefs } from "pinia";
-import { ref, watch, computed } from "vue";
-import { useVirtualSampleStore } from "../../../stores/virtualSample";
-import { useDialogStore } from "../../../stores/dialog";
-import { useRoute, useRouter } from "vue-router";
-import { usePageStore } from "../../../stores/page";
+import Comments from '../../comments/Comments.vue';
+import Dialog from 'primevue/dialog';
+import DynamicView from './DynamicView.vue';
+import StaticView from './StaticView.vue';
+import DTLPanel from '../../design-to-light/DTLPanel.vue';
+import { storeToRefs } from 'pinia';
+import { ref, watch, computed } from 'vue';
+import { useVirtualSampleStore } from '../../../stores/virtualSample';
+import { useDialogStore } from '../../../stores/dialog';
+import { useRoute, useRouter } from 'vue-router';
+import { usePageStore } from '../../../stores/page';
 
 const { file } = defineProps({
   file: Object,
@@ -130,17 +130,18 @@ const isOpen = ref(true);
 watch(isOpen, (newValue) => {
   router.push({ name: route.name });
   openedFile.value = null;
+  activeTracks.value = null;
 });
 
 const downloadText = computed(() => {
-  if (activeTab.value === "dynamic") {
+  if (activeTab.value === 'dynamic') {
     if (activeTracks.value.length === 1) {
       return "Télécharger l'image";
     } else {
-      return "Télécharger les images";
+      return 'Télécharger les images';
     }
   } else {
-    return "Télécharger le PDF";
+    return 'Télécharger le PDF';
   }
 });
 
@@ -149,16 +150,16 @@ const correspondingDTLProposal = computed(() => {
   if (!hasDTLProposal || !isOpen.value || !openedFile.value) return false;
 
   const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
-    if (activeTab.value === "dynamic") {
+    if (activeTab.value === 'dynamic') {
       return (
-        proposal.location.type === "dynamic" &&
+        proposal.location.type === 'dynamic' &&
         activeTracks?.value?.some(
           (activeTrack) => activeTrack.slug === proposal.location.trackSlug
         )
       );
     } else {
       return (
-        proposal.location.type === "static" &&
+        proposal.location.type === 'static' &&
         openedFile.value?.source === proposal.location.source
       );
     }
diff --git a/src/stores/dialog.js b/src/stores/dialog.js
index d86c171..87023ef 100644
--- a/src/stores/dialog.js
+++ b/src/stores/dialog.js
@@ -13,6 +13,7 @@ export const useDialogStore = defineStore('dialog', () => {
         file.comments ? file.comments : []
       );
     }
+    if (!openedFile.value) return [];
     return openedFile.value.comments;
   });
 
@@ -68,7 +69,8 @@ export const useDialogStore = defineStore('dialog', () => {
     }
   });
   watch(openedFile, (newVal, oldVal) => {
-    if (!isCommentsOpen.value || !oldVal || newVal.url == oldVal.url) return;
+    if (!isCommentsOpen.value || !newVal || !oldVal || newVal.url == oldVal.url)
+      return;
 
     isViewerDisabled.value = true;
 
@@ -82,12 +84,11 @@ export const useDialogStore = defineStore('dialog', () => {
   });
 
   function setCommentMarkers() {
-    if (!comments.value) return;
+    if (!comments.value || !openedFile.value) return;
     comments.value.forEach((comment) => {
       const correspondingMarker = document.querySelector(
         `.comment-marker[href="#comment-${comment.id}"]`
       );
-      console.log(openedFile.value);
       if (comment.location.file.uuid !== openedFile.value.uuid) return;
       if (comment.type === 'comment-reply') return;
       if (correspondingMarker) return;