72 lines
2.4 KiB
Vue
72 lines
2.4 KiB
Vue
<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>
|