Add hierarchical tree view for category selection

Features:
- Tree view mode for categories with expand/collapse
- Product count badges with clickable preview popover
- Select parent with all children button
- Client-side tree filtering (refine search)
- Keyboard shortcuts: Ctrl+A (select all), Ctrl+D (clear)
- View mode switching between tree/list/columns
- Tree view as default for categories, respects user preference

Backend:
- Add previewCategoryProducts and previewCategoryPages AJAX handlers
- Support pagination and filtering in category previews

Styling:
- Consistent count-badge styling across tree and other views
- Loading and popover-open states for count badges

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-31 15:03:51 +01:00
parent b79a89bbb4
commit 7d79273743
37 changed files with 4620 additions and 1913 deletions

View File

@@ -42,10 +42,16 @@
}
}
// Separation between chips and search box
.chips-wrapper + .entity-search-box {
margin-top: $es-spacing-md;
}
.entity-search-icon {
color: $es-text-muted;
font-size: 14px;
flex-shrink: 0;
margin-left: $es-spacing-xs;
}
// Override parent form's max-width on search input
@@ -85,6 +91,31 @@
}
}
// Browse tree button (for categories)
.btn-browse-tree {
@include button-reset;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-left: auto;
color: $es-primary;
background: $es-primary-light;
border-radius: $es-radius-sm;
flex-shrink: 0;
transition: all $es-transition-fast;
&:hover {
background: $es-primary;
color: $es-white;
}
i {
font-size: 14px;
}
}
// Numeric range box
.numeric-range-box,
.multi-range-input-row {