Models refactor + Basic functionnalities

resources/js/components/resume/ResumeComponent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ResumeComponentPlacement } from '@/types/resume';
+import { defineAsyncComponent } from 'vue';
+
+const props = defineProps<{
+    componentPlacement: ResumeComponentPlacement | null
+}>();
+
+const componentFile = defineAsyncComponent(
+    () => import(
+        /* @vite-ignore */
+        `./resumeComponents/${props.componentPlacement?.component_data?.component?.vue_component_name}`
+    )
+);
+
+</script>
+
+<template>
+    <component :is="componentFile" :componentPlacement="props.componentPlacement" />
+</template>

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>

resources/js/components/resume/ResumeComponentEditForm.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ResumeInputData } from '@/types/resume';
+import ResumeComponentEditFormInput from './ResumeComponentEditFormInput.vue';
+
+const props = defineProps<{
+    data: ResumeInputData[]
+}>();
+
+const emit = defineEmits(['data-changed']);
+
+function handleDataChanged(updatedData: ResumeInputData) {
+    const index = props.data.findIndex(input => input.id === updatedData.id);
+    const dataCopy = [...props.data];
+    if (index !== -1) {
+        dataCopy[index] = updatedData;
+        emit('data-changed', dataCopy);
+    }
+}
+</script>
+
+<template>
+    <form
+        @submit.prevent="emit('data-changed', props.data)"
+        class="w-full space-y-4"
+    >
+        <ResumeComponentEditFormInput v-for="input in props.data" :model="input" v-bind:key="input.id" @data-changed="handleDataChanged" />
+    </form>
+</template>

resources/js/components/resume/ResumeComponentEditFormInput.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ResumeInputData } from '@/types/resume';
+import { defineAsyncComponent } from 'vue';
+import Label from '../ui/label/Label.vue';
+
+const props = defineProps<{
+    model: ResumeInputData
+}>();
+
+const componentFile = defineAsyncComponent(
+    () => import(
+        /* @vite-ignore */
+        `./resumeComponentsFormInput/${props.model.component_input.data_type.vue_component_name}`
+    )
+);
+
+const emit = defineEmits(['data-changed']);
+</script>
+
+<template>
+    <div class="w-full">
+        <Label>{{ props.model.component_input?.label }}</Label>
+        <component
+            class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
+                dark:bg-primary/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-primary px-3 py-1 text-base shadow-xs
+                transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-primary file:text-sm
+                file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
+                focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+                aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+            :name="props.model.component_input?.name"
+            :is="componentFile"
+            :model="props.model"
+            @data-changed="emit('data-changed', $event)"
+        />
+    </div>
+</template>

resources/js/components/resume/ResumeComponentsList.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Resume, ResumeComponentPlacement } from '@/types/resume';
+import { computed } from 'vue';
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { Link } from '@inertiajs/vue3';
+
+const props = defineProps<{
+    resume: Resume;
+    selectedComponent: ResumeComponentPlacement | null;
+}>();
+
+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) : [];
+});
+
+const emit = defineEmits(['selected-component-change']);
+</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>
+                </SidebarMenuButton>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    </SidebarGroup>
+</template>

resources/js/components/resume/ResumeEditPanel.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Resume, ResumeComponentPlacement } from '@/types/resume';
+import ResumeComponentEdit from './ResumeComponentEdit.vue';
+import ResumeComponentsList from './ResumeComponentsList.vue';
+
+const props = defineProps<{
+    resume: Resume
+    selectedComponent: ResumeComponentPlacement | null
+}>();
+
+const emit = defineEmits(['selected-component-change']);
+</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)" />
+        </Transition>
+    </div>
+</template>
+
+<style lang="css" scoped>
+    .v-enter-active,
+    .v-leave-active {
+    transition: opacity 0.3s ease;
+    }
+
+    .v-enter-from,
+    .v-leave-to {
+    opacity: 0;
+    }
+</style>

resources/js/components/resume/ResumePreviewPanel.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Resume, ResumeComponentPlacement } from '@/types/resume';
+import ResumeComponent from './ResumeComponent.vue';
+
+const props = defineProps<{
+    resume: Resume,
+    selectedComponent: ResumeComponentPlacement | null
+}>();
+
+const emit = defineEmits(['selected-component-change']);
+</script>
+
+<template>
+    <div class="flex-2 w-full p-6">
+        <div id="resume" class="aspect-[0.707317073] w-full max-w-[84.1cm] bg-white text-black">
+            <ResumeComponent v-for="componentPlacement in resume.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" @click="emit('selected-component-change', componentPlacement)" />
+        </div>
+    </div>
+</template>

resources/js/components/resume/resumeComponents/email.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ResumeComponentPlacement } from '@/types/resume';
+
+const props = defineProps<{
+    componentPlacement: ResumeComponentPlacement | null
+}>();
+
+</script>
+
+<template>
+    <div class="w-full">
+        I'm an email component : {{ props.componentPlacement?.component_data?.input_data[0].value }}
+
+    </div>
+</template>

resources/js/components/resume/resumeComponents/name.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ResumeComponentPlacement } from '@/types/resume';
+
+const props = defineProps<{
+    componentPlacement: ResumeComponentPlacement | null
+}>();
+
+</script>
+
+<template>
+    <div class="w-full">
+        I'm an name component : {{ props.componentPlacement?.component_data?.input_data[0].value }}
+
+    </div>
+</template>

resources/js/components/resume/resumeComponentsFormInput/emailInput.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ResumeInputData } from '@/types/resume';
+
+const props = defineProps<{
+    model: ResumeInputData
+}>();
+
+const emit = defineEmits(['data-changed']);
+
+console.log('model value ', props.model);
+</script>
+
+<template>
+    <input
+        type="email"
+        :value="props.model.value"
+        @input="emit('data-changed', { ...props.model, value: $event.target.value })"
+    />
+</template>

resources/js/components/resume/resumeComponentsFormInput/textInput.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ResumeInputData } from '@/types/resume';
+
+const props = defineProps<{
+    model: ResumeInputData
+}>();
+
+const emit = defineEmits(['data-changed']);
+
+console.log('model value ', props.model);
+</script>
+
+<template>
+    <input
+        type="text"
+        :value="props.model.value"
+        @input="emit('data-changed', { ...props.model, value: $event.target.value })"
+    />
+</template>