From d2de35f668de9e2839d55a067a034a674f05bf91 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 13 May 2026 11:02:25 +0200
Subject: [PATCH] fix : style des champs dans l'audit-log

---
 .../modules/core/pages/admin/audit-log.vue    | 36 +++++++++----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/frontend/modules/core/pages/admin/audit-log.vue b/frontend/modules/core/pages/admin/audit-log.vue
index 57770ec..3103816 100644
--- a/frontend/modules/core/pages/admin/audit-log.vue
+++ b/frontend/modules/core/pages/admin/audit-log.vue
@@ -9,7 +9,8 @@
         <!-- Filtres -->
         <section class="mt-4 rounded border border-gray-200 bg-white p-4">
             <!-- Labels uniformes au-dessus : les composants Malio sont utilises sans
-                 leur `label` flottant interne pour ne pas mixer deux patterns de label. -->
+                 leur `label` flottant interne pour ne pas mixer deux patterns de label.
+                 A revoir une fois le composant calendar Malio développé -->
             <div class="grid grid-cols-1 items-start gap-3 md:grid-cols-5">
                 <!-- TODO(malio-ui): remplacer par un composant Malio quand la lib
                      exposera un datetime picker. Cf. exception documentee dans
@@ -59,26 +60,20 @@
                         v-model="performedByInput"
                         icon-name="mdi:account-search"
                         input-class="text-sm"
-                        group-class="h-10"
                     />
                 </div>
-                <!-- TODO(malio-ui): remplacer par MalioSelect quand la lib
-                     supportera de maniere fiable des options a valeur string
-                     (cf. note Lesstime CLAUDE.md). Exception documentee dans
-                     CLAUDE.md (section "Composants formulaires"). -->
                 <div>
                     <label class="mb-1 block text-xs font-medium text-gray-600">
                         {{ t('audit.filters.action') }}
                     </label>
-                    <select
-                        v-model="actionValue"
-                        class="h-[40px] w-full rounded-md border border-m-muted bg-white px-3 text-sm outline-none focus-visible:border-2 focus-visible:border-m-primary"
-                    >
-                        <option value="">{{ t('audit.filters.all_actions') }}</option>
-                        <option v-for="opt in actionOptions" :key="opt.value" :value="opt.value">
-                            {{ opt.label }}
-                        </option>
-                    </select>
+                    <div class="[&>div>div]:!mt-0">
+                        <MalioSelect
+                            v-model="actionValue"
+                            :options="actionOptions"
+                            text-field="text-sm"
+                            text-value="text-sm"
+                        />
+                    </div>
                 </div>
             </div>
 
@@ -204,11 +199,14 @@ const entityTypeOptions = computed(() =>
 // pas binder directement un `string | undefined` reactive.
 const performedByInput = ref<string>('')
 
-// Action : MalioSelect ne gere pas fiablement des options a valeur string (cf.
-// note Lesstime CLAUDE.md). On utilise un `<select>` natif stylise comme les
-// inputs dates pour garder un look coherent. '' = "toutes les actions".
+// Action : '' = "toutes les actions". On declare l'option dans `actionOptions`
+// plutot que via `emptyOptionLabel` (qui n'inclut pas l'option vide dans
+// `props.options`, donc `selectedLabel` reste vide). On evite aussi `value: null`
+// car MalioSelect grise visuellement les options dont la valeur est `null`
+// (Select.vue:137) — on utilise donc une chaine vide comme sentinelle.
 const actionValue = ref<string>('')
 const actionOptions = [
+    { value: '',       label: t('audit.filters.all_actions') },
     { value: 'create', label: t('audit.action.create') },
     { value: 'update', label: t('audit.action.update') },
     { value: 'delete', label: t('audit.action.delete') },
@@ -378,7 +376,7 @@ watch(selectedEntityTypes, values => {
     loadEntries()
 })
 
-// Sync select action natif -> filters.action.
+// Sync MalioSelect action -> filters.action.
 watch(actionValue, value => {
     if (watchersSuspended) return
     filters.action = value === '' ? undefined : value