fix(audit-log) : applique fixes code review PR #9

Resout les 5 findings de la review automatique + couverture ManyToMany
annoncee dans CLAUDE.md :

- AuditListener : resolution de la classe via ClassMetadata plutot que
  `$entity::class` direct (defense proxy Doctrine : sous ORM 2 les lazies
  sont des `Proxies\__CG__\...`). Test de regression via getReference().
- AuditListener : capture des modifications de collections to-many
  (OneToMany / ManyToMany) via getScheduledCollectionUpdates /
  getScheduledCollectionDeletions. Les diffs sont mergees dans le
  changeset existant ou creent une entree "update" dediee.
- AuditLogResource + Provider : filtre multi-valeurs
  `entity_type[]=X&entity_type[]=Y` (IN clause DBAL via
  ArrayParameterType::STRING), endpoint `/audit-log-entity-types` pour
  alimenter le MalioSelectCheckbox cote front.
- audit-log.vue : refonte complete. Passage a `MalioDataTable`,
  composants `Malio*` (MalioInputText, MalioSelectCheckbox, MalioButton),
  suppression complete de la persistance URL (`readQuery` / `syncQuery`
  / `route.query`). `datetime-local` conserve avec TODO pointant
  l'exception CLAUDE.md.
- AuditTimeline : fix du saut d'items 11-30. `PAGE_SIZE = 10` aligne
  avec un `itemsPerPage=10` passe au backend. Token anti-race pour
  ignorer les reponses tardives quand l'entite affichee change.
- AuditLogDetail : affichage des diffs de collections to-many (+ / -)
  dans le tableau field/old/new existant.
- logout.vue : ajout du `resetAuditLog()` au logout pour eviter qu'un
  user suivant (meme onglet) voie l'etat audit de l'ancien.
- Permission / Role / Site : marquage `#[Auditable]`.
- Version bump 0.1.32 → 0.1.34.

Tests : 228 / 228 (221 assertions → 851, dont regressions proxy + M2M).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/shared/components/audit/AuditLogDetail.vue

@@ -10,6 +10,9 @@
         </p>
 
         <div v-if="entry.action === 'update'">
+            <!-- Tableau de comparaison field/old/new. MalioDataTable n'est
+                 pas adapte ici : cas presentationnel non-paginable (cf.
+                 exception documentee dans CLAUDE.md). -->
             <table class="min-w-full border border-gray-200 text-xs">
                 <thead class="bg-gray-100">
                     <tr>
@@ -24,6 +27,20 @@
                         <td class="px-2 py-1 text-red-700">{{ formatValue(diff.old) }}</td>
                         <td class="px-2 py-1 text-green-700">{{ formatValue(diff.new) }}</td>
                     </tr>
+                    <!-- Modifications de collections to-many : shape different
+                         { added: [ids], removed: [ids] } → affiche + et - sur
+                         la meme ligne pour garder une colonne field unique. -->
+                    <tr v-for="(diff, field) in collectionDiff" :key="`col-${field}`" class="border-t border-gray-200">
+                        <td class="px-2 py-1 font-mono">{{ field }}</td>
+                        <td class="px-2 py-1 text-red-700">
+                            <span v-if="diff.removed.length">− {{ diff.removed.join(', ') }}</span>
+                            <span v-else class="text-gray-400">∅</span>
+                        </td>
+                        <td class="px-2 py-1 text-green-700">
+                            <span v-if="diff.added.length">+ {{ diff.added.join(', ') }}</span>
+                            <span v-else class="text-gray-400">∅</span>
+                        </td>
+                    </tr>
                 </tbody>
             </table>
         </div>
@@ -45,7 +62,7 @@ const props = defineProps<{ entry: AuditLogEntry }>()
 
 const { t } = useI18n()
 
