johno/beads
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(monitor-webui): fix priority filter and search clear button

Browse Source 
- Add event listeners for priority toggle and clear search buttons
- Update priority filter to support multiple selections
- Add dev mode to server for easier development
This commit is contained in:
matt wilkie
2025-11-21 14:17:35 -07:00
parent 44170fd503
commit 185ed2e93c
3 changed files with 64 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
examples/monitor-webui/web/index.html
View File

@@ -53,26 +53,27 @@
<div class="filter-group">
<div class="label-with-action">
<label for="filter-status">Status</label>
<button id="toggle-status" class="button-link" title="Toggle Select All/None">Select All</button>
</div>
<select id="filter-status" multiple>
<option value="open" selected>Open</option>
<option value="in_progress">In Progress</option>
<option value="closed">Closed</option>
</select>
<button id="toggle-status" class="button-link" title="Toggle Select All/None">Select All</button>
</div>
<div class="filter-group">
<label for="filter-priority">Priority</label>
<select id="filter-priority">
<option value="">All</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
<select id="filter-priority" multiple>
<option value="1" selected>P1</option>
<option value="2" selected>P2</option>
<option value="3" selected>P3</option>
</select>
<button id="toggle-priority" class="button-link" title="Toggle Select All/None">Select All</button>
</div>
<div class="filter-group search-group">
<label for="filter-text">Search</label>
<input type="text" id="filter-text" placeholder="Search issues...">
<button id="clear-text" class="button-link" title="Clear Search">Clear</button>
</div>
<div class="filter-group action-group">
<button class="reload-button" id="reload-button" title="Reload all data">

44
examples/monitor-webui/web/static/js/app.js
View File

@@ -155,13 +155,18 @@ function renderIssues(issues) {
function filterIssues() {
const statusSelect = document.getElementById('filter-status');
const selectedStatuses = Array.from(statusSelect.selectedOptions).map(opt => opt.value);
const priorityFilter = document.getElementById('filter-priority').value;
const prioritySelect = document.getElementById('filter-priority');
const selectedPriorities = Array.from(prioritySelect.selectedOptions).map(opt => parseInt(opt.value));
const searchText = document.getElementById('filter-text').value.toLowerCase();
const filtered = allIssues.filter(issue => {
// If statuses are selected, check if issue status is in the selected list
if (selectedStatuses.length > 0 && !selectedStatuses.includes(issue.status)) return false;
if (priorityFilter && issue.priority !== parseInt(priorityFilter)) return false;
// If priorities are selected, check if issue priority is in the selected list
if (selectedPriorities.length > 0 && !selectedPriorities.includes(issue.priority)) return false;
if (searchText) {
const title = (issue.title || '').toLowerCase();
@@ -250,7 +255,7 @@ document.getElementById('toggle-status').addEventListener('click', function() {
const btn = document.getElementById('toggle-status');
if (allSelected) {
// Select None (which effectively shows all, but we'll clear selection)
// Select None
options.forEach(opt => opt.selected = false);
btn.textContent = 'Select All';
} else {
@@ -260,8 +265,39 @@ document.getElementById('toggle-status').addEventListener('click', function() {
}
filterIssues();
});
document.getElementById('filter-priority').addEventListener('change', filterIssues);
document.getElementById('filter-priority').addEventListener('change', function() {
const prioritySelect = document.getElementById('filter-priority');
const options = Array.from(prioritySelect.options);
const allSelected = options.every(opt => opt.selected);
const btn = document.getElementById('toggle-priority');
btn.textContent = allSelected ? 'Select None' : 'Select All';
filterIssues();
});
document.getElementById('toggle-priority').addEventListener('click', function() {
const prioritySelect = document.getElementById('filter-priority');
const options = Array.from(prioritySelect.options);
const allSelected = options.every(opt => opt.selected);
const btn = document.getElementById('toggle-priority');
if (allSelected) {
// Select None
options.forEach(opt => opt.selected = false);
btn.textContent = 'Select All';
} else {
// Select All
options.forEach(opt => opt.selected = true);
btn.textContent = 'Select None';
}
filterIssues();
});
document.getElementById('filter-text').addEventListener('input', filterIssues);
document.getElementById('clear-text').addEventListener('click', function() {
document.getElementById('filter-text').value = '';
filterIssues();
});
// Reload button listener
document.getElementById('reload-button').addEventListener('click', reloadData);