←
TRCKR-226
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