feat : ajout de la clôture de contrat et de la création de contrat
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-4xl font-bold text-primary-500">{{ employee.firstName }} {{ employee.lastName }}</h1>
|
||||
<div class="text-right">
|
||||
<p class="font-bold text-[20px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employee.contract?.weeklyHours ?? '-' }} heures</p>
|
||||
<p class="font-bold text-[20px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employeeContractWorkLabel }}</p>
|
||||
<p class="text-[18px]">{{ employee.site?.name ?? '-' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,97 +53,86 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section v-if="activeTab === 'contract'" class="mt-8">
|
||||
<div class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
|
||||
<div class="grid grid-cols-4 border-b border-neutral-200 bg-neutral-50 px-6 py-3 text-md font-semibold text-neutral-700">
|
||||
<p>Contrat</p>
|
||||
<p>Heures</p>
|
||||
<p>Date de début</p>
|
||||
<p>Date de fin</p>
|
||||
</div>
|
||||
<div v-if="contractHistory.length === 0" class="px-6 py-4 text-md text-neutral-600">
|
||||
Aucun historique de contrat.
|
||||
</div>
|
||||
<div v-else>
|
||||
<div
|
||||
v-for="item in contractHistory"
|
||||
:key="`${item.startDate}-${item.endDate ?? 'open'}-${item.contractId ?? item.contractName}`"
|
||||
class="grid grid-cols-4 border-b border-neutral-100 px-6 py-3 text-md text-primary-500 last:border-b-0"
|
||||
>
|
||||
<p>{{ contractNatureLabel(item.contractNature) }}</p>
|
||||
<p>{{ contractHistoryLabel(item) }}</p>
|
||||
<p>{{ formatDate(item.startDate) }}</p>
|
||||
<p>{{ formatDate(item.endDate) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center mt-8 gap-12">
|
||||
<button class="bg-blue-500 text-white rounded-md w-[200px]">Modifier</button>
|
||||
<button class="bg-primary-500 px-4 py-2 text-white text-md rounded-md flex justify-center items-center gap-2 w-[200px]">
|
||||
<Icon name="mdi:plus-thick" size="16" />
|
||||
Ajouter
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section v-else-if="activeTab === 'leave'" class="mt-8">
|
||||
<!-- Bloc Congé -->
|
||||
</section>
|
||||
<section v-else class="mt-8">
|
||||
<!-- Bloc RTT -->
|
||||
</section>
|
||||
<EmployeesContractTab
|
||||
v-if="activeTab === 'contract'"
|
||||
:contract-history="contractHistory"
|
||||
:contract-nature-label="contractNatureLabel"
|
||||
:contract-history-label="contractHistoryLabel"
|
||||
:format-date="formatDate"
|
||||
:is-contract-submitting="isContractSubmitting"
|
||||
:can-close-current-contract="canCloseCurrentContract"
|
||||
:is-create-contract-submitting="isCreateContractSubmitting"
|
||||
:contracts="contracts"
|
||||
:can-create-contract="canCreateContract"
|
||||
:is-contract-drawer-open="isContractDrawerOpen"
|
||||
:contract-form="contractForm"
|
||||
:readonly-field-class="readonlyFieldClass"
|
||||
:close-contract-worked-hours-label="closeContractWorkedHoursLabel"
|
||||
:contract-end-date-field-class="contractEndDateFieldClass"
|
||||
:show-contract-end-date-error="showContractEndDateError"
|
||||
:is-contract-end-date-valid="isContractEndDateValid"
|
||||
:is-create-contract-drawer-open="isCreateContractDrawerOpen"
|
||||
:create-contract-form="createContractForm"
|
||||
:create-contract-nature-field-class="createContractNatureFieldClass"
|
||||
:create-contract-field-class="createContractFieldClass"
|
||||
:create-contract-start-date-field-class="createContractStartDateFieldClass"
|
||||
:requires-create-contract-end-date="requiresCreateContractEndDate"
|
||||
:create-contract-end-date-field-class="createContractEndDateFieldClass"
|
||||
:is-create-contract-form-valid="isCreateContractFormValid"
|
||||
:on-open-close-contract-drawer="openCloseContractDrawer"
|
||||
:on-open-create-contract-drawer="openCreateContractDrawer"
|
||||
:on-update-contract-drawer-open="setContractDrawerOpen"
|
||||
:on-update-create-contract-drawer-open="setCreateContractDrawerOpen"
|
||||
:on-submit-close-contract="submitContractUpdate"
|
||||
:on-submit-create-contract="submitCreateContract"
|
||||
/>
|
||||
<EmployeesLeaveTab v-else-if="activeTab === 'leave'" />
|
||||
<EmployeesRttTab v-else />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type {ContractHistoryItem, Employee} from '~/services/dto/employee'
|
||||
import {getEmployee} from '~/services/employees'
|
||||
|
||||
const route = useRoute()
|
||||
const employee = ref<Employee | null>(null)
|
||||
const isLoading = ref(false)
|
||||
const activeTab = ref<'contract' | 'leave' | 'rtt'>('contract')
|
||||
const {
|
||||
employee,
|
||||
isLoading,
|
||||
activeTab,
|
||||
contracts,
|
||||
contractHistory,
|
||||
employeeContractWorkLabel,
|
||||
contractForm,
|
||||
createContractForm,
|
||||
isContractDrawerOpen,
|
||||
isContractSubmitting,
|
||||
isCreateContractDrawerOpen,
|
||||
isCreateContractSubmitting,
|
||||
canCloseCurrentContract,
|
||||
canCreateContract,
|
||||
readonlyFieldClass,
|
||||
closeContractWorkedHoursLabel,
|
||||
contractEndDateFieldClass,
|
||||
showContractEndDateError,
|
||||
isContractEndDateValid,
|
||||
createContractNatureFieldClass,
|
||||
createContractFieldClass,
|
||||
createContractStartDateFieldClass,
|
||||
requiresCreateContractEndDate,
|
||||
createContractEndDateFieldClass,
|
||||
isCreateContractFormValid,
|
||||
contractNatureLabel,
|
||||
contractHistoryLabel,
|
||||
formatDate,
|
||||
openCloseContractDrawer,
|
||||
openCreateContractDrawer,
|
||||
setContractDrawerOpen,
|
||||
setCreateContractDrawerOpen,
|
||||
submitContractUpdate,
|
||||
submitCreateContract
|
||||
} = useEmployeeDetailPage()
|
||||
|
||||
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'
|
||||
}
|
||||
|
||||
const contractHistory = computed(() => employee.value?.contractHistory ?? [])
|
||||
|
||||
const formatDate = (value?: string | null) => {
|
||||
if (!value) return 'En cours'
|
||||
const [year, month, day] = value.split('-')
|
||||
if (!year || !month || !day) return value
|
||||
return `${day}/${month}/${year}`
|
||||
}
|
||||
|
||||
const contractHistoryLabel = (item: ContractHistoryItem) => {
|
||||
if (item.weeklyHours !== null && item.weeklyHours !== undefined) {
|
||||
return `${item.weeklyHours} heures`
|
||||
}
|
||||
return item.contractName ?? '-'
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user