45 lines
1.5 KiB
Vue
45 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import { type BreadcrumbItem } from '@/types';
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { Resume, ResumeComponent, ResumeComponentPlacement } from '@/types/resume';
|
|
import ResumeEditPanel from '@/components/resume/ResumeEditPanel.vue';
|
|
import ResumePreviewPanel from '@/components/resume/ResumePreviewPanel.vue';
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
resume: Resume
|
|
}>();
|
|
|
|
const selectedComponent = ref<ResumeComponentPlacement | null>(null);
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: props.resume?.name ?? 'Sans titre',
|
|
href: '/resumes/edit',
|
|
},
|
|
];
|
|
|
|
function changeSelectedComponent(newComponent: ResumeComponentPlacement) {
|
|
selectedComponent.value = newComponent;
|
|
// Update the resume
|
|
props.resume.components_placements! = props.resume.components_placements!.map(component =>
|
|
component.id === newComponent.id ? newComponent : component
|
|
);
|
|
}
|
|
|
|
console.log('Resume : ', props.resume);
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Dashboard" />
|
|
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto">
|
|
<ResumeEditPanel :resume="props.resume" :selected-component="selectedComponent" @selected-component-change="changeSelectedComponent" />
|
|
<ResumePreviewPanel :resume="props.resume" :selected-component="selectedComponent" @selected-component-change="changeSelectedComponent" />
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|