From cca389f1b0dcfbbd6bf895d90d2ccf2c6437e77b Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 27 Nov 2024 17:51:49 +0100
Subject: [PATCH] fix comment problem

---
 ...-bureaux-artistiquement-consideree.pdf.txt | 207 +-----------------
 .../2_proposal/cinema-4-13b-022685-fr.pdf.txt |  33 ---
 ...mise-au-service-de-sarkozy-le-boss.pdf.txt | 200 +----------------
 .../site/plugins/comments/routes/create.php   |   2 +-
 src/components/project/DialogWrapper.vue      |   4 +-
 .../project/{brief => }/PdfViewer.vue         | 129 +++--------
 src/components/project/TitledPdfWrapper.vue   |  83 +++++++
 .../project/virtual-sample/StaticView.vue     |   3 -
 src/stores/dialog.js                          |   8 +-
 src/views/Brief.vue                           |   4 +-
 10 files changed, 128 insertions(+), 545 deletions(-)
 rename src/components/project/{brief => }/PdfViewer.vue (59%)
 create mode 100644 src/components/project/TitledPdfWrapper.vue

diff --git a/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 b/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
index 8b8e1a4..cb27a3c 100644
--- a/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
+++ b/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
@@ -6,209 +6,4 @@ Uuid: s0lNtRA0Z7ybTCWG
 
 ----
 
-Template: document
-
-----
-
-Comments:
-
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/client-brief
-      title: Brief client
-    href: >
-      /projects/miss-dior-blooming-bouquet?dialog=client-brief
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://s0lNtRA0Z7ybTCWG
-      url: file://s0lNtRA0Z7ybTCWG
-  position:
-    pageIndex: 1
-    x: "27.05459466102"
-    y: "35.135135135135"
-  replies:
-    - 
-      location:
-        page:
-          uri: >
-            projects/miss-dior-blooming-bouquet/client-brief
-          title: Brief client
-        href: >
-          /projects/miss-dior-blooming-bouquet?dialog=client-brief
-        project:
-          title: Miss Dior Blooming Bouquet
-          uri: projects/miss-dior-blooming-bouquet
-        file:
-          uuid: file://s0lNtRA0Z7ybTCWG
-          url: file://s0lNtRA0Z7ybTCWG
-      position:
-        pageIndex: 1
-      replies: [ ]
-      text: test
-      author:
-        name: Utilisateur Dior
-        email: utilisateur@dior.com
-        uuid: user://HfuumN8s
-        role: client
-      date: 2024-11-22T08:08:39+01:00
-      id: m3seh19r
-      type: comment
-      isRead: false
-      parentId: m3sdsq23
-    - 
-      location:
-        page:
-          uri: >
-            projects/miss-dior-blooming-bouquet/client-brief
-          title: Brief client
-        href: >
-          /projects/miss-dior-blooming-bouquet?dialog=client-brief
-        project:
-          title: Miss Dior Blooming Bouquet
-          uri: projects/miss-dior-blooming-bouquet
-        file:
-          uuid: file://s0lNtRA0Z7ybTCWG
-          url: file://s0lNtRA0Z7ybTCWG
-      position:
-        pageIndex: 1
-      replies: [ ]
-      text: Deuxième réponse
-      author:
-        name: Utilisateur Dior
-        email: utilisateur@dior.com
-        uuid: user://HfuumN8s
-        role: client
-      date: 2024-11-22T08:10:12+01:00
-      id: m3sej19k
-      type: comment
-      isRead: false
-      parentId: m3sdsq23
-    - 
-      location:
-        page:
-          uri: >
-            projects/miss-dior-blooming-bouquet/client-brief
-          title: Brief client
-        href: >
-          /projects/miss-dior-blooming-bouquet?dialog=client-brief
-        project:
-          title: Miss Dior Blooming Bouquet
-          uri: projects/miss-dior-blooming-bouquet
-        file:
-          uuid: file://s0lNtRA0Z7ybTCWG
-          url: file://s0lNtRA0Z7ybTCWG
-      position:
-        pageIndex: 1
-      replies: [ ]
-      text: Encore
-      author:
-        name: Utilisateur Dior
-        email: utilisateur@dior.com
-        uuid: user://HfuumN8s
-        role: client
-      date: 2024-11-22T08:12:39+01:00
-      id: m3sem6sz
-      type: comment
-      isRead: false
-      parentId: m3sdsq23
-  text: test
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-22T07:49:45+01:00
-  id: m3sdsq23
-  type: comment
-  isRead: false
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/client-brief
-      title: Brief client
-    href: >
-      /projects/miss-dior-blooming-bouquet?dialog=client-brief
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://s0lNtRA0Z7ybTCWG
-      url: file://s0lNtRA0Z7ybTCWG
-  position:
-    pageIndex: 1
-    x: "65.847110638459"
-    y: "53.474903474903"
-  replies: [ ]
-  text: test
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-22T08:50:41+01:00
-  id: m3sfz36o
-  type: comment
-  isRead: false
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/client-brief
-      title: Brief client
-    href: >
-      /projects/miss-dior-blooming-bouquet?dialog=client-brief
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://s0lNtRA0Z7ybTCWG
-      url: file://s0lNtRA0Z7ybTCWG
-  position:
-    pageIndex: 1
-    x: "32.518325137231"
-    y: "62.548262548263"
-  replies: [ ]
-  text: test
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-22T09:18:05+01:00
-  id: m3sgybwq
-  type: comment
-  isRead: false
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/client-brief
-      title: Brief client
-    href: >
-      /projects/miss-dior-blooming-bouquet?dialog=client-brief
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://s0lNtRA0Z7ybTCWG
-      url: file://s0lNtRA0Z7ybTCWG
-  position:
-    pageIndex: 1
-    x: '73.769521704789'
-    y: '83.204633204633'
-  replies: [ ]
-  text: 'Adrien Payet : test'
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-22T09:20:04+01:00
-  id: m3sh0vfu
-  type: comment
-  isRead: false
\ No newline at end of file
+Template: document
\ No newline at end of file
diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/cinema-4-13b-022685-fr.pdf.txt b/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/cinema-4-13b-022685-fr.pdf.txt
index ab4e510..6a7dead 100644
--- a/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/cinema-4-13b-022685-fr.pdf.txt
+++ b/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/cinema-4-13b-022685-fr.pdf.txt
@@ -1,36 +1,3 @@
-Comments:
-
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/proposal
-      title: Offre commerciale
-    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=1'
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://7cCbXLUJWENOMUwh
-      url: file://7cCbXLUJWENOMUwh
-  position:
-    pageIndex: 1
-    x: '40.256495570504'
-    y: '48.069498069498'
-  replies: [ ]
-  text: test2
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-18T16:16:54+01:00
-  id: m3n65iqx
-  type: comment
-  isRead: false
-
-----
-
 Label: Offre initiale
 
 ----
diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf.txt b/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf.txt
index 28585b1..b848d72 100644
--- a/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf.txt
+++ b/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf.txt
@@ -1,202 +1,4 @@
-Comments:
-
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/proposal
-      title: Offre commerciale
-    href: >
-      /projects/miss-dior-blooming-bouquet?dialog=proposal
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://3vTh1tMFeFM2JxaN
-      url: file://3vTh1tMFeFM2JxaN
-  position:
-    pageIndex: 1
-    x: "26.50821702805"
-    y: "62.355212355212"
-  replies: [ ]
-  text: test
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-18T16:00:11+01:00
-  id: m3n5k0mb
-  type: comment
-  isRead: false
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/proposal
-      title: Offre commerciale
-    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://3vTh1tMFeFM2JxaN
-      url: file://3vTh1tMFeFM2JxaN
-  position:
-    pageIndex: 1
-    x: "67.213040131138"
-    y: "36.872586872587"
-  replies: [ ]
-  text: test2
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-19T15:53:46+01:00
-  id: m3okrmlt
-  type: comment
-  isRead: false
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/proposal
-      title: Offre commerciale
-    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://3vTh1tMFeFM2JxaN
-      url: file://3vTh1tMFeFM2JxaN
-  position:
-    pageIndex: 1
-    x: "98.083140873747"
-    y: "79.343629343629"
-  replies: [ ]
-  text: test3
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-19T15:53:57+01:00
-  id: m3okrvaa
-  type: comment
-  isRead: false
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/proposal
-      title: Offre commerciale
-    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://3vTh1tMFeFM2JxaN
-      url: file://3vTh1tMFeFM2JxaN
-  position:
-    pageIndex: 1
-    x: "65.027546273254"
-    y: "55.791505791506"
-  replies: [ ]
-  text: test4
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-19T15:54:03+01:00
-  id: m3okrzsb
-  type: comment
-  isRead: false
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/proposal
-      title: Offre commerciale
-    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://3vTh1tMFeFM2JxaN
-      url: file://3vTh1tMFeFM2JxaN
-  position:
-    pageIndex: 1
-    x: "75.408642098202"
-    y: "20.849420849421"
-  replies: [ ]
-  text: test
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-19T16:27:21+01:00
-  id: m3olyt8i
-  type: comment
-  isRead: false
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/proposal
-      title: Offre commerciale
-    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0#comment-m3olyt8i'
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://3vTh1tMFeFM2JxaN
-      url: file://3vTh1tMFeFM2JxaN
-  position:
-    pageIndex: 1
-    x: "27.327777224757"
-    y: "78.185328185328"
-  replies: [ ]
-  text: test198
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-19T16:53:10+01:00
-  id: m3omw0ci
-  type: comment
-  isRead: false
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/proposal
-      title: Offre commerciale
-    href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0#comment-m3omw0ci'
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    file:
-      uuid: file://3vTh1tMFeFM2JxaN
-      url: file://3vTh1tMFeFM2JxaN
-  position:
-    pageIndex: 1
-    x: '34.977005727351'
-    y: '48.455598455598'
-  replies: [ ]
-  text: test1287
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-19T17:01:26+01:00
-  id: m3on6nfv
-  type: comment
-  isRead: false
+Comments: 
 
 ----
 
