Minimal Viable Product + Refactor to pinia store + Fix PDF export

resources/js/components/resume/ResumeNameInput.vue

@@ -1,44 +1,40 @@
 <script setup lang="ts">
-import { ref, Transition } from 'vue';
+import { ref } 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';
+import { useResumesStore } from '@/stores/resume';
 
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
 
-const props = defineProps<{
-    resume: Resume,
-    resumeTitle: string,
-}>();
-
-const emit = defineEmits(['update:resume-title']);
-
-const originalTitle = ref<string>(props.resumeTitle);
+const resumeTitle = resumeStore.currentResumeName;
+const originalTitle = ref<string>(resumeTitle.value);
 const titleChanged = ref<boolean>(false);
 
 function saveTitle() {
-    const resume = { ...props.resume, name: props.resumeTitle };
-    resume['components_placements'] = null;
+    const resumeCopy = { ...resume.value, name: resumeTitle.value };
+    resumeCopy['components_placements'] = null;
 
-    httpApi(route('resumes.update', props.resume), {
+    httpApi(route('resumes.update', resume.value), {
         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' })
+        body: JSON.stringify({ ...resumeCopy, _method: 'PUT' })
     }).then(() => {
-        location.reload();
+        originalTitle.value = resumeTitle.value;
+        titleChanged.value = false;
     });
 }
 </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)}" />
+        <Input type="text" v-model="resumeTitle" placeholder="Sans titre" class="border p-2 rounded" @input="(event) => {resumeStore.setCurrentResumeName(event.target.value); titleChanged = (event.target.value !== originalTitle)}" />
         <Transition>
             <Button v-if="titleChanged" variant="outline" class="cursor-pointer transition" @click="saveTitle"><Save /></Button>
         </Transition>