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

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/2379815852_au-commencement-du-college-chloe-avait-donc-fait-la-connaissance-dun-garcon.-il-etait-plus-vieux.pdf.txt

@@ -0,0 +1,9 @@
+Date: 2024-10-16 04:17
+
+----
+
+Uuid: Z6wXAXIq5mBocGi8
+
+----
+
+Template: document

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/4034442471_bleu-divague.jpg.txt

@@ -1,17 +0,0 @@
-Date: 2024-10-16 02:10
-
-----
-
-Description: 
-
-----
-
-Tags: DA globale
-
-----
-
-Uuid: BvOqspCnL024Ar9u
-
-----
-
-Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/black-1984277_1280.jpg.txt

@@ -1,17 +0,0 @@
-Description: description
-
-----
-
-Tags: 
-
-----
-
-Sort: 7
-
-----
-
-Uuid: zIZTny7xOE28rckL
-
-----
-
-Template: image

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

@@ -6,7 +6,7 @@ Stepname: clientBrief
 
 ----
 
-Pdf: 
+Pdf: - file://Z6wXAXIq5mBocGi8
 
 ----
 
@@ -14,13 +14,7 @@ Description:
 
 ----
 
-Moodboard:
+Moodboard: 
-
-- file://YV7aUYle8hcLrzb6
-- file://zIZTny7xOE28rckL
-- file://Z5m6jEomcOt9bJqR
-- file://C2zFxRDOmD5PeXD6
-- file://BvOqspCnL024Ar9u
 
 ----
 

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-144546_1280.jpg.txt

@@ -1,17 +0,0 @@
-Description: 
-
-----
-
-Tags: 
-
-----
-
-Sort: 8
-
-----
-
-Uuid: Z5m6jEomcOt9bJqR
-
-----
-
-Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-2643349_1280.jpg.txt

@@ -1,17 +0,0 @@
-Description: 
-
-----
-
-Tags: 
-
-----
-
-Sort: 10
-
-----
-
-Uuid: C2zFxRDOmD5PeXD6
-
-----
-
-Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-4718455_1280.jpg.txt

@@ -1,17 +0,0 @@
-Description: 
-
-----
-
-Tags: 
-
-----
-
-Sort: 12
-
-----
-
-Uuid: YV7aUYle8hcLrzb6
-
-----
-
-Template: image

public/site/models/project.php

@@ -11,6 +11,9 @@ class ProjectPage extends Page {
         foreach ($child->moodboard()->toFiles() as $file) {
           $files[] = getFileData($file);
         }
+        foreach ($child->pdf()->toFiles() as $file) {
+          $files[] = getFileData($file);
+        }
       }
 
       $steps[] = [

public/site/plugins/helpers/index.php

@@ -5,6 +5,7 @@ function getFileData($file) {
     'url' => $file->url(),
     'uuid' => (string) $file->uuid(),
     'name' => $file->filename(),
+    'type' => (string) $file->type()
   ];
 
   if ($file->description()->exists()) {

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">
-      <h2 id="votre-brief-label">
+      <span data-icon="votre-brief">{{ step.text }}</span>
-        <span data-icon="votre-brief">{{ step.text }}</span>
+    </h2>
-      </h2>
+    <div class="cards | flow">
-      <div class="cards | flow">
+      <article class="card">
-        <article class="card">
+        <hgroup class="order-last">
-          <hgroup class="order-last">
+          <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
-            <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
+        </hgroup>
-          </hgroup>
+        <div class="card__meta | flex">
-          <div class="card__meta | flex">
+          <time class="card__date | text-grey-700" datetime="2024-06-12">{{
-            <time class="card__date | text-grey-700" datetime="2024-06-12">{{
+            dayjs(step.modified).format("DD MMMM YYYY")
-              dayjs(step.modified).format("DD MMMM YYYY")
+          }}</time>
-            }}</time>
+        </div>
-          </div>
 
-          <template v-if="step.value === 'clientBrief'">
+        <template v-if="step.files[0]?.type === 'image'">
-            <figure class="card__images" :data-count="step.files.length - 3">
+          <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>
+          </router-link>
-        </article>
+        </template>
-      </div>
+        <template v-if="step.files[0]?.type === 'document'">
-    </router-link>
+          <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);

src/views/ClientBrief.vue

@@ -44,7 +44,6 @@ function setInitialStep() {
     page.value.content.description.length !== 0;
   const isEmpty = !hasPDF && !hasImages;
   if (isEmpty) return "Intro";
-  if (hasPDF) return "PdfViewer";
   if (hasImages) return "Images";
 }
 </script>

src/views/Project.vue

@@ -3,8 +3,15 @@
     <Header :title="page.content.title" />
     <!-- Kanban: Status Brief Enrichi -->
 
+    <PdfViewer v-if="pdf" :src="pdf" @close="pdf = null" />
+
     <div class="kanban">
-      <ProjectStep v-for="step in page.steps" :key="step" :step="step">
+      <ProjectStep
+        v-for="step in page.steps"
+        :key="step"
+        :step="step"
+        @update:pdf="changePdf"
+      >
       </ProjectStep>
       <!-- <section
         class="flex-1"
@@ -155,10 +162,14 @@ import { useUserStore } from "../stores/user";
 import { storeToRefs } from "pinia";
 import ProjectStep from "../components/project/ProjectStep.vue";
 import Header from "../components/project/Header.vue";
+import PdfViewer from "../components/project/client-brief/PdfViewer.vue";
+import { ref } from "vue";
 
 const { page } = storeToRefs(usePageStore());
 const user = useUserStore().user;
 
+const pdf = ref(null);
+
 function setStepStatus(stepName) {
   const stepIndex = steps.indexOf(stepName);
   const currentIndex = steps.indexOf(currentStep.value);
@@ -166,6 +177,15 @@ function setStepStatus(stepName) {
     return "done";
   }
 }
+
+function changePdf(src) {
+  pdf.value = src;
+}
+
+function hidePdf() {
+  console.log("test");
+  pdf.value = null;
+}
 </script>
 
 <style scope>