mypresta.rocks/prestashop-entity-selector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hierarchical tree view for category selection

Browse Source 
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:
myprestarocks
2026-01-31 15:03:51 +01:00
parent b79a89bbb4
commit 7d79273743
37 changed files with 4620 additions and 1913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
sources/scss/components/_chips.scss
View File

@@ -9,19 +9,169 @@
.target-conditions-trait,
.entity-selector-trait {
// Chips container wrapper with toolbar
.chips-wrapper {
display: flex;
flex-direction: column;
margin-top: $es-spacing-sm;
background: $es-slate-50;
border: 1px solid $es-border-color;
border-radius: $es-radius-md;
overflow: hidden;
}
// Chips toolbar - search and actions
.chips-toolbar {
display: none; // Hidden by default, shown via JS when chips exist
align-items: center;
gap: $es-spacing-sm;
padding: $es-spacing-sm $es-spacing-md;
background: $es-white;
border-bottom: 1px solid $es-border-color;
&.has-chips {
display: flex;
}
// Search icon
> i {
color: $es-text-muted;
font-size: 14px;
flex-shrink: 0;
}
}
.chips-search-input,
input.chips-search-input,
input.chips-search-input[type="text"] {
flex: 1 !important;
min-width: 80px !important;
max-width: none !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
border: none !important;
border-bottom: 1px solid transparent !important;
border-radius: 0 !important;
background: transparent !important;
font-size: $es-font-size-sm !important;
color: $es-text-primary;
box-shadow: none !important;
transition: border-color $es-transition-fast;
&:focus {
outline: none !important;
border: none !important;
border-bottom: 1px solid $es-primary !important;
box-shadow: none !important;
}
&::placeholder {
color: $es-text-muted;
}
}
.chips-count {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.625rem;
background: $es-primary;
color: $es-white;
font-size: $es-font-size-xs;
font-weight: $es-font-weight-semibold;
border-radius: $es-radius-full;
white-space: nowrap;
&.has-filter {
background: $es-cyan-500;
}
.count-filtered {
font-weight: $es-font-weight-bold;
}
.count-separator {
opacity: 0.7;
}
}
.chips-actions {
display: flex;
align-items: center;
gap: $es-spacing-xs;
margin-left: auto;
}
.btn-chips-clear {
@include button-reset;
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
color: $es-white;
font-size: $es-font-size-xs;
font-weight: $es-font-weight-semibold;
background: $es-danger;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
&:hover {
background: darken($es-danger, 8%);
}
i {
font-size: 11px;
}
}
// Chips container
.entity-chips {
display: flex;
flex-wrap: wrap;
gap: $es-spacing-xs;
padding: $es-spacing-sm 0;
min-height: 32px;
padding: $es-spacing-md;
min-height: 40px;
max-height: 300px;
overflow-y: auto;
&:empty {
display: none;
}
}
// Load more button
.chips-load-more {
display: flex;
align-items: center;
justify-content: center;
padding: $es-spacing-sm $es-spacing-md;
background: $es-white;
border-top: 1px solid $es-border-color;
.btn-load-more {
@include button-reset;
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
color: $es-white;
font-size: $es-font-size-sm;
font-weight: $es-font-weight-semibold;
background: $es-primary;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
&:hover {
background: $es-primary-hover;
}
i {
font-size: 12px;
}
}
}
// Individual chip
.entity-chip {
display: inline-flex;
@@ -33,7 +183,6 @@
font-size: $es-font-size-xs;
font-weight: $es-font-weight-medium;
border-radius: $es-radius-full;
max-width: 200px;
transition: all $es-transition-fast;
&:hover {
@@ -44,6 +193,12 @@
&.has-image {
padding-left: 0.25rem;
}
// Hidden by search filter or pagination
&.chip-filtered-out,
&.chip-paginated-out {
display: none;
}
}
.chip-image {
@@ -55,14 +210,26 @@
}
.chip-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: $es-text-muted;
flex-shrink: 0;
// Product/entity images inside chip
img {
width: 20px;
height: 20px;
object-fit: cover;
border-radius: $es-radius-sm;
}
}
.chip-text,
.chip-name {
@include text-truncate;
// Show full name, no truncation
word-break: break-word;
}
.chip-remove {