-// Extrait les entrees au shape { old, new } pour les updates.
+// Extrait les entrees au shape { old, new } pour les updates scalaires.
 const updateDiff = computed<Record<string, { old: unknown; new: unknown }>>(() => {
     const out: Record<string, { old: unknown; new: unknown }> = {}
     for (const [key, value] of Object.entries(props.entry.changes)) {
@@ -56,6 +73,22 @@ const updateDiff = computed<Record<string, { old: unknown; new: unknown }>>(() =
     return out
 })
 
+// Extrait les entrees au shape { added, removed } pour les modifications
+// de collections to-many (cf. AuditListener::captureCollectionChange).
+const collectionDiff = computed<Record<string, { added: unknown[]; removed: unknown[] }>>(() => {
+    const out: Record<string, { added: unknown[]; removed: unknown[] }> = {}
+    for (const [key, value] of Object.entries(props.entry.changes)) {
+        if (value && typeof value === 'object' && 'added' in value && 'removed' in value) {
+            const diff = value as { added: unknown; removed: unknown }
+            out[key] = {
+                added:   Array.isArray(diff.added) ? diff.added : [],
+                removed: Array.isArray(diff.removed) ? diff.removed : [],
+            }
+        }
+    }
+    return out
+})
+
 function formatValue(value: unknown): string {
     if (value === null || value === undefined) return '∅'
     if (typeof value === 'boolean') return value ? 'oui' : 'non'

frontend/shared/components/audit/AuditTimeline.vue

@@ -51,6 +51,13 @@
                                 <span class="mx-1">→</span>
                                 <span class="text-green-700">{{ formatValue(diff.new) }}</span>
                             </div>
+                            <!-- Modifications de collections to-many. -->
+                            <div v-for="(diff, field) in collectionDiff(entry)" :key="`col-${field}`">
+                                <span class="font-medium">{{ field }}</span> :
+                                <span v-if="diff.removed.length" class="text-red-600">−{{ diff.removed.join(', ') }}</span>
+                                <span v-if="diff.removed.length && diff.added.length" class="mx-1"> </span>
+                                <span v-if="diff.added.length" class="text-green-700">+{{ diff.added.join(', ') }}</span>
+                            </div>
                         </div>
                         <div v-else class="mt-1 text-xs text-gray-600">
                             {{ snapshotSummary(entry) }}
@@ -104,29 +111,41 @@ const page = ref(1)
 const totalItems = ref(0)
 const loading = ref(false)
 
-// Lazy loading : 10 items max par page visible cote UX. Le back fixe la
-// limite a 30 (paginationItemsPerPage de AuditLogResource) ; on coupe a 10
-// dans le composant pour ne pas saturer le flux visuel, et on laisse
-// l'utilisateur demander plus via "Voir plus".
-const INITIAL_LIMIT = 10
+// Lazy loading : 10 items par page cote UX. On aligne la pagination backend
+// (itemsPerPage=10 dans fetchEntityLogs) avec cette taille pour eviter de
+// slicer cote client — sinon les items 11-30 de chaque page etaient ignores.
+const PAGE_SIZE = 10
+
+// Anti-race : un utilisateur qui change rapidement d'entite affichee (ouvre
+// une ligne puis une autre dans le tableau admin) peut declencher deux fetchs
+// dont le premier repond en retard et ecrase l'etat de la seconde timeline.
+// On incremente un token a chaque fetch ; seule la derniere requete ecrit le
+// resultat. loadMore() est aussi protege : une reponse tardive append sur
+// une timeline dont l'entite a deja change serait visuellement confuse.
+let requestToken = 0
 
 const hasMore = computed(() => entries.value.length < totalItems.value)
 
 async function loadPage(targetPage: number, append: boolean): Promise<void> {
     if (!canView.value) return
 
+    const token = ++requestToken
     loading.value = true
     try {
-        const data = await fetchEntityLogs(entityType.value, entityId.value, targetPage)
-        const slice = (data.member ?? []).slice(0, append ? undefined : INITIAL_LIMIT)
-        entries.value = append ? [...entries.value, ...slice] : slice
+        const data = await fetchEntityLogs(entityType.value, entityId.value, targetPage, PAGE_SIZE)
+        if (token !== requestToken) return
+        const items = data.member ?? []
+        entries.value = append ? [...entries.value, ...items] : items
         totalItems.value = data.totalItems ?? entries.value.length
         page.value = targetPage
     } catch {
+        if (token !== requestToken) return
         // Erreur silencieuse (timeline secondaire) — useApi n'affiche pas de toast avec toast: false.
         entries.value = append ? entries.value : []
     } finally {
-        loading.value = false
+        if (token === requestToken) {
+            loading.value = false
+        }
     }
 }
 
@@ -179,6 +198,22 @@ function updateDiff(entry: AuditLogEntry): Record<string, { old: unknown; new: u
     return out
 }
 
+function collectionDiff(entry: AuditLogEntry): Record<string, { added: unknown[]; removed: unknown[] }> {
+    // Format to-many : { champ: { added: [ids], removed: [ids] } } produit
+    // par AuditListener::captureCollectionChange.
+    const out: Record<string, { added: unknown[]; removed: unknown[] }> = {}
+    for (const [key, value] of Object.entries(entry.changes)) {
+        if (value && typeof value === 'object' && 'added' in value && 'removed' in value) {
+            const diff = value as { added: unknown; removed: unknown }
+            out[key] = {
+                added:   Array.isArray(diff.added) ? diff.added : [],
+                removed: Array.isArray(diff.removed) ? diff.removed : [],
+            }
+        }
+    }
+    return out
+}
+
 function snapshotSummary(entry: AuditLogEntry): string {
     const keys = Object.keys(entry.changes)
     if (keys.length === 0) return '—'