update kirby to v5 and add refresh cache panel view button

src/components/project/cards/Images.vue

@@ -11,10 +11,7 @@
       :data-count="images.length"
       :data-plus="images.length > 3 ? images.length - 3 : undefined"
     >
-      <template
-        v-for="(image, index) in images.slice(0, 3)"
-        :key="'image-' + index"
-      >
+      <template v-for="image in images.slice(0, 3)" :key="image.uuid">
         <img
           v-if="image.url"
           :src="image.url"
@@ -43,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({
@@ -52,6 +50,7 @@ const { images, step, uri } = defineProps({
 });
 
 const { isDesignToLightStep } = useDesignToLightStore();
+const { allVariations } = useVirtualSampleStore();
 
 const commentsCount = computed(() => {
   let count = 0;
@@ -62,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 = Math.round((xMax + 1) / 2);
-  const extension = track.files[0].name.split('.')[1];
+  const xFrontView = (xMax + 1) / 2;
+  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

@@ -2,18 +2,15 @@
   <div class="dialog__inner">
     <header class="tracks-header | flex">
       <div class="tracks">
-        <button
+        <Selector
           v-for="(track, index) in tracks"
-          class="btn btn--image"
-          :aria-pressed="activeTracks.includes(track) ? true : false"
-          :aria-controls="track.slug"
-          :id="'track--' + track.slug"
-          :style="`--btn-image: url(${getFrontViewUrl(track)});`"
-          @click="selectTrack(track)"
-          :data-comments="getCommentsCount(track)"
-        >
-          <span>{{ track.title }}</span>
-        </button>
+          :key="track.slug"
+          :label="track.title"
+          :items="track.variations"
+          :isCompareModeEnabled="isCompareModeEnabled"
+          :index="index"
+          @update:selectedItems="selectTrack"
+        />
       </div>
       <button
         v-if="tracks.length > 1"
@@ -45,13 +42,13 @@
         v-if="isCompareModeEnabled && activeTracks.length < 2"
         class="track-empty | bg-white rounded-xl w-full p-32"
       >
-        <p>Cliquez sur la piste que vous souhaitez comparer</p>
+        <p>Sélectionnez sur la piste que vous souhaitez comparer</p>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeMount } from 'vue';
+import { computed, watch, onMounted, onBeforeMount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { usePageStore } from '../../../stores/page';
 import { useDialogStore } from '../../../stores/dialog';
@@ -59,6 +56,8 @@ import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { useRoute } from 'vue-router';
 import Interactive360 from './Interactive360.vue';
 import SingleImage from './SingleImage.vue';
+import Selector from '../../Selector.vue';
+import slugify from 'slugify';
 
 const route = useRoute();
 
@@ -68,15 +67,24 @@ const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
 
 const { isCompareModeEnabled } = storeToRefs(useVirtualSampleStore());
 
+const rawTracks = page.value.steps.find(
+  (step) => step.slug === 'virtual-sample'
+).files.dynamic;
+
 onBeforeMount(() => {
-  const trackToOpen = tracks.value.find(
-    (track) => track.slug === route.hash.substring(1)
-  );
-  if (trackToOpen) {
-    activeTracks.value = [trackToOpen];
-  } else {
-    activeTracks.value = [tracks.value[0]];
-  }
+  const firstTrack = rawTracks[Object.keys(rawTracks)[0]];
+  const firstVariation = firstTrack[0];
+  activeTracks.value = [firstVariation];
+
+  // TO RE-ENABLE
+  // if (route.hash.length > 0) {
+  //   const trackToOpen = tracks.value.find(
+  //     (track) => track.slug === route.hash.substring(1)
+  //   );
+  //   activeTracks.value = [trackToOpen];
+  // } else {
+  //   activeTracks.value = [tracks.value[0]];
+  // }
 });
 
 onMounted(() => {
@@ -89,16 +97,28 @@ onMounted(() => {
   }
 });
 
-const tracks = computed(
-  () =>
-    page.value.steps.find((step) => step.slug === 'virtual-sample').files
-      .dynamic
-);
+const tracks = computed(() => {
+  const rawTracks = page.value.steps.find(
+    (step) => step.slug === 'virtual-sample'
+  ).files.dynamic;
+
+  const tracks = [];
+
+  for (const key in rawTracks) {
+    tracks.push({
+      title: key,
+      slug: slugify(key),
+      variations: rawTracks[key],
+    });
+  }
+
+  return tracks;
+});
 
 const isSingleImage = computed(() => {
   return (
     activeTracks.value?.length === 1 &&
-    activeTracks.value[0]?.files.length === 1
+    activeTracks.value[0]?.files?.length === 1
   );
 });
 
@@ -129,41 +149,6 @@ watch(isCompareModeEnabled, (newValue) => {
   }
 });
 
-function getFrontViewUrl(track) {
-  if (track.files.length > 1) {
-    return track.files[7].url;
-  } else {
-    return track.files[0].url;
-  }
-}
-
-function selectTrack(track) {
-  if (!isCompareModeEnabled.value) {
-    activeTracks.value = [track];
-    return;
-  }
-
-  if (activeTracks.value.length === 1 && !activeTracks.value.includes(track)) {
-    activeTracks.value.push(track);
-    return;
-  }
-
-  if (activeTracks.value.length === 2) {
-    if (activeTracks.value.includes(track)) {
-      removeTrack(track);
-    } else {
-      activeTracks.value.pop();
-      activeTracks.value.push(track);
-    }
-  }
-}
-
-function removeTrack(track) {
-  activeTracks.value = activeTracks.value.filter(
-    (activeTrack) => activeTrack.title !== track.title
-  );
-}
-
 function getCommentsCount(track) {
   let count = 0;
   for (const file of track.files) {