adapt kanban images show to new structure

src/components/Selector.vue

@@ -6,7 +6,19 @@
   >
     <label for="selector-select" class="text-sm">{{ label }}</label>
 
+    <MultiSelect
+      v-if="isCompareModeEnabled"
+      v-model="currentValue"
+      :options="items"
+      optionLabel="title"
+      filter
+      placeholder="Select Cities"
+      :maxSelectedLabels="3"
+      class="w-full md:w-80"
+    />
+
     <Select
+      v-else
       id="selector-select"
       v-model="currentValue"
       :options="items"
@@ -19,7 +31,7 @@
         <p v-if="currentValue && !Array.isArray(currentValue)">
           {{ currentValue.title }}
         </p>
-        <p v-else>Select...</p>
+        <p v-else>Selectionnez</p>
       </template>
 
       <template #option="slotProps">

src/components/project/cards/Images.vue

@@ -12,7 +12,12 @@
       :data-plus="images.length > 3 ? images.length - 3 : undefined"
     >
       <template v-for="image in images.slice(0, 3)" :key="image.uuid">
-        <img v-if="image.url" :src="image.url" :alt="image.alt" loading="lazy">
+        <img
+          v-if="image.url"
+          :src="image.url"
+          :alt="image.alt"
+          loading="lazy"
+        />
         <div v-else class="card__images" data-icon="document"></div>
       </template>
     </figure>
@@ -35,6 +40,7 @@
 <script setup>
 import DateTime from './DateTime.vue';
 import { useDesignToLightStore } from '../../../stores/designToLight';
+import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { computed } from 'vue';
 
 const { images, step, uri } = defineProps({
@@ -44,6 +50,7 @@ const { images, step, uri } = defineProps({
 });
 
 const { isDesignToLightStep } = useDesignToLightStore();
+const { allVariations } = useVirtualSampleStore();
 
 const commentsCount = computed(() => {
   let count = 0;
@@ -54,8 +61,8 @@ const commentsCount = computed(() => {
     }
   } else {
     if (step.files?.dynamic) {
-      for (const track of step.files.dynamic) {
-        for (const file of track.files) {
+      for (const variation of allVariations) {
+        for (const file of variation.files) {
           count += file?.comments?.length || 0;
         }
       }

src/components/project/cards/VirtualSample.vue

@@ -9,8 +9,13 @@
 <script setup>
 import Images from './Images.vue';
 import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useVirtualSampleStore } from '../../../stores/virtualSample';
+
 const { step } = defineProps({ step: Object });
 
+const { allVariations } = storeToRefs(useVirtualSampleStore());
+
 const images = computed(() => {
   if (!step.files.dynamic) {
     return [
@@ -19,20 +24,20 @@ const images = computed(() => {
       },
     ];
   }
-  return step.files?.dynamic?.map((track) => getFrontView(track)) ?? [];
+  return allVariations.value.map((variation) => getFrontView(variation)) ?? [];
 });
 
 const uri = '/' + step.uri;
 
-function getFrontView(track) {
-  if (track.files.length === 1) return track.files[0];
+function getFrontView(variation) {
+  if (variation.files.length === 1) return variation.files[0];
   const xMax = parseInt(
-    track.files[track.files.length - 1].name.split('_')[1].split('.')[0]
+    variation.files[variation.files.length - 1].name.split('_')[1].split('.')[0]
   );
   const xFrontView = (xMax + 1) / 2;
-  const extension = track.files[0].name.split('.')[1];
+  const extension = variation.files[0].name.split('.')[1];
   const frontViewName = '0_' + xFrontView + '.' + extension;
-  const frontView = track.files.find((file) => file.name === frontViewName);
+  const frontView = variation.files.find((file) => file.name === frontViewName);
   return frontView;
 }
 </script>

src/components/project/virtual-sample/DynamicView.vue

@@ -105,7 +105,6 @@ const tracks = computed(() => {
 });
 
 const isSingleImage = computed(() => {
-  console.log(activeTracks.value);
   return (
     activeTracks.value?.length === 1 &&
     activeTracks.value[0]?.files?.length === 1

src/stores/virtualSample.js

@@ -6,22 +6,31 @@ import { useDialogStore } from './dialog';
 export const useVirtualSampleStore = defineStore('virtual-sample', () => {
   const { page } = storeToRefs(usePageStore());
   const { openedFile } = storeToRefs(useDialogStore());
-  const step = computed(() => {
-    return page.value.steps.find((step) => step.id === 'virtualSample');
-  });
-  const isCompareModeEnabled = ref(false);
 
-  const activeTab = ref(step.value.files.dynamic ? 'dynamic' : 'static');
+  const isCompareModeEnabled = ref(false);
   const currentFile = ref(null);
   const isLoopAnimationEnabled = ref(false);
   const isDownloadTriggered = ref(false);
 
+  const step = computed(() => {
+    return page.value.steps.find((step) => step.id === 'virtualSample');
+  });
+
+  const activeTab = computed(() =>
+    step.value.files.dynamic ? 'dynamic' : 'static'
+  );
+
+  const allVariations = computed(() =>
+    Object.values(step.value.files?.dynamic).flat(1)
+  );
+
   watch(activeTab, () => (currentFile.value = null));
 
   return {
     activeTab,
     currentFile,
     step,
+    allVariations,
     isLoopAnimationEnabled,
     isCompareModeEnabled,
     isDownloadTriggered,