feat : modification de la page employé WIP + ajout d'une navbar

2026-03-02 09:50:09 +01:00
parent 107417a571
commit ea06059c0b
9 changed files with 375 additions and 85 deletions
@@ -0,0 +1,71 @@
+<template>
+    <div class="h-full overflow-auto">
+
+        <div v-if="isLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+            Chargement...
+        </div>
+
+        <div v-else-if="!employee"
+             class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+            Employé introuvable.
+        </div>
+
+        <div v-else>
+            <div class="flex items-center justify-between">
+                <h1 class="text-4xl font-bold text-primary-500">{{ employee.firstName }} {{ employee.lastName }}</h1>
+                <NuxtLink
+                    to="/employees"
+                    class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+                >
+                    Retour
+                </NuxtLink>
+            </div>
+
+            <div class="mt-6 rounded-lg border border-neutral-200 bg-white p-6">
+                <p class="text-xl font-semibold text-neutral-900">{{ employee.firstName }} {{ employee.lastName }}</p>
+                <p class="mt-2 text-md text-neutral-700">Site: {{ employee.site?.name ?? '-' }}</p>
+                <p class="text-md text-neutral-700">Type de contrat: {{
+                        contractNatureLabel(employee.currentContractNature)
+                    }}</p>
+                <p class="text-md text-neutral-700">Temps de travail: {{ employee.contract?.name ?? '-' }}</p>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {Employee} from '~/services/dto/employee'
+import {getEmployee} from '~/services/employees'
+
+const route = useRoute()
+const employee = ref<Employee | null>(null)
+const isLoading = ref(false)
+
+useHead(() => ({
+    title: employee.value
+        ? `${employee.value.firstName} ${employee.value.lastName}`
+        : 'Détail employé'
+}))
+
+const contractNatureLabel = (value?: 'CDI' | 'CDD' | 'INTERIM') => {
+    if (value === 'CDD') return 'CDD'
+    if (value === 'INTERIM') return 'Intérim'
+    return 'CDI'
+}
+
+onMounted(async () => {
+    const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
+    const employeeId = Number(idParam)
+    if (!Number.isInteger(employeeId) || employeeId <= 0) {
+        return
+    }
+
+    isLoading.value = true
+    try {
+        employee.value = await getEmployee(employeeId)
+    } finally {
+        isLoading.value = false
+    }
+})
+</script>