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

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>