feat : ajout de la clôture de contrat et de la création de contrat

frontend/pages/employees/[id].vue

@@ -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>

frontend/pages/employees/index.vue

@@ -154,10 +154,10 @@
               La date de début est obligatoire.
             </p>
           </div>
-          <div v-if="requiresContractEndDate">
+          <div v-if="requiresContractEndDateComputed">
             <label class="text-md font-semibold text-neutral-700" for="contract-end-date">
               Fin contrat
-              <span v-if="requiresContractEndDate" class="text-red-600">*</span>
+              <span v-if="requiresContractEndDateComputed" class="text-red-600">*</span>
             </label>
             <input
               id="contract-end-date"
@@ -199,6 +199,7 @@ import { listContracts } from '~/services/contracts'
 import { createEmployee, deleteEmployee, listEmployees, updateEmployee } from '~/services/employees'
 import { listSites } from '~/services/sites'
 import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
+import { contractNatureLabel, isContractNature, requiresContractEndDate } from '~/utils/contract'
 useHead({
     title: 'Employés'
 })
@@ -236,12 +237,6 @@ const filteredEmployees = computed<Employee[]>(() => {
   })
 })
 
-const contractNatureLabel = (value?: 'CDI' | 'CDD' | 'INTERIM') => {
-  if (value === 'CDD') return 'CDD'
-  if (value === 'INTERIM') return 'Intérim'
-  return 'CDI'
-}
-
 const form = reactive({
   firstName: '',
   lastName: '',
@@ -266,11 +261,11 @@ const isFirstNameValid = computed(() => form.firstName.trim() !== '')
 const isLastNameValid = computed(() => form.lastName.trim() !== '')
 const isSiteValid = computed(() => form.siteId !== '')
 const isContractValid = computed(() => form.contractId !== '')
-const isContractNatureValid = computed(() => ['CDI', 'CDD', 'INTERIM'].includes(form.contractNature))
+const isContractNatureValid = computed(() => isContractNature(form.contractNature))
 const isContractStartDateValid = computed(() => form.contractStartDate !== '')
-const requiresContractEndDate = computed(() => form.contractNature === 'CDD' || form.contractNature === 'INTERIM')
+const requiresContractEndDateComputed = computed(() => requiresContractEndDate(form.contractNature))
 const isContractEndDateValid = computed(() => {
-  if (!requiresContractEndDate.value) return true
+  if (!requiresContractEndDateComputed.value) return true
   return form.contractEndDate !== ''
 })
 const isFormValid = computed(
@@ -433,7 +428,7 @@ const handleSubmit = async () => {
         contractId: Number(form.contractId),
         contractNature: form.contractNature,
         contractStartDate: form.contractStartDate,
-        contractEndDate: requiresContractEndDate.value ? form.contractEndDate : null
+        contractEndDate: requiresContractEndDateComputed.value ? form.contractEndDate : null
       })
     }
 
@@ -464,7 +459,7 @@ watch(isDrawerOpen, (isOpen) => {
   }
 })
 
-watch(requiresContractEndDate, (required) => {
+watch(requiresContractEndDateComputed, (required) => {
   if (!required) {
     form.contractEndDate = ''
   }