add / show comments working

src/components/project/ProjectStep.vue

@@ -16,6 +16,7 @@
             }}</time>
           </div>
 
+          <!-- Images -->
           <template v-if="step.files[0]?.type === 'image'">
             <figure
               class="card__images"
@@ -31,6 +32,8 @@
               />
             </figure>
           </template>
+
+          <!-- PDF -->
           <template v-if="step.files[0]?.type === 'document'">
             <div
               @click="showPdf"
@@ -53,7 +56,7 @@ const { step } = defineProps({
   step: Object,
 });
 
-const emit = defineEmits(["update:pdf"]);
+const emit = defineEmits(["update:file"]);
 
 dayjs.locale("fr");
 
@@ -79,7 +82,7 @@ function setStatus() {
 
 function showPdf(event) {
   event.preventDefault();
-  emit("update:pdf", step.files[0].url);
+  emit("update:file", step.files[0]);
 }
 </script>
 

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

@@ -16,7 +16,7 @@
       <VPdfViewer
         :darkMode="true"
         :initialThumbnailsVisible="true"
-        :src="src"
+        :src="file.url"
         local="fr_FR"
         @loaded="onPdfLoaded"
       />
@@ -29,7 +29,12 @@
       >
         <span class="sr-only">Afficher les commentaires</span>
       </button>
-      <Comments v-if="isCommentsOpen" :current-page="currentPage" />
+      <Comments
+        v-if="isCommentsOpen"
+        :current-page-index="currentPageIndex"
+        :file="file"
+        :comments="file.comments"
+      />
     </div>
   </Dialog>
 </template>
@@ -40,8 +45,8 @@ import Comments from "../../comments/Comments.vue";
 import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
 import { ref, watch } from "vue";
 
-const { src } = defineProps({
-  src: String,
+const { file } = defineProps({
+  file: Object,
 });
 
 const emit = defineEmits("close");
@@ -55,7 +60,7 @@ watch(isOpen, (newValue) => {
   emit("close");
 });
 const isCommentsOpen = ref(false);
-const currentPage = ref(1);
+const currentPageIndex = ref(1);
 
 // Functions
 const onPdfLoaded = () => {
@@ -65,7 +70,7 @@ const onPdfLoaded = () => {
     (entries) => {
       entries.forEach((entry, index) => {
         if (entry.intersectionRatio > 0.5) {
-          currentPage.value = parseInt(
+          currentPageIndex.value = parseInt(
             entry.target.getAttribute("aria-label").split(" ")[1]
           );
         }