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

2025-09-16 16:30:37 +02:00
parent f3ff6fd6ac
commit cb242e59ba
39 changed files with 1055 additions and 137 deletions
--- a/resources/js/components/resume/ComponentsSelectionList.vue
+++ b/resources/js/components/resume/ComponentsSelectionList.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { Resume, ResumeComponent, ResumeComponentPlacement } from '@/types/resume';
+import { ChevronLeft } from 'lucide-vue-next';
+import { onMounted, ref } from 'vue';
+import Button from '../ui/button/Button.vue';
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu } from '@/components/ui/sidebar';
+import { httpApi } from '@/lib/utils';
+import ComponentsSelectionListItem from './ComponentsSelectionListItem.vue';
+import { useShowComponentSelectionStore } from '@/stores/ui';
+import { useResumesStore } from '@/stores/resume';
+
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
+
+const showComponentSelectionStore = useShowComponentSelectionStore();
+
+const components = ref<ResumeComponent[]>([]);
+
+// Fetch the available components from the API or store
+function fetchAvailableComponents() {
+    httpApi<ResumeComponent[]>(route('resume-components.index'), {
+        method: 'GET',
+    }).then(response => {
+        if (!response) {
+            console.error('Failed to fetch components.');
+            return;
+        }
+        components.value = response.data;
+    });
+}
+
+onMounted(() => {
+    fetchAvailableComponents();
+});
+
+async function addNewComponentToResume(component: ResumeComponent) {
+    const newResume: Resume = { ...resume.value }; // Create a shallow copy of the current resume
+    let newComponentPlacement: ResumeComponentPlacement | null = null;
+
+    const { data, error } = await httpApi<ResumeComponentPlacement>(route('resume-component-placements.store'), {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+            'Accept': 'application/json'
+        },
+        body: JSON.stringify({
+            component_id: component.id,
+            resume_id: resume.value.id,
+            order: (resume.value.components_placements?.length ?? 0) + 1,
+        }),
+    });
+    if (error) {
+        console.error('Error creating component placement: ', error);
+        return;
+    }
+    newComponentPlacement = data!;
+
+    console.debug("New component placement created: ", newComponentPlacement);
+
+    newResume.components_placements!.push(newComponentPlacement!);
+
+    resumeStore.setAndUpdateCurrentResume(newResume);
+    resumeStore.setSelectedResumePlacementById(newComponentPlacement.id);
+    showComponentSelectionStore.setShowComponentSelection(false);
+}
+
+</script>
+
+<template>
+    <div class="h-full w-full">
+        <Button @click="showComponentSelectionStore.setShowComponentSelection(false);" variant="outline" size="icon" class="cursor-pointer"><ChevronLeft class="w-4 h-4" /></Button>
+        <SidebarGroup class="w-full p-0">
+            <SidebarGroupLabel>Composants disponibles</SidebarGroupLabel>
+            <SidebarMenu>
+                <ComponentsSelectionListItem
+                    v-for="component in components"
+                    :key="component.id"
+                    :component="component"
+                    @click="addNewComponentToResume(component)"
+                />
+            </SidebarMenu>
+        </SidebarGroup>
+    </div>
+</template>