designtopack/src/components/project/TitledPdfWrapper.vue

<template>
  <Dialog
    id="add-pdf"
    v-model:visible="isOpen"
    modal
    :draggable="false"
    :dismissableMask="true"
    :header="t('dialogs.pdfTitle')"
    class="dialog"
    :class="[
      { 'with-comments': isCommentsOpen },
      { 'with-dtl': correspondingDTLProposal },
    ]"
    :closeOnEscape="true"
  >
    <template #header>
      <button
        v-if="
          ['clientBrief', 'extendedBrief'].includes(dialog.content.id) &&
          dialog.content.isValidated !== true
        "
        class="btn"
        @click="validate()"
      >
        {{ t('buttons.validate') }}
      </button>
      <h2
        v-if="openedFile"
        class="font-serif text-lg"
        :title="openedFile?.label.length ? openedFile.label : openedFile.name"
      >
        {{ openedFile?.label.length ? openedFile.label : openedFile.name }}
      </h2>
    </template>
    <div id="vpv-container">
      <PdfViewer />
    </div>
  </Dialog>
  <DTLPanel
    v-if="correspondingDTLProposal"
    :proposals="[correspondingDTLProposal]"
  />
</template>

<script setup>
import Dialog from 'primevue/dialog';
import PdfViewer from './PdfViewer.vue';
import DTLPanel from '../design-to-light/DTLPanel.vue';
import { computed, ref, watch } from 'vue';
import { useDialogStore } from '../../stores/dialog';
import { useRoute, useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useApiStore } from '../../stores/api';
import { usePageStore } from '../../stores/page';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const { openedFile, isCommentsOpen } = storeToRefs(useDialogStore());

const router = useRouter();
const route = useRoute();

const dialog = useDialogStore();
const api = useApiStore();
const { page } = storeToRefs(usePageStore());

const isOpen = ref(true);
const hasDTLProposal = computed(() => {
  return page.value?.designToLight;
});

watch(isOpen, (newValue) => {
  router.push({ name: route.name });
  openedFile.value = null;
});

openedFile.value = route.query.fileIndex
  ? dialog.content.files[route.query.fileIndex]
  : dialog.content.files.find((file) => file.type === 'document');

const correspondingDTLProposal = computed(() => {
  if (!hasDTLProposal.value || !isOpen.value || !openedFile.value) return false;

  const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
    return openedFile.value.source === proposal.location?.source;
  });

  if (!correspondingDTLProposal) return false;

  return correspondingDTLProposal;
});

// Functions
async function validate() {
  const response = await api.validateBrief(
    route.path + '/' + dialog.content.slug,
    route.fullPath
  );
  if (response.success) {
    dialog.content.isValidated = true;
  } else {
    console.alert(response);
  }
}
</script>

<style>
#vpv-container {
  width: var(--dialog-max-w);
  height: calc(var(--dialog-max-h) - var(--dialog-header-h));
  background: black;
  position: relative;
}
.with-comments .vpv-pages-container-wrapper {
  margin-right: var(--dialog-comments-w, 20rem);
}
</style>