From 5d457d68bf4bfe623b1039b5d6bf4ab29a4e0e7b Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Sun, 31 May 2026 20:11:02 +0200
Subject: [PATCH] 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
---
 frontend/src/components/admin/AuditLogTab.vue | 51 +++++++++++++++----
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/admin/AuditLogTab.vue b/frontend/src/components/admin/AuditLogTab.vue
index fd80418..95c9d59 100644
--- a/frontend/src/components/admin/AuditLogTab.vue
+++ b/frontend/src/components/admin/AuditLogTab.vue
@@ -48,16 +48,31 @@
         Apply filters
       </button>
       <button
-        @click="exportCsv"
-        :disabled="exportingCsv"
-        class="border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
+        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"
       >
-        <span v-if="exportingCsv" class="flex items-center gap-1">
-          <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
-          Exporting…
-        </span>
-        <span v-else>Export CSV</span>
+        Clear filters
       </button>
+      <div class="relative inline-flex flex-col items-start gap-1">
+        <button
+          @click="exportCsv"
+          :disabled="exportingCsv"
+          class="border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
+        >
+          <span v-if="exportingCsv" class="flex items-center gap-1">
+            <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
+            Exporting…
+          </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--