Start PhysicalSample

src/components/project/DialogWrapper.vue

@@ -6,10 +6,8 @@
       dialog.content.slug === 'industrial-ideation'
     "
   />
-
   <VirtualSample v-if="dialog.content.slug === 'virtual-sample'" />
-
-  <PhysicalSample v-if="dialog.content.slug === 'physical-content'" />
+  <PhysicalSample v-if="dialog.content.slug === 'physical-sample'" />
 </template>
 <script setup>
 import TitledPdfWrapper from "./TitledPdfWrapper.vue";

src/components/project/PhysicalSample.vue

@@ -1,3 +1,35 @@
-<template></template>
-<script setup></script>
+<template>
+	<Dialog
+	  id="physical-sample"
+	  v-model:visible="isOpen"
+	  modal
+	  :draggable="false"
+	  dismissableMask="true"
+	  class="dialog"
+	  :closeOnEscape="true"
+	>
+		<header>
+			<h2>Titre de la modal</h2>
+		</header>
+	</Dialog>
+</template>
+
+<script setup>
+import Dialog from "primevue/dialog";
+import { ref, watch } from "vue";
+import { useDialogStore } from "../../stores/dialog";
+import { useRoute, useRouter } from "vue-router";
+import { usePageStore } from "../../stores/page.js";
+
+// Variables
+const router = useRouter();
+const route = useRoute();
+const isOpen = ref(true);
+watch(isOpen, (newValue) => {
+  router.push({ name: route.name });
+});
+const { page } = usePageStore();
+const step = page.steps[page.step.length - 1];
+</script>
+
 <style></style>

src/components/project/ProjectStep.vue

@@ -154,8 +154,16 @@
         </template>
       </template>
 
-      <template v-if="step.id === 'physicalSample'"></template>
-      <!-- Empty state -->
+      <template v-if="step.id === 'physicalSample'">
+        <header>
+          <h3>
+            <router-link :to="'/' + step.uri">{{ step.title }}</router-link>
+          </h3>
+          <time :datetime="step.date">{{ step.date }}</time>
+          <p>{{ step.description }}</p>
+        </header>
+        <img :src="step.files[0].url" alt="" loading="lazy">
+      </template>
       <template v-else></template>
     </div>
   </section>