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

.env

@@ -46,4 +46,6 @@ JWT_PUBLIC_KEY=%kernel.project_dir%/config/jwt/public.pem
 JWT_PASSPHRASE=9efb9a2ec48439c723621d0c6393d04da5516c8fa00ecdba1660717b4f996867
 JWT_COOKIE_SECURE=0
 JWT_COOKIE_SAMESITE=lax
+JWT_TOKEN_TTL=86400
+JWT_COOKIE_TTL=86400
 ###< lexik/jwt-authentication-bundle ###

config/packages/lexik_jwt_authentication.yaml

@@ -2,6 +2,7 @@ lexik_jwt_authentication:
     secret_key: '%env(resolve:JWT_SECRET_KEY)%'
     public_key: '%env(resolve:JWT_PUBLIC_KEY)%'
     pass_phrase: '%env(JWT_PASSPHRASE)%'
+    token_ttl: '%env(int:JWT_TOKEN_TTL)%'
     remove_token_from_body_when_cookies_used: true
     token_extractors:
         authorization_header:
@@ -13,7 +14,7 @@ lexik_jwt_authentication:
             enabled: false
     set_cookies:
         BEARER:
-            lifetime: 86400
+            lifetime: '%env(int:JWT_COOKIE_TTL)%'
             samesite: lax
             path: /
             secure: '%env(bool:JWT_COOKIE_SECURE)%'

frontend/components/CalendarGrid.vue

@@ -18,8 +18,12 @@
 
                 <template v-for="employee in visibleEmployees" :key="employee.id">
                     <div
-                        class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black"
+                        class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black cursor-pointer"
                         :style="{ backgroundColor: employee.site?.color ?? '#304998' }"
+                        draggable="true"
+                        @dragstart="handleDragStart($event, employee)"
+                        @dragover="handleDragOver"
+                        @drop="handleDrop($event, employee)"
                     >
                         {{ formatEmployeeName(employee) }}
                     </div>
@@ -97,9 +101,27 @@ defineProps<{
 
 const emit = defineEmits<{
     (event: 'cell-click', employee: Employee, date: string): void
+    (event: 'reorder', payload: { dragId: number; dropId: number }): void
 }>()
 
 const handleCellClick = (employee: Employee, date: string) => {
     emit('cell-click', employee, date)
 }
+
+const handleDragStart = (event: DragEvent, employee: Employee) => {
+    if (!event.dataTransfer) return
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', String(employee.id))
+}
+
+const handleDragOver = (event: DragEvent) => {
+    event.preventDefault()
+}
+
+const handleDrop = (event: DragEvent, employee: Employee) => {
+    event.preventDefault()
+    const dragId = Number(event.dataTransfer?.getData('text/plain'))
+    if (!dragId || dragId === employee.id) return
+    emit('reorder', { dragId, dropId: employee.id })
+}
 </script>

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 orderA = employeeA.displayOrder ?? 0
-        const lastNameB = employeeB.lastName ?? ''
+    const orderB = employeeB.displayOrder ?? 0
-        if (lastNameA !== lastNameB) return lastNameA.localeCompare(lastNameB, 'fr')
+    if (orderA !== orderB) return orderA - orderB
-        const firstNameA = employeeA.firstName ?? ''
+    const lastNameA = employeeA.lastName ?? ''
-        const firstNameB = employeeB.firstName ?? ''
+    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>

frontend/services/dto/employee.ts

@@ -5,4 +5,5 @@ export type Employee = {
   firstName: string
   lastName: string
   site: Site
+  displayOrder?: number
 }

frontend/services/employees.ts

@@ -33,19 +33,33 @@ export const updateEmployee = async (
     firstName: string
     lastName: string
     siteId?: number | null
+    displayOrder?: number
   }
 ) => {
   const api = useApi()
   return api.patch<Employee>(`/employees/${id}`, {
     firstName: payload.firstName,
     lastName: payload.lastName,
-    site: payload.siteId ? `/api/sites/${payload.siteId}` : null
+    site: payload.siteId ? `/api/sites/${payload.siteId}` : null,
+    displayOrder: payload.displayOrder
   }, {
     toastSuccessKey: 'success.employee.update',
     toastErrorKey: 'errors.employee.update'
   })
 }
 
+export const updateEmployeeOrder = async (
+  id: number,
+  displayOrder: number
+) => {
+  const api = useApi()
+  return api.patch<Employee>(`/employees/${id}`, {
+    displayOrder
+  }, {
+    toast: false
+  })
+}
+
 export const deleteEmployee = async (id: number) => {
   const api = useApi()
   return api.delete(`/employees/${id}`, {}, {

migrations/Version20260210121500.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260210121500 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add display_order to employees';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employees ADD display_order INT NOT NULL DEFAULT 0');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employees DROP COLUMN display_order');
+    }
+}

migrations/Version20260210123000.php

@@ -0,0 +1,39 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260210123000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Backfill employee display_order per site';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // Initialise display_order par site selon le tri nom/prénom/id.
+        $this->addSql('
+            UPDATE employees e
+            SET display_order = ranked.rn
+            FROM (
+                SELECT id,
+                       ROW_NUMBER() OVER (
+                           PARTITION BY site_id
+                           ORDER BY last_name ASC, first_name ASC, id ASC
+                       ) AS rn
+                FROM employees
+            ) ranked
+            WHERE ranked.id = e.id
+        ');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // Pas de rollback pertinent.
+    }
+}

src/Entity/Employee.php

@@ -37,6 +37,10 @@ class Employee
     #[Groups(['employee:read', 'employee:write'])]
     private ?Site $site = null;
 
+    #[ORM\Column(type: 'integer', options: ['default' => 0])]
+    #[Groups(['employee:read', 'employee:write'])]
+    private int $displayOrder = 0;
+
     #[ORM\Column(type: 'datetime_immutable')]
     private DateTimeImmutable $createdAt;
 
@@ -90,4 +94,16 @@ class Employee
     {
         return $this->createdAt;
     }
+
+    public function getDisplayOrder(): int
+    {
+        return $this->displayOrder;
+    }
+
+    public function setDisplayOrder(int $displayOrder): self
+    {
+        $this->displayOrder = $displayOrder;
+
+        return $this;
+    }
 }

src/State/AbsencePrintProvider.php

@@ -115,6 +115,7 @@ class AbsencePrintProvider implements ProviderInterface
             ->leftJoin('e.site', 's')
             ->addSelect('s')
             ->orderBy('s.name', 'ASC')
+            ->addOrderBy('e.displayOrder', 'ASC')
             ->addOrderBy('e.lastName', 'ASC')
             ->addOrderBy('e.firstName', 'ASC')
         ;