#144

src/components/design-to-light/DTLPanel.vue

@@ -1,5 +1,6 @@
 <template>
   <aside
+    v-if="activeProposal"
     id="dtl-panel"
     class="text-sm bg-black rounded-2xl"
     :class="{ 'with-dialog': isDialogOpen }"
@@ -195,7 +196,7 @@ const { proposals } = defineProps({
 });
 
 const { page } = storeToRefs(usePageStore());
-const { openedFile } = storeToRefs(useDialogStore());
+const { openedFile, activeTracks } = storeToRefs(useDialogStore());
 
 const isDialogOpen = computed(() => {
   if (openedFile.value) {
@@ -211,9 +212,8 @@ dayjs.locale('fr');
 
 const emits = defineEmits(['close']);
 
-proposals[0].isActive = true;
-
-const activeProposal = ref(proposals[0]);
+const activeProposal =
+  proposals.length === 1 ? computed(() => proposals[0]) : ref(proposals[0]);
 
 window.addEventListener('keyup', closeOnEscape);
 window.addEventListener('click', close);

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

@@ -87,7 +87,7 @@
   </Dialog>
   <DTLPanel
     v-if="correspondingDTLProposal"
-    :proposals="[correspondingDTLProposal]"
+    :proposals="correspondingDTLProposal"
   />
 </template>
 
@@ -147,30 +147,41 @@ const downloadText = computed(() => {
 });
 
 const correspondingDTLProposal = computed(() => {
-  const hasDTLProposal = page.value?.designToLight;
-  if (!hasDTLProposal || !isOpen.value || !openedFile.value) return false;
-
-  const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
-    if (activeTab.value === 'dynamic') {
-      return (
-        proposal.location.type === 'dynamic' &&
-        activeTracks?.value?.some(
-          (activeTrack) => activeTrack.slug === proposal.location.trackSlug
-        )
-      );
-    } else {
-      return (
-        proposal.location.type === 'static' &&
-        openedFile.value?.source === proposal.location.source
-      );
-    }
-  });
-
-  if (!correspondingDTLProposal) return false;
-
-  return correspondingDTLProposal;
+  if (activeTracks.value?.length === 1) {
+    const matchingProposal = page.value.designToLight.find(
+      (proposal) => proposal.location.trackSlug === activeTracks.value[0].slug
+    );
+    return matchingProposal ? [matchingProposal] : false;
+  } else {
+    return false;
+  }
 });
 
+// const correspondingDTLProposal = computed(() => {
+//   const hasDTLProposal = page.value?.designToLight;
+//   if (!hasDTLProposal || !isOpen.value || !openedFile.value) return false;
+
+//   const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
+//     if (activeTab.value === 'dynamic') {
+//       return (
+//         proposal.location.type === 'dynamic' &&
+//         activeTracks?.value?.some(
+//           (activeTrack) => activeTrack.slug === proposal.location.trackSlug
+//         )
+//       );
+//     } else {
+//       return (
+//         proposal.location.type === 'static' &&
+//         openedFile.value?.source === proposal.location.source
+//       );
+//     }
+//   });
+
+//   if (!correspondingDTLProposal) return false;
+
+//   return correspondingDTLProposal;
+// });
+
 // Functions
 function downloadFiles() {
   isDownloadTriggered.value = true;