fix : style des champs dans l'audit-log

This commit is contained in:
2026-05-13 11:02:25 +02:00
parent 264af20dae
commit d2de35f668

View File

@@ -9,7 +9,8 @@
<!-- Filtres --> <!-- Filtres -->
<section class="mt-4 rounded border border-gray-200 bg-white p-4"> <section class="mt-4 rounded border border-gray-200 bg-white p-4">
<!-- Labels uniformes au-dessus : les composants Malio sont utilises sans <!-- 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"> <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 <!-- TODO(malio-ui): remplacer par un composant Malio quand la lib
exposera un datetime picker. Cf. exception documentee dans exposera un datetime picker. Cf. exception documentee dans
@@ -59,26 +60,20 @@
v-model="performedByInput" v-model="performedByInput"
icon-name="mdi:account-search" icon-name="mdi:account-search"
input-class="text-sm" input-class="text-sm"
group-class="h-10"
/> />
</div> </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> <div>
<label class="mb-1 block text-xs font-medium text-gray-600"> <label class="mb-1 block text-xs font-medium text-gray-600">
{{ t('audit.filters.action') }} {{ t('audit.filters.action') }}
</label> </label>
<select <div class="[&>div>div]:!mt-0">
v-model="actionValue" <MalioSelect
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" v-model="actionValue"
> :options="actionOptions"
<option value="">{{ t('audit.filters.all_actions') }}</option> text-field="text-sm"
<option v-for="opt in actionOptions" :key="opt.value" :value="opt.value"> text-value="text-sm"
{{ opt.label }} />
</option> </div>
</select>
</div> </div>
</div> </div>
@@ -204,11 +199,14 @@ const entityTypeOptions = computed(() =>
// pas binder directement un `string | undefined` reactive. // pas binder directement un `string | undefined` reactive.
const performedByInput = ref<string>('') const performedByInput = ref<string>('')
// Action : MalioSelect ne gere pas fiablement des options a valeur string (cf. // Action : '' = "toutes les actions". On declare l'option dans `actionOptions`
// note Lesstime CLAUDE.md). On utilise un `<select>` natif stylise comme les // plutot que via `emptyOptionLabel` (qui n'inclut pas l'option vide dans
// inputs dates pour garder un look coherent. '' = "toutes les actions". // `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 actionValue = ref<string>('')
const actionOptions = [ const actionOptions = [
{ value: '', label: t('audit.filters.all_actions') },
{ value: 'create', label: t('audit.action.create') }, { value: 'create', label: t('audit.action.create') },
{ value: 'update', label: t('audit.action.update') }, { value: 'update', label: t('audit.action.update') },
{ value: 'delete', label: t('audit.action.delete') }, { value: 'delete', label: t('audit.action.delete') },
@@ -378,7 +376,7 @@ watch(selectedEntityTypes, values => {
loadEntries() loadEntries()
}) })
// Sync select action natif -> filters.action. // Sync MalioSelect action -> filters.action.
watch(actionValue, value => { watch(actionValue, value => {
if (watchersSuspended) return if (watchersSuspended) return
filters.action = value === '' ? undefined : value filters.action = value === '' ? undefined : value