feat : ajout d'un onglet formation

frontend/composables/useEmployeeDetailPage.ts

@@ -6,7 +6,7 @@ export const useEmployeeDetailPage = () => {
   const route = useRoute()
   const employee = ref<Employee | null>(null)
   const isLoading = ref(false)
-  const activeTab = ref<'contract' | 'leave' | 'rtt' | 'mileage' | 'bonus' | 'observation'>('contract')
+  const activeTab = ref<'contract' | 'leave' | 'rtt' | 'mileage' | 'formation' | 'bonus' | 'observation'>('contract')
 
   const showLeaveTab = computed(() => employee.value?.currentContractNature !== 'INTERIM')
   const showRttTab = computed(() => employee.value?.contract?.type !== CONTRACT_TYPES.FORFAIT)
@@ -39,6 +39,7 @@ export const useEmployeeDetailPage = () => {
       leave.resetLoaded()
       rtt.resetLoaded()
       mileage.resetLoaded()
+      formation.resetLoaded()
       bonus.resetLoaded()
       observation.resetLoaded()
 
@@ -48,6 +49,8 @@ export const useEmployeeDetailPage = () => {
         await rtt.loadRttData()
       } else if (activeTab.value === 'mileage') {
         await mileage.loadMileageData()
+      } else if (activeTab.value === 'formation') {
+        await formation.loadFormationData()
       } else if (activeTab.value === 'bonus') {
         await bonus.loadBonusData()
       } else if (activeTab.value === 'observation') {
@@ -62,6 +65,7 @@ export const useEmployeeDetailPage = () => {
   const leave = useEmployeeLeave(employee, loadEmployee)
   const rtt = useEmployeeRtt(employee, loadEmployee)
   const mileage = useEmployeeMileage(employee, loadEmployee)
+  const formation = useEmployeeFormation(employee, loadEmployee)
   const bonus = useEmployeeBonus(employee, loadEmployee)
   const observation = useEmployeeObservation(employee, loadEmployee)
 
@@ -72,6 +76,8 @@ export const useEmployeeDetailPage = () => {
       rtt.loadRttData()
     } else if (tab === 'mileage' && !mileage.mileageDataLoaded.value) {
       mileage.loadMileageData()
+    } else if (tab === 'formation' && !formation.formationDataLoaded.value) {
+      formation.loadFormationData()
     } else if (tab === 'bonus' && !bonus.bonusDataLoaded.value) {
       bonus.loadBonusData()
     } else if (tab === 'observation' && !observation.observationDataLoaded.value) {
@@ -95,6 +101,7 @@ export const useEmployeeDetailPage = () => {
     ...leave,
     ...rtt,
     ...mileage,
+    ...formation,
     ...bonus,
     ...observation
   }

frontend/composables/useEmployeeFormation.ts

@@ -0,0 +1,73 @@
+import type { Ref } from 'vue'
+import type { Formation } from '~/services/dto/formation'
+import type { Employee } from '~/services/dto/employee'
+import {
+  listFormations,
+  createFormation,
+  updateFormation,
+  deleteFormation,
+  uploadFormationJustificatif
+} from '~/services/formations'
+
+export const useEmployeeFormation = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const config = useRuntimeConfig()
+  const apiBase = (config.public.apiBase as string) ?? '/api'
+
+  const formations = ref<Formation[]>([])
+  const isFormationLoading = ref(false)
+  const formationDataLoaded = ref(false)
+
+  const loadFormationData = async () => {
+    if (!employee.value || isFormationLoading.value) return
+    isFormationLoading.value = true
+    try {
+      formations.value = await listFormations(employee.value.id)
+      formationDataLoaded.value = true
+    } finally {
+      isFormationLoading.value = false
+    }
+  }
+
+  const resetLoaded = () => {
+    formationDataLoaded.value = false
+  }
+
+  const submitCreateFormation = async (data: { startDate: string; endDate: string; comment?: string }, justificatifFile?: File) => {
+    if (!employee.value) return
+    const result = await createFormation({
+      employeeId: employee.value.id,
+      startDate: data.startDate,
+      endDate: data.endDate,
+      comment: data.comment
+    })
+    if (result?.id && justificatifFile) {
+      await uploadFormationJustificatif(apiBase, result.id, justificatifFile)
+    }
+    await reloadEmployee()
+  }
+
+  const submitUpdateFormation = async (id: number, data: { startDate: string; endDate: string; comment?: string }, justificatifFile?: File) => {
+    await updateFormation(id, data)
+    if (justificatifFile) {
+      await uploadFormationJustificatif(apiBase, id, justificatifFile)
+    }
+    await reloadEmployee()
+  }
+
+  const submitDeleteFormation = async (id: number) => {
+    await deleteFormation(id)
+    await reloadEmployee()
+  }
+
+  return {
+    formations,
+    isFormationLoading,
+    formationDataLoaded,
+    formationApiBase: apiBase,
+    loadFormationData,
+    resetLoaded,
+    submitCreateFormation,
+    submitUpdateFormation,
+    submitDeleteFormation
+  }
+}

frontend/composables/useHoursPage.ts

@@ -476,6 +476,14 @@ export const useHoursPage = () => {
     return { backgroundColor: dayRow.absenceColor || '#dc2626' }
   }
 
+  const hasRowFormation = (employeeId: number): boolean => {
+    return dayContextByEmployeeId.value.get(employeeId)?.hasFormation === true
+  }
+
+  const getRowFormationLabel = (employeeId: number): string => {
+    return dayContextByEmployeeId.value.get(employeeId)?.formationLabel ?? ''
+  }
+
   const getRowUpdatedAt = (employeeId: number): string => {
     const raw = rows.value[employeeId]?.updatedAt
     if (!raw) return ''
@@ -1154,6 +1162,8 @@ export const useHoursPage = () => {
     getRowMetrics,
     getRowAbsenceLabel,
     getRowAbsenceStyle,
+    hasRowFormation,
+    getRowFormationLabel,
     getRowUpdatedAt,
     getPresenceDayValue,
     openAbsenceDrawer,