Models refactor + Basic functionnalities

2025-08-26 12:12:02 +02:00
parent 715d2a884a
commit 55a52086c1
49 changed files with 1074 additions and 269 deletions
--- a/resources/js/components/resume/ResumeComponentEdit.vue
+++ b/resources/js/components/resume/ResumeComponentEdit.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Resume, 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';
+
+const SEND_CHANGED_DATA_DELAY = 500;
+
+const props = defineProps<{
+    resume: Resume
+    selectedComponent: ResumeComponentPlacement | null
+}>();
+
+const emit = defineEmits(['selected-component-change']);
+
+let delayedSendTimeout: ReturnType<typeof setTimeout> | null = null
+async function sendChangedData(newData: ResumeInputData[]) {
+    const newSelectedComponent = {
+        ...props.selectedComponent,
+        component_data: {
+            ...props.selectedComponent?.component_data,
+            input_data: newData
+        }
+    };
+
+    let data, error;
+
+    if (delayedSendTimeout) {
+        clearTimeout(delayedSendTimeout);
+    }
+    delayedSendTimeout = setTimeout(async () => {
+        const { data, error } = await httpApi(route('resume-component-placements.update', newSelectedComponent.id), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify({ ...newSelectedComponent, _method: 'PUT' })
+        }, {immediate: true});
+        // Handle error
+        if (error) {
+            console.error('Failed to update component placement:', error, data);
+            return;
+        }
+    }, SEND_CHANGED_DATA_DELAY);
+
+
+    // Handle error
+    if (error) {
+        console.error('Failed to update component placement:', error, data);
+        return;
+    }
+
+    emit('selected-component-change', 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>
+        <SidebarGroup class="w-full p-0">
+            <SidebarGroupLabel>{{ props.selectedComponent?.component_data?.component?.name }}</SidebarGroupLabel>
+            <ResumeComponentEditForm
+                v-if="props.selectedComponent?.component_data?.input_data"
+                :data="props.selectedComponent?.component_data?.input_data!"
+                @data-changed="sendChangedData($event)"
+            />
+            <p v-else class="text-destructive">No component input data : {{ props.selectedComponent?.component_data }}</p>
+        </SidebarGroup>
+    </div>
+</template>