add / show comments working

src/components/comments/Comments.vue

@@ -2,20 +2,31 @@
   <aside id="comments-container" aria-labelledby="comments-label">
     <h2 id="comments-label" class="sr-only">Commentaires</h2>
     <div class="comments | flow">
-      <article class="comment | flow" data-status="unread">
-        <header>
-          <p>
-            <strong>François</strong>
-            <span class="comment__id">#1</span> •
-            <span class="comment__page">Page 12</span>
-            <time datetime="2024-10-22">Hier</time>
+      <div
+        v-for="(page, pageIndex) in localComments"
+        class="comments__page-group"
+      >
+        <article
+          v-for="(comment, commentIndex) in Object.values(page)"
+          :key="pageIndex + commentIndex"
+          class="comment | flow"
+          data-status="unread"
+        >
+          <header>
+            <p>
+              <strong>{{ comment.username }}</strong>
+              <span class="comment__id">#{{ commentIndex + 1 }}</span> •
+              <span class="comment__page">Page {{ pageIndex }}</span>
+              <time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
+                formatDate(comment.date)
+              }}</time>
+            </p>
+          </header>
+          <p class="comment__body">
+            {{ comment.text }}
           </p>
-        </header>
-        <p class="comment__body">
-          Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
-          consequat porta mauris hendrerit malesuada viverra turpis.
-        </p>
-      </article>
+        </article>
+      </div>
     </div>
     <button
       id="add-comment"
@@ -50,28 +61,66 @@
 </template>
 
 <script setup>
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+import uniqid from "uniqid";
 import { ref } from "vue";
 import { useUserStore } from "../../stores/user";
-import dayjs from "dayjs";
+import { usePageStore } from "../../stores/page";
 
-const { currentPage } = defineProps({
-  currentPage: Number,
+dayjs.locale("fr");
+
+const { currentPageIndex, file, comments } = defineProps({
+  currentPageIndex: Number,
+  file: Object,
+  comments: Object,
 });
 const { user } = useUserStore();
+const { page } = usePageStore();
 
 const newCommentText = ref("");
-
 const isAddOpen = ref(false);
+const localComments = ref(comments);
 
 // Functions
 function addComment(event) {
   event.preventDefault();
+  const date = dayjs().format();
   const comment = {
+    pageUri: page.uri + "/client-brief",
+    targetPage: currentPageIndex,
+    fileName: file.name,
     userUuid: user.uuid,
     text: newCommentText.value,
-    page: currentPage,
-    date: dayjs().format(),
+    date,
+    id: uniqid(),
   };
-  console.log(comment);
+
+  const headers = {
+    method: "POST",
+    body: JSON.stringify(comment),
+  };
+
+  fetch("/add-comment.json", headers)
+    .then((res) => res.json())
+    .then((json) => (localComments.value = json))
+    .catch((error) => {
+      console.error("Erreur lors de la sauvegarde :", error);
+    });
+}
+
+function formatDate(date) {
+  const todayNumber = parseInt(dayjs().format("YYMMD"));
+  const dateNumber = parseInt(dayjs(date).format("YYMMD"));
+
+  if (dateNumber === todayNumber) {
+    return "Aujourd'hui";
+  }
+
+  if (dateNumber === todayNumber - 1) {
+    return "hier";
+  }
+
+  return dayjs(date).format("D MMM YY");
 }
 </script>

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]
           );
         }