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:
@@ -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--
|
||||
|
||||
Reference in New Issue
Block a user