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

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>

resources/js/components/resume/ComponentsSelectionListItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ResumeComponent } from '@/types/resume';
+import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+
+
+const props = defineProps<{
+    component: ResumeComponent;
+}>();
+</script>
+
+<template>
+    <SidebarMenuItem>
+        <SidebarMenuButton as-child class="cursor-pointer" :tooltip="props.component.name">
+            <div class="flex w-full flex-nowrap justify-between items-center">
+                <span>{{ props.component.name }}</span>
+            </div>
+        </SidebarMenuButton>
+    </SidebarMenuItem>
+</template>

resources/js/components/resume/PrintResumeButton.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import { Resume } from '@/types/resume';
 import Button from '../ui/button/Button.vue';
 import { exportToPdf } from '@/lib/pdfExport';
 import { FileText } from 'lucide-vue-next';
+import { useResumesStore } from '@/stores/resume';
 
-const props = defineProps<{
-    resume: Resume,
-}>();
+const resumeStore = useResumesStore();
 
 function printResume() {
-    exportToPdf(document.getElementById('resume')!, (props.resume.name || 'Sans titre') + '.pdf');
+    exportToPdf(document.getElementById('resume')!, resumeStore.currentResumeName.value + '.pdf');
 }
 </script>
 

resources/js/components/resume/ResumeComponentEdit.vue

@@ -1,26 +1,23 @@
 <script setup lang="ts">
-import { Resume, ResumeComponentPlacement, ResumeInputData } from '@/types/resume';
+import { ResumeComponentPlacement, ResumeInputData } from '@/types/resume';
 import Button from '../ui/button/Button.vue';
 import { ChevronLeft } from 'lucide-vue-next';
 import { SidebarGroup, SidebarGroupLabel } from '@/components/ui/sidebar';
 import ResumeComponentEditForm from './ResumeComponentEditForm.vue';
 import { httpApi } from '@/lib/utils';
+import { useResumesStore } from '@/stores/resume';
 
 const SEND_CHANGED_DATA_DELAY = 500;
 
