73 lines
2.0 KiB
Vue
73 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import { type BreadcrumbItem } from '@/types';
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { Resume } from '@/types/resume';
|
|
import { useResumesStore } from '@/stores/resume';
|
|
import ResumeEditPanel from '@/components/resume/ResumeEditPanel.vue';
|
|
import ResumePreviewPanel from '@/components/resume/ResumePreviewPanel.vue';
|
|
import { useShowComponentSelectionStore } from '@/stores/ui';
|
|
|
|
const props = defineProps<{
|
|
resume: Resume
|
|
}>();
|
|
|
|
const resumeStore = useResumesStore();
|
|
resumeStore.setAndUpdateCurrentResumeWhenFetched(props.resume);
|
|
|
|
const showComponentSelectionStore = useShowComponentSelectionStore();
|
|
showComponentSelectionStore.setShowComponentSelection(false);
|
|
|
|
const resumeTitle = resumeStore.currentResumeName;
|
|
|
|
resumeStore.setSelectedResumePlacement(-1);
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: resumeTitle.value,
|
|
href: '/resumes/edit',
|
|
},
|
|
];
|
|
|
|
|
|
function isSaving() {
|
|
return resumeStore.isSaving;
|
|
}
|
|
// Confirmation when closing the tab if saving
|
|
window.addEventListener("beforeunload", function (e) {
|
|
if (!isSaving()) return;
|
|
|
|
console.log('Saving in progress, showing confirmation dialog.');
|
|
|
|
const confirmationMessage = 'Des changements sont toujours en cours de sauvegarde. '
|
|
+ 'Si vous quittez avant de sauvegarder, vos modifications seront perdues.';
|
|
|
|
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
|
|
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="resumeTitle" />
|
|
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto">
|
|
<ResumeEditPanel />
|
|
<ResumePreviewPanel />
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.v-enter-active,
|
|
.v-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.v-enter-from,
|
|
.v-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|