feat(06.2-05): clear filters button and active filter count in AuditLogTab

- Add clearFilters() function that resets all filter fields and refetches
- Add activeFilterCount computed property (counts non-empty filter fields)
- Add "Clear filters" button (visible only when activeFilterCount > 0)
- Wrap Export CSV button with filter count indicator (amber text below button)
- Add computed to vue import
This commit is contained in:
curo1305
2026-05-31 20:11:02 +02:00
parent f5e111bfa2
commit 5d457d68bf
+34 -1
View File
@@ -47,6 +47,14 @@
>
Apply filters
</button>
<button
v-if="activeFilterCount > 0"
@click="clearFilters"
class="border border-gray-300 text-gray-500 text-sm px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors"
>
Clear filters
</button>
<div class="relative inline-flex flex-col items-start gap-1">
<button
@click="exportCsv"
:disabled="exportingCsv"
@@ -58,6 +66,13 @@
</span>
<span v-else>Export CSV</span>
</button>
<span
v-if="activeFilterCount > 0"
class="text-xs text-amber-600"
>
{{ activeFilterCount }} filter{{ activeFilterCount !== 1 ? 's' : '' }} active
</span>
</div>
<p v-if="exportError" class="text-xs text-red-600 self-center">{{ exportError }}</p>
</div>
@@ -167,7 +182,7 @@
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, computed } from 'vue'
import * as api from '../../api/client.js'
const entries = ref([])
@@ -222,6 +237,24 @@ function applyFilters() {
fetchLog()
}
function clearFilters() {
filters.start = ''
filters.end = ''
filters.user_handle = ''
filters.event_type = ''
page.value = 1
fetchLog()
}
const activeFilterCount = computed(() => {
let count = 0
if (filters.start) count++
if (filters.end) count++
if (filters.user_handle) count++
if (filters.event_type) count++
return count
})
function prevPage() {
if (page.value > 1) {
page.value--