comments : prepare new comment working

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt

@@ -0,0 +1,9 @@
+Date: 2024-10-23 07:20
+
+----
+
+Uuid: s0lNtRA0Z7ybTCWG
+
+----
+
+Template: document

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/client-brief.txt

@@ -6,7 +6,7 @@ Stepname: clientBrief
 
 ----
 
-Pdf: - file://Z6wXAXIq5mBocGi8
+Pdf: - file://s0lNtRA0Z7ybTCWG
 
 ----
 

src/components/comments/Comments.vue

@@ -0,0 +1,77 @@
+<template>
+  <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>
+          </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>
+    </div>
+    <button
+      id="add-comment"
+      class="btn btn--white-20 | w-full"
+      @click="isAddOpen = true"
+    >
+      Ajouter un commentaire
+    </button>
+
+    <form
+      v-if="isAddOpen"
+      action=""
+      method="post"
+      class="flow"
+      @submit="addComment"
+    >
+      <label class="sr-only" for="comment">Votre commentaire</label>
+      <textarea
+        name="comment"
+        id="comment"
+        placeholder="Ajouter un commentaire"
+        rows="3"
+        class="text-sm | rounded-lg bg-black p-12"
+        v-model="newCommentText"
+      ></textarea>
+      <footer class="flex">
+        <button class="btn btn--white-20">Annuler</button>
+        <input type="submit" class="btn btn--tranparent" />
+      </footer>
+    </form>
+  </aside>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useUserStore } from "../../stores/user";
+import dayjs from "dayjs";
+
+const { currentPage } = defineProps({
+  currentPage: Number,
+});
+const { user } = useUserStore();
+
+const newCommentText = ref("");
+
+const isAddOpen = ref(false);
+
+// Functions
+function addComment(event) {
+  event.preventDefault();
+  const comment = {
+    userUuid: user.uuid,
+    text: newCommentText.value,
+    page: currentPage,
+    date: dayjs().format(),
+  };
+  console.log(comment);
+}
+</script>

src/components/project/ProjectStep.vue

@@ -1,22 +1,22 @@
 <template>
   <section class="flex-1" :aria-labelledby="text" :data-status="status">
-    <h2 :id="text">
+    <router-link :to="'/' + step.uri">
-      <!-- ADRIEN / TIMOTHÉE : DYNAMISER L'ICONE -->
+      <h2 :id="text">
-      <span data-icon="votre-brief">{{ step.text }}</span>
+        <!-- ADRIEN / TIMOTHÉE : DYNAMISER L'ICONE -->
-    </h2>
+        <span data-icon="votre-brief">{{ step.text }}</span>
-    <div class="cards | flow">
+      </h2>
-      <article class="card">
+      <div class="cards | flow">
-        <hgroup class="order-last">
+        <article class="card">
-          <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
+          <hgroup class="order-last">
-        </hgroup>
+            <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
-        <div class="card__meta | flex">
+          </hgroup>
-          <time class="card__date | text-grey-700" datetime="2024-06-12">{{
+          <div class="card__meta | flex">
-            dayjs(step.modified).format("DD MMMM YYYY")
+            <time class="card__date | text-grey-700" datetime="2024-06-12">{{
-          }}</time>
+              dayjs(step.modified).format("DD MMMM YYYY")
-        </div>
+            }}</time>
+          </div>
 
-        <template v-if="step.files[0]?.type === 'image'">
+          <template v-if="step.files[0]?.type === 'image'">
-          <router-link :to="'/' + step.uri">
             <figure
               class="card__images"
               :data-count="
@@ -30,13 +30,17 @@
                 :alt="image.alt"
               />
             </figure>
-          </router-link>
+          </template>
-        </template>
+          <template v-if="step.files[0]?.type === 'document'">
-        <template v-if="step.files[0]?.type === 'document'">
+            <div
-          <div @click="showPdf" class="card__images" data-icon="document"></div>
+              @click="showPdf"
-        </template>
+              class="card__images"
-      </article>
+              data-icon="document"
-    </div>
+            ></div>
+          </template>
+        </article>
+      </div>
+    </router-link>
   </section>
 </template>
 
@@ -73,7 +77,8 @@ function setStatus() {
   }
 }
 
