', { class: 'mpr-tooltip-fixed' }).html(content);
+ $('body').append($tooltip);
+
+ // Use getBoundingClientRect for viewport-relative positioning (fixed)
+ var rect = $wrapper[0].getBoundingClientRect();
+ var tooltipWidth = $tooltip.outerWidth();
+ var tooltipHeight = $tooltip.outerHeight();
+
+ var left = rect.left + (rect.width / 2) - (tooltipWidth / 2);
+ var top = rect.top - tooltipHeight - 8;
+
+ // Keep tooltip within viewport
+ if (left < 10) left = 10;
+ if (left + tooltipWidth > window.innerWidth - 10) {
+ left = window.innerWidth - tooltipWidth - 10;
+ }
+ if (top < 10) {
+ top = rect.bottom + 8;
+ }
+
+ $tooltip.css({ top: top, left: left });
+ });
+
+ this.$wrapper.on('mouseleave', '.mpr-info-wrapper:not(.pinned)', function() {
+ $('.mpr-tooltip-fixed:not(.pinned)').remove();
+ });
+
+ // Click to pin tooltip
+ this.$wrapper.on('click', '.mpr-info-wrapper', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ var $wrapper = $(this);
+
+ // If already pinned, unpin and close
+ if ($wrapper.hasClass('pinned')) {
+ $wrapper.removeClass('pinned');
+ $wrapper.find('.material-icons').text('info_outline');
+ $('.mpr-tooltip-fixed.pinned').remove();
+ return;
+ }
+
+ // Close any other pinned tooltips
+ $('.mpr-info-wrapper.pinned').removeClass('pinned').find('.material-icons').text('info_outline');
+ $('.mpr-tooltip-fixed').remove();
+
+ var content = $wrapper.attr('data-tooltip');
+ if (!content) return;
+
+ // Pin this one
+ $wrapper.addClass('pinned');
+ $wrapper.find('.material-icons').text('close');
+
+ // Create pinned tooltip with close button
+ var $tooltip = $('
', { class: 'mpr-tooltip-fixed pinned' });
+ var $closeBtn = $('
';
+ });
+ }
+
+ if (appendMode) {
+ $container.append(html);
+ } else {
+ $container.html(html);
+ }
+
+ // Show/hide load more controls and update remaining count
+ var hasMore = this.searchResults.length < this.searchTotal;
+ var $loadMoreControls = this.$dropdown.find('.load-more-controls');
+ $loadMoreControls.toggle(hasMore);
+
+ if (hasMore) {
+ var remaining = this.searchTotal - this.searchResults.length;
+ $loadMoreControls.find('.remaining-count').text(remaining);
+
+ // Update "All" option in dropdown
+ var $select = $loadMoreControls.find('.load-more-select');
+ var $allOption = $select.find('option[data-all="true"]');
+ if ($allOption.length) {
+ $allOption.val(remaining).text((trans.all || 'All') + ' (' + remaining + ')');
+ } else {
+ $select.find('option:last').after('
');
+ }
+ }
+
+ // Ensure dropdown-actions are visible and history button is deactivated
+ this.$dropdown.find('.dropdown-actions').show();
+ this.$dropdown.find('.btn-show-history').removeClass('active');
+
+ // Disable history button if no search history for current entity type
+ var entityType = this.activeGroup ? this.activeGroup.searchEntity : null;
+ var hasHistory = entityType && this.getSearchHistory(entityType).length > 0;
+ this.$dropdown.find('.btn-show-history').prop('disabled', !hasHistory);
+ },
+
+ // NOTE: Tree methods (loadCategoryTree, renderCategoryTree, filterCategoryTree,
+ // findTreeDescendants, findTreeAncestors, updateSelectChildrenButtons) are
+ // defined in _tree.js which is merged later and takes precedence.
+
+ // =========================================================================
+ // Search History
+ // =========================================================================
+
+ loadSearchHistory: function() {
+ try {
+ var stored = localStorage.getItem(this.searchHistoryKey);
+ this.searchHistory = stored ? JSON.parse(stored) : {};
+ } catch (e) {
+ this.searchHistory = {};
+ }
+ },
+
+ saveSearchHistory: function() {
+ try {
+ localStorage.setItem(this.searchHistoryKey, JSON.stringify(this.searchHistory));
+ } catch (e) {
+ // localStorage might be full or unavailable
+ }
+ },
+
+ addToSearchHistory: function(entityType, query) {
+ if (!query || query.length < 2) return;
+
+ if (!this.searchHistory[entityType]) {
+ this.searchHistory[entityType] = [];
+ }
+
+ var history = this.searchHistory[entityType];
+
+ // Remove if already exists (will re-add at top)
+ var existingIndex = history.indexOf(query);
+ if (existingIndex !== -1) {
+ history.splice(existingIndex, 1);
+ }
+
+ // Add at beginning
+ history.unshift(query);
+
+ // Trim to max
+ if (history.length > this.searchHistoryMax) {
+ history = history.slice(0, this.searchHistoryMax);
+ }
+
+ this.searchHistory[entityType] = history;
+ this.saveSearchHistory();
+ },
+
+ removeFromSearchHistory: function(entityType, query) {
+ if (!this.searchHistory[entityType]) return;
+
+ var index = this.searchHistory[entityType].indexOf(query);
+ if (index !== -1) {
+ this.searchHistory[entityType].splice(index, 1);
+ this.saveSearchHistory();
+ }
+ },
+
+ getSearchHistory: function(entityType) {
+ return this.searchHistory[entityType] || [];
+ },
+
+ showSearchHistory: function(entityType) {
+ var history = this.getSearchHistory(entityType);
+ var trans = this.config.trans || {};
+ var $container = this.$dropdown.find('.dropdown-results');
+
+ // Update header
+ this.$dropdown.find('.results-count').text(trans.recent_searches || 'Recent searches');
+
+ // Hide filters, actions, and results header for history view
+ this.$dropdown.find('.dropdown-actions').hide();
+ this.$dropdown.find('.filter-panel').removeClass('show');
+ this.$dropdown.find('.btn-toggle-filters').removeClass('active');
+ this.$dropdown.find('.results-header').hide();
+
+ if (!history.length) {
+ // No history - just do a regular search
+ this.performSearch();
+ return;
+ }
+
+ // Build history items
+ var html = '
';
+ for (var i = 0; i < history.length; i++) {
+ var query = history[i];
+ html += '
';
+ html += '';
+ html += '' + this.escapeHtml(query) + '';
+ html += '';
+ html += '
';
+ }
+ html += '
';
+
+ $container.html(html);
+ this.$dropdown.addClass('show');
+ },
+
+ // =========================================================================
+ // Filter Methods
+ // =========================================================================
+
+ refreshSearch: function() {
+ // In tree view mode, re-filter the tree instead of doing a flat AJAX search
+ if (this.viewMode === 'tree') {
+ this.filterCategoryTree(this.searchQuery || '');
+ return;
+ }
+
+ this.searchOffset = 0;
+ this.loadMoreCount = 20;
+ // Reset load more select to default
+ if (this.$dropdown) {
+ this.$dropdown.find('.load-more-select').val('20');
+ // Remove the dynamic "All" option
+ this.$dropdown.find('.load-more-select option[data-all="true"]').remove();
+ }
+ this.performSearch(false);
+ },
+
+ clearFilters: function() {
+ this.refineQuery = '';
+ this.refineNegate = false;
+ this.filters = {
+ inStock: false,
+ discounted: false,
+ priceMin: null,
+ priceMax: null,
+ attributes: [],
+ features: [],
+ // Entity-specific filters
+ productCountMin: null,
+ productCountMax: null,
+ salesMin: null,
+ salesMax: null,
+ turnoverMin: null,
+ turnoverMax: null,
+ depth: null,
+ hasProducts: false,
+ hasDescription: false,
+ hasImage: false,
+ activeOnly: true,
+ attributeGroup: null,
+ featureGroup: null,
+ dateAddFrom: null,
+ dateAddTo: null,
+ lastProductFrom: null,
+ lastProductTo: null
+ };
+
+ if (this.$dropdown) {
+ var trans = this.config.trans || {};
+ this.$dropdown.find('.refine-input').val('').attr('placeholder', trans.refine_short || 'Refine...');
+ this.$dropdown.find('.btn-clear-refine').hide();
+ this.$dropdown.find('.btn-refine-negate').removeClass('active');
+ this.$dropdown.find('.filter-in-stock').prop('checked', false);
+ this.$dropdown.find('.filter-discounted').prop('checked', false);
+ this.$dropdown.find('.filter-price-min').val('');
+ this.$dropdown.find('.filter-price-max').val('');
+ this.$dropdown.find('.filter-attr-chip').removeClass('active');
+ this.$dropdown.find('.filter-feat-chip').removeClass('active');
+ this.$dropdown.find('.filter-group-toggle').removeClass('active has-selection');
+ this.$dropdown.find('.filter-row-values').hide();
+
+ // Clear entity-specific filter inputs
+ this.$dropdown.find('.filter-product-count-min, .filter-product-count-max').val('');
+ this.$dropdown.find('.filter-sales-min, .filter-sales-max').val('');
+ this.$dropdown.find('.filter-turnover-min, .filter-turnover-max').val('');
+ this.$dropdown.find('.filter-date-add-from, .filter-date-add-to').val('');
+ this.$dropdown.find('.filter-last-product-from, .filter-last-product-to').val('');
+ this.$dropdown.find('.filter-depth-select').val('');
+ this.$dropdown.find('.filter-has-products').prop('checked', false);
+ this.$dropdown.find('.filter-has-description').prop('checked', false);
+ this.$dropdown.find('.filter-has-image').prop('checked', false);
+ this.$dropdown.find('.filter-active-only').prop('checked', true);
+ this.$dropdown.find('.filter-attribute-group-select, .filter-feature-group-select').val('');
+ }
+
+ this.refreshSearch();
+ },
+
+ // Reset filters without triggering a search (used when switching entity types)
+ resetFiltersWithoutSearch: function() {
+ this.refineQuery = '';
+ this.refineNegate = false;
+ this.filters = {
+ inStock: false,
+ discounted: false,
+ priceMin: null,
+ priceMax: null,
+ attributes: [],
+ features: [],
+ productCountMin: null,
+ productCountMax: null,
+ salesMin: null,
+ salesMax: null,
+ turnoverMin: null,
+ turnoverMax: null,
+ depth: null,
+ hasProducts: false,
+ hasDescription: false,
+ hasImage: false,
+ activeOnly: true,
+ attributeGroup: null,
+ featureGroup: null,
+ dateAddFrom: null,
+ dateAddTo: null,
+ lastProductFrom: null,
+ lastProductTo: null
+ };
+
+ if (this.$dropdown) {
+ var trans = this.config.trans || {};
+ this.$dropdown.find('.refine-input').val('').attr('placeholder', trans.refine_short || 'Refine...');
+ this.$dropdown.find('.btn-clear-refine').hide();
+ this.$dropdown.find('.btn-refine-negate').removeClass('active');
+ this.$dropdown.find('.filter-in-stock').prop('checked', false);
+ this.$dropdown.find('.filter-discounted').prop('checked', false);
+ this.$dropdown.find('.filter-price-min').val('');
+ this.$dropdown.find('.filter-price-max').val('');
+ this.$dropdown.find('.filter-attr-chip').removeClass('active');
+ this.$dropdown.find('.filter-feat-chip').removeClass('active');
+ this.$dropdown.find('.filter-group-toggle').removeClass('active has-selection');
+ this.$dropdown.find('.filter-row-values').hide();
+ this.$dropdown.find('.filter-product-count-min, .filter-product-count-max').val('');
+ this.$dropdown.find('.filter-sales-min, .filter-sales-max').val('');
+ this.$dropdown.find('.filter-turnover-min, .filter-turnover-max').val('');
+ this.$dropdown.find('.filter-date-add-from, .filter-date-add-to').val('');
+ this.$dropdown.find('.filter-last-product-from, .filter-last-product-to').val('');
+ this.$dropdown.find('.filter-depth-select').val('');
+ this.$dropdown.find('.filter-has-products').prop('checked', false);
+ this.$dropdown.find('.filter-has-description').prop('checked', false);
+ this.$dropdown.find('.filter-has-image').prop('checked', false);
+ this.$dropdown.find('.filter-active-only').prop('checked', true);
+ this.$dropdown.find('.filter-attribute-group-select, .filter-feature-group-select').val('');
+ }
+ // Note: Does NOT call refreshSearch() - caller handles search/load
+ },
+
+ updateFilterPanelForEntity: function(entityType) {
+ if (!this.$dropdown) {
+ return;
+ }
+
+ var $panel = this.$dropdown.find('.filter-panel');
+
+ // Hide all filter rows first
+ $panel.find('.filter-row').hide();
+
+ // Show/hide tree view option based on entity type
+ var $treeOption = this.$dropdown.find('.view-mode-select option.tree-view-option');
+ if (entityType === 'categories' || entityType === 'cms_categories') {
+ $treeOption.prop('disabled', false).prop('hidden', false);
+ // Auto-switch to tree view for categories
+ if (this.viewMode !== 'tree') {
+ this.viewMode = 'tree';
+ this.$dropdown.find('.view-mode-select').val('tree');
+ this.$dropdown.removeClass('view-list view-cols-2 view-cols-3 view-cols-4 view-cols-5 view-cols-6 view-cols-7 view-cols-8').addClass('view-tree');
+ this.loadCategoryTree();
+ } else {
+ this.loadCategoryTree();
+ }
+ } else {
+ $treeOption.prop('disabled', true).prop('hidden', true);
+ // If currently in tree mode, switch back to list
+ if (this.viewMode === 'tree') {
+ this.viewMode = 'list';
+ this.$dropdown.find('.view-mode-select').val('list');
+ this.$dropdown.removeClass('view-tree').addClass('view-list');
+ }
+ }
+
+ // Show entity-specific filter row (prepare visibility, but don't auto-expand panel)
+ if (entityType === 'products') {
+ // Prepare the correct rows to be visible when panel is shown
+ $panel.find('.filter-row-quick').show();
+ // Show attribute/feature rows if we have cached data
+ if (this.filterableData) {
+ if (this.filterableData.attributes && this.filterableData.attributes.length > 0) {
+ this.$dropdown.find('.filter-row-attributes').show();
+ }
+ if (this.filterableData.features && this.filterableData.features.length > 0) {
+ this.$dropdown.find('.filter-row-features').show();
+ }
+ }
+ } else if (entityType === 'categories') {
+ $panel.find('.filter-row-entity-categories').show();
+ } else if (entityType === 'manufacturers') {
+ $panel.find('.filter-row-entity-manufacturers').show();
+ } else if (entityType === 'suppliers') {
+ $panel.find('.filter-row-entity-suppliers').show();
+ } else if (entityType === 'attributes') {
+ $panel.find('.filter-row-entity-attributes').show();
+ this.loadAttributeGroups();
+ } else if (entityType === 'features') {
+ $panel.find('.filter-row-entity-features').show();
+ } else if (entityType === 'cms') {
+ $panel.find('.filter-row-entity-cms').show();
+ } else if (entityType === 'cms_categories') {
+ $panel.find('.filter-row-entity-cms-categories').show();
+ }
+ },
+
+ loadAttributeGroups: function() {
+ var self = this;
+ var $select = this.$dropdown.find('.filter-attribute-group-select');
+
+ // Already loaded?
+ if ($select.find('option').length > 1) return;
+
+ $.ajax({
+ url: this.config.ajaxUrl,
+ type: 'POST',
+ dataType: 'json',
+ data: {
+ ajax: 1,
+ action: 'getAttributeGroups',
+ trait: 'EntitySelector'
+ },
+ success: function(response) {
+ if (response.success && response.groups) {
+ $.each(response.groups, function(i, group) {
+ $select.append('
');
+ });
+ }
+ }
+ });
+ },
+
+ loadFeatureGroups: function() {
+ var self = this;
+ var $select = this.$dropdown.find('.filter-feature-group-select');
+
+ // Already loaded?
+ if ($select.find('option').length > 1) return;
+
+ $.ajax({
+ url: this.config.ajaxUrl,
+ type: 'POST',
+ dataType: 'json',
+ data: {
+ ajax: 1,
+ action: 'getFeatureGroups',
+ trait: 'EntitySelector'
+ },
+ success: function(response) {
+ if (response.success && response.groups) {
+ $.each(response.groups, function(i, group) {
+ $select.append('
');
+ });
+ }
+ }
+ });
+ }
+ };
+
+})(jQuery);
+
+/**
+ * Entity Selector - Filters Module
+ * Filter panel, filter state management
+ * @partial _filters.js
+ *
+ * EXTRACTION SOURCE: assets/js/admin/entity-selector.js
+ * Lines: 6605-6758 (filter methods)
+ *
+ * Contains:
+ * - clearFilters() - Reset all filters
+ * - resetFiltersWithoutSearch() - Reset without triggering search
+ * - updateFilterPanelForEntity() - Show/hide filters based on entity type
+ * - loadFilterableData() - Load attributes/features for filter panel
+ * - renderFilterDropdowns() - Render attribute/feature group toggles
+ * - showFilterGroupValues() - Show values for a filter group
+ * - hideFilterGroupValues() - Hide filter values row
+ * - updateFilterToggleStates() - Update toggle states based on selections
+ */
+
+(function($) {
+ 'use strict';
+
+ window._EntitySelectorMixins = window._EntitySelectorMixins || {};
+
+ window._EntitySelectorMixins.filters = {
+
+ clearFilters: function() {
+ this.refineQuery = '';
+ this.refineNegate = false;
+ this.filters = {
+ inStock: false,
+ discounted: false,
+ priceMin: null,
+ priceMax: null,
+ attributes: [],
+ features: [],
+ productCountMin: null,
+ productCountMax: null,
+ salesMin: null,
+ salesMax: null,
+ turnoverMin: null,
+ turnoverMax: null,
+ depth: null,
+ hasProducts: false,
+ hasDescription: false,
+ hasImage: false,
+ activeOnly: true,
+ attributeGroup: null,
+ featureGroup: null,
+ dateAddFrom: null,
+ dateAddTo: null,
+ lastProductFrom: null,
+ lastProductTo: null
+ };
+
+ if (this.$dropdown) {
+ var trans = this.config.trans || {};
+ this.$dropdown.find('.refine-input').val('');
+ this.$dropdown.find('.btn-refine-negate').removeClass('active');
+ this.$dropdown.find('.filter-in-stock').prop('checked', false);
+ this.$dropdown.find('.filter-discounted').prop('checked', false);
+ this.$dropdown.find('.filter-price-min, .filter-price-max').val('');
+ this.$dropdown.find('.filter-attr-chip, .filter-feat-chip').removeClass('active');
+ this.$dropdown.find('.filter-product-count-min, .filter-product-count-max').val('');
+ this.$dropdown.find('.filter-sales-min, .filter-sales-max').val('');
+ this.$dropdown.find('.filter-depth-select').val('');
+ this.$dropdown.find('.filter-has-products').prop('checked', false);
+ this.$dropdown.find('.filter-active-only').prop('checked', true);
+ }
+
+ this.refreshSearch();
+ },
+
+ resetFiltersWithoutSearch: function() {
+ // Same as clearFilters but doesn't trigger search
+ // Used when switching entity types
+ this.refineQuery = '';
+ this.refineNegate = false;
+ this.filters = {
+ inStock: false,
+ discounted: false,
+ priceMin: null,
+ priceMax: null,
+ attributes: [],
+ features: [],
+ productCountMin: null,
+ productCountMax: null,
+ salesMin: null,
+ salesMax: null,
+ turnoverMin: null,
+ turnoverMax: null,
+ depth: null,
+ hasProducts: false,
+ hasDescription: false,
+ hasImage: false,
+ activeOnly: true,
+ attributeGroup: null,
+ featureGroup: null,
+ dateAddFrom: null,
+ dateAddTo: null,
+ lastProductFrom: null,
+ lastProductTo: null
+ };
+ },
+
+ updateFilterPanelForEntity: function(entityType) {
+ if (!this.$dropdown) {
+ return;
+ }
+
+ var $panel = this.$dropdown.find('.filter-panel');
+
+ // Hide all entity-specific filter rows
+ $panel.find('.filter-row').hide();
+
+ // Show filters for current entity type
+ $panel.find('.filter-row[data-entity="' + entityType + '"]').show();
+ $panel.find('.filter-row-entity-' + entityType.replace('_', '-')).show();
+
+ // Show/hide tree view option based on entity type
+ var isCategory = (entityType === 'categories' || entityType === 'cms_categories');
+ this.$dropdown.find('.tree-view-option').toggle(isCategory);
+
+ // Default to tree view for categories (only if currently on list mode)
+ if (isCategory && this.viewMode === 'list') {
+ this.viewMode = 'tree';
+ this.$dropdown.find('.view-mode-select').val('tree');
+ this.$dropdown.removeClass('view-list view-cols-2 view-cols-3 view-cols-4 view-cols-5 view-cols-6 view-cols-7 view-cols-8').addClass('view-tree');
+ } else if (!isCategory && this.viewMode === 'tree') {
+ // If switching away from categories while in tree mode, switch to list
+ this.viewMode = 'list';
+ this.$dropdown.find('.view-mode-select').val('list');
+ this.$dropdown.removeClass('view-tree view-cols-2 view-cols-3 view-cols-4 view-cols-5 view-cols-6 view-cols-7 view-cols-8').addClass('view-list');
+ }
+
+ // Update sort options for entity type
+ this.updateSortOptionsForEntity(entityType);
+ },
+
+ /**
+ * Show/hide sort options based on entity type
+ * Options with data-entities attribute are only shown for matching entities
+ */
+ updateSortOptionsForEntity: function(entityType) {
+ if (!this.$dropdown) {
+ return;
+ }
+
+ var $select = this.$dropdown.find('.sort-field-select');
+ var currentValue = $select.val();
+ var hasCurrentOption = false;
+
+ $select.find('option').each(function() {
+ var $option = $(this);
+ var entities = $option.data('entities');
+
+ // Options without data-entities are universal (always shown)
+ if (!entities) {
+ $option.show();
+ if ($option.val() === currentValue) {
+ hasCurrentOption = true;
+ }
+ return;
+ }
+
+ // Check if this entity type is in the allowed list
+ var allowedEntities = entities.split(',');
+ var isAllowed = allowedEntities.indexOf(entityType) !== -1;
+
+ $option.toggle(isAllowed);
+
+ if (isAllowed && $option.val() === currentValue) {
+ hasCurrentOption = true;
+ }
+ });
+
+ // If current sort field is not available for this entity, reset to 'name'
+ if (!hasCurrentOption) {
+ $select.val('name');
+ this.currentSort.field = 'name';
+ }
+ },
+
+ loadFilterableData: function() {
+ var self = this;
+
+ if (this.filterableData) {
+ this.renderFilterDropdowns();
+ return;
+ }
+
+ $.ajax({
+ url: this.config.ajaxUrl,
+ type: 'POST',
+ data: {
+ ajax: 1,
+ action: 'getTargetFilterableAttributes',
+ trait: 'EntitySelector'
+ },
+ dataType: 'json',
+ success: function(response) {
+ if (response.success && response.data) {
+ self.filterableData = response.data;
+ self.renderFilterDropdowns();
+ }
+ }
+ });
+ },
+
+ renderFilterDropdowns: function() {
+ if (!this.$dropdown || !this.filterableData) return;
+
+ var self = this;
+
+ // Render attribute group toggle buttons
+ var $attrContainer = this.$dropdown.find('.filter-attributes-container');
+ $attrContainer.empty();
+
+ if (this.filterableData.attributes && this.filterableData.attributes.length > 0) {
+ this.filterableData.attributes.forEach(function(group) {
+ var html = '
';
+ $attrContainer.append(html);
+ });
+ this.$dropdown.find('.filter-row-attributes').show();
+ }
+
+ // Render feature group toggle buttons
+ var $featContainer = this.$dropdown.find('.filter-features-container');
+ $featContainer.empty();
+
+ if (this.filterableData.features && this.filterableData.features.length > 0) {
+ this.filterableData.features.forEach(function(group) {
+ var html = '
';
+ $featContainer.append(html);
+ });
+ this.$dropdown.find('.filter-row-features').show();
+ }
+ },
+
+ showFilterGroupValues: function(groupId, type) {
+ if (!this.filterableData) return;
+
+ var self = this;
+ var groups = type === 'attribute' ? this.filterableData.attributes : this.filterableData.features;
+ var group = groups.find(function(g) { return g.id == groupId; });
+
+ if (!group) return;
+
+ // Hide all values rows first, then show the correct one
+ this.$dropdown.find('.filter-row-values').hide();
+
+ // Target the correct values row based on type
+ var valuesRowClass = type === 'attribute' ? '.filter-row-attr-values' : '.filter-row-feat-values';
+ var $filterRowValues = this.$dropdown.find(valuesRowClass);
+ var $valuesContainer = $filterRowValues.find('.filter-values-container');
+ $valuesContainer.empty();
+
+ // Add group label
+ var html = '
' + group.name + ':';
+
+ // Add chips
+ group.values.forEach(function(val) {
+ var isActive = type === 'attribute'
+ ? self.filters.attributes.indexOf(val.id) !== -1
+ : self.filters.features.indexOf(val.id) !== -1;
+ var activeClass = isActive ? ' active' : '';
+ var chipClass = type === 'attribute' ? 'filter-attr-chip' : 'filter-feat-chip';
+ var colorStyle = val.color ? ' style="--chip-color: ' + val.color + '"' : '';
+ var colorClass = val.color ? ' has-color' : '';
+
+ html += '
';
+ });
+
+ $valuesContainer.html(html);
+
+ // Add close button as sibling (outside filter-values-container, inside filter-row-values)
+ $filterRowValues.find('.btn-close-values').remove();
+ $filterRowValues.append('
');
+ $filterRowValues.show();
+
+ // Scroll into view if needed
+ var rowValues = $filterRowValues[0];
+ if (rowValues) {
+ rowValues.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+ }
+ },
+
+ hideFilterGroupValues: function() {
+ this.$dropdown.find('.filter-row-values').hide();
+ this.$dropdown.find('.filter-group-toggle').removeClass('active');
+ },
+
+ updateFilterToggleStates: function() {
+ if (!this.$dropdown || !this.filterableData) return;
+
+ var self = this;
+
+ // Update attribute group toggles
+ if (this.filterableData.attributes) {
+ this.filterableData.attributes.forEach(function(group) {
+ var $toggle = self.$dropdown.find('.filter-group-toggle[data-group-id="' + group.id + '"][data-type="attribute"]');
+ var hasActiveInGroup = group.values.some(function(val) {
+ return self.filters.attributes.indexOf(val.id) !== -1;
+ });
+ $toggle.toggleClass('has-selection', hasActiveInGroup);
+ });
+ }
+
+ // Update feature group toggles
+ if (this.filterableData.features) {
+ this.filterableData.features.forEach(function(group) {
+ var $toggle = self.$dropdown.find('.filter-group-toggle[data-group-id="' + group.id + '"][data-type="feature"]');
+ var hasActiveInGroup = group.values.some(function(val) {
+ return self.filters.features.indexOf(val.id) !== -1;
+ });
+ $toggle.toggleClass('has-selection', hasActiveInGroup);
+ });
+ }
+ }
+ };
+
+})(jQuery);
+
+/**
+ * Entity Selector - Chips Module
+ * Entity chip rendering, selection management, and pattern tag handling
+ * @partial _chips.js
+ *
+ * EXTRACTION SOURCE: assets/js/admin/entity-selector.js
+ *
+ * Contains:
+ * - addSelection() / addSelectionNoUpdate() - Add entity chip to picker
+ * - removeSelection() - Remove chip and update state
+ * - updateChipsVisibility() - Show/hide based on count
+ * - loadExistingSelections() - Load saved values on init
+ * - collectPickerEntities() / loadPickerValues() - Entity loading helpers
+ * - Pattern tag methods: addPatternTag, getPatternTags, updateDraftTagCount
+ * - Single mode: getCurrentSingleSelection, showReplaceConfirmation
+ * - Count updates: updateConditionCount, updateGroupCounts, updateGroupTotalCount
+ */
+
+(function($) {
+ 'use strict';
+
+ window._EntitySelectorMixins = window._EntitySelectorMixins || {};
+
+ window._EntitySelectorMixins.chips = {
+
+ // =========================================================================
+ // Selection Methods (Entity Chips)
+ // =========================================================================
+
+ addSelection: function($picker, id, name, data) {
+ this.addSelectionNoUpdate($picker, id, name, data);
+ var $chips = $picker.find('.entity-chips');
+ this.updateChipsVisibility($chips);
+ },
+
+ addSelectionNoUpdate: function($picker, id, name, data) {
+ var $chips = $picker.find('.entity-chips');
+ var $block = $picker.closest('.target-block');
+
+ // Check for global single mode (only ONE item across ALL entity types)
+ var globalMode = this.config.mode || 'multi';
+
+ if (globalMode === 'single') {
+ // Clear ALL selections in ALL blocks (across all entity types)
+ this.$wrapper.find('.entity-chips .entity-chip').remove();
+ // Clear all selected states in dropdown
+ if (this.$dropdown) {
+ this.$dropdown.find('.dropdown-item.selected, .tree-item.selected').removeClass('selected');
+ }
+ // Clear tab badges (since we're clearing other blocks)
+ this.$wrapper.find('.target-block-tab .tab-badge').remove();
+ this.$wrapper.find('.target-block-tab').removeClass('has-data');
+ } else {
+ // Check if this block is in per-block single mode
+ var blockMode = $block.data('mode') || 'multi';
+
+ // In per-block single mode, clear chips in THIS block only
+ if (blockMode === 'single') {
+ $chips.find('.entity-chip').remove();
+ // Also deselect all items in dropdown
+ if (this.$dropdown) {
+ this.$dropdown.find('.dropdown-item.selected, .tree-item.selected').removeClass('selected');
+ }
+ }
+ }
+
+ if ($chips.find('.entity-chip[data-id="' + id + '"]').length) {
+ return;
+ }
+
+ var html = '
';
+
+ if (data && data.image) {
+ html += ' + ')
';
+ }
+
+ html += '' + this.escapeHtml(name) + '';
+ html += '';
+ html += '';
+
+ $chips.append(html);
+ },
+
+ removeSelection: function($picker, id) {
+ var $chips = $picker.find('.entity-chips');
+ $picker.find('.entity-chip[data-id="' + id + '"]').remove();
+ this.updateChipsVisibility($chips);
+ },
+
+ updateChipsVisibility: function($chips) {
+ var self = this;
+ var trans = this.config.trans || {};
+ var $picker = $chips.closest('.value-picker');
+ var $allChips = $chips.find('.entity-chip');
+ var totalCount = $allChips.length;
+
+ // If no chips, remove the wrapper entirely
+ var $existingWrapper = $chips.closest('.chips-wrapper');
+ if (totalCount === 0) {
+ if ($existingWrapper.length) {
+ // Move chips out of wrapper before removing
+ $existingWrapper.before($chips);
+ $existingWrapper.remove();
+ }
+ return;
+ }
+
+ // Ensure chips wrapper structure exists
+ this.ensureChipsWrapper($chips);
+
+ var $wrapper = $chips.closest('.chips-wrapper');
+ var $toolbar = $wrapper.find('.chips-toolbar');
+ var $loadMore = $wrapper.find('.chips-load-more');
+
+ // Get current search filter
+ var searchTerm = $toolbar.find('.chips-search-input').val() || '';
+ searchTerm = searchTerm.toLowerCase().trim();
+
+ // Filter and paginate chips
+ var visibleCount = 0;
+ var filteredCount = 0;
+ var isExpanded = $chips.hasClass('chips-expanded');
+ var maxVisible = isExpanded ? 999999 : (this.maxVisibleChips || 12);
+
+ $allChips.each(function() {
+ var $chip = $(this);
+ var chipName = ($chip.find('.chip-name').text() || '').toLowerCase();
+ var matchesFilter = !searchTerm || chipName.indexOf(searchTerm) !== -1;
+
+ $chip.removeClass('chip-filtered-out chip-paginated-out');
+
+ if (!matchesFilter) {
+ $chip.addClass('chip-filtered-out');
+ } else {
+ filteredCount++;
+ if (filteredCount > maxVisible) {
+ $chip.addClass('chip-paginated-out');
+ } else {
+ visibleCount++;
+ }
+ }
+ });
+
+ // Update toolbar (always show when we have chips)
+ $toolbar.addClass('has-chips');
+ this.updateChipsToolbar($toolbar, totalCount, filteredCount, searchTerm);
+
+ // Update load more select dropdown
+ var hiddenByPagination = filteredCount - visibleCount;
+ if (hiddenByPagination > 0 && !isExpanded) {
+ var loadText = trans.load || 'Load';
+ var remainingText = (trans.remaining || '{count} remaining').replace('{count}', hiddenByPagination);
+ var loadMoreHtml = '
' + loadText + '' +
+ '
' +
+ '
' + remainingText + '';
+ $loadMore.html(loadMoreHtml).show();
+ } else if (isExpanded && filteredCount > (this.maxVisibleChips || 12)) {
+ var collapseText = trans.collapse || 'Collapse';
+ $loadMore.html(
+ '
'
+ ).show();
+ } else {
+ $loadMore.hide();
+ }
+ },
+
+ ensureChipsWrapper: function($chips) {
+ // Check if already wrapped
+ if ($chips.closest('.chips-wrapper').length) {
+ return;
+ }
+
+ var trans = this.config.trans || {};
+ var $picker = $chips.closest('.value-picker');
+
+ // Create wrapper structure - integrated filter toolbar with sort
+ var wrapperHtml = '
' +
+ '
' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '
' +
+ '
' +
+ '
';
+
+ var $wrapper = $(wrapperHtml);
+
+ // Insert wrapper before chips and move chips inside
+ $chips.before($wrapper);
+ $wrapper.find('.chips-toolbar').after($chips);
+ $wrapper.append($wrapper.find('.chips-load-more'));
+
+ // Bind toolbar events
+ this.bindChipsToolbarEvents($wrapper);
+ },
+
+ bindChipsToolbarEvents: function($wrapper) {
+ var self = this;
+ var $chips = $wrapper.find('.entity-chips');
+ var searchTimeout;
+
+ // Search input
+ $wrapper.on('input', '.chips-search-input', function() {
+ clearTimeout(searchTimeout);
+ searchTimeout = setTimeout(function() {
+ // Collapse when searching to show filtered results from start
+ $chips.removeClass('chips-expanded');
+ self.updateChipsVisibility($chips);
+ }, 150);
+ });
+
+ // Sort select
+ $wrapper.on('change', '.chips-sort-select', function() {
+ var sortBy = $(this).val();
+ self.sortChips($chips, sortBy);
+ });
+
+ // Clear all button
+ $wrapper.on('click', '.btn-chips-clear', function() {
+ var searchTerm = $wrapper.find('.chips-search-input').val() || '';
+ var $chipsToRemove;
+
+ if (searchTerm.trim()) {
+ // Remove only filtered (visible) chips
+ $chipsToRemove = $chips.find('.entity-chip:not(.chip-filtered-out)');
+ } else {
+ // Remove all chips
+ $chipsToRemove = $chips.find('.entity-chip');
+ }
+
+ $chipsToRemove.each(function() {
+ $(this).find('.chip-remove').trigger('click');
+ });
+
+ // Clear search
+ $wrapper.find('.chips-search-input').val('');
+ self.updateChipsVisibility($chips);
+ });
+
+ // Load more select dropdown
+ $wrapper.on('change', '.load-more-select', function() {
+ var loadCount = $(this).val();
+ if (loadCount === 'all') {
+ $chips.addClass('chips-expanded');
+ self.maxVisibleChips = 999999;
+ } else {
+ self.maxVisibleChips = (self.maxVisibleChips || 12) + parseInt(loadCount, 10);
+ }
+ self.updateChipsVisibility($chips);
+ });
+
+ // Collapse button
+ $wrapper.on('click', '.btn-collapse-chips', function() {
+ $chips.removeClass('chips-expanded');
+ self.maxVisibleChips = 12;
+ self.updateChipsVisibility($chips);
+ });
+ },
+
+ /**
+ * Sort chips by specified criteria
+ */
+ sortChips: function($chips, sortBy) {
+ var $allChips = $chips.find('.entity-chip');
+ if ($allChips.length < 2) return;
+
+ var sorted = $allChips.toArray().sort(function(a, b) {
+ var $a = $(a);
+ var $b = $(b);
+
+ switch (sortBy) {
+ case 'name_asc':
+ var nameA = ($a.find('.chip-name').text() || '').toLowerCase();
+ var nameB = ($b.find('.chip-name').text() || '').toLowerCase();
+ return nameA.localeCompare(nameB);
+ case 'name_desc':
+ var nameA2 = ($a.find('.chip-name').text() || '').toLowerCase();
+ var nameB2 = ($b.find('.chip-name').text() || '').toLowerCase();
+ return nameB2.localeCompare(nameA2);
+ case 'added':
+ default:
+ // Keep original DOM order (order added)
+ return 0;
+ }
+ });
+
+ // Re-append in sorted order
+ $.each(sorted, function(i, chip) {
+ $chips.append(chip);
+ });
+
+ this.updateChipsVisibility($chips);
+ },
+
+ updateChipsToolbar: function($toolbar, totalCount, filteredCount, searchTerm) {
+ var trans = this.config.trans || {};
+ var $count = $toolbar.find('.chips-count');
+ var $clearBtn = $toolbar.find('.btn-chips-clear');
+ var $clearText = $clearBtn.find('.clear-text');
+
+ // Update count display
+ if (searchTerm) {
+ $count.addClass('has-filter').html(
+ '
' + filteredCount + '' +
+ '
/' +
+ '
' + totalCount + ''
+ );
+ $clearText.text((trans.clear || 'Clear') + ' ' + filteredCount);
+ } else {
+ $count.removeClass('has-filter').html(totalCount);
+ $clearText.text(trans.clear_all || 'Clear all');
+ }
+
+ // Show/hide clear button
+ if (searchTerm && filteredCount === 0) {
+ $clearBtn.hide();
+ } else if (totalCount > 0) {
+ $clearBtn.show();
+ } else {
+ $clearBtn.hide();
+ }
+ },
+
+ // =========================================================================
+ // Loading/Initialization
+ // =========================================================================
+
+ loadExistingSelections: function() {
+ var self = this;
+
+ // Collect all entity IDs to load, grouped by entity type
+ var entitiesToLoad = {}; // { entity_type: { ids: [], pickers: [] } }
+
+ this.$wrapper.find('.selection-group').each(function() {
+ var $group = $(this);
+ var $block = $group.closest('.target-block');
+ var blockType = $block.data('blockType');
+
+ // Load include values
+ var $includePicker = $group.find('.include-picker');
+ self.collectPickerEntities($includePicker, blockType, entitiesToLoad);
+
+ // Enhance the include method select if not already enhanced
+ self.enhanceMethodSelect($group.find('.include-method-select'));
+
+ // Load exclude values from each exclude row
+ $group.find('.exclude-row').each(function() {
+ var $excludeRow = $(this);
+ self.collectPickerEntities($excludeRow.find('.exclude-picker'), blockType, entitiesToLoad);
+
+ // Enhance the exclude method select if not already enhanced
+ self.enhanceMethodSelect($excludeRow.find('.exclude-method-select'));
+ });
+
+ // Lock method selector if excludes exist
+ var hasExcludes = $group.find('.group-excludes.has-excludes').length > 0;
+ if (hasExcludes) {
+ self.updateMethodSelectorLock($group, true);
+ }
+ });
+
+ // Build bulk request: { entityType: [uniqueIds], ... }
+ var bulkRequest = {};
+ var hasEntities = false;
+
+ Object.keys(entitiesToLoad).forEach(function(entityType) {
+ var data = entitiesToLoad[entityType];
+ if (data.ids.length === 0) return;
+
+ // Deduplicate IDs
+ var uniqueIds = data.ids.filter(function(id, index, arr) {
+ return arr.indexOf(id) === index;
+ });
+
+ bulkRequest[entityType] = uniqueIds;
+ hasEntities = true;
+ });
+
+ // Skip AJAX if no entities to load
+ if (!hasEntities) {
+ return;
+ }
+
+ // Single bulk AJAX call for all entity types
+ $.ajax({
+ url: self.config.ajaxUrl,
+ type: 'POST',
+ dataType: 'json',
+ data: {
+ ajax: 1,
+ action: 'getTargetEntitiesByIdsBulk',
+ trait: 'EntitySelector',
+ entities: JSON.stringify(bulkRequest)
+ },
+ success: function(response) {
+ if (!response.success || !response.entities) {
+ return;
+ }
+
+ // Process each entity type's results
+ Object.keys(entitiesToLoad).forEach(function(entityType) {
+ var data = entitiesToLoad[entityType];
+ var entities = response.entities[entityType] || [];
+
+ // Build a map of id -> entity for quick lookup
+ var entityMap = {};
+ entities.forEach(function(entity) {
+ entityMap[entity.id] = entity;
+ });
+
+ // Update each picker that requested this entity type
+ data.pickers.forEach(function(pickerData) {
+ var $picker = pickerData.$picker;
+ var $chips = $picker.find('.entity-chips');
+ var $dataInput = $picker.find('.include-values-data, .exclude-values-data');
+ var validIds = [];
+
+ // Replace loading chips with real data
+ pickerData.ids.forEach(function(id) {
+ var $loadingChip = $chips.find('.entity-chip-loading[data-id="' + id + '"]');
+ if (entityMap[id]) {
+ var entity = entityMap[id];
+ validIds.push(entity.id);
+
+ // Create real chip
+ var html = '
';
+ if (entity.image) {
+ html += ' + ')
';
+ }
+ html += '' + self.escapeHtml(entity.name) + '';
+ html += '';
+ html += '';
+
+ $loadingChip.replaceWith(html);
+ } else {
+ // Entity not found, remove loading chip
+ $loadingChip.remove();
+ }
+ });
+
+ // Update chips visibility
+ self.updateChipsVisibility($chips);
+
+ // If some entities were not found, update the hidden input
+ if (validIds.length !== pickerData.ids.length) {
+ $dataInput.val(JSON.stringify(validIds));
+ self.serializeAllBlocks();
+ }
+
+ self.updateBlockStatus($picker.closest('.target-block'));
+ });
+ });
+ }
+ });
+ },
+
+ /**
+ * Collect entity IDs from a picker for bulk loading
+ * Also shows loading placeholders for entity_search types
+ */
+ collectPickerEntities: function($picker, blockType, entitiesToLoad) {
+ if (!$picker.length) {
+ return;
+ }
+
+ var self = this;
+ var $dataInput = $picker.find('.include-values-data, .exclude-values-data');
+ if (!$dataInput.length) {
+ return;
+ }
+
+ var valueType = $picker.attr('data-value-type');
+ var rawValue = $dataInput.val() || '[]';
+
+ var values = [];
+ try {
+ values = JSON.parse(rawValue);
+ } catch (e) {
+ return;
+ }
+
+ // Handle non-entity types synchronously
+ if (valueType === 'multi_numeric_range') {
+ if (!Array.isArray(values) || values.length === 0) return;
+
+ var $chipsContainer = $picker.find('.multi-range-chips');
+ values.forEach(function(range) {
+ if (!range || (range.min === null && range.max === null)) return;
+
+ var chipText = '';
+ if (range.min !== null && range.max !== null) {
+ chipText = range.min + ' - ' + range.max;
+ } else if (range.min !== null) {
+ chipText = '≥ ' + range.min;
+ } else {
+ chipText = '≤ ' + range.max;
+ }
+
+ var $chip = $('
', {
+ class: 'range-chip',
+ 'data-min': range.min !== null ? range.min : '',
+ 'data-max': range.max !== null ? range.max : ''
+ });
+ $chip.append($('', { class: 'range-chip-text', text: chipText }));
+ $chip.append($('