kanban > step > virtual sample : fix uri

src/components/project/cards/ClientBrief.vue

@@ -1,5 +1,10 @@
 <template>
-  <Images v-if="images.length > 0" :step="step" :images="images" />
+  <Images
+    v-if="images.length > 0"
+    :step="step"
+    :images="images"
+    :uri="'/' + step.uri"
+  />
   <Document v-if="pdf" :step="step" :pdf="pdf" />
 
   <button

src/components/project/cards/Document.vue

@@ -2,10 +2,7 @@
   <article class="card">
     <hgroup class="order-last">
       <h3 class="card__title | font-serif | text-lg">
-        <router-link
-          :to="'/' + step.uri + '&fileIndex=' + index"
-          class="link-full"
-        >
+        <router-link :to="uri" class="link-full">
           {{ pdf.label.length ? pdf.label : pdf.name.replace(".pdf", "") }}
         </router-link>
       </h3>
@@ -42,13 +39,18 @@ import DateTime from "./DateTime.vue";
 const { step, pdf, index } = defineProps({
   step: Object,
   pdf: Object,
-  index: {
-    default: 0,
-    type: Number,
-  },
+  index: Number,
   hasImage: {
     default: true,
     type: Boolean,
   },
 });
+
+const uri =
+  location.pathname + "?dialog=" + step.slug + "&fileIndex=" + getIndex();
+
+function getIndex() {
+  if (index) return index;
+  return step.files.findIndex((file) => file.type === "document");
+}
 </script>

src/components/project/cards/Images.vue

@@ -2,9 +2,7 @@
   <article class="card">
     <hgroup class="order-last">
       <h3 class="card__title | font-serif | text-lg">
-        <router-link :to="'/' + step.uri" class="link-full">{{
-          step.label
-        }}</router-link>
+        <router-link :to="uri" class="link-full">{{ step.label }}</router-link>
       </h3>
     </hgroup>
     <DateTime :date="step.modified" />
@@ -31,6 +29,10 @@
 import DateTime from "./DateTime.vue";
 import { usePageStore } from "../../../stores/page";
 
-const { images, step } = defineProps({ images: Array, step: Object });
+const { images, step, uri } = defineProps({
+  images: Array,
+  step: Object,
+  uri: String,
+});
 const { page } = usePageStore();
 </script>

src/components/project/cards/SimpleDocument.vue

@@ -1,5 +1,9 @@
 <template>
-  <Document v-if="step.files.length > 0" :step="step" :pdf="step.files[0]" />
+  <Document
+    v-if="step.files.length > 0"
+    :step="step"
+    :pdf="step.files.find((file) => file.type === 'document')"
+  />
 </template>
 <script setup>
 import Document from "./Document.vue";

src/components/project/cards/VirtualSample.vue

@@ -3,6 +3,7 @@
     v-if="step.files.dynamic || step.files.static"
     :step="step"
     :images="images"
+    :uri="uri"
   />
 </template>
 <script setup>
@@ -14,6 +15,8 @@ const images = computed(() => {
   return step.files?.dynamic?.map((track) => getFrontView(track)) ?? [];
 });
 
+const uri = "/" + step.uri;
+
 function getFrontView(track) {
   if (track.files.length === 1) return track.files[0];
   const xMax = parseInt(