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

resources/css/app.css

@@ -7,6 +7,13 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* FIX jspdf export (https://github.com/parallax/jsPDF/issues/3532#issuecomment-1492983053) */
+@layer base {
+  img {
+    @apply inline-block;
+  }
+}
+
 @theme inline {
     --font-sans: Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 

resources/js/app.ts

@@ -6,6 +6,7 @@ import type { DefineComponent } from 'vue';
 import { createApp, h } from 'vue';
 import { ZiggyVue } from 'ziggy-js';
 import { initializeTheme } from './composables/useAppearance';
+import pinia from './lib/pinia';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -15,6 +16,7 @@ createInertiaApp({
     setup({ el, App, props, plugin }) {
         createApp({ render: () => h(App, props) })
             .use(plugin)
+            .use(pinia)
             .use(ZiggyVue)
             .mount(el);
     },

resources/js/components/SidebarListResumeItem.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Resume } from '@/types/resume';
+import SidebarListResumeItemToolButton from './SidebarListResumeItemToolButton.vue';
+import { httpApi } from '@/lib/utils';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps<{
+    resume: Resume;
+}>();
+
+const emit = defineEmits<{
+    (e: 'deleted', resume: Resume): void;
+    (e: 'duplicated'): void;
+}>();
+
+function duplicateResume() {
+    router.post(route('resumes.duplicate', props.resume));
+    emit('duplicated', props.resume);
+}
+
+async function deleteResume() {
+    const { error } = await httpApi(route('resumes.destroy', props.resume), {
+        method: 'DELETE',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+            'Accept': 'application/json'
+        },
+    });
+
+    if (error) {
+        console.error('Failed to delete resume:', error);
+        return;
+    }
+
+    emit('deleted', props.resume);
+}
+</script>
+
+<template>
+    <div class="flex w-full flex-nowrap justify-between items-center">
+        <span class="font-medium h-min">{{ props.resume.name ?? 'Sans titre' }}</span>
+        <div class="sidebar-list-resume-item-tools flex gap-2">
+            <SidebarListResumeItemToolButton @click.prevent="duplicateResume" logoName="BookCopy" />
+            <SidebarListResumeItemToolButton @click.prevent="deleteResume" logoName="Trash2" class="text-red-500" />
+        </div>
+    </div>
+</template>

resources/js/components/SidebarListResumeItemToolButton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import Icon from './Icon.vue';
+import Button from './ui/button/Button.vue';
+
+const props = defineProps<{
+    logoName: string
+}>();
+</script>
+
+<template>
+    <Button variant="outline" size="sm" class="px-1 gap-0 cursor-pointer">
+        <Icon :name="props.logoName" v-bind="$attrs" :size="20" />
+    </Button>
+</template>

resources/js/components/SidebarResumeList.vue

@@ -1,29 +1,49 @@
 <script setup lang="ts">
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { httpApi } from '@/lib/utils';
 import { type NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
-import { ref, onMounted } from 'vue';
+import { onMounted, computed } from 'vue';
 import { Resume } from '@/types/resume';
+import Button from './ui/button/Button.vue';
+import { Plus } from 'lucide-vue-next';
+import SidebarListResumeItem from './SidebarListResumeItem.vue';
+import { useResumesStore } from '@/stores/resume';
 
-const items = ref<NavItem[]>([]);
+const items = computed<(NavItem & { resume: Resume })[]>(() => {
+    return resumeStore.resumes.map((resume: Resume) => ({
+        title: resume.name,
+        href: route("resumes.edit", resume, false), // false returns only the path
+        resume: resume,
+    }));
+});
 const page = usePage();
 
+const resumeStore = useResumesStore();
+
 onMounted(async () => {
-  try {
-    const { data: resumes, error } = await httpApi<Resume[]>(route("resumes.index"));
-    if (error || !resumes) {
-      console.error('Failed to fetch resumes:', error);
-      return;
-    }
-    items.value = resumes.map((resume: Resume) => ({
-      title: resume.name,
-      href: route("resumes.edit", resume),
-    }));
-  } catch (error) {
-    console.error('Failed to fetch resumes:', error);
-  }
+    await loadResumes();
 });
+
+
+async function loadResumes() {
+    await resumeStore.fetchResumes();
+}
+
+function createNewResume() {
+    window.location.href = route("resumes.create");
+}
+
+function removeResume(deletedResume: Resume) {
+    resumeStore.removeResumeById(deletedResume.id);
+    if (page.url === route("resumes.edit", deletedResume, false)) {
+        // If we are on the deleted resume, redirect to the first resume or to the create page if no resumes left
+        if (resumeStore.resumes.length > 0) {
+            window.location.href = route("resumes.edit", resumeStore.resumes[0], false);
+        } else {
+            window.location.href = route("resumes.create");
+        }
+    }
+}
 </script>
 
 <template>
@@ -33,10 +53,17 @@ onMounted(async () => {
             <SidebarMenuItem v-for="item in items" :key="item.title">
                 <SidebarMenuButton as-child :is-active="item.href === page.url" :tooltip="item.title">
                     <Link :href="item.href">
-                        <span>{{ item.title }}</span>
+                        <SidebarListResumeItem :resume="item.resume" @deleted="removeResume" @duplicated="loadResumes" />
                     </Link>
                 </SidebarMenuButton>
             </SidebarMenuItem>
+            <SidebarMenuItem>
+                <SidebarMenuButton as-child class="cursor-pointer text-center" tooltip="Ajouter un composant">
+                    <Button variant="outline" size="sm" class="w-full" @click="createNewResume">
+                        <Plus />Nouveau CV
+                    </Button>
+                </SidebarMenuButton>
+            </SidebarMenuItem>
         </SidebarMenu>
     </SidebarGroup>
 </template>

resources/js/components/resume/ComponentsSelectionList.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { Resume, ResumeComponent, ResumeComponentPlacement } from '@/types/resume';
+import { ChevronLeft } from 'lucide-vue-next';
+import { onMounted, ref } from 'vue';
+import Button from '../ui/button/Button.vue';
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu } from '@/components/ui/sidebar';
+import { httpApi } from '@/lib/utils';
+import ComponentsSelectionListItem from './ComponentsSelectionListItem.vue';
+import { useShowComponentSelectionStore } from '@/stores/ui';
+import { useResumesStore } from '@/stores/resume';
+
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
+
+const showComponentSelectionStore = useShowComponentSelectionStore();
+
+const components = ref<ResumeComponent[]>([]);
+
+// Fetch the available components from the API or store
+function fetchAvailableComponents() {
+    httpApi<ResumeComponent[]>(route('resume-components.index'), {
+        method: 'GET',
+    }).then(response => {
+        if (!response) {
+            console.error('Failed to fetch components.');
+            return;
+        }
+        components.value = response.data;
+    });
+}
+
+onMounted(() => {
+    fetchAvailableComponents();
+});
+
+async function addNewComponentToResume(component: ResumeComponent) {
+    const newResume: Resume = { ...resume.value }; // Create a shallow copy of the current resume
+    let newComponentPlacement: ResumeComponentPlacement | null = null;
+
+    const { data, error } = await httpApi<ResumeComponentPlacement>(route('resume-component-placements.store'), {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+            'Accept': 'application/json'
+        },
+        body: JSON.stringify({
+            component_id: component.id,
+            resume_id: resume.value.id,
+            order: (resume.value.components_placements?.length ?? 0) + 1,
+        }),
+    });
+    if (error) {
+        console.error('Error creating component placement: ', error);
+        return;
+    }
+    newComponentPlacement = data!;
+
+    console.debug("New component placement created: ", newComponentPlacement);
+
+    newResume.components_placements!.push(newComponentPlacement!);
+
+    resumeStore.setAndUpdateCurrentResume(newResume);
+    resumeStore.setSelectedResumePlacementById(newComponentPlacement.id);
+    showComponentSelectionStore.setShowComponentSelection(false);
+}
+
+</script>
+
+<template>
+    <div class="h-full w-full">
+        <Button @click="showComponentSelectionStore.setShowComponentSelection(false);" variant="outline" size="icon" class="cursor-pointer"><ChevronLeft class="w-4 h-4" /></Button>
+        <SidebarGroup class="w-full p-0">
+            <SidebarGroupLabel>Composants disponibles</SidebarGroupLabel>
+            <SidebarMenu>
+                <ComponentsSelectionListItem
+                    v-for="component in components"
+                    :key="component.id"
+                    :component="component"
+                    @click="addNewComponentToResume(component)"
+                />
+            </SidebarMenu>
+        </SidebarGroup>
+    </div>
+</template>

resources/js/components/resume/ComponentsSelectionListItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ResumeComponent } from '@/types/resume';
+import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+
+
+const props = defineProps<{
+    component: ResumeComponent;
+}>();
+</script>
+
+<template>
+    <SidebarMenuItem>
+        <SidebarMenuButton as-child class="cursor-pointer" :tooltip="props.component.name">
+            <div class="flex w-full flex-nowrap justify-between items-center">
+                <span>{{ props.component.name }}</span>
+            </div>
+        </SidebarMenuButton>
+    </SidebarMenuItem>
+</template>

resources/js/components/resume/PrintResumeButton.vue

@@ -1,15 +1,13 @@
 <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';
+import { useResumesStore } from '@/stores/resume';
 
-const props = defineProps<{
-    resume: Resume,
-}>();
+const resumeStore = useResumesStore();
 
 function printResume() {
-    exportToPdf(document.getElementById('resume')!, (props.resume.name || 'Sans titre') + '.pdf');
+    exportToPdf(document.getElementById('resume')!, resumeStore.currentResumeName.value + '.pdf');
 }
 </script>
 

resources/js/components/resume/ResumeComponentEdit.vue

@@ -1,26 +1,23 @@
 <script setup lang="ts">
-import { Resume, ResumeComponentPlacement, ResumeInputData } from '@/types/resume';
+import { ResumeComponentPlacement, ResumeInputData } from '@/types/resume';
 import Button from '../ui/button/Button.vue';
 import { ChevronLeft } from 'lucide-vue-next';
 import { SidebarGroup, SidebarGroupLabel } from '@/components/ui/sidebar';
 import ResumeComponentEditForm from './ResumeComponentEditForm.vue';
 import { httpApi } from '@/lib/utils';
+import { useResumesStore } from '@/stores/resume';
 
 const SEND_CHANGED_DATA_DELAY = 500;
 
-const props = defineProps<{
-    resume: Resume
-    selectedComponent: ResumeComponentPlacement | null
-}>();
-
-const emit = defineEmits(['selected-component-change']);
+const resumeStore = useResumesStore();
+const selectedComponent = resumeStore.currentSelectedResumePlacement;
 
 let delayedSendTimeout: ReturnType<typeof setTimeout> | null = null
 async function sendChangedData(newData: ResumeInputData[]) {
-    const newSelectedComponent = {
-        ...props.selectedComponent,
+    const newSelectedComponent: ResumeComponentPlacement = {
+        ...selectedComponent.value,
         component_data: {
-            ...props.selectedComponent?.component_data,
+            ...selectedComponent.value?.component_data,
             input_data: newData
         }
     };
@@ -31,7 +28,7 @@ async function sendChangedData(newData: ResumeInputData[]) {
         clearTimeout(delayedSendTimeout);
     }
     delayedSendTimeout = setTimeout(async () => {
-        const { data, error } = await httpApi(route('resume-component-placements.update', newSelectedComponent.id), {
+        const { data, error } = await httpApi(route('resume-component-placements.update', newSelectedComponent), {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -54,21 +51,21 @@ async function sendChangedData(newData: ResumeInputData[]) {
         return;
     }
 
-    emit('selected-component-change', newSelectedComponent);
+    resumeStore.modifyCurrentSelectedResumePlacement(newSelectedComponent!);
 }
 </script>
 
 <template>
     <div class="h-full w-full">
-        <Button @click="emit('selected-component-change', null)" variant="outline" size="icon" class="cursor-pointer"><ChevronLeft class="w-4 h-4" /></Button>
+        <Button @click="resumeStore.clearSelectedResumePlacement();" variant="outline" size="icon" class="cursor-pointer"><ChevronLeft class="w-4 h-4" /></Button>
         <SidebarGroup class="w-full p-0">
-            <SidebarGroupLabel>{{ props.selectedComponent?.component_data?.component?.name }}</SidebarGroupLabel>
+            <SidebarGroupLabel>{{ selectedComponent?.component_data?.component?.name }}</SidebarGroupLabel>
             <ResumeComponentEditForm
-                v-if="props.selectedComponent?.component_data?.input_data"
-                :data="props.selectedComponent?.component_data?.input_data!"
+                v-if="selectedComponent?.component_data?.input_data"
+                :data="selectedComponent?.component_data?.input_data!"
                 @data-changed="sendChangedData($event)"
             />
-            <p v-else class="text-destructive">No component input data : {{ props.selectedComponent?.component_data }}</p>
+            <p v-else class="text-destructive">No component input data : {{ selectedComponent?.component_data }}</p>
         </SidebarGroup>
     </div>
 </template>

resources/js/components/resume/ResumeComponentsList.vue

@@ -1,31 +1,68 @@
 <script setup lang="ts">
-import { Resume, ResumeComponentPlacement } from '@/types/resume';
+import { ResumeComponentPlacement } from '@/types/resume';
 import { computed } from 'vue';
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { Link } from '@inertiajs/vue3';
+import ResumeComponentsListItem from './ResumeComponentsListItem.vue';
+import Button from '@/components/ui/button/Button.vue';
+import { Plus } from 'lucide-vue-next';
+import { useResumesStore } from '@/stores/resume';
+import { useShowComponentSelectionStore } from '@/stores/ui';
 
-const props = defineProps<{
-    resume: Resume;
-    selectedComponent: ResumeComponentPlacement | null;
-}>();
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
+
+const showComponentSelectionStore = useShowComponentSelectionStore();
 
 const orderedComponentsPlacements = computed(() => {
-    console.log('Ordered Components Placements:', props.resume.components_placements);
-    return props.resume.components_placements ? [...props.resume.components_placements].sort((a, b) => a.order - b.order) : [];
+    if (!resume.value) return [];
+    return resume.value.components_placements ? [...resume.value.components_placements].sort((a, b) => a.order - b.order) : [];
 });
 
-const emit = defineEmits(['selected-component-change']);
+function findComponentPlacementIndexById(id: number) {
+    return resumeStore.currentResume?.value!.components_placements!.findIndex(cp => cp.id === id) ?? -1;
+}
+
+
+function moveComponent(componentPlacement: ResumeComponentPlacement, direction: 1 | -1) {
+    const placementIndex = findComponentPlacementIndexById(componentPlacement.id);
+    if (placementIndex === -1) return;
+    const newIndex = placementIndex + direction;
+    resumeStore.swapComponentsPlacementsOrder(placementIndex, newIndex);
+}
+
+function unlinkComponentData(componentPlacement: ResumeComponentPlacement) {
+    const placementIndex = findComponentPlacementIndexById(componentPlacement.id);
+    if (placementIndex === -1) return;
+    resumeStore.unlinkComponentPlacement(placementIndex);
+}
+
+function deleteComponent(componentPlacement: ResumeComponentPlacement) {
+    const placementIndex = findComponentPlacementIndexById(componentPlacement.id);
+    if (placementIndex === -1) return;
+    resumeStore.deleteComponentPlacement(placementIndex);
+}
 </script>
 
 <template>
     <SidebarGroup class="w-full p-0">
         <SidebarGroupLabel>Composants du CV</SidebarGroupLabel>
         <SidebarMenu>
-            <SidebarMenuItem v-for="component in orderedComponentsPlacements" :key="component.id">
-                <SidebarMenuButton as-child class="cursor-pointer" :tooltip="component.component_data?.component?.name">
-                    <div @click="emit('selected-component-change', component)">
-                        <span>{{ component.component_data?.component?.name }}</span>
-                    </div>
+            <ResumeComponentsListItem
+                v-for="componentPlacement in orderedComponentsPlacements"
+                :key="componentPlacement.id"
+                :component-placement="componentPlacement"
+                @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)"
+
+                @moved-up="moveComponent($event, -1)"
+                @moved-down="moveComponent($event, 1)"
+                @unlinked="unlinkComponentData($event)"
+                @removed="deleteComponent($event)"
+                />
+            <SidebarMenuItem>
+                <SidebarMenuButton as-child class="cursor-pointer text-center" tooltip="Ajouter un composant">
+                    <Button variant="secondary" size="sm" class="w-full" @click="showComponentSelectionStore.setShowComponentSelection(true)">
+                        <Plus />Ajouter un composant
+                    </Button>
                 </SidebarMenuButton>
             </SidebarMenuItem>
         </SidebarMenu>

resources/js/components/resume/ResumeComponentsListItem.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ResumeComponentPlacement } from '@/types/resume';
+import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import ResumeComponentsListItemToolButton from './ResumeComponentsListItemToolButton.vue';
+
+
+const props = defineProps<{
+    componentPlacement: ResumeComponentPlacement;
+}>();
+
+const emit = defineEmits<{
+    (e: 'movedUp', component: ResumeComponentPlacement): void;
+    (e: 'movedDown', component: ResumeComponentPlacement): void;
+    (e: 'unlinked', component: ResumeComponentPlacement): void;
+    (e: 'removed', component: ResumeComponentPlacement): void;
+}>();
+</script>
+
+<template>
+    <SidebarMenuItem>
+        <SidebarMenuButton as-child class="cursor-pointer" :tooltip="props.componentPlacement.component_data?.component!.name">
+            <div class="flex w-full flex-nowrap justify-between items-center">
+                <span>{{ props.componentPlacement.component_data?.component!.name }}</span>
+                <div class="sidebar-list-resume-item-tools flex gap-2">
+                    <ResumeComponentsListItemToolButton @click.stop="emit('movedUp', props.componentPlacement)" logo-name="ChevronUp" />
+                    <ResumeComponentsListItemToolButton @click.stop="emit('movedDown', props.componentPlacement)" logo-name="ChevronDown" />
+                    <ResumeComponentsListItemToolButton @click.stop="emit('unlinked', props.componentPlacement)" logo-name="Unlink" />
+                    <ResumeComponentsListItemToolButton @click.stop="emit('removed', props.componentPlacement)" logo-name="Trash2" class="text-red-500" />
+                </div>
+            </div>
+        </SidebarMenuButton>
+    </SidebarMenuItem>
+</template>

resources/js/components/resume/ResumeComponentsListItemToolButton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import Icon from '@/components/Icon.vue';
+import Button from '@/components/ui/button/Button.vue';
+
+const props = defineProps<{
+    logoName: string
+}>();
+</script>
+
+<template>
+    <Button variant="secondary" size="sm" class="px-1 gap-0 cursor-pointer">
+        <Icon :name="props.logoName" v-bind="$attrs" :size="20" />
+    </Button>
+</template>

resources/js/components/resume/ResumeEditPanel.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
-import { Resume, ResumeComponentPlacement } from '@/types/resume';
 import ResumeComponentEdit from './ResumeComponentEdit.vue';
 import ResumeComponentsList from './ResumeComponentsList.vue';
+import ComponentsSelectionList from './ComponentsSelectionList.vue';
+import { computed } from 'vue';
+import { useResumesStore } from '@/stores/resume';
+import { useShowComponentSelectionStore } from '@/stores/ui';
 
-const props = defineProps<{
-    resume: Resume
-    selectedComponent: ResumeComponentPlacement | null
-}>();
+const resumeStore = useResumesStore();
+const selectedComponent = resumeStore.currentSelectedResumePlacement;
 
-const emit = defineEmits(['selected-component-change']);
+const showComponentSelectionStore = useShowComponentSelectionStore();
+const showComponentSelection = computed<boolean>(() => showComponentSelectionStore.showComponentSelection);
 </script>
 
 <template>
     <div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto max-w-[25%] bg-accent relative">
         <Transition mode="out-in" appear>
-            <ResumeComponentEdit v-if="selectedComponent != null" :resume="props.resume" :selectedComponent="props.selectedComponent" @selected-component-change="emit('selected-component-change', $event)" :key="selectedComponent ? selectedComponent.id : 'form'" />
-            <ResumeComponentsList v-else :resume="props.resume" :selectedComponent="props.selectedComponent" @selected-component-change="emit('selected-component-change', $event)" />
+            <ResumeComponentEdit v-if="selectedComponent != null" :key="selectedComponent ? selectedComponent.id : 'form'" />
+            <ComponentsSelectionList v-else-if="showComponentSelection" />
+            <ResumeComponentsList v-else />
         </Transition>
     </div>
 </template>

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>

resources/js/components/resume/ResumePreviewPanel.vue

@@ -1,25 +1,35 @@
 <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';
+import { useResumesStore } from '@/stores/resume';
 
-const props = defineProps<{
-    resume: Resume,
-    selectedComponent: ResumeComponentPlacement | null
-}>();
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
+const selectedComponent = resumeStore.currentSelectedResumePlacement;
 
-const emit = defineEmits(['selected-component-change', 'update:resume-title']);
 </script>
 
 <template>
     <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" />
+            <ResumeNameInput />
+            <PrintResumeButton />
         </div>
-        <div id="resume" class="aspect-[0.707317073] w-full max-w-[84.1cm] bg-white text-black">
-            <ResumeComponent v-for="componentPlacement in props.resume.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" @click="emit('selected-component-change', componentPlacement)" />
+        <div class="resume aspect-[0.707317073] w-full bg-white text-black">
+            <ResumeComponent v-for="componentPlacement in resume?.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" :active="componentPlacement.id === selectedComponent?.id" @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)" />
+        </div>
+        <div class="w-[210mm]" style="position: fixed; top:calc(-297mm - 5000px); container-type: inline-size; ">
+            <div id="resume" class="aspect-[0.707317073] w-full bg-white text-black" >
+                <ResumeComponent v-for="componentPlacement in resume?.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" :active="componentPlacement.id === selectedComponent?.id" @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)" />
+            </div>
         </div>
     </div>
 </template>
+
+<style scoped>
+.resume {
+    container-type: inline-size;
+    font-size: 1cqw;
+}
+</style>

resources/js/components/ui/sidebar/utils.ts

@@ -3,7 +3,7 @@ import { createContext } from 'reka-ui'
 
 export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH = '20rem'
 export const SIDEBAR_WIDTH_MOBILE = '18rem'
 export const SIDEBAR_WIDTH_ICON = '3rem'
 export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

resources/js/layouts/app/AppSidebarLayout.vue

@@ -23,7 +23,7 @@ withDefaults(defineProps<Props>(), {
             </template>
         </AppSidebar>
         <AppContent variant="sidebar" class="overflow-x-hidden">
-            <AppSidebarHeader :breadcrumbs="breadcrumbs" />
+            <!-- <AppSidebarHeader :breadcrumbs="breadcrumbs" /> -->
             <slot />
         </AppContent>
     </AppShell>

resources/js/lib/pdfExport.ts

@@ -1,13 +1,33 @@
 import { jsPDF } from "jspdf";
 
 export function exportToPdf(element: HTMLElement, name: string) {
-    const pdf = new jsPDF();
+    // const pdf = new jsPDF({orientation: 'portrait', unit: 'mm', format: 'a4', precision: 1, hotfixes: ["px_scaling"]});
 
+    // pdf.html(element, {
+    //     callback: function (doc) {
+    //         doc.save(name);
+    //     },
+    //     margin: [0, 0, 0, 0],
+    //     autoPaging: 'text',
+    //     // width: 210,
+    //     // windowWidth: 2100,
+    //     html2canvas: {
+    //         allowTaint: true,
+    //         letterRendering: true,
+    //         logging: true,
+    //         // width: 210,
+    //         // windowWidth: 2100,
+    //         // scale: 0.2,
+    //         // scale: 210 / element.scrollWidth,
+    //     },
+    // });
+
+    const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
     pdf.html(element, {
         callback: function (doc) {
             doc.save(name);
         },
         width: 210,
-        windowWidth: element.scrollWidth,
+        windowWidth: 1080,
     });
 }

resources/js/lib/pinia.ts

@@ -0,0 +1,5 @@
+import { createPinia } from 'pinia'
+
+const pinia = createPinia()
+
+export default pinia

resources/js/lib/utils.ts

@@ -26,9 +26,13 @@ export async function httpApi<T>(url: string, options?: RequestInit, useFetchOpt
             ...options,
         },
         useFetchOptions
-    ).json();
+    );
 
-    if (!error.value && data.value) {
+    if (data.value) {
+        data.value = JSON.parse(data.value as string) as T;
+    }
+
+    if (!error.value) {
         return { data: data.value, error: null };
     } else {
         return { data: data.value, error: error.value };

resources/js/pages/resumes/Edit.vue

@@ -2,20 +2,25 @@
 import AppLayout from '@/layouts/AppLayout.vue';
 import { type BreadcrumbItem } from '@/types';
 import { Head } from '@inertiajs/vue3';
-import { Resume, ResumeComponentPlacement } from '@/types/resume';
+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 { computed, ref, watch } from 'vue';
+import { useShowComponentSelectionStore } from '@/stores/ui';
 
 const props = defineProps<{
     resume: Resume
 }>();
 
-const localResume = ref({ ...props.resume });
+const resumeStore = useResumesStore();
+resumeStore.setAndUpdateCurrentResumeWhenFetched(props.resume);
 
-const resumeTitle = computed<string>(() => (localResume.value.name == '' ? 'Sans titre' : localResume.value.name) ?? 'Sans titre');
+const showComponentSelectionStore = useShowComponentSelectionStore();
+showComponentSelectionStore.setShowComponentSelection(false);
 
-const selectedComponent = ref<ResumeComponentPlacement | null>(null);
+const resumeTitle = resumeStore.currentResumeName;
+
+resumeStore.setSelectedResumePlacement(-1);
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -24,21 +29,6 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-function changeSelectedComponent(newComponent: ResumeComponentPlacement) {
-    selectedComponent.value = newComponent;
-    // Update the resume
-    localResume.value.components_placements! = localResume.value.components_placements!.map(component =>
-        component.id === newComponent.id ? newComponent : component
-    );
-}
-
-function changeResumeTitle(newTitle: string) {
-    console.log('Changing resume title to ', newTitle);
-    localResume.value.name = newTitle;
-}
-
-console.debug('Resume : ', localResume.value);
-
 </script>
 
 <template>
@@ -46,8 +36,8 @@ console.debug('Resume : ', localResume.value);
 
     <AppLayout :breadcrumbs="breadcrumbs">
         <div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto">
-            <ResumeEditPanel :resume="localResume" :selected-component="selectedComponent" @selected-component-change="changeSelectedComponent" />
-            <ResumePreviewPanel :resume="localResume" :selected-component="selectedComponent" @selected-component-change="changeSelectedComponent" @update:resume-title="changeResumeTitle" />
+            <ResumeEditPanel />
+            <ResumePreviewPanel />
         </div>
     </AppLayout>
 </template>

resources/js/ssr.ts

@@ -4,6 +4,7 @@ import { renderToString } from 'vue/server-renderer';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { createSSRApp, DefineComponent, h } from 'vue';
 import { ZiggyVue } from 'ziggy-js';
+import pinia from './lib/pinia';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -16,6 +17,7 @@ createServer((page) =>
         setup: ({ App, props, plugin }) =>
             createSSRApp({ render: () => h(App, props) })
                 .use(plugin)
+                .use(pinia)
                 .use(ZiggyVue, {
                     ...page.props.ziggy,
                     location: new URL(page.props.ziggy.location),

resources/js/stores/resume.ts

@@ -0,0 +1,360 @@
+import { httpApi } from '@/lib/utils';
+import { Resume, ResumeComponentData, ResumeComponentPlacement } from '@/types/resume';
+import { set } from '@vueuse/core';
+import { defineStore } from 'pinia'
+import { computed, ComputedRef, watch } from 'vue';
+
+const useResumesStore = defineStore('resumes', {
+    state: () => ({
+        resumes: [] as Array<Resume>,
+        resumesAreFetched: false as boolean,
+        currentResumeIndex: -1 as number,
+        selectedResumePlacementIndex: -1 as number,
+    }),
+    getters: {
+        hasResumes: (state) => computed(() => state.resumes.length > 0),
+
+        /* === CURRENT RESUME === */
+        currentResume(state): ComputedRef<Resume | null> {
+            console.debug("Current resume index : ", state.currentResumeIndex);
+            return computed(() => state.currentResumeIndex >= 0 ? state.resumes[state.currentResumeIndex] : null);
+        },
+        hasCurrentResume: (state) => computed(() => state.currentResumeIndex >= 0 && state.currentResumeIndex < state.resumes.length),
+        currentResumeName() {
+            return computed(() => {
+                const resume = this.currentResume;
+                return resume ? (resume.value?.name || 'Sans titre') : 'Sans titre';
+            });
+        },
+
+        /* === SELECTED RESUME PLACEMENT === */
+        hasCurrentSelectedResumePlacement(): ComputedRef<boolean> {
+            return computed(() => {
+                const currentResume = this.currentResume;
+                const selectedPlacementIndex = this.selectedResumePlacementIndex;
+                return currentResume !== null &&
+                    selectedPlacementIndex >= 0 &&
+                    selectedPlacementIndex < (currentResume.value?.components_placements?.length ?? 0);
+            });
+        },
+        currentSelectedResumePlacement(): ComputedRef<ResumeComponentPlacement | null> {
+            return computed(() => {
+                if (!this.hasCurrentSelectedResumePlacement.value) return null;
+
+                const currentResume = this.currentResume;
+                const selectedPlacementIndex = this.selectedResumePlacementIndex;
+                return currentResume.value.components_placements[selectedPlacementIndex];
+            });
+        },
+    },
+    actions: {
+        async fetchResumes() {
+            try {
+                this.resumesAreFetched = false;
+                // get from cache
+                const cachedResumes = localStorage.resumes;
+                if (cachedResumes) {
+                    this.setResumes(JSON.parse(cachedResumes));
+                }
+
+                const { data: resumes, error } = await httpApi<Resume[]>(route("resumes.index"));
+                if (error || !resumes) {
+                console.error('Failed to fetch resumes:', error);
+                return;
+                }
+                this.setResumes(resumes);
+
+                // Store in cache
+                this.saveResumesToCache();
+
+                this.resumesAreFetched = true;
+            } catch (error) {
+                console.error('Failed to fetch resumes:', error);
+            }
+        },
+        async updateResumeToApi(resumeIndex: number) {
+            try {
+                if (!this.resumesAreFetched) {
+                    console.warn("Resumes are not fetched yet. Cannot update to API.");
+                    return;
+                }
+                if (resumeIndex < 0 || resumeIndex >= this.resumes.length) {
+                    console.warn("Invalid resume index. Cannot update to API.");
+                    return;
+                }
+
+                const resumeToUpdate = this.resumes[resumeIndex];
+                const { data: updatedResume, error } = await httpApi<null>(route("resumes.update", { resume: resumeToUpdate.id }), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+                        'Accept': 'application/json'
+                    },
+                    body: JSON.stringify(resumeToUpdate),
+                });
+                if (error || !updatedResume) {
+                    console.error('Failed to update resumes:', error);
+                    return;
+                }
+            } catch (error) {
+                console.error('Failed to update resumes:', error);
+            }
+        },
+        async updateCurrentResumeToApi() {
+            await this.updateResumeToApi(this.currentResumeIndex);
+        },
+        async saveResumesToCache() {
+            localStorage.resumes = JSON.stringify(this.resumes);
+        },
+        setResumes(resumes: Array<Resume>) {
+            this.resumes = resumes;
+        },
+        addResume(resume: Resume) {
+            this.resumes.push(resume);
+            this.currentResumeIndex = this.resumes.length - 1;
+        },
+        removeResume(index: number) {
+            if (index < 0 || index >= this.resumes.length) return;
+
+            this.resumes.splice(index, 1);
+            if (this.currentResumeIndex >= this.resumes.length) {
+                this.currentResumeIndex = this.resumes.length - 1;
+            }
+        },
+        removeResumeById(id: number) {
+            const index = this.resumes.findIndex(resume => resume.id === id);
+            if (index === -1) return;
+            this.removeResume(index);
+        },
+        setCurrentResume(index: number) {
+            if (index < 0 || index >= this.resumes.length) return;
+            this.currentResumeIndex = index;
+        },
+        setCurrentResumeById(id: number) {
+            const index = this.resumes.findIndex(resume => resume.id === id);
+            if (index === -1) return;
+            this.setCurrentResume(index);
+        },
+        setAndUpdateCurrentResume(resume: Resume) {
+            this.setCurrentResumeById(resume.id);
+            this.updateCurrentResume(resume);
+        },
+        setAndUpdateCurrentResumeWhenFetched(resume: Resume) {
+            watch(() => this.resumesAreFetched, (newVal) => {
+                if (newVal === true) {
+                    this.setAndUpdateCurrentResume(resume);
+                }
+            });
+        },
+        updateCurrentResume(updatedResume: Resume) {
+            if (this.currentResumeIndex < 0 || this.currentResumeIndex >= this.resumes.length) return;
+            set(this.resumes, this.currentResumeIndex, updatedResume);
+            this.saveResumesToCache();
+        },
+        setCurrentResumeName(name: string) {
+            if (this.currentResumeIndex < 0 || this.currentResumeIndex >= this.resumes.length) return;
+            this.resumes[this.currentResumeIndex].name = name;
+            this.saveResumesToCache();
+        },
+
+        /* === RESUME COMPONENT PLACEMENTS === */
+        hasComponentsPlacements(): ComputedRef<boolean> {
+            return computed(() => {
+                const currentResume = this.currentResume;
+                return currentResume !== null && (currentResume.value?.components_placements?.length ?? 0) > 0;
+            });
+        },
+        async updateCurrentResumePlacementsToApi(index: number) {
+            // resume-component-placements.update
+            try {
+                if (!this.hasCurrentResume.value) {
+                    console.warn("No current resume selected. Cannot update placements to API.");
+                    return;
+                }
+                const currentResume = this.currentResume.value;
+                if (!currentResume) {
+                    console.warn("Current resume is null. Cannot update placements to API.");
+                    return;
+                }
+
+                const componentPlacements = currentResume.components_placements;
+                if (!componentPlacements) {
+                    console.warn("Current resume has no components placements. Cannot update placements to API.");
+                    return;
+                }
+
+                const componentPlacement = componentPlacements[index];
+                if (!componentPlacement) {
+                    console.warn("Invalid component placement index. Cannot update placements to API.");
+                    return;
+                }
+                console.debug("Updating component placement:", componentPlacement);
+
+                const { data: updatedPlacement, error } = await httpApi<ResumeComponentPlacement>(route("resume-component-placements.update", componentPlacement.id), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+                        'Accept': 'application/json'
+                    },
+                    body: JSON.stringify(componentPlacement),
+                });
+                if (error || !updatedPlacement) {
+                    console.error('Failed to update resume placements:', error);
+                    return;
+                }
+
+                // Update the local state with the updated placement
+                this.modifyResumePlacements(index, updatedPlacement);
+                this.saveResumesToCache();
+            } catch (error) {
+                console.error('Failed to update resume placements:', error);
+            }
+        },
+        setSelectedResumePlacement(index: number) {
+            const currentResume = this.currentResume;
+            if (!this.hasCurrentResume.value || !currentResume.value?.components_placements) {
+                this.selectedResumePlacementIndex = -1;
+                return;
+            }
+            if (index < 0 || index >= currentResume.value.components_placements.length) {
+                this.selectedResumePlacementIndex = -1;
+                return;
+            }
+            this.selectedResumePlacementIndex = index;
+        },
+        setSelectedResumePlacementById(id: number) {
+            if (!this.hasCurrentResume.value || !this.currentResume.value?.components_placements) return;
+            const resumePlacementIndex = this.currentResume.value?.components_placements.findIndex(placement => placement.id === id) ?? -1;
+            this.setSelectedResumePlacement(resumePlacementIndex);
+        },
+        modifyResumePlacements(index:number, modifiedPlacement: ResumeComponentPlacement) {
+            if (!this.hasCurrentResume.value || !this.currentResume.value?.components_placements) return;
+            const currentResume = this.currentResume.value;
+            set(currentResume.components_placements!, index, modifiedPlacement);
+        },
+        modifyCurrentSelectedResumePlacement(updatedPlacement: ResumeComponentPlacement) {
+            if (!this.hasCurrentSelectedResumePlacement.value) return;
+            this.modifyResumePlacements(this.selectedResumePlacementIndex, updatedPlacement);
+        },
+        swapComponentsPlacementsOrder(indexA: number, indexB: number) {
+            if (!this.hasCurrentResume.value || !this.currentResume.value?.components_placements) return;
+            const currentResume = this.currentResume.value;
+            const placements = currentResume.components_placements!;
+
+            if (indexA < 0 || indexA >= placements.length || indexB < 0 || indexB >= placements.length) return;
+
+            // Swap the order values
+            const tempOrder = placements[indexA].order;
+            placements[indexA].order = placements[indexB].order;
+            placements[indexB].order = tempOrder;
+
+            // Swap the placements in the array
+            [placements[indexA], placements[indexB]] = [placements[indexB], placements[indexA]];
+
+            // Update the components placements
+            this.updateCurrentResumePlacementsToApi(indexA);
+            this.updateCurrentResumePlacementsToApi(indexB);
+        },
+        async unlinkComponentPlacement(index: number) {
+            if (!this.hasComponentsPlacements) return;
+            const currentResume = this.currentResume.value!;
+            if (index < 0 || index >= currentResume.components_placements!.length) return;
+
+            // Call the 'resume-component-placements.unlink' API endpoint
+            // It will return the new component_data that need to be set to the placement
+            const placementToUnlink = currentResume.components_placements![index];
+            try {
+                const { data: newComponentData, error } = await httpApi<ResumeComponentData>(route("resume-component-placements.unlink", placementToUnlink.id), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+                        'Accept': 'application/json'
+                    },
+                });
+                if (error || !newComponentData) {
+                    console.error('Failed to unlink resume placement:', error);
+                    return;
+                }
+
+                const updatedPlacement = { ...placementToUnlink, component_data: newComponentData };
+
+                // Update the local state with the updated placement
+                this.modifyResumePlacements(index, updatedPlacement);
+                this.saveResumesToCache();
+            } catch (error) {
+                console.error('Failed to unlink resume placement:', error);
+            }
+        },
+        async deleteComponentPlacement(index: number) {
+            if (!this.hasComponentsPlacements) return;
+            const currentResume = this.currentResume.value!;
+            if (index < 0 || index >= currentResume.components_placements!.length) return;
+
+            const placementToDelete = currentResume.components_placements![index];
+            try {
+                const { error } = await httpApi<null>(route("resume-component-placements.destroy", placementToDelete.id), {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+                        'Accept': 'application/json'
+                    },
+                });
+                if (error) {
+                    console.error('Failed to delete resume placement:', error);
+                    return;
+                }
+
+                // Remove the placement from the local state
+                currentResume.components_placements!.splice(index, 1);
+                this.saveResumesToCache();
+
+                // Clear selected placement if it was the deleted one
+                if (this.selectedResumePlacementIndex === index) {
+                    this.clearSelectedResumePlacement();
+                }
+            } catch (error) {
+                console.error('Failed to delete resume placement:', error);
+            }
+        },
+        clearSelectedResumePlacement() {
+            this.selectedResumePlacementIndex = -1;
+        },
+
+    },
+});
+
+// const useCurrentResumeStore = defineStore('currentResume', {
+//     state: () => ({
+//         currentResume: null as Resume | null,
+//     }),
+//     getters: {
+//         hasCurrentResume: (state) => computed(() => state.currentResume !== null),
+//         currentResumeName: (state) => computed(() => state.currentResume?.name ?? 'Sans titre'),
+//     },
+//     actions: {
+//         setCurrentResume(resume: Resume) {
+//             this.currentResume = resume;
+//         },
+//         setResumeName(name: string) {
+//             if (this.currentResume) {
+//                 this.currentResume.name = name;
+//             }
+//         }
+//     },
+// });
+
+// const useSelectedResumePlacementStore = defineStore('selectedResumePlacement', {
+//     state: () => ({
+//         selectedResumePlacement: null as ResumeComponentPlacement | null,
+//     }),
+//     actions: {
+//         setSelectedResumePlacement(placement: ResumeComponentPlacement | null) {
+//             this.selectedResumePlacement = placement;
+//         },
+//     },
+// });
+
+export { useResumesStore };

resources/js/stores/ui.ts

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+const useShowComponentSelectionStore = defineStore('showComponentSelection', {
+    state: () => ({
+        showComponentSelection: false as boolean,
+    }),
+    actions: {
+        setShowComponentSelection(show: boolean) {
+            this.showComponentSelection = show;
+        },
+    },
+});
+
+export { useShowComponentSelectionStore };