71 lines
3.0 KiB
Vue
71 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { ResumeComponentPlacement } from '@/types/resume';
|
|
import { computed } from 'vue';
|
|
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
|
|
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 resumeStore = useResumesStore();
|
|
const resume = resumeStore.currentResume;
|
|
|
|
const showComponentSelectionStore = useShowComponentSelectionStore();
|
|
|
|
const orderedComponentsPlacements = computed(() => {
|
|
if (!resume.value) return [];
|
|
return resume.value.components_placements ? [...resume.value.components_placements].sort((a, b) => a.order - b.order) : [];
|
|
});
|
|
|
|
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>
|
|
<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>
|
|
</SidebarGroup>
|
|
</template>
|