diff --git a/public/site/plugins/comments/routes/create.php b/public/site/plugins/comments/routes/create.php
index 1ee3abe..b4f84b9 100644
--- a/public/site/plugins/comments/routes/create.php
+++ b/public/site/plugins/comments/routes/create.php
@@ -33,7 +33,7 @@ return [
           'y' => $data->position->y
         ],
         'replies' => [],
-        'text' => $user->name()->isNotEmpty() ? $user->name()->value() . ' : ' . $data->text : $user->email()->value() . ' : ' . $data->text,
+        'text' => $data->text,
         'author' => $user,
         'date' => (string) $data->date,
         'id' => $data->id,
diff --git a/src/components/project/DialogWrapper.vue b/src/components/project/DialogWrapper.vue
index 6aa633f..ce97113 100644
--- a/src/components/project/DialogWrapper.vue
+++ b/src/components/project/DialogWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <PdfViewer
+  <TitledPdfWrapper
     v-if="
       dialog.content.slug.includes('brief') ||
       dialog.content.slug === 'proposal'
@@ -9,7 +9,7 @@
   <VirtualSample v-if="dialog.content.slug === 'virtual-sample'" />
 </template>
 <script setup>
-import PdfViewer from "./brief/PdfViewer.vue";
+import TitledPdfWrapper from "./TitledPdfWrapper.vue";
 import { useDialogStore } from "../../stores/dialog";
 import VirtualSample from "./virtual-sample/VirtualSample.vue";
 
diff --git a/src/components/project/brief/PdfViewer.vue b/src/components/project/PdfViewer.vue
similarity index 59%
rename from src/components/project/brief/PdfViewer.vue
rename to src/components/project/PdfViewer.vue
index 5f42ef5..648c47e 100644
--- a/src/components/project/brief/PdfViewer.vue
+++ b/src/components/project/PdfViewer.vue
@@ -1,88 +1,40 @@
 <template>
-  <Dialog
-    id="add-pdf"
-    v-model:visible="isOpen"
-    modal
-    :draggable="false"
-    header="Titre du PDF"
-    class="dialog"
-    :class="{ 'with-comments': isCommentsOpen }"
-    :closeOnEscape="true"
+  <VPdfViewer
+    :darkMode="true"
+    :initialThumbnailsVisible="true"
+    :src="openedFile.url"
+    local="fr_FR"
+    @loaded="onPdfLoaded"
+  />
+  <button
+    id="toggle-comments"
+    :aria-pressed="isCommentsOpen"
+    class="btn btn--transparent btn--outline"
+    data-icon="comment"
+    @click="isCommentsOpen = !isCommentsOpen"
   >
