From 173479eaa6cf985806472ccf950a924bd9b81df5 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 29 Oct 2024 11:18:17 +0100
Subject: [PATCH] create opened comment structure

---
 src/components/comments/Comments.vue | 53 +++++++++++++++++-----------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index 317cf92..bf9fad1 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -2,27 +2,37 @@
   <aside id="comments-container" aria-labelledby="comments-label">
     <h2 id="comments-label" class="sr-only">Commentaires</h2>
     <div class="comments | flow">
-      <article
-        v-for="(comment, commentIndex) in Object.values(comments).reverse()"
-        :key="commentIndex"
-        class="comment | flow"
-        :data-status="setStatus(comment)"
-        @click="open(comment)"
-      >
-        <header>
-          <p>
-            <strong>{{ comment.user.name ?? comment.user.email }}</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>
+      <template v-if="!openedComment">
+        <article
+          v-for="(comment, commentIndex) in Object.values(comments).reverse()"
+          :key="commentIndex"
+          class="comment | flow"
+          :data-status="setStatus(comment)"
+          @click="open(comment)"
+        >
+          <header>
+            <p>
+              <strong>{{ comment.user.name ?? comment.user.email }}</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">
-          {{ comment.text }}
-        </p>
-      </article>
+        </article>
+      </template>
+      <template v-else>
+        <article>
+          {{ openedComment.title }}
+        </article>
+        <div class="replies">
+          <article v-for="reply in openedComment.replies"></article>
+        </div>
+      </template>
     </div>
     <button
       id="create-comment"
@@ -74,10 +84,13 @@ const { currentPageIndex, file, comments } = defineProps({
   file: Object,
   comments: Object,
 });
+
 const { user } = useUserStore();
 const { page } = usePageStore();
 const api = useApiStore();
 
+const openedComment = ref(null);
+
 const newCommentText = ref("");
 const isAddOpen = ref(false);
 const emits = defineEmits(["update:file"]);