fix comment problem

src/components/project/DialogWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <PdfViewer
+  <TitledPdfWrapper
     v-if="
       dialog.content.slug.includes('brief') ||
       dialog.content.slug === 'proposal'
@@ -9,7 +9,7 @@
   <VirtualSample v-if="dialog.content.slug === 'virtual-sample'" />
 </template>
 <script setup>
-import PdfViewer from "./brief/PdfViewer.vue";
+import TitledPdfWrapper from "./TitledPdfWrapper.vue";
 import { useDialogStore } from "../../stores/dialog";
 import VirtualSample from "./virtual-sample/VirtualSample.vue";
 

src/components/project/PdfViewer.vue

@@ -1,88 +1,40 @@
 <template>
-  <Dialog
-    id="add-pdf"
-    v-model:visible="isOpen"
-    modal
-    :draggable="false"
-    header="Titre du PDF"
-    class="dialog"
-    :class="{ 'with-comments': isCommentsOpen }"
-    :closeOnEscape="true"
+  <VPdfViewer
+    :darkMode="true"
+    :initialThumbnailsVisible="true"
+    :src="openedFile.url"
+    local="fr_FR"
+    @loaded="onPdfLoaded"
+  />
+  <button
+    id="toggle-comments"
+    :aria-pressed="isCommentsOpen"
+    class="btn btn--transparent btn--outline"
+    data-icon="comment"
+    @click="isCommentsOpen = !isCommentsOpen"
   >
-    <template #header>
-      <button
-        v-if="
-          dialog.content.id === 'clientBrief' &&
-          dialog.content.isValidated !== true
-        "
-        class="btn"
-        @click="validate()"
-      >
-        Valider et envoyer le brief
-      </button>
-      <h2
-        class="font-serif text-lg"
-        :title="openedFile?.label.length ? openedFile.label : openedFile.name"
-      >
-        {{ openedFile?.label.length ? openedFile.label : openedFile.name }}
-      </h2>
-    </template>
-    <div id="vpv-container">
-      <VPdfViewer
-        :darkMode="true"
-        :initialThumbnailsVisible="true"
-        :src="openedFile.url"
-        local="fr_FR"
-        @loaded="onPdfLoaded"
-      />
-      <button
-        id="toggle-comments"
-        :aria-pressed="isCommentsOpen"
-        class="btn btn--transparent btn--outline"
-        data-icon="comment"
-        @click="isCommentsOpen = !isCommentsOpen"
-      >
-        <span class="sr-only">Afficher les commentaires</span>
-      </button>
-      <Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
-    </div>
-  </Dialog>
+    <span class="sr-only">Afficher les commentaires</span>
+  </button>
+  <Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
 </template>
 
 <script setup>
-import Dialog from "primevue/dialog";
-import Comments from "../../comments/Comments.vue";
-import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
+import Comments from "../comments/Comments.vue";
 import { ref, watch } from "vue";
-import { useDialogStore } from "../../../stores/dialog";
-import { useRoute, useRouter } from "vue-router";
+import { useDialogStore } from "../../stores/dialog";
 import { storeToRefs } from "pinia";
-import { useApiStore } from "../../../stores/api";
-
-const router = useRouter();
-const route = useRoute();
-
-const dialog = useDialogStore();
-const api = useApiStore();
-const { openedFile, comments } = storeToRefs(useDialogStore());
-
-openedFile.value = route.query.fileIndex
-  ? dialog.content.files[route.query.fileIndex]
-  : dialog.content.files[0];
+import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
+import { useRoute, useRouter } from "vue-router";
 
 const licenseKey = import.meta.env.VITE_VPV_LICENSE;
 useLicense({ licenseKey });
 
+const { openedFile, isCommentsOpen, comments } = storeToRefs(useDialogStore());
+const dialog = useDialogStore();
+const router = useRouter();
+const route = useRoute();
+
 const draftComment = ref(null);
