Skip to content

Commit 2bd907d

Browse files
committed
add clear button
sorted eventFilter entries by value
1 parent 250cc2f commit 2bd907d

File tree

2 files changed

+22
-11
lines changed

2 files changed

+22
-11
lines changed

frontend/src/components/AuditLog.vue

+20-10
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,17 @@
6363
<input id="filter-end-date" v-model="endDateFilter" type="text" class="shadow-xs focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md" :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': !endDateFilterIsValid }" placeholder="yyyy-MM-dd" />
6464
</div>
6565
<div class="sm:grid sm:grid-cols-2 sm:items-center sm:gap-2">
66-
<label class="block text-sm font-medium text-gray-700">
66+
<label class="block text-sm font-medium text-gray-700 flex items-center">
6767
{{ t('auditLog.type') }}
68+
<button
69+
type="button"
70+
class="ml-2 p-1 flex items-center justify-center focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-30 disabled:cursor-not-allowed"
71+
:disabled="selectedEventTypes.length === 0"
72+
:title="selectedEventTypes.length > 0 ? t('auditLog.filter.clerEventFilter') : ''"
73+
@click="selectedEventTypes = []"
74+
>
75+
<TrashIcon class="h-5 w-5 text-gray-500 hover:text-gray-700 disabled:text-gray-300" aria-hidden="true" />
76+
</button>
6877
</label>
6978
</div>
7079
<Listbox v-model="selectedEventTypes" as="div" multiple>
@@ -83,7 +92,7 @@
8392
</button>
8493
</template>
8594
<template v-else>
86-
<span class="text-gray-500">{{ t('auditLog.filter.emptyEventTypeList') }}</span>
95+
<span class="text-gray-500">{{ t('auditLog.filter.selectEventFilter') }}</span>
8796
</template>
8897
</div>
8998
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -212,7 +221,7 @@
212221
<script setup lang="ts">
213222
import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Popover, PopoverButton, PopoverGroup, PopoverPanel } from '@headlessui/vue';
214223
import { ChevronDownIcon } from '@heroicons/vue/20/solid';
215-
import { CheckIcon, ChevronUpDownIcon, WrenchIcon } from '@heroicons/vue/24/solid';
224+
import { CheckIcon, ChevronUpDownIcon, WrenchIcon, TrashIcon } from '@heroicons/vue/24/solid';
216225
import { computed, onMounted, ref, watch } from 'vue';
217226
import { useI18n } from 'vue-i18n';
218227
import auditlog, { AuditEventDto } from '../common/auditlog';
@@ -254,8 +263,7 @@ const endDateFilter = ref(endDate.value.toISOString().split('T')[0]);
254263
const filterIsReset = computed(() =>
255264
startDateFilter.value == startDate.value.toISOString().split('T')[0] &&
256265
endDateFilter.value == endDate.value.toISOString().split('T')[0] &&
257-
selectedEventTypes.value.length === allEventTypes.length &&
258-
selectedEventTypes.value.every(t => allEventTypes.includes(t))
266+
selectedEventTypes.value.length == 0
259267
);
260268
const startDateFilterIsValid = computed(() => validateDateFilterValue(startDateFilter.value) != null);
261269
const endDateFilterIsValid = computed(() => {
@@ -303,12 +311,10 @@ const eventTypeOptions = Object.fromEntries(
303311
VAULT_MEMBER_UPDATE: t('auditLog.details.vaultMember.update'),
304312
VAULT_OWNERSHIP_CLAIM: t('auditLog.details.vaultOwnership.claim'),
305313
VAULT_UPDATE: t('auditLog.details.vault.update')
306-
}).sort((a, b) => {
307-
return a[0].localeCompare(b[0]);
308-
})
314+
}).sort(([,valueA], [,valueB]) => valueA.localeCompare(valueB))
309315
);
310316
const allEventTypes = Object.keys(eventTypeOptions);
311-
const selectedEventTypes = ref<string[]>([...allEventTypes]);
317+
const selectedEventTypes = ref<string[]>([]);
312318
313319
const currentPage = ref(0);
314320
const pageSize = ref(20);
@@ -319,6 +325,10 @@ let lastIdOfPreviousPage = [Number.MAX_SAFE_INTEGER];
319325
320326
onMounted(fetchData);
321327
328+
watch(selectedEventTypes, (newSelection, oldSelection) => {
329+
selectedEventTypes.value.sort((a, b) => eventTypeOptions[a].localeCompare(eventTypeOptions[b]));
330+
});
331+
322332
async function fetchData(page: number = 0) {
323333
onFetchError.value = null;
324334
try {
@@ -373,7 +383,7 @@ function removeEventType(type: string): void {
373383
function resetFilter() {
374384
startDateFilter.value = startDate.value.toISOString().split('T')[0];
375385
endDateFilter.value = endDate.value.toISOString().split('T')[0];
376-
selectedEventTypes.value = [...allEventTypes];
386+
selectedEventTypes.value = [];
377387
}
378388
379389
function beginOfDate(date: Date): Date {

frontend/src/i18n/en-US.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@
7878
"auditLog.filter": "Filter",
7979
"auditLog.filter.startDate": "Start Date",
8080
"auditLog.filter.endDate": "End Date",
81-
"auditLog.filter.emptyEventTypeList": "No event type selected",
81+
"auditLog.filter.selectEventFilter": "Select event filter",
82+
"auditLog.filter.clerEventFilter": "Clear event filter",
8283
"auditLog.timestamp": "Timestamp",
8384
"auditLog.type": "Event",
8485
"auditLog.details": "Details",

0 commit comments

Comments
 (0)