feat : ajout d'un ordre d'affichage pour les employés + ajout du drag and drop pour changer l'ordre des employés dans le calendrier et l'impression

frontend/pages/calendar.vue

@@ -73,6 +73,7 @@
                 :format-employee-name="formatEmployeeName"
                 :is-holiday-date="isHolidayDate"
                 @cell-click="openCreate"
+                @reorder="handleReorder"
             />
         </div>
 
@@ -104,7 +105,7 @@ import type {AbsenceType} from '~/services/dto/absence-type'
 import type {Absence} from '~/services/dto/absence'
 import type {HalfDay} from '~/services/dto/half-day'
 import {HALF_DAYS} from '~/services/dto/half-day'
-import {listEmployees} from '~/services/employees'
+import {listEmployees, updateEmployeeOrder} from '~/services/employees'
 import {listAbsenceTypes} from '~/services/absence-types'
 import {createAbsence, deleteAbsence, listAbsences, updateAbsence} from '~/services/absences'
 import {listPublicHolidays} from '~/services/public-holidays'
@@ -141,11 +142,14 @@ const sortedEmployees = computed(() => {
     const siteNameA = employeeA.site?.name ?? ''
     const siteNameB = employeeB.site?.name ?? ''
     if (siteNameA !== siteNameB) return siteNameA.localeCompare(siteNameB, 'fr')
-        const lastNameA = employeeA.lastName ?? ''
-        const lastNameB = employeeB.lastName ?? ''
-        if (lastNameA !== lastNameB) return lastNameA.localeCompare(lastNameB, 'fr')
-        const firstNameA = employeeA.firstName ?? ''
-        const firstNameB = employeeB.firstName ?? ''
+    const orderA = employeeA.displayOrder ?? 0
+    const orderB = employeeB.displayOrder ?? 0
+    if (orderA !== orderB) return orderA - orderB
+    const lastNameA = employeeA.lastName ?? ''
+    const lastNameB = employeeB.lastName ?? ''
+    if (lastNameA !== lastNameB) return lastNameA.localeCompare(lastNameB, 'fr')
+    const firstNameA = employeeA.firstName ?? ''
+    const firstNameB = employeeB.firstName ?? ''
     return firstNameA.localeCompare(firstNameB, 'fr')
   })
 })
@@ -670,4 +674,46 @@ const handlePrint = async () => {
     await printPdf(`/absences/print?${params.toString()}`)
     isPrintOpen.value = false
 }
+
+const handleReorder = async (payload: { dragId: number; dropId: number }) => {
+    const dragEmployee = employees.value.find((employee) => employee.id === payload.dragId)
+    const dropEmployee = employees.value.find((employee) => employee.id === payload.dropId)
+    if (!dragEmployee || !dropEmployee) return
+    const dragSiteId = dragEmployee.site?.id
+    const dropSiteId = dropEmployee.site?.id
+    if (!dragSiteId || !dropSiteId || dragSiteId !== dropSiteId) return
+
+    const siteEmployees = [...employees.value]
+        .filter((employee) => employee.site?.id === dragSiteId)
+        .sort((employeeA, employeeB) => {
+            const orderA = employeeA.displayOrder ?? 0
+            const orderB = employeeB.displayOrder ?? 0
+            if (orderA !== orderB) return orderA - orderB
+            const lastNameA = employeeA.lastName ?? ''
+            const lastNameB = employeeB.lastName ?? ''
+            if (lastNameA !== lastNameB) return lastNameA.localeCompare(lastNameB, 'fr')
+            const firstNameA = employeeA.firstName ?? ''
+            const firstNameB = employeeB.firstName ?? ''
+            return firstNameA.localeCompare(firstNameB, 'fr')
+        })
+
+    const fromIndex = siteEmployees.findIndex((employee) => employee.id === dragEmployee.id)
+    const toIndex = siteEmployees.findIndex((employee) => employee.id === dropEmployee.id)
+    if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return
+
+    const [moved] = siteEmployees.splice(fromIndex, 1)
+    siteEmployees.splice(toIndex, 0, moved)
+
+    const updates: Array<{ id: number; displayOrder: number }> = []
+    siteEmployees.forEach((employee, index) => {
+        const nextOrder = index + 1
+        if ((employee.displayOrder ?? 0) !== nextOrder) {
+            updates.push({ id: employee.id, displayOrder: nextOrder })
+        }
+        employee.displayOrder = nextOrder
+    })
+
+    if (updates.length === 0) return
+    await Promise.all(updates.map((update) => updateEmployeeOrder(update.id, update.displayOrder)))
+}
 </script>