designtopack/src/components/project/TitledPdfWrapper.vue
isUnknown 82eb8d88cc Implémentation complète du multilingue FR/EN
- Installation vue-i18n v11 et création des fichiers de traduction (fr.json, en.json)
- Création store locale avec détection hiérarchique (URL > localStorage > navigator)
- Modification des routes avec préfixe /:locale? optionnel
- Toggle FR/EN dans Menu.vue avec synchronisation immédiate
- Traduction de ~200 textes dans 27 composants Vue
- Suppression des labels hardcodés en français côté backend
- Ajout route Kirby catch-all en/(:all?) pour /en/ URLs
- Helper addLocalePrefix() pour préserver locale dans liens dialogs
- Traduction pseudo-élément CSS via data attribute

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-02 18:31:37 +01:00

117 lines
3 KiB
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>