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

resources/js/components/resume/ResumeComponentsListItem.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ResumeComponentPlacement } from '@/types/resume';
+import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import ResumeComponentsListItemToolButton from './ResumeComponentsListItemToolButton.vue';
+
+
+const props = defineProps<{
+    componentPlacement: ResumeComponentPlacement;
+}>();
+
+const emit = defineEmits<{
+    (e: 'movedUp', component: ResumeComponentPlacement): void;
+    (e: 'movedDown', component: ResumeComponentPlacement): void;
+    (e: 'unlinked', component: ResumeComponentPlacement): void;
+    (e: 'removed', component: ResumeComponentPlacement): void;
+}>();
+</script>
+
+<template>
+    <SidebarMenuItem>
+        <SidebarMenuButton as-child class="cursor-pointer" :tooltip="props.componentPlacement.component_data?.component!.name">
+            <div class="flex w-full flex-nowrap justify-between items-center">
+                <span>{{ props.componentPlacement.component_data?.component!.name }}</span>
+                <div class="sidebar-list-resume-item-tools flex gap-2">
+                    <ResumeComponentsListItemToolButton @click.stop="emit('movedUp', props.componentPlacement)" logo-name="ChevronUp" />
+                    <ResumeComponentsListItemToolButton @click.stop="emit('movedDown', props.componentPlacement)" logo-name="ChevronDown" />
+                    <ResumeComponentsListItemToolButton @click.stop="emit('unlinked', props.componentPlacement)" logo-name="Unlink" />
+                    <ResumeComponentsListItemToolButton @click.stop="emit('removed', props.componentPlacement)" logo-name="Trash2" class="text-red-500" />
+                </div>
+            </div>
+        </SidebarMenuButton>
+    </SidebarMenuItem>
+</template>