-    <template #header>
-      <button
-        v-if="
-          dialog.content.id === 'clientBrief' &&
-          dialog.content.isValidated !== true
-        "
-        class="btn"
-        @click="validate()"
-      >
-        Valider et envoyer le brief
-      </button>
-      <h2
-        class="font-serif text-lg"
-        :title="openedFile?.label.length ? openedFile.label : openedFile.name"
-      >
-        {{ openedFile?.label.length ? openedFile.label : openedFile.name }}
-      </h2>
-    </template>
-    <div id="vpv-container">
-      <VPdfViewer
-        :darkMode="true"
-        :initialThumbnailsVisible="true"
-        :src="openedFile.url"
-        local="fr_FR"
-        @loaded="onPdfLoaded"
-      />
-      <button
-        id="toggle-comments"
-        :aria-pressed="isCommentsOpen"
-        class="btn btn--transparent btn--outline"
-        data-icon="comment"
-        @click="isCommentsOpen = !isCommentsOpen"
-      >
-        <span class="sr-only">Afficher les commentaires</span>
-      </button>
-      <Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
-    </div>
-  </Dialog>
+    <span class="sr-only">Afficher les commentaires</span>
+  </button>
+  <Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
 </template>
 
 <script setup>
-import Dialog from "primevue/dialog";
-import Comments from "../../comments/Comments.vue";
-import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
+import Comments from "../comments/Comments.vue";
 import { ref, watch } from "vue";
-import { useDialogStore } from "../../../stores/dialog";
-import { useRoute, useRouter } from "vue-router";
+import { useDialogStore } from "../../stores/dialog";
 import { storeToRefs } from "pinia";
-import { useApiStore } from "../../../stores/api";
-
-const router = useRouter();
-const route = useRoute();
-
-const dialog = useDialogStore();
-const api = useApiStore();
-const { openedFile, comments } = storeToRefs(useDialogStore());
-
-openedFile.value = route.query.fileIndex
-  ? dialog.content.files[route.query.fileIndex]
-  : dialog.content.files[0];
+import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
+import { useRoute, useRouter } from "vue-router";
 
 const licenseKey = import.meta.env.VITE_VPV_LICENSE;
 useLicense({ licenseKey });
 
+const { openedFile, isCommentsOpen, comments } = storeToRefs(useDialogStore());
+const dialog = useDialogStore();
+const router = useRouter();
+const route = useRoute();
+
 const draftComment = ref(null);
