project - view pdf in dialog working. Open and close working

src/components/project/ProjectStep.vue

@@ -4,23 +4,28 @@
     aria-labelledby="votre-brief-label"
     :data-status="status"
   >
-    <router-link :to="'/' + step.uri">
-      <h2 id="votre-brief-label">
-        <span data-icon="votre-brief">{{ step.text }}</span>
-      </h2>
-      <div class="cards | flow">
-        <article class="card">
-          <hgroup class="order-last">
-            <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
-          </hgroup>
-          <div class="card__meta | flex">
-            <time class="card__date | text-grey-700" datetime="2024-06-12">{{
-              dayjs(step.modified).format("DD MMMM YYYY")
-            }}</time>
-          </div>
+    <h2 id="votre-brief-label">
+      <span data-icon="votre-brief">{{ step.text }}</span>
+    </h2>
+    <div class="cards | flow">
+      <article class="card">
+        <hgroup class="order-last">
+          <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
+        </hgroup>
+        <div class="card__meta | flex">
+          <time class="card__date | text-grey-700" datetime="2024-06-12">{{
+            dayjs(step.modified).format("DD MMMM YYYY")
+          }}</time>
+        </div>
 
-          <template v-if="step.value === 'clientBrief'">
-            <figure class="card__images" :data-count="step.files.length - 3">
+        <template v-if="step.files[0]?.type === 'image'">
+          <router-link :to="'/' + step.uri">
+            <figure
+              class="card__images"
+              :data-count="
+                step.files.length > 3 ? step.files.length - 3 : undefined
+              "
+            >
               <img
                 v-for="image in step.files.slice(0, 3)"
                 :key="image.uuid"
@@ -28,10 +33,15 @@
                 :alt="image.alt"
               />
             </figure>
-          </template>
-        </article>
-      </div>
-    </router-link>
+          </router-link>
+        </template>
+        <template v-if="step.files[0]?.type === 'document'">
+          <figure @click="showPdf" class="card__images">
+            À remplacer par picto PDF
+          </figure>
+        </template>
+      </article>
+    </div>
   </section>
 </template>
 
@@ -44,6 +54,8 @@ const { step } = defineProps({
   step: Object,
 });
 
+const emit = defineEmits(["update:pdf"]);
+
 dayjs.locale("fr");
 
 const { page } = usePageStore();
@@ -65,6 +77,10 @@ function setStatus() {
     return "uncompleted";
   }
 }
+
+function showPdf() {
+  emit("update:pdf", step.files[0].url);
+}
 </script>
 
 <style scoped>

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

@@ -6,6 +6,7 @@
     :draggable="false"
     header="Titre du PDF"
     class="w-full | text-grey-800 | rounded-2xl | overflow-hidden"
+    :closeOnEscape="true"
   >
     <template #header>
       <a class="btn">Valider et envoyer le brief</a>
@@ -15,7 +16,7 @@
       <VPdfViewer
         :darkMode="true"
         :initialThumbnailsVisible="true"
-        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+        :src="src"
         local="fr_FR"
         @loaded="onPdfLoaded"
       />
@@ -26,11 +27,21 @@
 <script setup>
 import Dialog from "primevue/dialog";
 import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
+import { ref, watch } from "vue";
+
+const { src } = defineProps({
+  src: String,
+});
+
+const emit = defineEmits("close");
 
 const licenseKey = import.meta.env.VITE_VPV_LICENSE;
 useLicense({ licenseKey });
 
-const isOpen = true;
+const isOpen = ref(true);
+watch(isOpen, (newValue) => {
+  emit("close");
+});
 
 const onPdfLoaded = () => {
   const wrapper = document.querySelector(".vpv-pages-inner-container");
@@ -73,7 +84,7 @@ const onPdfLoaded = () => {
 
 <style>
 #add-pdf {
-  --max-w: min(100vw - var(--gutter) * 2, 77rem); 
+  --max-w: min(100vw - var(--gutter) * 2, 77rem);
   --max-h: calc(100vh - var(--gutter) * 2 - 5.5rem);
   --header-h: 4.5rem;
   max-width: var(--max-w);
@@ -152,7 +163,9 @@ const onPdfLoaded = () => {
   --vpv-input-border-color: var(--color-white);
   --vpv-input-placeholder-color: #596673;
   /* Modal of PDF Properties */
-  --vpv-properties-content-background: var(--vpv-dropdown-menu-content-background);
+  --vpv-properties-content-background: var(
+    --vpv-dropdown-menu-content-background
+  );
   --vpv-properties-content-secondary-color: #c6ccd2;
   --vpv-properties-content-color: var(--vpv-toolbar-color);
   --vpv-properties-separator: var(--vpv-dropdown-separator);