kanban > virtual sample step : show front view

src/components/project/ProjectStep.vue

@@ -66,9 +66,9 @@
           >
             <img
               v-for="track in step.files.dynamic"
-              :key="track.files[0].slug"
+              :key="track.files.slug"
-              :src="track.files[0].url"
+              :src="getFrontView(track).url"
-              :alt="track.files[0].alt"
+              :alt="getFrontView(track).alt"
             />
           </figure>
           <!-- Document -->
@@ -213,6 +213,19 @@ const mergedFiles = computed(() => {
 
   return [...staticFiles, ...dynamicFiles];
 });
+
+function getFrontView(track) {
+  if (track.files.length === 1) return track.files[0];
+  const xMax = parseInt(
+    track.files[track.files.length - 1].name.split("_")[1].split(".")[0]
+  );
+  const xFrontView = (xMax + 1) / 2;
+  const extension = track.files[0].name.split(".")[1];
+  const frontViewName = "0_" + xFrontView + "." + extension;
+  const frontView = track.files.find((file) => file.name === frontViewName);
+  console.log(frontView);
+  return frontView;
+}
 </script>
 
 <style scoped>