improve project dialog system

- project model : refactor getSteps() method
- create dialog store
- create DialogWrapper component that open the dialog corresponding to the URL query param

src/components/project/DialogWrapper.vue

@@ -0,0 +1,9 @@
+<template>
+  <PdfViewer v-if="dialog.content.id === 'clientBrief'" />
+</template>
+<script setup>
+import PdfViewer from "./client-brief/PdfViewer.vue";
+import { useDialogStore } from "../../stores/dialog";
+
+const dialog = useDialogStore();
+</script>

src/components/project/ProductViewer.vue

@@ -1,3 +0,0 @@
-<template>
-  <div></div>
-</template>

src/components/project/ProjectStep.vue

@@ -1,46 +1,57 @@
 <template>
-  <section class="flex-1" :aria-labelledby="text" :data-status="status">
+  <section class="flex-1" :aria-labelledby="step.id" :data-status="status">
     <router-link :to="'/' + step.uri">
-      <h2 :id="text">
+      <h2 :id="step.id">
         <!-- ADRIEN / TIMOTHÉE : DYNAMISER L'ICONE -->
-        <span data-icon="votre-brief">{{ step.text }}</span>
+        <span data-icon="votre-brief">{{ step.label }}</span>
       </h2>
       <div class="cards | flow">
         <article class="card">
           <hgroup class="order-last">
-            <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
+            <h3 class="card__title | font-serif | text-lg">{{ step.label }}</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>
+            <time
+              class="card__date | text-grey-700"
+              :datetime="dayjs(step.modified).format('YYYY-M-DD')"
+              >{{ dayjs(step.modified).format("DD MMMM YYYY") }}</time
+            >
           </div>
 
-          <!-- Images -->
-          <template v-if="step.files[0]?.type === 'image'">
-            <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"
-                :src="image.url"
-                :alt="image.alt"
-              />
-            </figure>
-          </template>
+          <!-- All images -->
+          <figure
+            v-if="
+              step.value === 'clientBrief' && step.files[0]?.type === 'image'
+            "
+            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"
+              :src="image.url"
+              :alt="image.alt"
+            />
+          </figure>
+
+          <!-- First image -->
+          <figure v-if="step.value === 'virtualSample'" class="card__images">
+            <img
+              :key="step.files[0].uuid"
+              :src="step.files[0].url"
+              :alt="step.files[0].alt"
+            />
+          </figure>
+
+          <!-- Document -->
+          <div
+            v-if="step.files[0]?.type === 'document'"
+            class="card__images"
+            data-icon="document"
+          ></div>
 
-          <!-- PDF -->
-          <template v-if="step.files[0]?.type === 'document'">
-            <div
-              @click="showPdf"
-              class="card__images"
-              data-icon="document"
-            ></div>
-          </template>
           <footer v-if="step?.files[0]?.comments?.length > 0">
             {{ step.files[0].comments.length }} commentaire{{
               step.files[0].comments.length > 1 ? "s" : ""
@@ -56,6 +67,7 @@
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import { usePageStore } from "../../stores/page";
+import { useDialogStore } from "../../stores/dialog";
 
 const { step } = defineProps({
   step: Object,
@@ -74,21 +86,16 @@ const steps = page.steps.map((item) => {
 const status = setStatus();
 
 function setStatus() {
-  if (page.content.currentstep === step.value) {
+  if (page.content.currentstep === step.id) {
     return "in-progress";
   }
-  if (steps.indexOf(step.value) < steps.indexOf(page.content.currentstep)) {
+  if (steps.indexOf(step.id) < steps.indexOf(page.content.currentstep)) {
     return "completed";
   }
-  if (steps.indexOf(step.value) > steps.indexOf(page.content.currentstep)) {
+  if (steps.indexOf(step.id) > steps.indexOf(page.content.currentstep)) {
     return "uncompleted";
   }
 }
-
-function showPdf(event) {
-  event.preventDefault();
-  emit("update:file", step.files[0]);
-}
 </script>
 
 <style scoped>

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

@@ -35,7 +35,6 @@
         :current-page-index="currentPageIndex"
         :file="file"
         :comments="file.comments ?? []"
-        @update:file="changeFile"
       />
     </div>
   </Dialog>
@@ -46,12 +45,13 @@ import Dialog from "primevue/dialog";
 import Comments from "../../comments/Comments.vue";
 import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
 import { ref, watch } from "vue";
+import { useDialogStore } from "../../../stores/dialog";
+import { useRoute, useRouter } from "vue-router";
 
-const { file } = defineProps({
-  file: Object,
-});
+const file = useDialogStore().content.files[0];
 
-const emits = defineEmits(["close", "update:file"]);
+const router = useRouter();
+const route = useRoute();
 
 const licenseKey = import.meta.env.VITE_VPV_LICENSE;
 useLicense({ licenseKey });
@@ -59,7 +59,7 @@ useLicense({ licenseKey });
 // Variables
 const isOpen = ref(true);
 watch(isOpen, (newValue) => {
-  emits("close");
+  router.push({ name: route.name });
 });
 const isCommentsOpen = ref(false);
 const currentPageIndex = ref(1);
@@ -123,10 +123,6 @@ const onPdfLoaded = () => {
   observePages();
 };
 
-function changeFile(newFile) {
-  emits("update:file", newFile);
-}
-
 function setCommentBubbles() {
   console.log(file.comments);
   if (!file.comments) return;