pdf > comments > new comments : show email address if no name

src/components/comments/Comments.vue

@@ -2,10 +2,7 @@
   <aside id="comments-container" aria-labelledby="comments-label">
     <h2 id="comments-label" class="sr-only">Commentaires</h2>
     <div class="comments | flow">
-      <div
-        v-for="(page, pageIndex) in localComments"
-        class="comments__page-group"
-      >
+      <div v-for="(page, pageIndex) in comments" class="comments__page-group">
         <article
           v-for="(comment, commentIndex) in Object.values(page)"
           :key="pageIndex + commentIndex"
@@ -53,7 +50,9 @@
         v-model="newCommentText"
       ></textarea>
       <footer class="flex">
-        <button class="btn btn--white-20">Annuler</button>
+        <button class="btn btn--white-20" @click="closeAddField()">
+          Annuler
+        </button>
         <input type="submit" class="btn btn--tranparent" />
       </footer>
     </form>
@@ -80,7 +79,7 @@ const { page } = usePageStore();
 
 const newCommentText = ref("");
 const isAddOpen = ref(false);
-const localComments = ref(comments);
+const emits = defineEmits(["update:file"]);
 
 // Functions
 function addComment(event) {
@@ -103,7 +102,11 @@ function addComment(event) {
 
   fetch("/add-comment.json", headers)
     .then((res) => res.json())
-    .then((json) => (localComments.value = json))
+    .then((newFile) => {
+      newCommentText.value = "";
+      isAddOpen.value = false;
+      emits("update:file", newFile);
+    })
     .catch((error) => {
       console.error("Erreur lors de la sauvegarde :", error);
     });
@@ -123,4 +126,9 @@ function formatDate(date) {
 
   return dayjs(date).format("D MMM YY");
 }
+
+function closeAddField() {
+  isAddOpen.value = false;
+  newCommentText.value = "";
+}
 </script>