-const props = defineProps<{
-    resume: Resume
-    selectedComponent: ResumeComponentPlacement | null
-}>();
-
-const emit = defineEmits(['selected-component-change']);
+const resumeStore = useResumesStore();
+const selectedComponent = resumeStore.currentSelectedResumePlacement;
 
 let delayedSendTimeout: ReturnType<typeof setTimeout> | null = null
 async function sendChangedData(newData: ResumeInputData[]) {
-    const newSelectedComponent = {
-        ...props.selectedComponent,
+    const newSelectedComponent: ResumeComponentPlacement = {
+        ...selectedComponent.value,
         component_data: {
-            ...props.selectedComponent?.component_data,
+            ...selectedComponent.value?.component_data,
             input_data: newData
         }
     };
@@ -31,7 +28,7 @@ async function sendChangedData(newData: ResumeInputData[]) {
         clearTimeout(delayedSendTimeout);
     }
     delayedSendTimeout = setTimeout(async () => {
-        const { data, error } = await httpApi(route('resume-component-placements.update', newSelectedComponent.id), {
+        const { data, error } = await httpApi(route('resume-component-placements.update', newSelectedComponent), {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -54,21 +51,21 @@ async function sendChangedData(newData: ResumeInputData[]) {
         return;
     }
 
-    emit('selected-component-change', newSelectedComponent);
+    resumeStore.modifyCurrentSelectedResumePlacement(newSelectedComponent!);
 }
 </script>
 
 <template>
     <div class="h-full w-full">
-        <Button @click="emit('selected-component-change', null)" variant="outline" size="icon" class="cursor-pointer"><ChevronLeft class="w-4 h-4" /></Button>
+        <Button @click="resumeStore.clearSelectedResumePlacement();" variant="outline" size="icon" class="cursor-pointer"><ChevronLeft class="w-4 h-4" /></Button>
         <SidebarGroup class="w-full p-0">
-            <SidebarGroupLabel>{{ props.selectedComponent?.component_data?.component?.name }}</SidebarGroupLabel>
+            <SidebarGroupLabel>{{ selectedComponent?.component_data?.component?.name }}</SidebarGroupLabel>
             <ResumeComponentEditForm
-                v-if="props.selectedComponent?.component_data?.input_data"
-                :data="props.selectedComponent?.component_data?.input_data!"
+                v-if="selectedComponent?.component_data?.input_data"
+                :data="selectedComponent?.component_data?.input_data!"
                 @data-changed="sendChangedData($event)"
             />
-            <p v-else class="text-destructive">No component input data : {{ props.selectedComponent?.component_data }}</p>
+            <p v-else class="text-destructive">No component input data : {{ selectedComponent?.component_data }}</p>
         </SidebarGroup>
     </div>
 </template>

resources/js/components/resume/ResumeComponentsList.vue

@@ -1,31 +1,68 @@
 <script setup lang="ts">
-import { Resume, ResumeComponentPlacement } from '@/types/resume';
+import { ResumeComponentPlacement } from '@/types/resume';
 import { computed } from 'vue';
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { Link } from '@inertiajs/vue3';
+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 props = defineProps<{
-    resume: Resume;
-    selectedComponent: ResumeComponentPlacement | null;
-}>();
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
+
+const showComponentSelectionStore = useShowComponentSelectionStore();
 
 const orderedComponentsPlacements = computed(() => {
-    console.log('Ordered Components Placements:', props.resume.components_placements);
-    return props.resume.components_placements ? [...props.resume.components_placements].sort((a, b) => a.order - b.order) : [];
+    if (!resume.value) return [];
+    return resume.value.components_placements ? [...resume.value.components_placements].sort((a, b) => a.order - b.order) : [];
 });
 
-const emit = defineEmits(['selected-component-change']);
+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>
-            <SidebarMenuItem v-for="component in orderedComponentsPlacements" :key="component.id">
-                <SidebarMenuButton as-child class="cursor-pointer" :tooltip="component.component_data?.component?.name">
-                    <div @click="emit('selected-component-change', component)">
-                        <span>{{ component.component_data?.component?.name }}</span>
-                    </div>
+            <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>

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>

resources/js/components/resume/ResumeComponentsListItemToolButton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import Icon from '@/components/Icon.vue';
+import Button from '@/components/ui/button/Button.vue';
+
+const props = defineProps<{
+    logoName: string
+}>();
+</script>
+
+<template>
+    <Button variant="secondary" size="sm" class="px-1 gap-0 cursor-pointer">
+        <Icon :name="props.logoName" v-bind="$attrs" :size="20" />
+    </Button>
+</template>

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>

resources/js/components/resume/ResumeNameInput.vue

@@ -1,44 +1,40 @@
 <script setup lang="ts">
-import { ref, Transition } from 'vue';
+import { ref } from 'vue';
 import { Save } from 'lucide-vue-next';
 import Button from '../ui/button/Button.vue';
 import Input from '../ui/input/Input.vue';
-import { Form } from '@inertiajs/vue3';
 import { httpApi } from '@/lib/utils';
-import { Resume } from '@/types/resume';
+import { useResumesStore } from '@/stores/resume';
 
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
 
-const props = defineProps<{
-    resume: Resume,
-    resumeTitle: string,
-}>();
-
-const emit = defineEmits(['update:resume-title']);
-
-const originalTitle = ref<string>(props.resumeTitle);
+const resumeTitle = resumeStore.currentResumeName;
+const originalTitle = ref<string>(resumeTitle.value);
 const titleChanged = ref<boolean>(false);
 
 function saveTitle() {
-    const resume = { ...props.resume, name: props.resumeTitle };
-    resume['components_placements'] = null;
+    const resumeCopy = { ...resume.value, name: resumeTitle.value };
+    resumeCopy['components_placements'] = null;
 
-    httpApi(route('resumes.update', props.resume), {
+    httpApi(route('resumes.update', resume.value), {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
             'Accept': 'application/json'
         },
-        body: JSON.stringify({ ...resume, _method: 'PUT' })
+        body: JSON.stringify({ ...resumeCopy, _method: 'PUT' })
     }).then(() => {
-        location.reload();
+        originalTitle.value = resumeTitle.value;
+        titleChanged.value = false;
     });
 }
 </script>
 
 <template>
     <div class="flex gap-1" >
-        <Input type="text" v-model="props.resumeTitle" placeholder="Sans titre" class="border p-2 rounded" @input="(event) => {emit('update:resume-title', event.target.value); titleChanged = (event.target.value !== originalTitle)}" />
+        <Input type="text" v-model="resumeTitle" placeholder="Sans titre" class="border p-2 rounded" @input="(event) => {resumeStore.setCurrentResumeName(event.target.value); titleChanged = (event.target.value !== originalTitle)}" />
         <Transition>
             <Button v-if="titleChanged" variant="outline" class="cursor-pointer transition" @click="saveTitle"><Save /></Button>
         </Transition>

resources/js/components/resume/ResumePreviewPanel.vue

@@ -1,25 +1,35 @@
 <script setup lang="ts">
-import { Resume, ResumeComponentPlacement } from '@/types/resume';
 import ResumeComponent from './ResumeComponent.vue';
 import PrintResumeButton from './PrintResumeButton.vue';
 import ResumeNameInput from './ResumeNameInput.vue';
+import { useResumesStore } from '@/stores/resume';
 
-const props = defineProps<{
-    resume: Resume,
-    selectedComponent: ResumeComponentPlacement | null
-}>();
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
+const selectedComponent = resumeStore.currentSelectedResumePlacement;
 
-const emit = defineEmits(['selected-component-change', 'update:resume-title']);
 </script>
 
 <template>
     <div class="flex-2 flex flex-col gap-3 w-full">
         <div id="tools" class="w-full flex gap-3 justify-between">
-            <ResumeNameInput :resume="props.resume" :resumeTitle="props.resume.name" @update:resume-title="emit('update:resume-title', $event)" />
-            <PrintResumeButton :resume="props.resume" />
+            <ResumeNameInput />
+            <PrintResumeButton />
         </div>
-        <div id="resume" class="aspect-[0.707317073] w-full max-w-[84.1cm] bg-white text-black">
-            <ResumeComponent v-for="componentPlacement in props.resume.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" @click="emit('selected-component-change', componentPlacement)" />
+        <div class="resume aspect-[0.707317073] w-full bg-white text-black">
+            <ResumeComponent v-for="componentPlacement in resume?.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" :active="componentPlacement.id === selectedComponent?.id" @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)" />
+        </div>
+        <div class="w-[210mm]" style="position: fixed; top:calc(-297mm - 5000px); container-type: inline-size; ">
+            <div id="resume" class="aspect-[0.707317073] w-full bg-white text-black" >
+                <ResumeComponent v-for="componentPlacement in resume?.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" :active="componentPlacement.id === selectedComponent?.id" @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)" />
+            </div>
         </div>
     </div>
 </template>
+
+<style scoped>
+.resume {
+    container-type: inline-size;
+    font-size: 1cqw;
+}
+</style>