Models refactor + Basic functionnalities

resources/js/components/resume/ResumeComponentsList.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Resume, ResumeComponentPlacement } from '@/types/resume';
+import { computed } from 'vue';
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { Link } from '@inertiajs/vue3';
+
+const props = defineProps<{
+    resume: Resume;
+    selectedComponent: ResumeComponentPlacement | null;
+}>();
+
+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) : [];
+});
+
+const emit = defineEmits(['selected-component-change']);
+</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>
+                </SidebarMenuButton>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    </SidebarGroup>
+</template>