-function showPdf() {
+function showPdf(event) {
+  event.preventDefault();
   emit("update:pdf", step.files[0].url);
 }
 </script>

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

@@ -20,94 +20,23 @@
         local="fr_FR"
         @loaded="onPdfLoaded"
       />
-      <button id="toggle-comments" aria-pressed="false" class="btn btn--transparent" data-icon="comment">
+      <button
+        id="toggle-comments"
+        aria-pressed="false"
+        class="btn btn--transparent"
+        data-icon="comment"
+        @click="isCommentsOpen = !isCommentsOpen"
+      >
         <span class="sr-only">Afficher les commentaires</span>
       </button>
-      <aside id="comments-container" aria-labelledby="comments-label">
+      <Comments v-if="isCommentsOpen" :current-page="currentPage" />
-        <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>
-              </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 class="comment | flow" data-status="read">
-            <header>
-              <p>
-                <strong>Claire</strong>
-                <span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
-                <time datetime="2024-10-22">Hier</time>
-              </p>
-            </header>
-            <p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
-            <footer>
-              <p>1 réponse</p>
-            </footer>
-          </article>
-          <article class="comment | flow" data-status="read">
-            <header>
-              <p>
-                <strong>Claire</strong>
-                <span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
-                <time datetime="2024-10-22">Hier</time>
-              </p>
-            </header>
-            <p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
-            <footer>
-              <p>1 réponse</p>
-            </footer>
-          </article>
-          <article class="comment | flow" data-status="read">
-            <header>
-              <p>
-                <strong>Claire</strong>
-                <span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
-                <time datetime="2024-10-22">Hier</time>
-              </p>
-            </header>
-            <p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
-            <footer>
-              <p>1 réponse</p>
-            </footer>
-          </article>
-          <article class="comment | flow" data-status="read">
-            <header>
-              <p>
-                <strong>Claire</strong>
-                <span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
-                <time datetime="2024-10-22">Hier</time>
-              </p>
-            </header>
-            <p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
-            <footer>
-              <p>1 réponse</p>
-            </footer>
-          </article>
-        </div>
-        <!-- Ajouter un commentaire -->
-        <button id="add-comment" class="btn btn--white-20 | w-full">Ajouter un commentaire</button>
-        <!--
-        <form action="" method="post" class="flow">
-          <label class="sr-only" for="comment">Votre commentaire</label>
-          <textarea name="comment" id="comment" placeholder="Ajouter un commentaire" rows="3" class="text-sm | rounded-lg bg-black p-12"></textarea>
-          <footer class="flex">
-            <button class="btn btn--white-20">Annuler</button>
-            <input type="submit" class="btn btn--tranparent">
-          </footer>
-        </form>
-        -->
-      </aside>
     </div>
   </Dialog>
 </template>
 
 <script setup>
 import Dialog from "primevue/dialog";
+import Comments from "../../comments/Comments.vue";
 import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
 import { ref, watch } from "vue";
 
@@ -120,11 +49,15 @@ const emit = defineEmits("close");
 const licenseKey = import.meta.env.VITE_VPV_LICENSE;
 useLicense({ licenseKey });
 
+// Variables
 const isOpen = ref(true);
 watch(isOpen, (newValue) => {
   emit("close");
 });
+const isCommentsOpen = ref(false);
+const currentPage = ref(1);
 
+// Functions
 const onPdfLoaded = () => {
   const wrapper = document.querySelector(".vpv-pages-inner-container");
 
@@ -132,7 +65,9 @@ const onPdfLoaded = () => {
     (entries) => {
       entries.forEach((entry, index) => {
         if (entry.intersectionRatio > 0.5) {
-          console.log(entry.target.getAttribute("aria-label"));
+          currentPage.value = parseInt(
+            entry.target.getAttribute("aria-label").split(" ")[1]
+          );
         }
       });
     },
@@ -211,7 +146,7 @@ const onPdfLoaded = () => {
   position: absolute;
   right: var(--space-16);
   bottom: var(--space-16);
-  padding: .625rem;
+  padding: 0.625rem;
 }
 #comments-container {
   background-color: black;
@@ -257,14 +192,14 @@ const onPdfLoaded = () => {
   color: var(--color-grey-700);
 }
 .comment[data-status="unread"] header p > :first-child::before {
-  content: '';
+  content: "";
   display: inline-block;
   width: 0.375rem;
   height: 0.375rem;
   border-radius: 50%;
   background: var(--color-primary);
   margin-right: var(--space-8);
-  margin-bottom: .075em;
+  margin-bottom: 0.075em;
 }
 .comment[data-status="unread"] header strong,
 .comment[data-status="unread"] footer {
@@ -274,7 +209,7 @@ const onPdfLoaded = () => {
   color: var(--color-primary);
 }
 #comments-container form {
-  --flow-space: .5rem;
+  --flow-space: 0.5rem;
   flex-direction: column;
   position: -webkit-sticky;
   position: sticky;