Added printing + Resume name input

resources/js/components/resume/PrintResumeButton.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Resume } from '@/types/resume';
+import Button from '../ui/button/Button.vue';
+import { exportToPdf } from '@/lib/pdfExport';
+import { FileText } from 'lucide-vue-next';
+
+const props = defineProps<{
+    resume: Resume,
+}>();
+
+function printResume() {
+    exportToPdf(document.getElementById('resume')!, (props.resume.name || 'Sans titre') + '.pdf');
+}
+</script>
+
+<template>
+   <Button variant="outline" class="cursor-pointer" @click="printResume"><FileText />Exporter le CV</Button>
+</template>

resources/js/components/resume/ResumeComponent.vue

@@ -16,5 +16,7 @@ const componentFile = defineAsyncComponent(
 </script>
 
 <template>
-    <component :is="componentFile" :componentPlacement="props.componentPlacement" />
+    <div class="w-full">
+        <component :is="componentFile" :componentPlacement="props.componentPlacement" />
+    </div>
 </template>

resources/js/components/resume/ResumeNameInput.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref, Transition } from 'vue';
+import { Save } from 'lucide-vue-next';
+import Button from '../ui/button/Button.vue';
+import Input from '../ui/input/Input.vue';
+import { Form } from '@inertiajs/vue3';
+import { httpApi } from '@/lib/utils';
+import { Resume } from '@/types/resume';
+
+
+const props = defineProps<{
+    resume: Resume,
+    resumeTitle: string,
+}>();
+
+const emit = defineEmits(['update:resume-title']);
+
+const originalTitle = ref<string>(props.resumeTitle);
+const titleChanged = ref<boolean>(false);
+
+function saveTitle() {
+    const resume = { ...props.resume, name: props.resumeTitle };
+    resume['components_placements'] = null;
+
+    httpApi(route('resumes.update', props.resume), {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+            'Accept': 'application/json'
+        },
+        body: JSON.stringify({ ...resume, _method: 'PUT' })
+    }).then(() => {
+        location.reload();
+    });
+}
+</script>
+
+<template>
+    <div class="flex gap-1" >
+        <Input type="text" v-model="props.resumeTitle" placeholder="Sans titre" class="border p-2 rounded" @input="(event) => {emit('update:resume-title', event.target.value); titleChanged = (event.target.value !== originalTitle)}" />
+        <Transition>
+            <Button v-if="titleChanged" variant="outline" class="cursor-pointer transition" @click="saveTitle"><Save /></Button>
+        </Transition>
+    </div>
+</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>

resources/js/components/resume/ResumePreviewPanel.vue

@@ -1,19 +1,25 @@
 <script setup lang="ts">
 import { Resume, ResumeComponentPlacement } from '@/types/resume';
 import ResumeComponent from './ResumeComponent.vue';
+import PrintResumeButton from './PrintResumeButton.vue';
+import ResumeNameInput from './ResumeNameInput.vue';
 
 const props = defineProps<{
     resume: Resume,
     selectedComponent: ResumeComponentPlacement | null
 }>();
 
-const emit = defineEmits(['selected-component-change']);
+const emit = defineEmits(['selected-component-change', 'update:resume-title']);
 </script>
 
 <template>
-    <div class="flex-2 w-full p-6">
+    <div class="flex-2 flex flex-col gap-3 w-full">
+        <div id="tools" class="w-full flex gap-3 justify-between">
+            <ResumeNameInput :resume="props.resume" :resumeTitle="props.resume.name" @update:resume-title="emit('update:resume-title', $event)" />
+            <PrintResumeButton :resume="props.resume" />
+        </div>
         <div id="resume" class="aspect-[0.707317073] w-full max-w-[84.1cm] bg-white text-black">
-            <ResumeComponent v-for="componentPlacement in resume.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" @click="emit('selected-component-change', componentPlacement)" />
+            <ResumeComponent v-for="componentPlacement in props.resume.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" @click="emit('selected-component-change', componentPlacement)" />
         </div>
     </div>
 </template>

resources/js/components/resume/resumeComponents/email.vue

@@ -8,8 +8,9 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div class="w-full">
+    <div class="w-full" style="background-color: aqua; height: 10%;">
         I'm an email component : {{ props.componentPlacement?.component_data?.input_data[0].value }}
 
     </div>
+    <div style="width: 365px; height: 50px; background-color: red;"></div>
 </template>

resources/js/lib/pdfExport.ts

@@ -0,0 +1,13 @@
+import { jsPDF } from "jspdf";
+
+export function exportToPdf(element: HTMLElement, name: string) {
+    const pdf = new jsPDF();
+
+    pdf.html(element, {
+        callback: function (doc) {
+            doc.save(name);
+        },
+        width: 210,
+        windowWidth: element.scrollWidth,
+    });
+}

resources/js/pages/resumes/Edit.vue

@@ -2,20 +2,24 @@
 import AppLayout from '@/layouts/AppLayout.vue';
 import { type BreadcrumbItem } from '@/types';
 import { Head } from '@inertiajs/vue3';
-import { Resume, ResumeComponent, ResumeComponentPlacement } from '@/types/resume';
+import { Resume, ResumeComponentPlacement } from '@/types/resume';
 import ResumeEditPanel from '@/components/resume/ResumeEditPanel.vue';
 import ResumePreviewPanel from '@/components/resume/ResumePreviewPanel.vue';
-import { ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const props = defineProps<{
     resume: Resume
 }>();
 
+const localResume = ref({ ...props.resume });
+
+const resumeTitle = computed<string>(() => (localResume.value.name == '' ? 'Sans titre' : localResume.value.name) ?? 'Sans titre');
+
 const selectedComponent = ref<ResumeComponentPlacement | null>(null);
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
-        title: props.resume?.name ?? 'Sans titre',
+        title: resumeTitle.value,
         href: '/resumes/edit',
     },
 ];
@@ -23,22 +27,39 @@ const breadcrumbs: BreadcrumbItem[] = [
 function changeSelectedComponent(newComponent: ResumeComponentPlacement) {
     selectedComponent.value = newComponent;
     // Update the resume
-    props.resume.components_placements! = props.resume.components_placements!.map(component =>
+    localResume.value.components_placements! = localResume.value.components_placements!.map(component =>
         component.id === newComponent.id ? newComponent : component
     );
 }
 
-console.log('Resume : ', props.resume);
+function changeResumeTitle(newTitle: string) {
+    console.log('Changing resume title to ', newTitle);
+    localResume.value.name = newTitle;
+}
+
+console.debug('Resume : ', localResume.value);
 
 </script>
 
 <template>
-    <Head title="Dashboard" />
+    <Head :title="resumeTitle" />
 
     <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" />
+            <ResumeEditPanel :resume="localResume" :selected-component="selectedComponent" @selected-component-change="changeSelectedComponent" />
+            <ResumePreviewPanel :resume="localResume" :selected-component="selectedComponent" @selected-component-change="changeSelectedComponent" @update:resume-title="changeResumeTitle" />
         </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>

resources/views/app.blade.php

@@ -23,11 +23,11 @@
         {{-- Inline style to set the HTML background color based on our theme in app.css --}}
         <style>
             html {
-                background-color: oklch(1 0 0);
+                background-color: #ffffff;
             }
 
             html.dark {
-                background-color: oklch(0.145 0 0);
+                background-color: #0a0a0a;
             }
         </style>