|
|
|
|
@@ -9,8 +9,7 @@
|
|
|
|
|
<!-- 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.
|
|
|
|
|
A revoir une fois le composant calendar Malio développé -->
|
|
|
|
|
leur `label` flottant interne pour ne pas mixer deux patterns de label. -->
|
|
|
|
|
<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
|
|
|
|
|
@@ -60,20 +59,26 @@
|
|
|
|
|
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>
|
|
|
|
|
<div class="[&>div>div]:!mt-0">
|
|
|
|
|
<MalioSelect
|
|
|
|
|
v-model="actionValue"
|
|
|
|
|
:options="actionOptions"
|
|
|
|
|
text-field="text-sm"
|
|
|
|
|
text-value="text-sm"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -199,14 +204,11 @@ const entityTypeOptions = computed(() =>
|
|
|
|
|
// pas binder directement un `string | undefined` reactive.
|
|
|
|
|
const performedByInput = ref<string>('')
|
|
|
|
|
|
|
|
|
|
// 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.
|
|
|
|
|
// 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".
|
|
|
|
|
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') },
|
|
|
|
|
@@ -376,7 +378,7 @@ watch(selectedEntityTypes, values => {
|
|
|
|
|
loadEntries()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// Sync MalioSelect action -> filters.action.
|
|
|
|
|
// Sync select action natif -> filters.action.
|
|
|
|
|
watch(actionValue, value => {
|
|
|
|
|
if (watchersSuspended) return
|
|
|
|
|
filters.action = value === '' ? undefined : value
|
|
|
|
|
|
