#56 - handle compare track count

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

@@ -18,7 +18,11 @@
         :class="{ 'btn--secondary': isCompareModeEnabled }"
         @click="isCompareModeEnabled = !isCompareModeEnabled"
       >
-        <span>{{ isCompareModeEnabled ? 'Quitter le mode comparer' : 'Comparer les pistes' }}</span>
+        <span>{{
+          isCompareModeEnabled
+            ? "Quitter le mode comparer"
+            : "Comparer les pistes"
+        }}</span>
       </button>
     </header>
 
@@ -32,7 +36,10 @@
           <img :src="activeTrack.files[0].url" alt="" />
         </figure>
       </template>
-      <div v-if="isCompareModeEnabled && activeTracks.length < 2" class="track-empty | bg-white rounded-xl w-full p-32">
+      <div
+        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>
       </div>
     </div>
@@ -52,7 +59,7 @@ const tracks = computed(
 
 const isCompareModeEnabled = ref(false);
 watch(isCompareModeEnabled, (newValue) => {
-  if (!newValue) {
+  if (!newValue && activeTracks.value.length === 2) {
     activeTracks.value.pop();
   }
 });
@@ -68,18 +75,31 @@ function getFrontViewUrl(track) {
 }
 
 function selectTrack(track) {
-  if (isCompareModeEnabled.value) {
+  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)) {
-      activeTracks.value = activeTracks.value.filter(
-        (item) => item.title !== track.title
-      );
+      removeTrack(track);
     } else {
+      activeTracks.value.shift();
       activeTracks.value.push(track);
     }
-  } else {
-    activeTracks.value = [track];
   }
 }
+
+function removeTrack(track) {
+  activeTracks.value = activeTracks.value.filter(
+    (activeTrack) => activeTrack.title !== track.title
+  );
+}
 </script>
 
 <style>