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