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

<template>
  <Dialog
    id="virtual-sample"
    v-model:visible="isOpen"
    modal
    :draggable="false"
    dismissableMask="true"
    header="Titre du rendu"
    class="dialog"
    :class="[
      { 'with-comments': isCommentsOpen },
      activeTab,
      { 'with-dtl': correspondingDTLProposal },
    ]"
    :closeOnEscape="true"
  >
    <template #header>
      <div class="dialog__tabs" role="tablist">
        <button
          v-if="step.files.dynamic"
          type="button"
          role="tab"
          class="btn btn--transparent | font-serif"
          data-icon="cursor"
          :aria-pressed="activeTab === 'dynamic' ? true : false"
          aria-controls="dynamic"
          @click="activeTab = 'dynamic'"
        >
          <span>Présentation dynamique</span>
        </button>
        <button
          v-if="step.files.static"
          type="button"
          role="tab"
          @click="activeTab = 'static'"
          class="btn btn--transparent | font-serif"
          data-icon="image"
          :aria-pressed="activeTab === 'static' ? true : false"
          aria-controls="static"
        >
          <span>Vue statique</span>
        </button>
      </div>
      <h2 class="font-serif text-lg">Échantillon virtuel</h2>
    </template>

    <DynamicView id="dynamic" v-if="activeTab === 'dynamic'" />
    <StaticView id="static" v-if="activeTab === 'static'" />

    <template #footer>
      <button
        v-if="currentFile"
        id="download-image"
        class="btn btn--white-10"
        data-icon="download"
        @click="downloadFiles()"
      >
        <span>{{ downloadText }}</span>
      </button>
      <button
        id="loop-animation"
        class="btn"
        :class="{ 'btn--transparent btn--outline': !isLoopAnimationEnabled }"
        :data-icon="!isLoopAnimationEnabled ? 'loop' : 'pause'"
        @click="isLoopAnimationEnabled = !isLoopAnimationEnabled"
      >
        <span>{{
          !isLoopAnimationEnabled
            ? 'Animation en boucle'
            : 'Arrêter l’animation'
        }}</span>
      </button>
      <button
        v-if="isCommentPanelEnabled"
        id="toggle-comments"
        :aria-pressed="isCommentsOpen"
        class="btn btn--transparent btn--outline"
        data-icon="comment"
        @click="isCommentsOpen = !isCommentsOpen"
      >
        <span class="sr-only"
          >{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span
        >
      </button>
    </template>
    <Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
  </Dialog>
  <DTLPanel
    v-if="correspondingDTLProposal"
    :proposals="[correspondingDTLProposal]"
  />
</template>

<script setup>
import Comments from '../../comments/Comments.vue';
import Dialog from 'primevue/dialog';
import DynamicView from './DynamicView.vue';
import StaticView from './StaticView.vue';
import DTLPanel from '../../design-to-light/DTLPanel.vue';
import { storeToRefs } from 'pinia';
import { ref, watch, computed } from 'vue';
import { useVirtualSampleStore } from '../../../stores/virtualSample';
import { useDialogStore } from '../../../stores/dialog';
import { useRoute, useRouter } from 'vue-router';
import { usePageStore } from '../../../stores/page';

const { file } = defineProps({
  file: Object,
});

const {
  activeTab,
  currentFile,
  step,
  isLoopAnimationEnabled,
  isDownloadTriggered,
} = storeToRefs(useVirtualSampleStore());

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

const { page } = storeToRefs(usePageStore());

isLoopAnimationEnabled.value = false;

// Variables
const router = useRouter();
const route = useRoute();
const isOpen = ref(true);
watch(isOpen, (newValue) => {
  router.push({ name: route.name });
  openedFile.value = null;
  activeTracks.value = null;
});

const downloadText = computed(() => {
  if (activeTab.value === 'dynamic') {
    if (activeTracks.value.length === 1) {
      return "Télécharger l'image";
    } else {
      return 'Télécharger les images';
    }
  } else {
    return 'Télécharger le PDF';
  }
});

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;
  setTimeout(() => {
    isDownloadTriggered.value = false;
  }, 400);
}
</script>

<style scoped>
.dialog__inner {
  padding: var(--space-16);
}
.with-comments .dialog__inner {
  margin-right: var(--dialog-comments-w, 20rem);
}
#comments-container {
  top: var(--dialog-header-h);
}
</style>