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>