feat: +/- buttons on service pills for additive/subtractive filtering

- Replace single-click service pill filter with explicit +/− buttons
- '+' adds the service to the current filter (keeps other selections)
- '−' removes the service from the current filter
- Result pills keep toggle click behavior
- Add .pill__action styles for small inline buttons
This commit is contained in:
2026-04-22 12:02:11 +02:00
parent ed7465f5cd
commit ac155d8843
2 changed files with 41 additions and 6 deletions

View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Admin Operations Center</title>
<link rel="stylesheet" href="/style.css?v=10" />
<link rel="stylesheet" href="/style.css?v=11" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://alcdn.msauth.net/browser/2.37.0/js/msal-browser.min.js" crossorigin="anonymous"></script>
</head>
@@ -184,7 +184,11 @@
<template x-for="(evt, idx) in askEvents" :key="evt.id || idx">
<article class="event event--compact">
<div class="event__meta">
<span class="pill pill--clickable" x-text="evt.display_category || evt.service || '—'" @click="filterByService(evt.service || evt.display_category)" title="Filter by this service"></span>
<span class="pill">
<span x-text="evt.display_category || evt.service || '—'"></span>
<span class="pill__action" @click.stop="addServiceFilter(evt.service || evt.display_category)" title="Include this service">+</span>
<span class="pill__action" @click.stop="removeServiceFilter(evt.service || evt.display_category)" title="Exclude this service"></span>
</span>
<span class="pill pill--clickable" :class="['success','succeeded','ok','passed','true'].includes((evt.result || '').toLowerCase()) ? 'pill--ok' : 'pill--warn'" x-text="evt.result || '—'" @click="filterByResult(evt.result)" title="Filter by this result"></span>
</div>
<h3 x-text="evt.operation || '—'"></h3>
@@ -670,13 +674,19 @@
this.loadEvents();
},
filterByService(service) {
addServiceFilter(service) {
if (!service) return;
if (!this.filters.selectedServices.includes(service)) {
this.filters.selectedServices = [service];
} else {
this.filters.selectedServices = this.filters.selectedServices.filter((s) => s !== service);
this.filters.selectedServices.push(service);
this.saveFilters();
this.resetPagination();
this.loadEvents();
}
},
removeServiceFilter(service) {
if (!service) return;
this.filters.selectedServices = this.filters.selectedServices.filter((s) => s !== service);
this.saveFilters();
this.resetPagination();
this.loadEvents();