-const isOpen = ref(true);
-watch(isOpen, (newValue) => {
-  router.push({ name: route.name });
-});
-console.log(route.query);
-const isCommentsOpen = ref(
-  route.query.hasOwnProperty("comments") ? true : false
-);
-const currentPageIndex = ref(1);
 
 watch(isCommentsOpen, (newVal) => {
   if (newVal) {
@@ -92,6 +44,9 @@ watch(isCommentsOpen, (newVal) => {
   }
 });
 
+openedFile.value = route.query.fileIndex
+  ? dialog.content.files[route.query.fileIndex]
+  : dialog.content.files[0];
 watch(openedFile, (newVal) => {
   removeCommentMarkers();
   if (newVal.comments) {
@@ -99,6 +54,8 @@ watch(openedFile, (newVal) => {
   }
 });
 
+const currentPageIndex = ref(1);
+
 // Functions
 const onPdfLoaded = () => {
   const wrapper = document.querySelector(".vpv-pages-inner-container");
@@ -193,32 +150,8 @@ function showDraftMarker(draftComment) {
 
   container.appendChild(bubble);
 }
-
-async function validate() {
-  const response = await api.validateBrief(
-    route.path + "/client-brief",
-    route.fullPath
-  );
-  if (response.success) {
-    dialog.content.isValidated = true;
-  } else {
-    console.alert(response);
-  }
-}
 </script>
 
-<style>
-#vpv-container {
-  width: var(--dialog-max-w);
-  height: calc(var(--dialog-max-h) - var(--dialog-header-h));
-  background: black;
-  position: relative;
-}
-.with-comments .vpv-pages-container-wrapper {
-  margin-right: var(--dialog-comments-w, 20rem);
-}
-</style>
-
 <style scoped>
-@import "../../../assets/css/src/2.blocks.pdf-viewer.css";
+@import "../../assets/css/src/2.blocks.pdf-viewer.css";
 </style>

src/components/project/TitledPdfWrapper.vue

@@ -0,0 +1,83 @@
+<template>
+  <Dialog
+    id="add-pdf"
+    v-model:visible="isOpen"
+    modal
+    :draggable="false"
+    header="Titre du PDF"
+    class="dialog"
+    :class="{ 'with-comments': isCommentsOpen }"
+    :closeOnEscape="true"
+  >
+    <template #header>
+      <button
+        v-if="
+          dialog.content.id === 'clientBrief' &&
+          dialog.content.isValidated !== true
+        "
+        class="btn"
+        @click="validate()"
+      >
+        Valider et envoyer le brief
+      </button>
+      <h2
+        v-if="openedFile"
+        class="font-serif text-lg"
+        :title="openedFile?.label.length ? openedFile.label : openedFile.name"
+      >
+        {{ openedFile?.label.length ? openedFile.label : openedFile.name }}
+      </h2>
+    </template>
+    <div id="vpv-container">
+      <PdfViewer />
+    </div>
+  </Dialog>
+</template>
+
+<script setup>
+import Dialog from "primevue/dialog";
+import PdfViewer from "./PdfViewer.vue";
+import { ref, watch } from "vue";
+import { useDialogStore } from "../../stores/dialog";
+import { useRoute, useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
+import { useApiStore } from "../../stores/api";
+
+const { openedFile, isCommentsOpen } = storeToRefs(useDialogStore());
+
+const router = useRouter();
+const route = useRoute();
+
+const dialog = useDialogStore();
+const api = useApiStore();
+
+const isOpen = ref(true);
+watch(isOpen, (newValue) => {
+  router.push({ name: route.name });
+});
+
+// Functions
+async function validate() {
+  const response = await api.validateBrief(
+    route.path + "/client-brief",
+    route.fullPath
+  );
+  if (response.success) {
+    dialog.content.isValidated = true;
+  } else {
+    console.alert(response);
+  }
+}
+</script>
+
+<style>
+#vpv-container {
+  width: var(--dialog-max-w);
+  height: calc(var(--dialog-max-h) - var(--dialog-header-h));
+  background: black;
+  position: relative;
+}
+.with-comments .vpv-pages-container-wrapper {
+  margin-right: var(--dialog-comments-w, 20rem);
+}
+</style>

src/components/project/virtual-sample/StaticView.vue

@@ -47,15 +47,12 @@
 <script setup>
 import { ref } from "vue";
 import { useVirtualSampleStore } from "../../../stores/virtualSample";
-import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
 
 const { step } = useVirtualSampleStore();
 const activeTab = ref(Object.keys(step.files.static)[0]);
 </script>
 
 <style scoped>
-@import "../../../assets/css/src/2.blocks.pdf-viewer.css";
-
 .dialog__inner {
   background-color: inherit;
   height: calc(100% - 3.5rem) !important;