-const isOpen = ref(true);
-watch(isOpen, (newValue) => {
-  router.push({ name: route.name });
-});
-console.log(route.query);
-const isCommentsOpen = ref(
-  route.query.hasOwnProperty("comments") ? true : false
-);
-const currentPageIndex = ref(1);
 
 watch(isCommentsOpen, (newVal) => {
   if (newVal) {
@@ -92,6 +44,9 @@ watch(isCommentsOpen, (newVal) => {
   }
 });
 
+openedFile.value = route.query.fileIndex
+  ? dialog.content.files[route.query.fileIndex]
+  : dialog.content.files[0];
 watch(openedFile, (newVal) => {
   removeCommentMarkers();
   if (newVal.comments) {
@@ -99,6 +54,8 @@ watch(openedFile, (newVal) => {
   }
 });
 
+const currentPageIndex = ref(1);
+
 // Functions
 const onPdfLoaded = () => {
   const wrapper = document.querySelector(".vpv-pages-inner-container");
@@ -193,32 +150,8 @@ function showDraftMarker(draftComment) {
 
   container.appendChild(bubble);
 }
-
-async function validate() {
-  const response = await api.validateBrief(
-    route.path + "/client-brief",
-    route.fullPath
-  );
-  if (response.success) {
-    dialog.content.isValidated = true;
-  } else {
-    console.alert(response);
-  }
-}
 </script>
 
-<style>
-#vpv-container {
-  width: var(--dialog-max-w);
-  height: calc(var(--dialog-max-h) - var(--dialog-header-h));
-  background: black;
-  position: relative;
-}
-.with-comments .vpv-pages-container-wrapper {
-  margin-right: var(--dialog-comments-w, 20rem);
-}
-</style>
-
 <style scoped>
-@import "../../../assets/css/src/2.blocks.pdf-viewer.css";
+@import "../../assets/css/src/2.blocks.pdf-viewer.css";
 </style>
diff --git a/src/components/project/TitledPdfWrapper.vue b/src/components/project/TitledPdfWrapper.vue
new file mode 100644
index 0000000..fbc09d8
--- /dev/null
+++ b/src/components/project/TitledPdfWrapper.vue
@@ -0,0 +1,83 @@
+<template>
+  <Dialog
+    id="add-pdf"
+    v-model:visible="isOpen"
+    modal
+    :draggable="false"
+    header="Titre du PDF"
+    class="dialog"
+    :class="{ 'with-comments': isCommentsOpen }"
+    :closeOnEscape="true"
+  >
+    <template #header>
+      <button
+        v-if="
+          dialog.content.id === 'clientBrief' &&
+          dialog.content.isValidated !== true
+        "
+        class="btn"
+        @click="validate()"
+      >
+        Valider et envoyer le brief
+      </button>
+      <h2
+        v-if="openedFile"
+        class="font-serif text-lg"
+        :title="openedFile?.label.length ? openedFile.label : openedFile.name"
+      >
+        {{ openedFile?.label.length ? openedFile.label : openedFile.name }}
+      </h2>
+    </template>
+    <div id="vpv-container">
+      <PdfViewer />
+    </div>
+  </Dialog>
+</template>
+
+<script setup>
+import Dialog from "primevue/dialog";
+import PdfViewer from "./PdfViewer.vue";
+import { ref, watch } from "vue";
+import { useDialogStore } from "../../stores/dialog";
+import { useRoute, useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
+import { useApiStore } from "../../stores/api";
+
+const { openedFile, isCommentsOpen } = storeToRefs(useDialogStore());
+
+const router = useRouter();
+const route = useRoute();
+
+const dialog = useDialogStore();
+const api = useApiStore();
+
+const isOpen = ref(true);
+watch(isOpen, (newValue) => {
+  router.push({ name: route.name });
+});
+
+// Functions
+async function validate() {
+  const response = await api.validateBrief(
+    route.path + "/client-brief",
+    route.fullPath
+  );
+  if (response.success) {
+    dialog.content.isValidated = true;
+  } else {
+    console.alert(response);
+  }
+}
+</script>
+
+<style>
+#vpv-container {
+  width: var(--dialog-max-w);
+  height: calc(var(--dialog-max-h) - var(--dialog-header-h));
+  background: black;
+  position: relative;
+}
+.with-comments .vpv-pages-container-wrapper {
+  margin-right: var(--dialog-comments-w, 20rem);
+}
+</style>
diff --git a/src/components/project/virtual-sample/StaticView.vue b/src/components/project/virtual-sample/StaticView.vue
index a29742f..b89f620 100644
--- a/src/components/project/virtual-sample/StaticView.vue
+++ b/src/components/project/virtual-sample/StaticView.vue
@@ -47,15 +47,12 @@
 <script setup>
 import { ref } from "vue";
 import { useVirtualSampleStore } from "../../../stores/virtualSample";
-import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
 
 const { step } = useVirtualSampleStore();
 const activeTab = ref(Object.keys(step.files.static)[0]);
 </script>
 
 <style scoped>
-@import "../../../assets/css/src/2.blocks.pdf-viewer.css";
-
 .dialog__inner {
   background-color: inherit;
   height: calc(100% - 3.5rem) !important;
diff --git a/src/stores/dialog.js b/src/stores/dialog.js
index 9bc8508..0641105 100644
--- a/src/stores/dialog.js
+++ b/src/stores/dialog.js
@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { ref, computed } from "vue";
+import { useRoute } from "vue-router";
 
 export const useDialogStore = defineStore("dialog", () => {
   const content = ref(null);
@@ -15,5 +16,10 @@ export const useDialogStore = defineStore("dialog", () => {
     openedFile.value = newFile;
   }
 
-  return { content, openedFile, comments, updateFile };
+  const route = useRoute();
+  const isCommentsOpen = ref(
+    route.query.hasOwnProperty("comments") ? true : false
+  );
+
+  return { content, openedFile, comments, isCommentsOpen, updateFile };
 });
diff --git a/src/views/Brief.vue b/src/views/Brief.vue
index a7b165f..ade3954 100644
--- a/src/views/Brief.vue
+++ b/src/views/Brief.vue
@@ -18,7 +18,7 @@ import { ref } from "vue";
 import Intro from "../components/project/brief/Intro.vue";
 import ModeSelection from "../components/project/brief/ModeSelection.vue";
 import Images from "../components/project/brief/Images.vue";
-import PdfViewer from "../components/project/brief/PdfViewer.vue";
+import TitledPdfWrapper from "../components/project/TitledPdfWrapper.vue";
 import { usePageStore } from "../stores/page";
 import { storeToRefs } from "pinia";
 
@@ -26,7 +26,7 @@ const stepsComponents = {
   Intro,
   ModeSelection,
   Images,
-  PdfViewer,
+  TitledPdfWrapper,
 };
 
 const { page } = storeToRefs(usePageStore());