34 lines
1.4 KiB
Vue
34 lines
1.4 KiB
Vue
<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>
|