tracks select : track selection inside groups working without comparison mode enabled

public/site/blueprints/pages/virtual-sample.yml

@@ -34,6 +34,7 @@ tabs:
             type: pages
             layout: cards
             template: track
+            info: "{{ page.group }}"
       - width: 1/2
         sections:
           fieldsSection:

public/site/models/project.php

@@ -110,7 +110,11 @@ class ProjectPage extends NotificationsPage {
           $trackData['files'][] = getFileData($view);
         }
         
-        $files['dynamic'][] = $trackData;
+        if ($track->group()->isNotEmpty()) {
+          $files['dynamic'][$track->group()->value()][] = $trackData;
+        } else {
+          $files['dynamic']['independantTracks'][] = $trackData;
+        }
       }
     }
 

src/components/Selector.vue

@@ -2,53 +2,91 @@
   <div
     id="selector-dropdown"
     class="flex flex-col"
-    :style="'--image: url(\'' + getFrontViewUrl(current) + '\')'"
+    :style="'--image: url(\'' + getFrontViewUrl(currentValue) + '\')'"
   >
-    <label for="selector-select" class="text-sm">Choisir une {{ label }}</label>
-    <Select
+    <label for="selector-select" class="text-sm">{{ label }}</label>
+
+    <component
+      :is="isCompareModeEnabled ? 'MultiSelect' : 'Select'"
       id="selector-select"
-      v-model="current"
+      v-model="currentValue"
       :options="items"
       optionLabel="title"
       class="font-serif"
       data-icon="chevron-single-down"
       checkmark
+      :display="isCompareModeEnabled ? 'chip' : undefined"
     >
       <template #value="slotProps">
-        <p>{{ current.title }}</p>
+        <p v-if="isCompareModeEnabled && Array.isArray(currentValue)">
+          {{ currentValue.length }} selected
+        </p>
+        <!-- Sinon, simple select : afficher le titre s'il y a une sélection -->
+        <p v-else-if="currentValue && !Array.isArray(currentValue)">
+          {{ currentValue.title }}
+        </p>
+        <p v-else>Select...</p>
       </template>
+
       <template #option="slotProps">
-        <img alt="" :src="getFrontViewUrl(slotProps.option)" width="28" height="28">
+        <img
+          alt=""
+          :src="getFrontViewUrl(slotProps.option)"
+          width="28"
+          height="28"
+        />
         <p>{{ slotProps.option.title }}</p>
       </template>
-    </Select>
+    </component>
   </div>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useDialogStore } from '../stores/dialog';
 
-const { items, label } = defineProps({
+const { items, label, isCompareModeEnabled } = defineProps({
   label: String,
   items: Array,
-});
-
-const current = ref(items[0]);
-
-watch(current, (newValue) => {
-  changeCurrent(newValue);
+  isCompareModeEnabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['update:selectedItems']);
 
+const currentValue = ref(isCompareModeEnabled ? [] : null);
+
+const { activeTracks } = storeToRefs(useDialogStore());
+
+watch(currentValue, (newValue) => {
+  if (
+    newValue !== null &&
+    (Array.isArray(newValue) ? newValue.length > 0 : true)
+  ) {
+    changeCurrent(newValue);
+  }
+});
+
+watch(activeTracks, (newValue) => {
+  if (newValue[newValue.length - 1] !== currentValue.value) {
+    currentValue.value = isCompareModeEnabled ? [] : null;
+  }
+});
+
 function changeCurrent(item) {
   emit('update:selectedItems', item);
 }
 
 function getFrontViewUrl(item) {
-  // if (!item) return;
+  if (!item) return '';
+  if (Array.isArray(item)) {
+    return item.length > 0 ? getFrontViewUrl(item[0]) : '';
+  }
   if (item.files.length > 1) {
-    return item.files[7].url;
+    return item.files[7]?.url || item.files[0].url;
   } else {
     return item.files[0].url;
   }
@@ -184,7 +222,7 @@ function getFrontViewUrl(item) {
   height: 1.75rem;
   mix-blend-mode: multiply;
 }
-#selector-select_list [aria-selected="true"] img {
+#selector-select_list [aria-selected='true'] img {
   display: none;
 }
 </style>

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

@@ -3,14 +3,11 @@
     <header class="tracks-header | flex">
       <div class="tracks">
         <Selector
-          :label="'piste'"
-          :items="tracks"
-          @update:selectedItems="selectTrack"
-        />
-        <Selector
-          v-if="isCompareModeEnabled"
-          :label="'piste'"
-          :items="tracks"
+          v-for="track in tracks"
+          :key="track.slug"
+          :label="track.title"
+          :items="track.variations"
+          :isCompareModeEnabled="isCompareModeEnabled"
           @update:selectedItems="selectTrack"
         />
       </div>
@@ -46,7 +43,7 @@
   </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';
@@ -55,6 +52,7 @@ 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();
 
@@ -64,15 +62,21 @@ const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
 
 const { isCompareModeEnabled } = storeToRefs(useVirtualSampleStore());
 
+const rawTracks = page.value.steps.find(
+  (step) => step.slug === 'virtual-sample'
+).files.dynamic;
+
 onBeforeMount(() => {
-  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]];
-  }
+  activeTracks.value = [rawTracks[Object.keys(rawTracks)[0]][0]];
+
+  // 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(() => {
@@ -82,16 +86,29 @@ 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(() => {
+  console.log(activeTracks.value);
   return (
     activeTracks.value?.length === 1 &&
-    activeTracks.value[0]?.files.length === 1
+    activeTracks.value[0]?.files?.length === 1
   );
 });