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

resources/js/components/resume/ResumeEditPanel.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
-import { Resume, ResumeComponentPlacement } from '@/types/resume';
 import ResumeComponentEdit from './ResumeComponentEdit.vue';
 import ResumeComponentsList from './ResumeComponentsList.vue';
+import ComponentsSelectionList from './ComponentsSelectionList.vue';
+import { computed } from 'vue';
+import { useResumesStore } from '@/stores/resume';
+import { useShowComponentSelectionStore } from '@/stores/ui';
 
-const props = defineProps<{
-    resume: Resume
-    selectedComponent: ResumeComponentPlacement | null
-}>();
+const resumeStore = useResumesStore();
+const selectedComponent = resumeStore.currentSelectedResumePlacement;
 
-const emit = defineEmits(['selected-component-change']);
+const showComponentSelectionStore = useShowComponentSelectionStore();
+const showComponentSelection = computed<boolean>(() => showComponentSelectionStore.showComponentSelection);
 </script>
 
 <template>
     <div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto max-w-[25%] bg-accent relative">
         <Transition mode="out-in" appear>
-            <ResumeComponentEdit v-if="selectedComponent != null" :resume="props.resume" :selectedComponent="props.selectedComponent" @selected-component-change="emit('selected-component-change', $event)" :key="selectedComponent ? selectedComponent.id : 'form'" />
-            <ResumeComponentsList v-else :resume="props.resume" :selectedComponent="props.selectedComponent" @selected-component-change="emit('selected-component-change', $event)" />
+            <ResumeComponentEdit v-if="selectedComponent != null" :key="selectedComponent ? selectedComponent.id : 'form'" />
+            <ComponentsSelectionList v-else-if="showComponentSelection" />
+            <ResumeComponentsList v-else />
         </Transition>
     </div>
 </template>