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

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>