Add AJAX filtering for preview popover with width lock

- Convert preview filter from client-side JS to server-side AJAX
- Add debounce utility function for 300ms delayed AJAX calls
- Add filter handlers for all 4 preview types (tab, condition, group, filter-group)
- Add filterProductIdsByQuery() method to EntityPreviewHandler
- Update all AJAX handlers to support filter parameter
- Lock popover width when filtering to prevent resize
- Add loading overlay CSS for filter state

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-29 14:07:56 +01:00
parent 6f248605a7
commit b79a89bbb4
11 changed files with 917 additions and 80 deletions

View File

@@ -84,20 +84,55 @@
display: flex;
flex-direction: column;
gap: $es-spacing-xs;
position: relative;
// Loading overlay for AJAX filtering
&.filtering {
pointer-events: none;
opacity: 0.6;
}
.filter-loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba($es-white, 0.7);
z-index: 10;
i {
font-size: 20px;
color: $es-primary;
animation: spin 0.6s linear infinite;
}
}
}
// Filter input section
.preview-filter {
padding: $es-spacing-sm $es-spacing-md;
padding: $es-spacing-sm;
border-bottom: 1px solid $es-border-color;
.preview-filter-input {
@include input-base;
width: 100%;
padding: $es-spacing-sm;
font-size: $es-font-size-sm;
padding: $es-spacing-xs $es-spacing-sm;
font-size: $es-font-size-xs;
line-height: 1.4;
color: $es-text-primary;
background-color: $es-white;
border: 1px solid $es-border-color;
border-radius: $es-radius-sm;
box-sizing: border-box;
&:focus {
border-color: $es-primary;
outline: none;
}
&::placeholder {
color: $es-text-muted;
}