63
63
<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" />
64
64
</div >
65
65
<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 " >
67
67
{{ 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 >
68
77
</label >
69
78
</div >
70
79
<Listbox v-model =" selectedEventTypes" as =" div" multiple >
83
92
</button >
84
93
</template >
85
94
<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 >
87
96
</template >
88
97
</div >
89
98
<span class =" pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2" >
212
221
<script setup lang="ts">
213
222
import { Listbox , ListboxButton , ListboxOption , ListboxOptions , Popover , PopoverButton , PopoverGroup , PopoverPanel } from ' @headlessui/vue' ;
214
223
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' ;
216
225
import { computed , onMounted , ref , watch } from ' vue' ;
217
226
import { useI18n } from ' vue-i18n' ;
218
227
import auditlog , { AuditEventDto } from ' ../common/auditlog' ;
@@ -254,8 +263,7 @@ const endDateFilter = ref(endDate.value.toISOString().split('T')[0]);
254
263
const filterIsReset = computed (() =>
255
264
startDateFilter .value == startDate .value .toISOString ().split (' T' )[0 ] &&
256
265
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
259
267
);
260
268
const startDateFilterIsValid = computed (() => validateDateFilterValue (startDateFilter .value ) != null );
261
269
const endDateFilterIsValid = computed (() => {
@@ -303,12 +311,10 @@ const eventTypeOptions = Object.fromEntries(
303
311
VAULT_MEMBER_UPDATE: t (' auditLog.details.vaultMember.update' ),
304
312
VAULT_OWNERSHIP_CLAIM: t (' auditLog.details.vaultOwnership.claim' ),
305
313
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 ))
309
315
);
310
316
const allEventTypes = Object .keys (eventTypeOptions );
311
- const selectedEventTypes = ref <string []>([... allEventTypes ]);
317
+ const selectedEventTypes = ref <string []>([]);
312
318
313
319
const currentPage = ref (0 );
314
320
const pageSize = ref (20 );
@@ -319,6 +325,10 @@ let lastIdOfPreviousPage = [Number.MAX_SAFE_INTEGER];
319
325
320
326
onMounted (fetchData );
321
327
328
+ watch (selectedEventTypes , (newSelection , oldSelection ) => {
329
+ selectedEventTypes .value .sort ((a , b ) => eventTypeOptions [a ].localeCompare (eventTypeOptions [b ]));
330
+ });
331
+
322
332
async function fetchData(page : number = 0 ) {
323
333
onFetchError .value = null ;
324
334
try {
@@ -373,7 +383,7 @@ function removeEventType(type: string): void {
373
383
function resetFilter() {
374
384
startDateFilter .value = startDate .value .toISOString ().split (' T' )[0 ];
375
385
endDateFilter .value = endDate .value .toISOString ().split (' T' )[0 ];
376
- selectedEventTypes .value = [... allEventTypes ];
386
+ selectedEventTypes .value = [];
377
387
}
378
388
379
389
function beginOfDate(date : Date ): Date {
0 commit comments