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

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>