86 lines
3.1 KiB
Vue
86 lines
3.1 KiB
Vue
<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>
|