cqrenet/aoc
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 29 Wiki Activity

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

Browse Source 
- 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:
Tomas Kracmar
2026-04-22 12:02:11 +02:00
parent ed7465f5cd
commit ac155d8843
2 changed files with 41 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
backend/frontend/index.html
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();

25
backend/frontend/style.css
View File

@@ -376,6 +376,31 @@ input {
background: rgba(249, 115, 22, 0.25);
}
.pill__action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 4px;
margin-left: 4px;
font-size: 11px;
font-weight: 700;
line-height: 1;
cursor: pointer;
color: var(--muted);
background: rgba(255, 255, 255, 0.06);
border: 1px solid transparent;
transition: all 0.12s ease;
vertical-align: middle;
}
.pill__action:hover {
color: var(--text);
background: rgba(125, 211, 252, 0.2);
border-color: rgba(125, 211, 252, 0.3);
}
.event h3 {
margin: 0 0 6px;
font-size: 17px;