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>

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

@@ -34,6 +34,7 @@
         :current-page-index="currentPageIndex"
         :file="file"
         :comments="file.comments"
+        @update:file="changeFile"
       />
     </div>
   </Dialog>
@@ -49,7 +50,7 @@ const { file } = defineProps({
   file: Object,
 });
 
-const emit = defineEmits("close");
+const emits = defineEmits(["close", "update:file"]);
 
 const licenseKey = import.meta.env.VITE_VPV_LICENSE;
 useLicense({ licenseKey });
@@ -57,7 +58,7 @@ useLicense({ licenseKey });
 // Variables
 const isOpen = ref(true);
 watch(isOpen, (newValue) => {
-  emit("close");
+  emits("close");
 });
 const isCommentsOpen = ref(false);
 const currentPageIndex = ref(1);
@@ -102,6 +103,10 @@ const onPdfLoaded = () => {
 
   observePages();
 };
+
+function changeFile(newFile) {
+  emits("update:file", newFile);
+}
 </script>
 
 <style>

src/views/Project.vue

@@ -3,7 +3,12 @@
     <Header :title="page.content.title" />
     <!-- Kanban: Status Brief Enrichi -->
 
-    <PdfViewer v-if="file" :file="file" @close="file = null" />
+    <PdfViewer
+      v-if="file"
+      :file="file"
+      @close="file = null"
+      @update:file="updateFile"
+    />
 
     <div class="kanban">
       <ProjectStep
@@ -181,6 +186,14 @@ function setStepStatus(stepName) {
 function changeFile(newFile) {
   file.value = newFile;
 }
+
+function updateFile(newFile) {
+  page.value.files = [];
+  page.value.files.push(newFile);
+
+  file.value = page.value.files[0];
+  console.log(file.value);
+}
 </script>
 
 <style scope>