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:
@@ -47,6 +47,14 @@
|
|||||||
>
|
>
|
||||||
Apply filters
|
Apply filters
|
||||||
</button>
|
</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
|
<button
|
||||||
@click="exportCsv"
|
@click="exportCsv"
|
||||||
:disabled="exportingCsv"
|
:disabled="exportingCsv"
|
||||||
@@ -58,6 +66,13 @@
|
|||||||
</span>
|
</span>
|
||||||
<span v-else>Export CSV</span>
|
<span v-else>Export CSV</span>
|
||||||
</button>
|
</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>
|
<p v-if="exportError" class="text-xs text-red-600 self-center">{{ exportError }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -167,7 +182,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
import { ref, reactive, onMounted, computed } from 'vue'
|
||||||
import * as api from '../../api/client.js'
|
import * as api from '../../api/client.js'
|
||||||
|
|
||||||
const entries = ref([])
|
const entries = ref([])
|
||||||
@@ -222,6 +237,24 @@ function applyFilters() {
|
|||||||
fetchLog()
|
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() {
|
function prevPage() {
|
||||||
if (page.value > 1) {
|
if (page.value > 1) {
|
||||||
page.value--
|
page.value--
|
||||||
|
|||||||
Reference in New Issue
Block a user