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

<template>
  <div class="dialog__inner">
    <header class="tracks-header | flex">
      <div class="tracks">
        <Selector
          v-for="(track, index) in tracks"
          :key="track.slug"
          :label="track.title"
          :items="track.variations"
          :isCompareModeEnabled="isCompareModeEnabled"
          :index="index"
          @update:selectedItems="selectTrack"
        />
      </div>
      <button
        class="btn | ml-auto"
        :class="{ 'btn--secondary': isCompareModeEnabled }"
        @click="isCompareModeEnabled = !isCompareModeEnabled"
      >
        <span>{{
          isCompareModeEnabled
            ? 'Quitter le mode comparer'
            : 'Comparer les pistes'
        }}</span>
      </button>
    </header>

    <div class="track">
      <template v-for="activeTrack in activeTracks" :key="activeTrack.title">
        <Interactive360
          v-if="activeTrack.files.length > 1"
          :activeTrack="activeTrack"
        />
        <SingleImage
          v-else
          :file="activeTrack.files[0]"
          :backgroundColor="activeTrack.backgroundColor"
        />
      </template>
      <div
        v-if="isCompareModeEnabled && activeTracks.length < 2"
        class="track-empty | bg-white rounded-xl w-full p-32"
      >
        <p>Sélectionnez sur la piste que vous souhaitez comparer</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, watch, onMounted, onBeforeMount } from 'vue';
import { storeToRefs } from 'pinia';
import { usePageStore } from '../../../stores/page';
import { useDialogStore } from '../../../stores/dialog';
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();

const { page } = storeToRefs(usePageStore());
const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
  storeToRefs(useDialogStore());

const { isCompareModeEnabled } = storeToRefs(useVirtualSampleStore());

const rawTracks = page.value.steps.find(
  (step) => step.slug === 'virtual-sample'
).files.dynamic;

onBeforeMount(() => {
  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(() => {
  if (route.hash.length === 0) return;

  const selector = route.hash.replace('#', '#track--');
  const targetBtn = document.querySelector(selector);
  if (targetBtn) {
    targetBtn.scrollIntoView();
  }
});

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
  );
});

const singleFile = computed(() => {
  return isSingleImage.value && activeTracks.value[0].files[0];
});

watch(
  singleFile,
  (newValue) => {
    if (newValue) {
      openedFile.value = newValue;
    }
  },
  { immediate: true }
);

watch(isCompareModeEnabled, (newValue) => {
  if (newValue) {
    isCommentsOpen.value = false;
    isCommentPanelEnabled.value = false;
  } else {
    isCommentPanelEnabled.value = true;
  }

  if (!newValue && activeTracks.value.length === 2) {
    activeTracks.value.pop();
  }
});

function getCommentsCount(track) {
  let count = 0;
  for (const file of track.files) {
    count += file?.comments?.length || 0;
  }
  return count > 0 ? count : undefined;
}
</script>

<style>
.track figure {
  position: relative;
}

.track .drag-zone {
  position: absolute;
  inset: 0;
  z-index: 2;
}
</style>