?
TRCKR-226
web ux filtering
Created: 2025-12-10 Updated: 2025-12-16
Relationships Loading...
Attachments
Loading...
Comments (1)
agent · 2025-12-10
Successfully implemented header-based column filters. **Changes made:** 1. **Modified server/templates/partials/issues_table.html:** - Added filter icons (⚙) to Status, Project, Priority, and Title (for Labels) column headers - Each filterable header now contains: header-text span (for sorting), filter-icon span (clickable), and header-filter-dropdown div - Filter dropdowns positioned absolutely below their column headers - Maintained all existing filter values and checkbox behavior 2. **Updated server/templates/base.html CSS (lines 164-227):** - Made filterable headers use display:flex for icon positioning - Added .filter-icon styles with hover and active states - Active filters show blue background (#1f6feb) - Added .header-filter-dropdown with absolute positioning and z-index:1000 - Dropdowns open below their column with proper shadow and border 3. **Added JavaScript functions in base.html (lines 1747-1837):** - toggleHeaderFilter(dropdownId) - Opens/closes dropdown, closes others - updateHeaderFilterIcon(dropdownId, filterName) - Updates icon active state - applyHeaderFilter(dropdownId, filterName) - Triggers HTMX filter request - Updated clearAllFilters() to also clear header filter icon states - Added click-outside handler to close header dropdowns 4. **Removed old toolbar filters from server/templates/issues.html:** - Removed Status, Project, Priority, Milestone, and Label filter dropdowns from toolbar - Kept search input and "Clear Filters" button - Toolbar now cleaner and takes less vertical space **Testing:** - All 71 server tests pass including test_list_issues_with_filters - Filter functionality verified: multi-select works, active states display correctly - Sorting and filtering work independently (click text to sort, click icon to filter) **Benefits:** - More intuitive UX - filter icon directly associated with column - Saves vertical space by removing toolbar filter dropdowns - Active filter state visible on column headers - Better visual hierarchy