chore: remove duplicated nested directories
Remove assets/assets/ and sources/sources/ artifact directories created by sync script symlink resolution. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1 +0,0 @@
|
||||
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,307 +0,0 @@
|
||||
/**
|
||||
* Entity Selector - Core Module
|
||||
* Factory, initialization, state management
|
||||
* @partial _core.js
|
||||
*
|
||||
* IMPORTANT: This file must be loaded LAST in the concatenation order
|
||||
* as it combines all mixins from other partials.
|
||||
*
|
||||
* EXTRACTION SOURCE: assets/js/admin/entity-selector.js
|
||||
* Lines: 15-55 (createTargetConditionsInstance, state variables)
|
||||
* 56-110 (init method)
|
||||
* 108-132 (observeNewSelects)
|
||||
* 7889-7951 (Factory object, window export, document ready)
|
||||
*
|
||||
* Contains:
|
||||
* - createTargetConditionsInstance() - Factory function
|
||||
* - State variable initialization
|
||||
* - init() - Main initialization method
|
||||
* - observeNewSelects() - MutationObserver for dynamic selects
|
||||
* - loadExistingSelections() - Restore saved state
|
||||
* - TargetConditions factory object
|
||||
* - window.TargetConditions export
|
||||
* - Document ready auto-initialization
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Create a new TargetConditions instance
|
||||
* Each instance is independent and manages its own wrapper/state
|
||||
*/
|
||||
function createTargetConditionsInstance() {
|
||||
// Base instance object with state variables
|
||||
var instance = {
|
||||
config: {},
|
||||
$wrapper: null,
|
||||
$dropdown: null,
|
||||
activeGroup: null, // { blockType, groupIndex, section: 'include'|'exclude' }
|
||||
searchTimeout: null,
|
||||
searchResults: [],
|
||||
searchTotal: 0,
|
||||
searchOffset: 0,
|
||||
searchQuery: '',
|
||||
isLoading: false,
|
||||
loadMoreCount: 20,
|
||||
// Sort, filter, view state
|
||||
viewMode: 'list',
|
||||
currentSort: { field: 'name', dir: 'ASC' },
|
||||
refineQuery: '',
|
||||
refineNegate: false,
|
||||
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, // Default to active only
|
||||
attributeGroup: null,
|
||||
featureGroup: null,
|
||||
dateAddFrom: null,
|
||||
dateAddTo: null,
|
||||
lastProductFrom: null,
|
||||
lastProductTo: null,
|
||||
// Country-specific filters
|
||||
hasHolidays: false,
|
||||
containsStates: false,
|
||||
zone: null
|
||||
},
|
||||
filterableData: null,
|
||||
// Search history
|
||||
searchHistory: {},
|
||||
searchHistoryMax: 10,
|
||||
searchHistoryKey: 'targetConditionsSearchHistory',
|
||||
// Chips visibility
|
||||
maxVisibleChips: 20,
|
||||
// Method dropdown references
|
||||
$methodDropdownMenu: null,
|
||||
$methodDropdownSelect: null,
|
||||
$methodDropdownTrigger: null,
|
||||
// Preview state
|
||||
$previewPopover: null,
|
||||
$activeBadge: null,
|
||||
$previewList: null,
|
||||
previewLoadedCount: 0,
|
||||
previewBlockType: null,
|
||||
allPreviewData: null,
|
||||
// Count update timeout
|
||||
countUpdateTimeout: null,
|
||||
|
||||
init: function(options) {
|
||||
this.config = $.extend({
|
||||
id: 'target-conditions',
|
||||
name: 'target_conditions',
|
||||
namePrefix: 'target_',
|
||||
mode: 'multi', // Global mode: 'multi' or 'single'
|
||||
blocks: {},
|
||||
ajaxUrl: '',
|
||||
trans: {}
|
||||
}, options);
|
||||
|
||||
this.$wrapper = $('[data-entity-selector-id="' + this.config.id + '"]');
|
||||
|
||||
if (!this.$wrapper.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Global single mode - hide "Add Group" buttons
|
||||
if (this.config.mode === 'single') {
|
||||
this.$wrapper.find('.btn-add-group').hide();
|
||||
this.$wrapper.find('.group-excludes').hide();
|
||||
this.$wrapper.find('.group-modifiers').hide();
|
||||
}
|
||||
|
||||
// Add fullwidth class to parent form-group (skip for form-group layout)
|
||||
var hasLayoutFormGroup = this.$wrapper.hasClass('layout-form-group');
|
||||
var $entitySelectorFormGroup = this.$wrapper.closest('.entity-selector-form-group');
|
||||
|
||||
if (!hasLayoutFormGroup && !$entitySelectorFormGroup.length) {
|
||||
var $formGroup = this.$wrapper.closest('.form-group');
|
||||
$formGroup.addClass('condition-trait-fullwidth');
|
||||
$formGroup.find('.col-lg-offset-3').removeClass('col-lg-offset-3');
|
||||
}
|
||||
|
||||
this.createDropdown();
|
||||
this.bindEvents();
|
||||
this.loadExistingSelections();
|
||||
this.loadSearchHistory();
|
||||
|
||||
// Initialize styled method dropdowns
|
||||
this.initMethodDropdowns();
|
||||
|
||||
// Watch for dynamically added selects
|
||||
this.observeNewSelects();
|
||||
|
||||
// Update counts on page load
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
self.updateTabBadges();
|
||||
self.updateAllConditionCounts();
|
||||
}, 100);
|
||||
},
|
||||
|
||||
observeNewSelects: function() {
|
||||
var self = this;
|
||||
|
||||
if (typeof MutationObserver === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.addedNodes.length) {
|
||||
$(mutation.addedNodes).find('.include-method-select, .exclude-method-select').each(function() {
|
||||
self.enhanceMethodSelect($(this));
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(this.$wrapper[0], {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
},
|
||||
|
||||
loadExistingSelections: function() {
|
||||
// TODO: Extract full implementation from original
|
||||
// Reads JSON from hidden input and populates chips
|
||||
}
|
||||
};
|
||||
|
||||
// Merge all mixins into the instance
|
||||
// Each mixin adds its methods to window._EntitySelectorMixins
|
||||
var mixins = window._EntitySelectorMixins || {};
|
||||
|
||||
// Merge utils mixin
|
||||
if (mixins.utils) {
|
||||
$.extend(instance, mixins.utils);
|
||||
}
|
||||
|
||||
// Merge events mixin
|
||||
if (mixins.events) {
|
||||
$.extend(instance, mixins.events);
|
||||
}
|
||||
|
||||
// Merge dropdown mixin
|
||||
if (mixins.dropdown) {
|
||||
$.extend(instance, mixins.dropdown);
|
||||
}
|
||||
|
||||
// Merge search mixin
|
||||
if (mixins.search) {
|
||||
$.extend(instance, mixins.search);
|
||||
}
|
||||
|
||||
// Merge filters mixin
|
||||
if (mixins.filters) {
|
||||
$.extend(instance, mixins.filters);
|
||||
}
|
||||
|
||||
// Merge chips mixin
|
||||
if (mixins.chips) {
|
||||
$.extend(instance, mixins.chips);
|
||||
}
|
||||
|
||||
// Merge groups mixin
|
||||
if (mixins.groups) {
|
||||
$.extend(instance, mixins.groups);
|
||||
}
|
||||
|
||||
// Merge methods mixin
|
||||
if (mixins.methods) {
|
||||
$.extend(instance, mixins.methods);
|
||||
}
|
||||
|
||||
// Merge preview mixin
|
||||
if (mixins.preview) {
|
||||
$.extend(instance, mixins.preview);
|
||||
}
|
||||
|
||||
// Merge tree mixin
|
||||
if (mixins.tree) {
|
||||
$.extend(instance, mixins.tree);
|
||||
}
|
||||
|
||||
// Merge validation mixin
|
||||
if (mixins.validation) {
|
||||
$.extend(instance, mixins.validation);
|
||||
}
|
||||
|
||||
return instance;
|
||||
}
|
||||
|
||||
// Factory object for creating and managing instances
|
||||
var TargetConditions = {
|
||||
instances: [],
|
||||
|
||||
// Create and initialize a new instance
|
||||
create: function(options) {
|
||||
var instance = createTargetConditionsInstance();
|
||||
instance.init(options);
|
||||
this.instances.push(instance);
|
||||
return instance;
|
||||
},
|
||||
|
||||
// For backwards compatibility - init creates a new instance
|
||||
init: function(options) {
|
||||
return this.create(options);
|
||||
},
|
||||
|
||||
// Validate all instances - returns true if all valid
|
||||
validateAll: function() {
|
||||
var allValid = true;
|
||||
for (var i = 0; i < this.instances.length; i++) {
|
||||
if (!this.instances[i].validate()) {
|
||||
allValid = false;
|
||||
}
|
||||
}
|
||||
return allValid;
|
||||
}
|
||||
};
|
||||
|
||||
// Export to window
|
||||
window.TargetConditions = TargetConditions;
|
||||
|
||||
// Auto-initialize on document ready
|
||||
$(document).ready(function() {
|
||||
// Auto-initialize from data-config attributes on wrapper elements
|
||||
$('[data-entity-selector-id]').each(function() {
|
||||
var configData = $(this).data('config');
|
||||
if (configData) {
|
||||
TargetConditions.create(configData);
|
||||
}
|
||||
});
|
||||
|
||||
// Tips box toggle handler
|
||||
$(document).on('click', '.target-tips-box .tips-header', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).closest('.target-tips-box').toggleClass('expanded');
|
||||
});
|
||||
|
||||
// Form submission validation for required target conditions
|
||||
$(document).on('submit', 'form', function(e) {
|
||||
var $form = $(this);
|
||||
if ($form.find('.target-conditions-trait[data-required]').length > 0) {
|
||||
if (!TargetConditions.validateAll()) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
@@ -1,438 +0,0 @@
|
||||
/**
|
||||
* Entity Selector - Dropdown Module
|
||||
* Search dropdown UI creation and positioning
|
||||
* @partial _dropdown.js
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
window._EntitySelectorMixins = window._EntitySelectorMixins || {};
|
||||
|
||||
window._EntitySelectorMixins.dropdown = {
|
||||
|
||||
createDropdown: function() {
|
||||
this.$wrapper.find('.target-search-dropdown').remove();
|
||||
|
||||
var trans = this.config.trans || {};
|
||||
|
||||
var html = '<div class="target-search-dropdown view-list">';
|
||||
|
||||
// Header with results count, actions, sort controls, view mode
|
||||
html += '<div class="dropdown-header">';
|
||||
html += '<span class="results-count">0 results</span>';
|
||||
|
||||
html += '<div class="dropdown-actions">';
|
||||
|
||||
// Select all / Clear buttons with keyboard shortcuts
|
||||
html += '<button type="button" class="btn-select-all" title="' + (trans.select_all || 'Select all visible') + '">';
|
||||
html += this.esIcon('check_box') + ' ' + (trans.all || 'All') + ' <kbd>Ctrl+A</kbd>';
|
||||
html += '</button>';
|
||||
html += '<button type="button" class="btn-clear-selection" title="' + (trans.clear_selection || 'Clear selection') + '">';
|
||||
html += this.esIcon('check_box_outline_blank') + ' ' + (trans.clear || 'Clear') + ' <kbd>Ctrl+D</kbd>';
|
||||
html += '</button>';
|
||||
|
||||
// Sort controls - options with data-entities attribute for entity-specific filtering
|
||||
html += '<div class="sort-controls">';
|
||||
html += '<select class="sort-field-select" title="Sort by">';
|
||||
// Universal options (all entities)
|
||||
html += '<option value="name">' + (trans.sort_name || 'Name') + '</option>';
|
||||
html += '<option value="id">' + (trans.sort_id || 'ID') + '</option>';
|
||||
html += '<option value="selected">' + (trans.sort_selected || 'Selected') + '</option>';
|
||||
// Product-specific
|
||||
html += '<option value="price" data-entities="products">' + (trans.sort_price || 'Price') + '</option>';
|
||||
html += '<option value="stock" data-entities="products">' + (trans.sort_stock || 'Stock') + '</option>';
|
||||
html += '<option value="popularity" data-entities="products">' + (trans.sort_popularity || 'Sales') + '</option>';
|
||||
html += '<option value="reference" data-entities="products">' + (trans.sort_reference || 'Reference') + '</option>';
|
||||
// Position-based entities (categories, cms, cms_categories, attributes)
|
||||
html += '<option value="position" data-entities="categories,cms,cms_categories,attributes">' + (trans.sort_position || 'Position') + '</option>';
|
||||
// Product count (categories, manufacturers, suppliers)
|
||||
html += '<option value="product_count" data-entities="categories,manufacturers,suppliers">' + (trans.sort_product_count || 'Products') + '</option>';
|
||||
html += '</select>';
|
||||
html += '<button type="button" class="btn-sort-dir" data-dir="ASC" title="Sort direction">';
|
||||
html += this.esIcon('sort_by_alpha');
|
||||
html += '</button>';
|
||||
|
||||
// View mode selector - Tree option always present, shown for categories
|
||||
html += '<select class="view-mode-select" title="View mode">';
|
||||
html += '<option value="list">' + (trans.view_list || 'List') + '</option>';
|
||||
html += '<option value="tree" class="tree-view-option">' + (trans.view_tree || 'Tree') + '</option>';
|
||||
html += '<option value="cols-2">2 ' + (trans.cols || 'cols') + '</option>';
|
||||
html += '<option value="cols-3">3 ' + (trans.cols || 'cols') + '</option>';
|
||||
html += '<option value="cols-4">4 ' + (trans.cols || 'cols') + '</option>';
|
||||
html += '<option value="cols-5">5 ' + (trans.cols || 'cols') + '</option>';
|
||||
html += '<option value="cols-6">6 ' + (trans.cols || 'cols') + '</option>';
|
||||
html += '<option value="cols-7">7 ' + (trans.cols || 'cols') + '</option>';
|
||||
html += '<option value="cols-8">8 ' + (trans.cols || 'cols') + '</option>';
|
||||
html += '</select>';
|
||||
html += '</div>'; // End sort-controls
|
||||
|
||||
// Refine search
|
||||
html += '<div class="refine-compact">';
|
||||
html += '<button type="button" class="btn-refine-negate" title="' + (trans.exclude_matches || 'Exclude matches (NOT contains)') + '">' + this.esIcon('block') + '</button>';
|
||||
html += '<input type="text" class="refine-input" placeholder="' + (trans.refine_short || 'Refine...') + '">';
|
||||
html += '<button type="button" class="btn-clear-refine" style="display:none;">' + this.esIcon('close') + '</button>';
|
||||
html += '</div>';
|
||||
|
||||
// Filter toggle button
|
||||
html += '<button type="button" class="btn-toggle-filters" title="' + (trans.toggle_filters || 'Filters') + '">';
|
||||
html += this.esIcon('filter_list');
|
||||
html += '</button>';
|
||||
|
||||
// History button
|
||||
html += '<button type="button" class="btn-show-history" title="' + (trans.recent_searches || 'Recent searches') + '">';
|
||||
html += this.esIcon('schedule');
|
||||
html += '</button>';
|
||||
|
||||
html += '</div>'; // End dropdown-actions
|
||||
html += '</div>'; // End dropdown-header
|
||||
|
||||
// Filter panel
|
||||
html += '<div class="filter-panel">';
|
||||
|
||||
// Quick filters row (for products)
|
||||
html += '<div class="filter-row filter-row-quick" data-entity="products">';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-in-stock"> ' + (trans.in_stock || 'In stock') + '</label>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-discounted"> ' + (trans.discounted || 'On sale') + '</label>';
|
||||
|
||||
// Price range
|
||||
html += '<div class="filter-price-range">';
|
||||
html += '<span class="filter-price-label">' + (trans.price || 'Price') + ':</span>';
|
||||
html += '<input type="number" class="filter-price-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="0.01">';
|
||||
html += '<span class="filter-price-sep">-</span>';
|
||||
html += '<input type="number" class="filter-price-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="0.01">';
|
||||
html += '</div>';
|
||||
|
||||
html += '<button type="button" class="btn-clear-filters" title="' + (trans.clear_filters || 'Clear filters') + '">';
|
||||
html += this.esIcon('close');
|
||||
html += '</button>';
|
||||
html += '</div>';
|
||||
|
||||
// Attribute/Feature filter toggles for products
|
||||
html += '<div class="filter-row filter-row-attributes" data-entity="products" style="display:none;">';
|
||||
html += '<span class="filter-row-label">' + this.esIcon('label') + ' ' + (trans.attributes || 'Attributes') + ':</span>';
|
||||
html += '<div class="filter-attributes-container"></div>';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-row filter-row-values filter-row-attr-values" data-type="attribute" style="display:none;">';
|
||||
html += '<div class="filter-values-container"></div>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="filter-row filter-row-features" data-entity="products" style="display:none;">';
|
||||
html += '<span class="filter-row-label">' + this.esIcon('list') + ' ' + (trans.features || 'Features') + ':</span>';
|
||||
html += '<div class="filter-features-container"></div>';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-row filter-row-values filter-row-feat-values" data-type="feature" style="display:none;">';
|
||||
html += '<div class="filter-values-container"></div>';
|
||||
html += '</div>';
|
||||
|
||||
// Entity-specific filters: Categories
|
||||
html += '<div class="filter-row filter-row-entity-categories filter-row-multi" data-entity="categories" style="display:none;">';
|
||||
html += '<div class="filter-subrow">';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('inventory_2') + ' ' + (trans.product_count || 'Products') + ':</span>';
|
||||
html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('shopping_cart') + ' ' + (trans.total_sales || 'Sales') + ':</span>';
|
||||
html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('payments') + ' ' + (trans.turnover || 'Revenue') + ':</span>';
|
||||
html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-subrow">';
|
||||
html += '<div class="filter-select-group">';
|
||||
html += '<span class="filter-select-label">' + this.esIcon('account_tree') + ' ' + (trans.depth || 'Depth') + ':</span>';
|
||||
html += '<select class="filter-depth-select">';
|
||||
html += '<option value="">' + (trans.all_levels || 'All levels') + '</option>';
|
||||
html += '<option value="1">' + (trans.level || 'Level') + ' 1 (' + (trans.root || 'Root') + ')</option>';
|
||||
html += '<option value="2">' + (trans.level || 'Level') + ' 2</option>';
|
||||
html += '<option value="3">' + (trans.level || 'Level') + ' 3</option>';
|
||||
html += '<option value="4">' + (trans.level || 'Level') + ' 4+</option>';
|
||||
html += '</select>';
|
||||
html += '</div>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-has-products"> ' + (trans.has_products || 'Has products') + '</label>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-has-description"> ' + (trans.has_description || 'Has description') + '</label>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-has-image"> ' + (trans.has_image || 'Has image') + '</label>';
|
||||
html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
// Entity-specific filters: Manufacturers
|
||||
html += '<div class="filter-row filter-row-entity-manufacturers filter-row-multi" data-entity="manufacturers" style="display:none;">';
|
||||
html += '<div class="filter-subrow">';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('inventory_2') + ' ' + (trans.product_count || 'Products') + ':</span>';
|
||||
html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('shopping_cart') + ' ' + (trans.total_sales || 'Sales') + ':</span>';
|
||||
html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('payments') + ' ' + (trans.turnover || 'Revenue') + ':</span>';
|
||||
html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-subrow">';
|
||||
html += '<div class="filter-date-group">';
|
||||
html += '<span class="filter-date-label">' + this.esIcon('event') + ' ' + (trans.date_added || 'Added') + ':</span>';
|
||||
html += '<input type="date" class="filter-date-add-from" title="' + (trans.from || 'From') + '">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="date" class="filter-date-add-to" title="' + (trans.to || 'To') + '">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-date-group">';
|
||||
html += '<span class="filter-date-label">' + this.esIcon('schedule') + ' ' + (trans.last_product || 'Last product') + ':</span>';
|
||||
html += '<input type="date" class="filter-last-product-from" title="' + (trans.from || 'From') + '">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="date" class="filter-last-product-to" title="' + (trans.to || 'To') + '">';
|
||||
html += '</div>';
|
||||
html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
// Entity-specific filters: Suppliers
|
||||
html += '<div class="filter-row filter-row-entity-suppliers filter-row-multi" data-entity="suppliers" style="display:none;">';
|
||||
html += '<div class="filter-subrow">';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('inventory_2') + ' ' + (trans.product_count || 'Products') + ':</span>';
|
||||
html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('shopping_cart') + ' ' + (trans.total_sales || 'Sales') + ':</span>';
|
||||
html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('payments') + ' ' + (trans.turnover || 'Revenue') + ':</span>';
|
||||
html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-subrow">';
|
||||
html += '<div class="filter-date-group">';
|
||||
html += '<span class="filter-date-label">' + this.esIcon('event') + ' ' + (trans.date_added || 'Added') + ':</span>';
|
||||
html += '<input type="date" class="filter-date-add-from" title="' + (trans.from || 'From') + '">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="date" class="filter-date-add-to" title="' + (trans.to || 'To') + '">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-date-group">';
|
||||
html += '<span class="filter-date-label">' + this.esIcon('schedule') + ' ' + (trans.last_product || 'Last product') + ':</span>';
|
||||
html += '<input type="date" class="filter-last-product-from" title="' + (trans.from || 'From') + '">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="date" class="filter-last-product-to" title="' + (trans.to || 'To') + '">';
|
||||
html += '</div>';
|
||||
html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
// Entity-specific filters: Attributes
|
||||
html += '<div class="filter-row filter-row-entity-attributes filter-row-multi" data-entity="attributes" style="display:none;">';
|
||||
html += '<div class="filter-subrow">';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('inventory_2') + ' ' + (trans.product_count || 'Products') + ':</span>';
|
||||
html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('shopping_cart') + ' ' + (trans.total_sales || 'Sales') + ':</span>';
|
||||
html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('payments') + ' ' + (trans.turnover || 'Revenue') + ':</span>';
|
||||
html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-subrow">';
|
||||
html += '<div class="filter-select-group">';
|
||||
html += '<span class="filter-select-label">' + this.esIcon('label') + ' ' + (trans.attribute_group || 'Group') + ':</span>';
|
||||
html += '<select class="filter-attribute-group-select">';
|
||||
html += '<option value="">' + (trans.all_groups || 'All groups') + '</option>';
|
||||
html += '</select>';
|
||||
html += '</div>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-is-color"> ' + (trans.color_only || 'Color attributes') + '</label>';
|
||||
html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
// Entity-specific filters: Features
|
||||
html += '<div class="filter-row filter-row-entity-features filter-row-multi" data-entity="features" style="display:none;">';
|
||||
html += '<div class="filter-subrow">';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('inventory_2') + ' ' + (trans.product_count || 'Products') + ':</span>';
|
||||
html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('shopping_cart') + ' ' + (trans.total_sales || 'Sales') + ':</span>';
|
||||
html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-range-group">';
|
||||
html += '<span class="filter-range-label">' + this.esIcon('payments') + ' ' + (trans.turnover || 'Revenue') + ':</span>';
|
||||
html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
|
||||
html += '<span class="filter-range-sep">-</span>';
|
||||
html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
html += '<div class="filter-subrow">';
|
||||
html += '<div class="filter-select-group">';
|
||||
html += '<span class="filter-select-label">' + this.esIcon('list') + ' ' + (trans.feature_group || 'Group') + ':</span>';
|
||||
html += '<select class="filter-feature-group-select">';
|
||||
html += '<option value="">' + (trans.all_groups || 'All groups') + '</option>';
|
||||
html += '</select>';
|
||||
html += '</div>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-is-custom"> ' + (trans.custom_only || 'Custom values') + '</label>';
|
||||
html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
// Entity-specific filters: CMS Pages
|
||||
html += '<div class="filter-row filter-row-entity-cms" data-entity="cms" style="display:none;">';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-indexable"> ' + (trans.indexable || 'Indexable') + '</label>';
|
||||
html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
|
||||
html += '</div>';
|
||||
|
||||
// Entity-specific filters: CMS Categories
|
||||
html += '<div class="filter-row filter-row-entity-cms-categories" data-entity="cms_categories" style="display:none;">';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
|
||||
html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
|
||||
html += '</div>';
|
||||
|
||||
// Entity-specific filters: Countries
|
||||
html += '<div class="filter-row filter-row-entity-countries" data-entity="countries" style="display:none;">';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-has-holidays"> ' + (trans.has_holidays || 'Has holidays') + '</label>';
|
||||
html += '<label class="filter-label"><input type="checkbox" class="filter-contains-states"> ' + (trans.contains_states || 'Has states') + '</label>';
|
||||
html += '<div class="filter-select-group">';
|
||||
html += '<span class="filter-select-label">' + this.esIcon('language') + ' ' + (trans.zone || 'Zone') + ':</span>';
|
||||
html += '<select class="filter-zone-select">';
|
||||
html += '<option value="">' + (trans.all_zones || 'All zones') + '</option>';
|
||||
html += '</select>';
|
||||
html += '</div>';
|
||||
html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>'; // End filter-panel
|
||||
|
||||
// Results header for list view (product columns)
|
||||
html += '<div class="results-header">';
|
||||
html += '<span class="header-spacer"></span>';
|
||||
html += '<span class="header-col header-col-name">' + (trans.product || 'Product') + '</span>';
|
||||
html += '<span class="header-col header-col-price">' + (trans.price || 'Price') + '</span>';
|
||||
html += '<span class="header-col header-col-sale">' + (trans.sale || 'Sale') + '</span>';
|
||||
html += '<span class="header-col header-col-stock">' + (trans.stock || 'Stock') + '</span>';
|
||||
html += '<span class="header-col header-col-sales">' + (trans.sold || 'Sold') + '</span>';
|
||||
html += '</div>';
|
||||
|
||||
// Results
|
||||
html += '<div class="dropdown-results"></div>';
|
||||
|
||||
// Footer - unified load more + actions
|
||||
html += '<div class="dropdown-footer">';
|
||||
|
||||
// Left side: load more
|
||||
html += '<div class="dropdown-footer-left" style="visibility:hidden;">';
|
||||
html += '<span class="load-label">' + (trans.load || 'Load') + '</span>';
|
||||
html += '<select class="load-more-select">';
|
||||
html += '<option value="20">20</option>';
|
||||
html += '<option value="50">50</option>';
|
||||
html += '<option value="100">100</option>';
|
||||
html += '<option value="all">' + (trans.all || 'All') + '</option>';
|
||||
html += '</select>';
|
||||
html += '<span class="remaining-text">' + (trans.of || 'of') + ' <strong class="remaining-count">0</strong> ' + (trans.remaining || 'remaining') + '</span>';
|
||||
html += '</div>';
|
||||
|
||||
// Right side: action buttons
|
||||
html += '<div class="dropdown-footer-right">';
|
||||
html += '<button type="button" class="dropdown-action-btn btn-cancel">' + this.esIcon('close') + ' ' + (trans.cancel || 'Cancel') + ' <span class="btn-shortcut">Esc</span></button>';
|
||||
html += '<button type="button" class="dropdown-action-btn btn-save">' + this.esIcon('check') + ' ' + (trans.save || 'Save') + ' <span class="btn-shortcut">⏎</span></button>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
this.$dropdown = $(html);
|
||||
$('body').append(this.$dropdown);
|
||||
},
|
||||
|
||||
hideDropdown: function() {
|
||||
if (this.$dropdown) {
|
||||
this.$dropdown.removeClass('show');
|
||||
}
|
||||
this.activeGroup = null;
|
||||
},
|
||||
|
||||
positionDropdown: function($input) {
|
||||
if (!this.$dropdown) return;
|
||||
|
||||
var $picker = $input.closest('.value-picker');
|
||||
var $searchBox = $input.closest('.entity-search-box');
|
||||
|
||||
// Get absolute positions (dropdown is appended to body)
|
||||
var searchBoxOffset = $searchBox.offset();
|
||||
var searchBoxHeight = $searchBox.outerHeight();
|
||||
var pickerOffset = $picker.offset();
|
||||
var pickerWidth = $picker.outerWidth();
|
||||
|
||||
// Calculate position relative to document
|
||||
var dropdownTop = searchBoxOffset.top + searchBoxHeight + 4;
|
||||
var dropdownLeft = pickerOffset.left;
|
||||
var dropdownWidth = Math.max(pickerWidth, 400);
|
||||
|
||||
// Ensure dropdown doesn't overflow the viewport horizontally
|
||||
var viewportWidth = $(window).width();
|
||||
if (dropdownLeft + dropdownWidth > viewportWidth - 10) {
|
||||
dropdownWidth = viewportWidth - dropdownLeft - 10;
|
||||
}
|
||||
|
||||
// Ensure dropdown doesn't overflow viewport vertically
|
||||
var viewportHeight = $(window).height();
|
||||
var scrollTop = $(window).scrollTop();
|
||||
var maxHeight = viewportHeight - (dropdownTop - scrollTop) - 20;
|
||||
maxHeight = Math.max(maxHeight, 400);
|
||||
|
||||
this.$dropdown.css({
|
||||
position: 'absolute',
|
||||
top: dropdownTop,
|
||||
left: dropdownLeft,
|
||||
width: dropdownWidth,
|
||||
maxHeight: maxHeight,
|
||||
zIndex: 10000
|
||||
});
|
||||
|
||||
// Show the dropdown
|
||||
this.$dropdown.addClass('show');
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,397 +0,0 @@
|
||||
/**
|
||||
* 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,
|
||||
// Country-specific filters
|
||||
hasHolidays: false,
|
||||
containsStates: false,
|
||||
zone: 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);
|
||||
// Country filters
|
||||
this.$dropdown.find('.filter-has-holidays').prop('checked', false);
|
||||
this.$dropdown.find('.filter-contains-states').prop('checked', false);
|
||||
this.$dropdown.find('.filter-zone-select').val('');
|
||||
}
|
||||
|
||||
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,
|
||||
// Country-specific filters
|
||||
hasHolidays: false,
|
||||
containsStates: false,
|
||||
zone: 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');
|
||||
}
|
||||
|
||||
// Load zones for countries filter
|
||||
if (entityType === 'countries') {
|
||||
this.loadZonesForCountryFilter();
|
||||
}
|
||||
|
||||
// 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 = '<button type="button" class="filter-group-toggle" data-group-id="' + group.id + '" data-type="attribute" data-group-name="' + self.escapeAttr(group.name) + '">';
|
||||
html += '<span class="toggle-name">' + group.name + '</span>';
|
||||
if (group.count !== undefined) {
|
||||
html += '<span class="toggle-count clickable" data-group-id="' + group.id + '" data-type="attribute" data-group-name="' + self.escapeAttr(group.name) + '">' + self.esIcon('visibility') + ' ' + group.count + '</span>';
|
||||
}
|
||||
html += '</button>';
|
||||
$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 = '<button type="button" class="filter-group-toggle" data-group-id="' + group.id + '" data-type="feature" data-group-name="' + self.escapeAttr(group.name) + '">';
|
||||
html += '<span class="toggle-name">' + group.name + '</span>';
|
||||
if (group.count !== undefined) {
|
||||
html += '<span class="toggle-count clickable" data-group-id="' + group.id + '" data-type="feature" data-group-name="' + self.escapeAttr(group.name) + '">' + self.esIcon('visibility') + ' ' + group.count + '</span>';
|
||||
}
|
||||
html += '</button>';
|
||||
$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 = '<span class="filter-values-label">' + group.name + ':</span>';
|
||||
|
||||
// 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 += '<button type="button" class="filter-chip ' + chipClass + activeClass + colorClass + '" data-id="' + val.id + '" data-group-id="' + groupId + '"' + colorStyle + '>';
|
||||
if (val.color) {
|
||||
html += '<span class="chip-color-dot"></span>';
|
||||
}
|
||||
html += '<span class="chip-name">' + val.name + '</span>';
|
||||
if (val.count !== undefined) {
|
||||
html += '<span class="chip-count">(' + val.count + ')</span>';
|
||||
}
|
||||
html += '</button>';
|
||||
});
|
||||
|
||||
$valuesContainer.html(html);
|
||||
|
||||
// Add close button as sibling (outside filter-values-container, inside filter-row-values)
|
||||
$filterRowValues.find('.btn-close-values').remove();
|
||||
$filterRowValues.append('<button type="button" class="btn-close-values">' + this.esIcon('close') + '</button>');
|
||||
$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);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load zones for country filter dropdown
|
||||
*/
|
||||
loadZonesForCountryFilter: function() {
|
||||
var self = this;
|
||||
|
||||
if (this.zonesLoaded || !this.$dropdown) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $select = this.$dropdown.find('.filter-zone-select');
|
||||
if (!$select.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: this.config.ajaxUrl,
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
ajax: 1,
|
||||
action: 'getZonesForFilter',
|
||||
trait: 'EntitySelector'
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success && response.zones && response.zones.length > 0) {
|
||||
var trans = self.config.trans || {};
|
||||
$select.empty();
|
||||
$select.append('<option value="">' + (trans.all_zones || 'All zones') + '</option>');
|
||||
|
||||
response.zones.forEach(function(zone) {
|
||||
$select.append('<option value="' + zone.id + '">' + self.escapeHtml(zone.name) + '</option>');
|
||||
});
|
||||
|
||||
self.zonesLoaded = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,878 +0,0 @@
|
||||
/**
|
||||
* Entity Selector - Methods Module
|
||||
* Method dropdown rendering, value pickers, combination picker
|
||||
* @partial _methods.js
|
||||
*
|
||||
* EXTRACTION SOURCE: assets/js/admin/entity-selector.js
|
||||
* Lines: 6760-6848 (initMethodDropdowns, enhanceMethodSelect)
|
||||
* 6849-7051 (showMethodDropdownMenu, buildMethodDropdownMenuHtml, closeMethodDropdownMenu)
|
||||
* 7053-7138 (populateTiles, applyRangeInputConstraints, showRangeInputError)
|
||||
* 7139-7380 (combination picker methods)
|
||||
* 7382-7550 (updateMethodInfoPlaceholder, getBuiltInMethodHelp)
|
||||
* 7748-7888 (buildSortOptions, updateModifierButtonState, updateMethodSelectorLock)
|
||||
*
|
||||
* Contains:
|
||||
* - initMethodDropdowns() - Initialize styled dropdowns
|
||||
* - enhanceMethodSelect() - Convert select to styled dropdown
|
||||
* - showMethodDropdownMenu() - Show method selection menu
|
||||
* - buildMethodDropdownMenuHtml() - Build menu HTML
|
||||
* - closeMethodDropdownMenu() - Close dropdown menu
|
||||
* - updateMethodTrigger() - Update trigger display
|
||||
* - populateTiles() - Build multi-select tiles
|
||||
* - applyRangeInputConstraints() - Set numeric input constraints
|
||||
* - showRangeInputError() - Display validation error
|
||||
* - loadCombinationAttributeGroups() - Load attribute groups for picker
|
||||
* - loadCombinationAttributeValues() - Load values for attribute group
|
||||
* - restoreCombinationSelections() - Restore saved combination state
|
||||
* - updateCombinationData() - Save combination selection
|
||||
* - updateCombinationGroupCounts() - Update selection counts
|
||||
* - updateMethodInfoPlaceholder() - Show method help
|
||||
* - getBuiltInMethodHelp() - Get help text for methods
|
||||
* - buildSortOptions() - Build sort dropdown options
|
||||
* - updateModifierButtonState() - Update modifier toggle state
|
||||
* - updateMethodSelectorLock() - Lock/unlock method selector
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
window._EntitySelectorMixins = window._EntitySelectorMixins || {};
|
||||
|
||||
window._EntitySelectorMixins.methods = {
|
||||
|
||||
/**
|
||||
* Initialize styled method dropdowns for all method selects
|
||||
*/
|
||||
initMethodDropdowns: function() {
|
||||
var self = this;
|
||||
this.$wrapper.find('.include-method-select').each(function() {
|
||||
self.enhanceMethodSelect($(this));
|
||||
});
|
||||
this.$wrapper.find('.exclude-method-select').each(function() {
|
||||
self.enhanceMethodSelect($(this));
|
||||
});
|
||||
this.initMethodInfoPlaceholders();
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize info placeholders for all existing method selects
|
||||
*/
|
||||
initMethodInfoPlaceholders: function() {
|
||||
var self = this;
|
||||
this.$wrapper.find('.selection-group').each(function() {
|
||||
var $group = $(this);
|
||||
var $block = $group.closest('.target-block');
|
||||
var blockType = $block.data('blockType') || 'products';
|
||||
|
||||
// Include method info
|
||||
var includeMethod = $group.find('.include-method-select').val() || 'all';
|
||||
self.updateMethodInfoPlaceholder($group.find('.method-selector-wrapper'), includeMethod, blockType);
|
||||
|
||||
// Exclude methods info
|
||||
$group.find('.exclude-row').each(function() {
|
||||
var $row = $(this);
|
||||
var excludeMethod = $row.find('.exclude-method-select').val();
|
||||
if (excludeMethod) {
|
||||
self.updateMethodInfoPlaceholder($row.find('.method-selector-wrapper'), excludeMethod, blockType);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Enhance a single method select with styled dropdown
|
||||
*/
|
||||
enhanceMethodSelect: function($select) {
|
||||
var self = this;
|
||||
|
||||
if (!$select.length || $select.data('methodDropdownInit')) {
|
||||
return;
|
||||
}
|
||||
$select.data('methodDropdownInit', true);
|
||||
|
||||
$select.addClass('method-select-hidden');
|
||||
|
||||
var $selectedOption = $select.find('option:selected');
|
||||
var selectedIcon = $selectedOption.data('icon') || 'arrow_drop_down';
|
||||
var selectedLabel = $selectedOption.text();
|
||||
|
||||
var triggerHtml = '<div class="method-dropdown-trigger">';
|
||||
triggerHtml += this.esIcon(selectedIcon, 'method-trigger-icon');
|
||||
triggerHtml += '<span class="method-trigger-label">' + this.escapeHtml(selectedLabel) + '</span>';
|
||||
triggerHtml += this.esIcon('arrow_drop_down', 'method-trigger-caret');
|
||||
triggerHtml += '</div>';
|
||||
|
||||
var $trigger = $(triggerHtml);
|
||||
$select.after($trigger);
|
||||
|
||||
$trigger.on('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var $wrapper = $select.closest('.method-selector-wrapper');
|
||||
if ($wrapper.hasClass('selector-locked')) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.showMethodDropdownMenu($select, $trigger);
|
||||
});
|
||||
|
||||
$select.on('change.methodDropdown', function() {
|
||||
self.updateMethodTrigger($select, $trigger);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the trigger display to match current selection
|
||||
*/
|
||||
updateMethodTrigger: function($select, $trigger) {
|
||||
var $selectedOption = $select.find('option:selected');
|
||||
var selectedIcon = $selectedOption.data('icon') || 'arrow_drop_down';
|
||||
var selectedLabel = $selectedOption.text();
|
||||
|
||||
$trigger.find('.method-trigger-icon').replaceWith(this.esIcon(selectedIcon, 'method-trigger-icon'));
|
||||
$trigger.find('.method-trigger-label').text(selectedLabel);
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the method dropdown menu
|
||||
*/
|
||||
showMethodDropdownMenu: function($select, $trigger) {
|
||||
var self = this;
|
||||
|
||||
this.closeMethodDropdownMenu();
|
||||
|
||||
var menuHtml = this.buildMethodDropdownMenuHtml($select);
|
||||
var $menu = $(menuHtml);
|
||||
|
||||
var triggerOffset = $trigger.offset();
|
||||
var triggerWidth = $trigger.outerWidth();
|
||||
var triggerHeight = $trigger.outerHeight();
|
||||
|
||||
$menu.css({
|
||||
position: 'absolute',
|
||||
top: triggerOffset.top + triggerHeight + 2,
|
||||
left: triggerOffset.left,
|
||||
minWidth: triggerWidth,
|
||||
zIndex: 10001
|
||||
});
|
||||
|
||||
$('body').append($menu);
|
||||
this.$methodDropdownMenu = $menu;
|
||||
this.$methodDropdownSelect = $select;
|
||||
this.$methodDropdownTrigger = $trigger;
|
||||
|
||||
$menu.on('click', '.method-dropdown-item', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var value = $(this).data('value');
|
||||
$select.val(value).trigger('change');
|
||||
self.closeMethodDropdownMenu();
|
||||
});
|
||||
|
||||
$(document).on('click.methodDropdown', function(e) {
|
||||
if (!$(e.target).closest('.method-dropdown-menu, .method-dropdown-trigger').length) {
|
||||
self.closeMethodDropdownMenu();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('keydown.methodDropdown', function(e) {
|
||||
if (e.keyCode === 27) {
|
||||
self.closeMethodDropdownMenu();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Build the dropdown menu HTML
|
||||
*/
|
||||
buildMethodDropdownMenuHtml: function($select) {
|
||||
var self = this;
|
||||
var html = '<div class="method-dropdown-menu">';
|
||||
|
||||
// Render ungrouped options first
|
||||
$select.children('option').each(function() {
|
||||
var $el = $(this);
|
||||
var icon = $el.data('icon') || 'star';
|
||||
var label = $el.text();
|
||||
var value = $el.val();
|
||||
var isSelected = $el.is(':selected');
|
||||
|
||||
html += '<div class="method-dropdown-item' + (isSelected ? ' selected' : '') + '" data-value="' + self.escapeAttr(value) + '">';
|
||||
html += this.esIcon(icon, 'method-item-icon');
|
||||
html += '<span class="method-item-label">' + self.escapeHtml(label) + '</span>';
|
||||
if (isSelected) {
|
||||
html += self.esIcon('check', 'method-item-check');
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
// Render optgroups
|
||||
$select.children('optgroup').each(function() {
|
||||
var $optgroup = $(this);
|
||||
var groupLabel = $optgroup.attr('label') || '';
|
||||
|
||||
html += '<div class="method-dropdown-optgroup">';
|
||||
html += '<div class="method-optgroup-label">' + self.escapeHtml(groupLabel) + '</div>';
|
||||
html += '<div class="method-optgroup-items">';
|
||||
|
||||
$optgroup.children('option').each(function() {
|
||||
var $el = $(this);
|
||||
var icon = $el.data('icon') || 'settings';
|
||||
var label = $el.text();
|
||||
var value = $el.val();
|
||||
var isSelected = $el.is(':selected');
|
||||
|
||||
html += '<div class="method-dropdown-item' + (isSelected ? ' selected' : '') + '" data-value="' + self.escapeAttr(value) + '">';
|
||||
html += self.esIcon(icon, 'method-item-icon');
|
||||
html += '<span class="method-item-label">' + self.escapeHtml(label) + '</span>';
|
||||
if (isSelected) {
|
||||
html += self.esIcon('check', 'method-item-check');
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
html += '</div>'; // close items
|
||||
html += '</div>'; // close optgroup
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
return html;
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the method dropdown menu
|
||||
*/
|
||||
closeMethodDropdownMenu: function() {
|
||||
if (this.$methodDropdownMenu) {
|
||||
this.$methodDropdownMenu.remove();
|
||||
this.$methodDropdownMenu = null;
|
||||
}
|
||||
this.$methodDropdownSelect = null;
|
||||
this.$methodDropdownTrigger = null;
|
||||
$(document).off('click.methodDropdown keydown.methodDropdown');
|
||||
},
|
||||
|
||||
/**
|
||||
* Populate tiles for multi_select_tiles value picker
|
||||
*/
|
||||
populateTiles: function($picker, options, exclusive) {
|
||||
var self = this;
|
||||
var $container = $picker.find('.multi-select-tiles');
|
||||
$container.empty();
|
||||
|
||||
if (exclusive) {
|
||||
$container.attr('data-exclusive', 'true');
|
||||
} else {
|
||||
$container.removeAttr('data-exclusive');
|
||||
}
|
||||
|
||||
$.each(options, function(key, optData) {
|
||||
var label = typeof optData === 'object' ? optData.label : optData;
|
||||
var icon = typeof optData === 'object' && optData.icon ? optData.icon : null;
|
||||
var color = typeof optData === 'object' && optData.color ? optData.color : null;
|
||||
|
||||
var tileClass = 'tile-option';
|
||||
if (color) {
|
||||
tileClass += ' tile-color-' + color;
|
||||
}
|
||||
|
||||
var $tile = $('<button>', {
|
||||
type: 'button',
|
||||
class: tileClass,
|
||||
'data-value': key
|
||||
});
|
||||
|
||||
if (icon) {
|
||||
$tile.append($('<i>', { class: icon }));
|
||||
}
|
||||
$tile.append($('<span>', { class: 'tile-label', text: label }));
|
||||
|
||||
$container.append($tile);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Apply step/min constraints to numeric range inputs
|
||||
*/
|
||||
applyRangeInputConstraints: function($picker, step, min) {
|
||||
var $inputs = $picker.find('.range-min-input, .range-max-input');
|
||||
|
||||
if (typeof step !== 'undefined' && step !== null) {
|
||||
$inputs.attr('step', step);
|
||||
} else {
|
||||
$inputs.attr('step', 'any');
|
||||
}
|
||||
|
||||
if (typeof min !== 'undefined' && min !== null) {
|
||||
$inputs.attr('min', min);
|
||||
} else {
|
||||
$inputs.removeAttr('min');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Show error message on range input
|
||||
*/
|
||||
showRangeInputError: function($input, message) {
|
||||
var $container = $input.closest('.multi-range-input-row');
|
||||
|
||||
$container.find('.range-input-error').remove();
|
||||
$container.find('.range-min-input, .range-max-input').removeClass('has-error');
|
||||
|
||||
$input.addClass('has-error');
|
||||
var $error = $('<span>', {
|
||||
class: 'range-input-error',
|
||||
text: message
|
||||
});
|
||||
$container.append($error);
|
||||
|
||||
setTimeout(function() {
|
||||
$input.removeClass('has-error');
|
||||
$error.fadeOut(200, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
|
||||
/**
|
||||
* Load attribute groups for combination picker
|
||||
*/
|
||||
loadCombinationAttributeGroups: function($picker) {
|
||||
var self = this;
|
||||
var trans = this.config.trans || {};
|
||||
var $container = $picker.find('.combination-groups-container');
|
||||
|
||||
$.ajax({
|
||||
url: this.config.ajaxUrl,
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
ajax: 1,
|
||||
action: 'getAttributeGroups',
|
||||
trait: 'TargetConditions'
|
||||
},
|
||||
success: function(response) {
|
||||
$container.empty();
|
||||
|
||||
if (!response.success || !response.groups || response.groups.length === 0) {
|
||||
$container.html('<span class="combination-empty">' +
|
||||
self.escapeHtml(trans.no_attribute_groups || 'No attribute groups found') +
|
||||
'</span>');
|
||||
return;
|
||||
}
|
||||
|
||||
response.groups.forEach(function(group) {
|
||||
var $groupDiv = $('<div>', {
|
||||
class: 'comb-attr-group',
|
||||
'data-group-id': group.id
|
||||
});
|
||||
|
||||
var $groupHeader = $('<div>', { class: 'comb-attr-group-header' });
|
||||
$groupHeader.append($('<span>', {
|
||||
class: 'comb-attr-group-name',
|
||||
text: group.name
|
||||
}));
|
||||
$groupHeader.append($('<span>', {
|
||||
class: 'comb-attr-group-count',
|
||||
text: '0'
|
||||
}));
|
||||
|
||||
var $toolbar = $('<div>', { class: 'comb-attr-toolbar' });
|
||||
$toolbar.append($('<button>', {
|
||||
type: 'button',
|
||||
class: 'comb-toolbar-btn comb-select-all',
|
||||
title: trans.select_all || 'Select all',
|
||||
html: self.esIcon('check_box')
|
||||
}));
|
||||
$toolbar.append($('<button>', {
|
||||
type: 'button',
|
||||
class: 'comb-toolbar-btn comb-select-none',
|
||||
title: trans.clear || 'Clear',
|
||||
html: self.esIcon('check_box_outline_blank')
|
||||
}));
|
||||
$toolbar.append($('<input>', {
|
||||
type: 'text',
|
||||
class: 'comb-attr-search',
|
||||
placeholder: trans.filter_results || 'Filter...'
|
||||
}));
|
||||
|
||||
var $valuesContainer = $('<div>', {
|
||||
class: 'comb-attr-values',
|
||||
'data-loaded': 'false'
|
||||
});
|
||||
$valuesContainer.append($('<span>', {
|
||||
class: 'comb-attr-loading',
|
||||
html: self.esIcon('progress_activity', 'es-spin')
|
||||
}));
|
||||
|
||||
$groupDiv.append($groupHeader);
|
||||
$groupDiv.append($toolbar);
|
||||
$groupDiv.append($valuesContainer);
|
||||
$container.append($groupDiv);
|
||||
|
||||
self.loadCombinationAttributeValues($picker, group.id, $valuesContainer);
|
||||
});
|
||||
},
|
||||
error: function() {
|
||||
$container.html('<span class="combination-error">' +
|
||||
self.escapeHtml(trans.error_loading || 'Error loading attribute groups') +
|
||||
'</span>');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Load attribute values for a specific group
|
||||
*/
|
||||
loadCombinationAttributeValues: function($picker, groupId, $container) {
|
||||
var self = this;
|
||||
var trans = this.config.trans || {};
|
||||
|
||||
$.ajax({
|
||||
url: this.config.ajaxUrl,
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
ajax: 1,
|
||||
action: 'getAttributeValues',
|
||||
trait: 'TargetConditions',
|
||||
id_attribute_group: groupId
|
||||
},
|
||||
success: function(response) {
|
||||
$container.empty();
|
||||
$container.attr('data-loaded', 'true');
|
||||
|
||||
if (!response.success || !response.values || response.values.length === 0) {
|
||||
$container.html('<span class="comb-attr-empty">' +
|
||||
self.escapeHtml(trans.no_values || 'No values') +
|
||||
'</span>');
|
||||
return;
|
||||
}
|
||||
|
||||
response.values.forEach(function(value) {
|
||||
var productCount = parseInt(value.product_count) || 0;
|
||||
var $valueBtn = $('<button>', {
|
||||
type: 'button',
|
||||
class: 'comb-attr-value',
|
||||
'data-value-id': value.id,
|
||||
'data-group-id': groupId,
|
||||
'data-name': value.name.toLowerCase()
|
||||
});
|
||||
$valueBtn.append($('<span>', {
|
||||
class: 'comb-attr-value-name',
|
||||
text: value.name
|
||||
}));
|
||||
if (productCount > 0) {
|
||||
$valueBtn.append($('<span>', {
|
||||
class: 'comb-attr-value-count',
|
||||
text: productCount
|
||||
}));
|
||||
}
|
||||
$container.append($valueBtn);
|
||||
});
|
||||
|
||||
self.restoreCombinationSelections($picker);
|
||||
},
|
||||
error: function() {
|
||||
$container.html('<span class="comb-attr-error">' +
|
||||
self.escapeHtml(trans.error_loading || 'Error') +
|
||||
'</span>');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Restore previously selected combination values from hidden input
|
||||
*/
|
||||
restoreCombinationSelections: function($picker) {
|
||||
var $dataInput = $picker.find('.include-values-data, .exclude-values-data').first();
|
||||
var dataStr = $dataInput.val() || '{}';
|
||||
var data;
|
||||
|
||||
try {
|
||||
data = JSON.parse(dataStr);
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
|
||||
var attributes = data.attributes || data;
|
||||
var mode = data.mode || 'products';
|
||||
|
||||
$picker.find('.comb-mode-radio[value="' + mode + '"]').prop('checked', true);
|
||||
|
||||
$.each(attributes, function(groupId, valueIds) {
|
||||
if (!Array.isArray(valueIds)) return;
|
||||
|
||||
valueIds.forEach(function(valueId) {
|
||||
$picker.find('.comb-attr-value[data-group-id="' + groupId + '"][data-value-id="' + valueId + '"]')
|
||||
.addClass('selected');
|
||||
});
|
||||
});
|
||||
|
||||
this.updateCombinationGroupCounts($picker);
|
||||
},
|
||||
|
||||
/**
|
||||
* Update hidden input with current combination selections
|
||||
*/
|
||||
updateCombinationData: function($picker) {
|
||||
var attributes = {};
|
||||
|
||||
$picker.find('.comb-attr-value.selected').each(function() {
|
||||
var groupId = $(this).data('groupId').toString();
|
||||
var valueId = $(this).data('valueId');
|
||||
|
||||
if (!attributes[groupId]) {
|
||||
attributes[groupId] = [];
|
||||
}
|
||||
attributes[groupId].push(valueId);
|
||||
});
|
||||
|
||||
var $combPicker = $picker.find('.combination-attributes-picker');
|
||||
var configMode = $combPicker.data('combinationMode') || this.config.combinationMode || 'products';
|
||||
var mode;
|
||||
|
||||
if (configMode === 'toggle') {
|
||||
mode = $picker.find('.comb-mode-radio:checked').val() || 'products';
|
||||
} else {
|
||||
mode = configMode;
|
||||
}
|
||||
|
||||
var data = {
|
||||
mode: mode,
|
||||
attributes: attributes
|
||||
};
|
||||
|
||||
var $dataInput = $picker.find('.include-values-data, .exclude-values-data').first();
|
||||
$dataInput.val(JSON.stringify(data));
|
||||
|
||||
this.updateCombinationGroupCounts($picker);
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the count badges on each attribute group
|
||||
*/
|
||||
updateCombinationGroupCounts: function($picker) {
|
||||
$picker.find('.comb-attr-group').each(function() {
|
||||
var $group = $(this);
|
||||
var count = $group.find('.comb-attr-value.selected').length;
|
||||
$group.find('.comb-attr-group-count').text(count);
|
||||
|
||||
if (count > 0) {
|
||||
$group.addClass('has-selections');
|
||||
} else {
|
||||
$group.removeClass('has-selections');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the info placeholder based on method and block type
|
||||
*/
|
||||
updateMethodInfoPlaceholder: function($headerRow, method, blockType) {
|
||||
var $placeholder = $headerRow.find('.method-info-placeholder');
|
||||
if (!$placeholder.length) return;
|
||||
|
||||
$placeholder.empty();
|
||||
|
||||
var methodHelp = this.config.methodHelp || {};
|
||||
var blockHelp = methodHelp[blockType] || methodHelp['products'] || {};
|
||||
var helpContent = blockHelp[method] || this.getBuiltInMethodHelp(method);
|
||||
|
||||
if (helpContent) {
|
||||
var $infoWrapper = $('<span>', {
|
||||
class: 'mpr-info-wrapper',
|
||||
'data-details': helpContent
|
||||
});
|
||||
$infoWrapper.append($(this.esIcon('info')));
|
||||
$placeholder.append($infoWrapper);
|
||||
|
||||
// Let prestashop-admin info-tooltip.js handle this element
|
||||
if (window.MPRInfoTooltip) {
|
||||
window.MPRInfoTooltip.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get built-in help content for targeting methods
|
||||
*/
|
||||
getBuiltInMethodHelp: function(method) {
|
||||
var trans = this.config.trans || {};
|
||||
var html = '';
|
||||
|
||||
switch (method) {
|
||||
case 'all':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_all_title || 'All Items') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_all_desc || 'Selects all items without any filtering.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'specific':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_specific_title || 'Specific Items') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_specific_desc || 'Search and select individual items by name, reference, or ID.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_category':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_category_title || 'By Category') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_category_desc || 'Select items belonging to specific categories. Includes subcategories.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_manufacturer':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_manufacturer_title || 'By Manufacturer') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_manufacturer_desc || 'Select items from specific manufacturers/brands.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_supplier':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_supplier_title || 'By Supplier') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_supplier_desc || 'Select items from specific suppliers.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_tag':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_tag_title || 'By Tag') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_tag_desc || 'Select items with specific tags assigned.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_attribute':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_attribute_title || 'By Attribute') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_attribute_desc || 'Select items with specific attribute values (e.g., Color: Red).') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_feature':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_feature_title || 'By Feature') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_feature_desc || 'Select items with specific feature values (e.g., Material: Cotton).') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_combination':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_combination_title || 'Combination Targeting') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_combination_desc || 'Select items by combination attributes.') + '</p>';
|
||||
html += '<p><strong>' + this.escapeHtml(trans.help_combination_logic || 'Logic:') + '</strong></p>';
|
||||
html += '<ul>';
|
||||
html += '<li>' + this.escapeHtml(trans.help_combination_within || 'Within group: OR (Red OR Blue)') + '</li>';
|
||||
html += '<li>' + this.escapeHtml(trans.help_combination_between || 'Between groups: AND (Color AND Size)') + '</li>';
|
||||
html += '</ul>';
|
||||
break;
|
||||
|
||||
case 'by_carrier':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_carrier_title || 'By Carrier') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_carrier_desc || 'Select items available with specific carriers.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_condition':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_condition_title || 'By Condition') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_condition_desc || 'Filter by product condition: New, Used, or Refurbished.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_visibility':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_visibility_title || 'By Visibility') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_visibility_desc || 'Filter by where products are visible in the store.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_active_status':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_active_title || 'By Active Status') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_active_desc || 'Filter by whether products are enabled or disabled.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_stock_status':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_stock_title || 'By Stock Status') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_stock_desc || 'Filter by stock availability: In stock, Out of stock, or Low stock.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_on_sale':
|
||||
case 'by_has_specific_price':
|
||||
case 'by_is_virtual':
|
||||
case 'by_is_pack':
|
||||
case 'by_has_combinations':
|
||||
case 'by_available_for_order':
|
||||
case 'by_online_only':
|
||||
case 'by_has_related':
|
||||
case 'by_has_customization':
|
||||
case 'by_has_attachments':
|
||||
case 'by_has_additional_shipping':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_boolean_title || 'Yes/No Filter') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_boolean_desc || 'Filter products by this property.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_name_pattern':
|
||||
case 'by_reference_pattern':
|
||||
case 'by_description_pattern':
|
||||
case 'by_long_description_pattern':
|
||||
case 'by_ean13_pattern':
|
||||
case 'by_upc_pattern':
|
||||
case 'by_isbn_pattern':
|
||||
case 'by_mpn_pattern':
|
||||
case 'by_meta_title_pattern':
|
||||
case 'by_meta_description_pattern':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_pattern_title || 'Pattern Matching') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_pattern_desc || 'Match text using patterns with wildcards.') + '</p>';
|
||||
html += '<div><code>*</code> ' + this.escapeHtml(trans.help_pattern_wildcard || 'any text') + '</div>';
|
||||
html += '<div><code>{number}</code> ' + this.escapeHtml(trans.help_pattern_number || 'any number') + '</div>';
|
||||
html += '<div><code>{letter}</code> ' + this.escapeHtml(trans.help_pattern_letter || 'single letter A-Z') + '</div>';
|
||||
break;
|
||||
|
||||
case 'by_id_range':
|
||||
case 'by_price_range':
|
||||
case 'by_weight_range':
|
||||
case 'by_quantity_range':
|
||||
case 'by_position_range':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_range_title || 'Numeric Range') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_range_desc || 'Filter by numeric values within specified ranges.') + '</p>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_range_tip || 'Leave min or max empty for open-ended ranges.') + '</p>';
|
||||
break;
|
||||
|
||||
case 'by_date_added':
|
||||
case 'by_date_updated':
|
||||
html = '<strong>' + this.escapeHtml(trans.help_date_title || 'Date Range') + '</strong>';
|
||||
html += '<p>' + this.escapeHtml(trans.help_date_desc || 'Filter by date within a specific period.') + '</p>';
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return html;
|
||||
},
|
||||
|
||||
/**
|
||||
* Build sort options HTML for a specific block type
|
||||
*/
|
||||
buildSortOptions: function(blockType) {
|
||||
var options = [];
|
||||
|
||||
switch (blockType) {
|
||||
case 'products':
|
||||
options = [
|
||||
{ value: 'sales', label: 'Best sellers' },
|
||||
{ value: 'date_add', label: 'Newest' },
|
||||
{ value: 'price', label: 'Price' },
|
||||
{ value: 'name', label: 'Name' },
|
||||
{ value: 'position', label: 'Position' },
|
||||
{ value: 'quantity', label: 'Stock quantity' },
|
||||
{ value: 'random', label: 'Random' }
|
||||
];
|
||||
break;
|
||||
|
||||
case 'categories':
|
||||
options = [
|
||||
{ value: 'name', label: 'Name' },
|
||||
{ value: 'position', label: 'Position' },
|
||||
{ value: 'product_count', label: 'Product count' },
|
||||
{ value: 'total_sales', label: 'Best sellers' },
|
||||
{ value: 'newest_products', label: 'Newest products' },
|
||||
{ value: 'date_add', label: 'Creation date' },
|
||||
{ value: 'random', label: 'Random' }
|
||||
];
|
||||
break;
|
||||
|
||||
case 'manufacturers':
|
||||
case 'suppliers':
|
||||
options = [
|
||||
{ value: 'name', label: 'Name' },
|
||||
{ value: 'product_count', label: 'Product count' },
|
||||
{ value: 'total_sales', label: 'Best sellers' },
|
||||
{ value: 'newest_products', label: 'Newest products' },
|
||||
{ value: 'random', label: 'Random' }
|
||||
];
|
||||
break;
|
||||
|
||||
case 'cms':
|
||||
case 'cms_categories':
|
||||
options = [
|
||||
{ value: 'name', label: 'Name' },
|
||||
{ value: 'position', label: 'Position' },
|
||||
{ value: 'random', label: 'Random' }
|
||||
];
|
||||
break;
|
||||
|
||||
default:
|
||||
options = [
|
||||
{ value: 'name', label: 'Name' },
|
||||
{ value: 'random', label: 'Random' }
|
||||
];
|
||||
}
|
||||
|
||||
var html = '';
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
html += '<option value="' + this.escapeAttr(options[i].value) + '">' +
|
||||
this.escapeHtml(options[i].label) + '</option>';
|
||||
}
|
||||
|
||||
return html;
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the modifier toggle button state
|
||||
*/
|
||||
updateModifierButtonState: function($group) {
|
||||
var limit = $group.find('.group-modifier-limit').val();
|
||||
var sortBy = $group.find('.group-modifier-sort').val();
|
||||
var $modifiers = $group.find('.group-modifiers');
|
||||
var $btn = $group.find('.btn-toggle-modifiers');
|
||||
var trans = this.config.trans || {};
|
||||
|
||||
$btn.find('.modifier-summary').remove();
|
||||
|
||||
if (limit || sortBy) {
|
||||
$modifiers.addClass('has-values');
|
||||
|
||||
var summary = [];
|
||||
if (limit) {
|
||||
summary.push((trans.top || 'Top') + ' ' + limit);
|
||||
}
|
||||
if (sortBy) {
|
||||
var sortLabel = $group.find('.group-modifier-sort option:selected').text();
|
||||
summary.push(sortLabel);
|
||||
}
|
||||
|
||||
var $arrow = $btn.find('.toggle-arrow');
|
||||
$('<span class="modifier-summary">' + this.escapeHtml(summary.join(', ')) + '</span>').insertBefore($arrow);
|
||||
} else {
|
||||
$modifiers.removeClass('has-values');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Lock/unlock method selector when excludes are present
|
||||
*/
|
||||
updateMethodSelectorLock: function($group, locked) {
|
||||
var $select = $group.find('.include-method-select');
|
||||
var $wrapper = $select.closest('.method-selector-wrapper');
|
||||
var trans = this.config.trans || {};
|
||||
|
||||
if (locked) {
|
||||
$select.prop('disabled', true);
|
||||
|
||||
if (!$wrapper.length) {
|
||||
$select.wrap('<div class="method-selector-wrapper"></div>');
|
||||
$wrapper = $select.parent('.method-selector-wrapper');
|
||||
}
|
||||
|
||||
$wrapper.addClass('selector-locked');
|
||||
if (!$wrapper.find('.lock-indicator').length) {
|
||||
var lockHtml = '<span class="mpr-info-wrapper lock-indicator">' +
|
||||
self.esIcon('lock') +
|
||||
'<span class="mpr-tooltip">' +
|
||||
(trans.remove_excludes_first || 'Remove all exceptions to change selection type') +
|
||||
'</span>' +
|
||||
'</span>';
|
||||
var $countEl = $wrapper.find('.condition-match-count');
|
||||
if ($countEl.length) {
|
||||
$countEl.before(lockHtml);
|
||||
} else {
|
||||
$wrapper.append(lockHtml);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$select.prop('disabled', false);
|
||||
if ($wrapper.length) {
|
||||
$wrapper.removeClass('selector-locked');
|
||||
$wrapper.find('.mpr-info-wrapper.lock-indicator').remove();
|
||||
} else {
|
||||
$select.siblings('.mpr-info-wrapper.lock-indicator').remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,881 +0,0 @@
|
||||
/**
|
||||
* Entity Selector - Search Module
|
||||
* AJAX search, results rendering, category tree, filters, search history
|
||||
* @partial _search.js
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
window._EntitySelectorMixins = window._EntitySelectorMixins || {};
|
||||
|
||||
window._EntitySelectorMixins.search = {
|
||||
|
||||
// Category tree cache
|
||||
categoryTreeCache: null,
|
||||
|
||||
/**
|
||||
* Perform AJAX search for entities
|
||||
*/
|
||||
performSearch: function(appendMode) {
|
||||
var self = this;
|
||||
|
||||
if (!this.activeGroup) return;
|
||||
|
||||
this.isLoading = true;
|
||||
|
||||
var searchEntity = this.activeGroup.searchEntity;
|
||||
|
||||
// Build request data with sort and filter params
|
||||
var limit = appendMode && this.loadMoreCount ? this.loadMoreCount : 20;
|
||||
var requestData = {
|
||||
ajax: 1,
|
||||
action: 'searchTargetEntities',
|
||||
trait: 'EntitySelector',
|
||||
entity_type: searchEntity,
|
||||
q: this.searchQuery,
|
||||
limit: limit,
|
||||
offset: appendMode ? this.searchOffset : 0,
|
||||
sort_by: this.currentSort ? this.currentSort.field : 'name',
|
||||
sort_dir: this.currentSort ? this.currentSort.dir : 'ASC'
|
||||
};
|
||||
|
||||
// Add refine query if present
|
||||
if (this.refineQuery) {
|
||||
requestData.refine = this.refineQuery;
|
||||
if (this.refineNegate) {
|
||||
requestData.refine_negate = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Add product-specific filters
|
||||
if (searchEntity === 'products' && this.filters) {
|
||||
if (this.filters.inStock) {
|
||||
requestData.filter_in_stock = 1;
|
||||
}
|
||||
if (this.filters.discounted) {
|
||||
requestData.filter_discounted = 1;
|
||||
}
|
||||
if (this.filters.priceMin !== null && this.filters.priceMin !== '') {
|
||||
requestData.filter_price_min = this.filters.priceMin;
|
||||
}
|
||||
if (this.filters.priceMax !== null && this.filters.priceMax !== '') {
|
||||
requestData.filter_price_max = this.filters.priceMax;
|
||||
}
|
||||
if (this.filters.attributes && this.filters.attributes.length > 0) {
|
||||
requestData.filter_attributes = JSON.stringify(this.filters.attributes);
|
||||
}
|
||||
if (this.filters.features && this.filters.features.length > 0) {
|
||||
requestData.filter_features = JSON.stringify(this.filters.features);
|
||||
}
|
||||
}
|
||||
|
||||
// Add entity-specific filters for non-product entities
|
||||
if (searchEntity !== 'products' && this.filters) {
|
||||
// Product count range (categories, manufacturers, suppliers, attributes, features)
|
||||
if (this.filters.productCountMin !== null && this.filters.productCountMin !== '') {
|
||||
requestData.filter_product_count_min = this.filters.productCountMin;
|
||||
}
|
||||
if (this.filters.productCountMax !== null && this.filters.productCountMax !== '') {
|
||||
requestData.filter_product_count_max = this.filters.productCountMax;
|
||||
}
|
||||
|
||||
// Category-specific
|
||||
if (searchEntity === 'categories') {
|
||||
if (this.filters.depth) {
|
||||
requestData.filter_depth = this.filters.depth;
|
||||
}
|
||||
if (this.filters.hasProducts) {
|
||||
requestData.filter_has_products = 1;
|
||||
}
|
||||
if (this.filters.hasDescription) {
|
||||
requestData.filter_has_description = 1;
|
||||
}
|
||||
if (this.filters.hasImage) {
|
||||
requestData.filter_has_image = 1;
|
||||
}
|
||||
if (this.filters.salesMin !== null && this.filters.salesMin !== '') {
|
||||
requestData.filter_sales_min = this.filters.salesMin;
|
||||
}
|
||||
if (this.filters.salesMax !== null && this.filters.salesMax !== '') {
|
||||
requestData.filter_sales_max = this.filters.salesMax;
|
||||
}
|
||||
if (this.filters.turnoverMin !== null && this.filters.turnoverMin !== '') {
|
||||
requestData.filter_turnover_min = this.filters.turnoverMin;
|
||||
}
|
||||
if (this.filters.turnoverMax !== null && this.filters.turnoverMax !== '') {
|
||||
requestData.filter_turnover_max = this.filters.turnoverMax;
|
||||
}
|
||||
if (this.filters.activeOnly) {
|
||||
requestData.filter_active = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Manufacturer-specific
|
||||
if (searchEntity === 'manufacturers') {
|
||||
if (this.filters.salesMin !== null && this.filters.salesMin !== '') {
|
||||
requestData.filter_sales_min = this.filters.salesMin;
|
||||
}
|
||||
if (this.filters.salesMax !== null && this.filters.salesMax !== '') {
|
||||
requestData.filter_sales_max = this.filters.salesMax;
|
||||
}
|
||||
if (this.filters.turnoverMin !== null && this.filters.turnoverMin !== '') {
|
||||
requestData.filter_turnover_min = this.filters.turnoverMin;
|
||||
}
|
||||
if (this.filters.turnoverMax !== null && this.filters.turnoverMax !== '') {
|
||||
requestData.filter_turnover_max = this.filters.turnoverMax;
|
||||
}
|
||||
if (this.filters.dateAddFrom) {
|
||||
requestData.filter_date_add_from = this.filters.dateAddFrom;
|
||||
}
|
||||
if (this.filters.dateAddTo) {
|
||||
requestData.filter_date_add_to = this.filters.dateAddTo;
|
||||
}
|
||||
if (this.filters.lastProductFrom) {
|
||||
requestData.filter_last_product_from = this.filters.lastProductFrom;
|
||||
}
|
||||
if (this.filters.lastProductTo) {
|
||||
requestData.filter_last_product_to = this.filters.lastProductTo;
|
||||
}
|
||||
if (this.filters.activeOnly) {
|
||||
requestData.filter_active = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Supplier-specific
|
||||
if (searchEntity === 'suppliers') {
|
||||
if (this.filters.salesMin !== null && this.filters.salesMin !== '') {
|
||||
requestData.filter_sales_min = this.filters.salesMin;
|
||||
}
|
||||
if (this.filters.salesMax !== null && this.filters.salesMax !== '') {
|
||||
requestData.filter_sales_max = this.filters.salesMax;
|
||||
}
|
||||
if (this.filters.turnoverMin !== null && this.filters.turnoverMin !== '') {
|
||||
requestData.filter_turnover_min = this.filters.turnoverMin;
|
||||
}
|
||||
if (this.filters.turnoverMax !== null && this.filters.turnoverMax !== '') {
|
||||
requestData.filter_turnover_max = this.filters.turnoverMax;
|
||||
}
|
||||
if (this.filters.dateAddFrom) {
|
||||
requestData.filter_date_add_from = this.filters.dateAddFrom;
|
||||
}
|
||||
if (this.filters.dateAddTo) {
|
||||
requestData.filter_date_add_to = this.filters.dateAddTo;
|
||||
}
|
||||
if (this.filters.lastProductFrom) {
|
||||
requestData.filter_last_product_from = this.filters.lastProductFrom;
|
||||
}
|
||||
if (this.filters.lastProductTo) {
|
||||
requestData.filter_last_product_to = this.filters.lastProductTo;
|
||||
}
|
||||
if (this.filters.activeOnly) {
|
||||
requestData.filter_active = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Attribute-specific
|
||||
if (searchEntity === 'attributes') {
|
||||
if (this.filters.salesMin !== null && this.filters.salesMin !== '') {
|
||||
requestData.filter_sales_min = this.filters.salesMin;
|
||||
}
|
||||
if (this.filters.salesMax !== null && this.filters.salesMax !== '') {
|
||||
requestData.filter_sales_max = this.filters.salesMax;
|
||||
}
|
||||
if (this.filters.turnoverMin !== null && this.filters.turnoverMin !== '') {
|
||||
requestData.filter_turnover_min = this.filters.turnoverMin;
|
||||
}
|
||||
if (this.filters.turnoverMax !== null && this.filters.turnoverMax !== '') {
|
||||
requestData.filter_turnover_max = this.filters.turnoverMax;
|
||||
}
|
||||
if (this.filters.attributeGroup) {
|
||||
requestData.filter_attribute_group = this.filters.attributeGroup;
|
||||
}
|
||||
if (this.filters.isColor) {
|
||||
requestData.filter_is_color = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Feature-specific
|
||||
if (searchEntity === 'features') {
|
||||
if (this.filters.salesMin !== null && this.filters.salesMin !== '') {
|
||||
requestData.filter_sales_min = this.filters.salesMin;
|
||||
}
|
||||
if (this.filters.salesMax !== null && this.filters.salesMax !== '') {
|
||||
requestData.filter_sales_max = this.filters.salesMax;
|
||||
}
|
||||
if (this.filters.turnoverMin !== null && this.filters.turnoverMin !== '') {
|
||||
requestData.filter_turnover_min = this.filters.turnoverMin;
|
||||
}
|
||||
if (this.filters.turnoverMax !== null && this.filters.turnoverMax !== '') {
|
||||
requestData.filter_turnover_max = this.filters.turnoverMax;
|
||||
}
|
||||
if (this.filters.featureGroup) {
|
||||
requestData.filter_feature_group = this.filters.featureGroup;
|
||||
}
|
||||
if (this.filters.isCustom) {
|
||||
requestData.filter_is_custom = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// CMS-specific
|
||||
if (searchEntity === 'cms') {
|
||||
if (this.filters.activeOnly) {
|
||||
requestData.filter_active = 1;
|
||||
}
|
||||
if (this.filters.indexable) {
|
||||
requestData.filter_indexable = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// CMS Categories-specific
|
||||
if (searchEntity === 'cms_categories') {
|
||||
if (this.filters.activeOnly) {
|
||||
requestData.filter_active = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Countries-specific
|
||||
if (searchEntity === 'countries') {
|
||||
if (this.filters.activeOnly) {
|
||||
requestData.filter_active = 1;
|
||||
}
|
||||
if (this.filters.hasHolidays) {
|
||||
requestData.filter_has_holidays = 1;
|
||||
}
|
||||
if (this.filters.containsStates) {
|
||||
requestData.filter_contains_states = 1;
|
||||
}
|
||||
if (this.filters.zone) {
|
||||
requestData.filter_zone = this.filters.zone;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: this.config.ajaxUrl,
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: requestData,
|
||||
success: function(response) {
|
||||
self.isLoading = false;
|
||||
|
||||
if (!response.success) return;
|
||||
|
||||
// Save to search history if query is not empty and has results
|
||||
if (self.searchQuery && self.searchQuery.length >= 2 && response.total > 0) {
|
||||
self.addToSearchHistory(searchEntity, self.searchQuery);
|
||||
}
|
||||
|
||||
if (appendMode) {
|
||||
self.searchResults = self.searchResults.concat(response.results || []);
|
||||
} else {
|
||||
self.searchResults = response.results || [];
|
||||
}
|
||||
self.searchTotal = response.total || 0;
|
||||
self.searchOffset = appendMode ? self.searchOffset + (response.results || []).length : (response.results || []).length;
|
||||
|
||||
self.renderSearchResults(appendMode);
|
||||
self.$dropdown.addClass('show');
|
||||
},
|
||||
error: function() {
|
||||
self.isLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Render search results in the dropdown
|
||||
*/
|
||||
renderSearchResults: function(appendMode) {
|
||||
var self = this;
|
||||
var trans = this.config.trans || {};
|
||||
var $container = this.$dropdown.find('.dropdown-results');
|
||||
|
||||
// Get selected IDs from current picker (to mark as selected)
|
||||
// and hidden IDs from sibling exclude pickers with same entity type (to hide completely)
|
||||
var selectedIds = [];
|
||||
var hiddenIds = [];
|
||||
if (this.activeGroup) {
|
||||
var $block = this.$wrapper.find('.target-block[data-block-type="' + this.activeGroup.blockType + '"]');
|
||||
var $group = $block.find('.selection-group[data-group-index="' + this.activeGroup.groupIndex + '"]');
|
||||
var currentSearchEntity = this.activeGroup.searchEntity;
|
||||
var currentExcludeIndex = this.activeGroup.excludeIndex;
|
||||
|
||||
if (this.activeGroup.section === 'include') {
|
||||
// For include section, just get current picker's selections
|
||||
var $picker = $group.find('.include-picker');
|
||||
$picker.find('.entity-chip').each(function() {
|
||||
selectedIds.push(String($(this).data('id')));
|
||||
});
|
||||
} else {
|
||||
// For exclude section, get current picker's selections AND
|
||||
// collect IDs from sibling exclude rows with same entity type to hide
|
||||
var $currentExcludeRow = $group.find('.exclude-row[data-exclude-index="' + currentExcludeIndex + '"]');
|
||||
var $currentPicker = $currentExcludeRow.find('.exclude-picker');
|
||||
|
||||
// Get selected IDs from current exclude row
|
||||
$currentPicker.find('.entity-chip').each(function() {
|
||||
selectedIds.push(String($(this).data('id')));
|
||||
});
|
||||
|
||||
// Get hidden IDs from OTHER exclude rows with the same entity type
|
||||
$group.find('.exclude-row').each(function() {
|
||||
var $row = $(this);
|
||||
var rowIndex = parseInt($row.data('excludeIndex'), 10);
|
||||
|
||||
// Skip current exclude row
|
||||
if (rowIndex === currentExcludeIndex) return;
|
||||
|
||||
var $picker = $row.find('.exclude-picker');
|
||||
var rowEntityType = $picker.attr('data-search-entity') || self.activeGroup.blockType;
|
||||
|
||||
// Only collect if same entity type
|
||||
if (rowEntityType === currentSearchEntity) {
|
||||
$picker.find('.entity-chip').each(function() {
|
||||
hiddenIds.push(String($(this).data('id')));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Check if this is a product search
|
||||
var isProductSearch = this.activeGroup && this.activeGroup.searchEntity === 'products';
|
||||
var isListView = this.viewMode === 'list';
|
||||
|
||||
// Show/hide results header for products in list view
|
||||
this.$dropdown.find('.results-header').toggle(isProductSearch && isListView);
|
||||
|
||||
// Build HTML - filter out items that are hidden (selected in sibling exclude rows)
|
||||
var visibleResults = this.searchResults.filter(function(item) {
|
||||
return hiddenIds.indexOf(String(item.id)) === -1;
|
||||
});
|
||||
|
||||
// Update count (show visible count and total, noting hidden items if any)
|
||||
var hiddenCount = this.searchResults.length - visibleResults.length;
|
||||
var countText = visibleResults.length + ' / ' + this.searchTotal + ' results';
|
||||
if (hiddenCount > 0) {
|
||||
countText += ' (' + hiddenCount + ' hidden)';
|
||||
}
|
||||
this.$dropdown.find('.results-count').text(countText);
|
||||
|
||||
var html = '';
|
||||
if (visibleResults.length === 0 && !appendMode) {
|
||||
html = '<div class="no-results">' + this.esIcon('search') + ' ' + (trans.no_results || 'No results found') + '</div>';
|
||||
} else {
|
||||
visibleResults.forEach(function(item) {
|
||||
var isSelected = selectedIds.indexOf(String(item.id)) !== -1;
|
||||
var itemClass = 'dropdown-item' + (isSelected ? ' selected' : '');
|
||||
if (item.type === 'product') itemClass += ' result-item-product';
|
||||
|
||||
html += '<div class="' + itemClass + '" ';
|
||||
html += 'data-id="' + self.escapeAttr(item.id) + '" ';
|
||||
html += 'data-name="' + self.escapeAttr(item.name) + '"';
|
||||
if (item.image) html += ' data-image="' + self.escapeAttr(item.image) + '"';
|
||||
if (item.subtitle) html += ' data-subtitle="' + self.escapeAttr(item.subtitle) + '"';
|
||||
if (item.iso_code) html += ' data-iso="' + self.escapeAttr(item.iso_code) + '"';
|
||||
html += '>';
|
||||
|
||||
html += '<span class="result-checkbox">' + self.esIcon('check') + '</span>';
|
||||
|
||||
var searchEntity = self.activeGroup ? self.activeGroup.searchEntity : null;
|
||||
|
||||
// Countries show flags
|
||||
if (searchEntity === 'countries' && item.iso_code) {
|
||||
var flagUrl = 'https://flagcdn.com/w40/' + item.iso_code.toLowerCase() + '.png';
|
||||
html += '<div class="result-image result-flag"><img src="' + self.escapeAttr(flagUrl) + '" alt="' + self.escapeAttr(item.iso_code) + '" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'flex\';"><span class="flag-fallback" style="display:none;">' + self.esIcon('flag') + '</span></div>';
|
||||
} else if (item.image) {
|
||||
html += '<div class="result-image"><img src="' + self.escapeAttr(item.image) + '" alt=""></div>';
|
||||
} else {
|
||||
// Entity-specific icons
|
||||
var iconName = 'widgets'; // default
|
||||
if (searchEntity === 'categories') iconName = 'folder';
|
||||
else if (searchEntity === 'manufacturers') iconName = 'business';
|
||||
else if (searchEntity === 'suppliers') iconName = 'local_shipping';
|
||||
else if (searchEntity === 'attributes') iconName = 'brush';
|
||||
else if (searchEntity === 'features') iconName = 'list';
|
||||
else if (searchEntity === 'cms') iconName = 'description';
|
||||
else if (searchEntity === 'cms_categories') iconName = 'folder';
|
||||
html += '<div class="result-icon">' + self.esIcon(iconName) + '</div>';
|
||||
}
|
||||
|
||||
html += '<div class="result-info">';
|
||||
html += '<div class="result-name">' + self.escapeHtml(item.name) + '</div>';
|
||||
if (item.subtitle) {
|
||||
// Split multi-line subtitles into separate divs for styling
|
||||
var subtitleLines = item.subtitle.split('\n');
|
||||
html += '<div class="result-subtitle">';
|
||||
subtitleLines.forEach(function(line, idx) {
|
||||
var lineClass = idx === 0 ? 'subtitle-line subtitle-line-primary' : 'subtitle-line subtitle-line-secondary';
|
||||
html += '<div class="' + lineClass + '">' + self.escapeHtml(line) + '</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
// Add product-specific columns (price, sale price, stock, sold)
|
||||
if (item.type === 'product') {
|
||||
if (isListView) {
|
||||
// List view: full columns
|
||||
// Regular price
|
||||
html += '<div class="result-col result-col-price">';
|
||||
html += '<span class="col-value">' + (item.regular_price_formatted || item.price_formatted || '') + '</span>';
|
||||
html += '</div>';
|
||||
|
||||
// Sale price (only if discounted)
|
||||
if (item.has_discount) {
|
||||
html += '<div class="result-col result-col-sale">';
|
||||
html += '<span class="col-value">' + (item.price_formatted || '') + '</span>';
|
||||
html += '</div>';
|
||||
} else {
|
||||
html += '<div class="result-col result-col-sale"></div>';
|
||||
}
|
||||
|
||||
// Stock column
|
||||
var stockClass = item.stock_status === 'out_of_stock' ? 'stock-out' :
|
||||
(item.stock_status === 'low_stock' ? 'stock-low' : 'stock-ok');
|
||||
html += '<div class="result-col result-col-stock">';
|
||||
html += '<span class="col-value ' + stockClass + '">' + (item.stock_qty !== undefined ? item.stock_qty : '') + '</span>';
|
||||
html += '</div>';
|
||||
|
||||
// Sales column
|
||||
html += '<div class="result-col result-col-sales">';
|
||||
html += '<span class="col-value">' + (item.sales_qty !== undefined ? item.sales_qty : '0') + '</span>';
|
||||
html += '</div>';
|
||||
} else {
|
||||
// Grid view: compact info line
|
||||
var gridStockClass = item.stock_status === 'out_of_stock' ? 'stock-out' :
|
||||
(item.stock_status === 'low_stock' ? 'stock-low' : '');
|
||||
html += '<div class="result-grid-info">';
|
||||
html += '<span class="grid-price">' + (item.price_formatted || '') + '</span>';
|
||||
if (item.stock_qty !== undefined) {
|
||||
html += '<span class="grid-stock ' + gridStockClass + '">' + item.stock_qty + ' qty</span>';
|
||||
}
|
||||
if (item.has_discount) {
|
||||
html += '<span class="grid-discount">-' + (item.discount_percent || '') + '%</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
});
|
||||
}
|
||||
|
||||
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('<option value="' + remaining + '" data-all="true">' + (trans.all || 'All') + ' (' + remaining + ')</option>');
|
||||
}
|
||||
}
|
||||
|
||||
// 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 = '<div class="search-history-list">';
|
||||
for (var i = 0; i < history.length; i++) {
|
||||
var query = history[i];
|
||||
html += '<div class="history-item" data-query="' + this.escapeAttr(query) + '">';
|
||||
html += this.esIcon('schedule');
|
||||
html += '<span class="history-query">' + this.escapeHtml(query) + '</span>';
|
||||
html += '<button type="button" class="btn-delete-history" title="' + (trans.remove || 'Remove') + '">';
|
||||
html += this.esIcon('close');
|
||||
html += '</button>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
$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,
|
||||
// Country-specific filters
|
||||
hasHolidays: false,
|
||||
containsStates: false,
|
||||
zone: 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('');
|
||||
// Country filters
|
||||
this.$dropdown.find('.filter-has-holidays').prop('checked', false);
|
||||
this.$dropdown.find('.filter-contains-states').prop('checked', false);
|
||||
this.$dropdown.find('.filter-zone-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,
|
||||
// Country-specific filters
|
||||
hasHolidays: false,
|
||||
containsStates: false,
|
||||
zone: 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('');
|
||||
// Country filters
|
||||
this.$dropdown.find('.filter-has-holidays').prop('checked', false);
|
||||
this.$dropdown.find('.filter-contains-states').prop('checked', false);
|
||||
this.$dropdown.find('.filter-zone-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();
|
||||
} else if (entityType === 'countries') {
|
||||
$panel.find('.filter-row-entity-countries').show();
|
||||
this.loadZonesForCountryFilter();
|
||||
}
|
||||
},
|
||||
|
||||
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('<option value="' + group.id + '">' + self.escapeHtml(group.name) + ' (' + group.count + ')</option>');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
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('<option value="' + group.id + '">' + self.escapeHtml(group.name) + ' (' + group.count + ')</option>');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -1,359 +0,0 @@
|
||||
/**
|
||||
* Entity Selector - Category Tree Module
|
||||
* Hierarchical tree view for category selection inside the dropdown
|
||||
* @partial _tree.js
|
||||
*
|
||||
* Features:
|
||||
* - Expand/collapse individual nodes
|
||||
* - Expand all / Collapse all
|
||||
* - Select parent with all children button
|
||||
* - Visual tree with indentation
|
||||
* - Product count display
|
||||
* - Search/filter within tree
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
// Create mixin namespace
|
||||
window._EntitySelectorMixins = window._EntitySelectorMixins || {};
|
||||
|
||||
// Tree mixin
|
||||
window._EntitySelectorMixins.tree = {
|
||||
|
||||
// Tree state
|
||||
treeData: null,
|
||||
treeFlatData: null,
|
||||
|
||||
/**
|
||||
* Load and display category tree in the dropdown
|
||||
* Called when view mode is changed to "tree"
|
||||
*/
|
||||
loadCategoryTree: function() {
|
||||
var self = this;
|
||||
var $results = this.$dropdown.find('.dropdown-results');
|
||||
var trans = this.config.trans || {};
|
||||
var searchEntity = this.activeGroup ? this.activeGroup.searchEntity : 'categories';
|
||||
|
||||
// Show loading
|
||||
$results.html('<div class="tree-loading">' + this.esIcon('progress_activity', 'es-spin') + ' ' +
|
||||
this.escapeHtml(trans.loading || 'Loading...') + '</div>');
|
||||
|
||||
// Fetch tree data
|
||||
$.ajax({
|
||||
url: this.config.ajaxUrl,
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
ajax: 1,
|
||||
action: 'getCategoryTree',
|
||||
trait: 'EntitySelector',
|
||||
entity_type: searchEntity
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success && response.categories && response.categories.length > 0) {
|
||||
self.treeFlatData = response.categories;
|
||||
self.treeData = self.buildTreeStructure(response.categories);
|
||||
self.renderCategoryTree($results, searchEntity);
|
||||
} else {
|
||||
$results.html('<div class="dropdown-empty">' +
|
||||
self.escapeHtml(trans.no_categories || 'No categories found') + '</div>');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$results.html('<div class="dropdown-error">' +
|
||||
self.escapeHtml(trans.error_loading || 'Failed to load categories') + '</div>');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Build nested tree structure from flat array
|
||||
* @param {Array} flatData - Flat array with parent_id references
|
||||
* @returns {Array} Nested tree structure
|
||||
*/
|
||||
buildTreeStructure: function(flatData) {
|
||||
var lookup = {};
|
||||
var tree = [];
|
||||
|
||||
// Create lookup and initialize children arrays
|
||||
flatData.forEach(function(item) {
|
||||
lookup[item.id] = $.extend({}, item, { children: [] });
|
||||
});
|
||||
|
||||
// Build tree by assigning children to parents
|
||||
flatData.forEach(function(item) {
|
||||
var node = lookup[item.id];
|
||||
var parentId = parseInt(item.parent_id, 10);
|
||||
|
||||
if (parentId && lookup[parentId]) {
|
||||
lookup[parentId].children.push(node);
|
||||
} else {
|
||||
tree.push(node);
|
||||
}
|
||||
});
|
||||
|
||||
return tree;
|
||||
},
|
||||
|
||||
/**
|
||||
* Render the category tree inside dropdown results
|
||||
* @param {jQuery} $container - The dropdown-results container
|
||||
* @param {string} entityType - 'categories' or 'cms_categories'
|
||||
*/
|
||||
renderCategoryTree: function($container, entityType) {
|
||||
var self = this;
|
||||
var trans = this.config.trans || {};
|
||||
|
||||
// Get currently selected IDs from chips
|
||||
var selectedIds = this.getSelectedIdsFromChips();
|
||||
|
||||
// Build tree HTML
|
||||
var html = '<div class="category-tree" data-entity-type="' + this.escapeAttr(entityType) + '">';
|
||||
|
||||
// Tree toolbar
|
||||
html += '<div class="tree-toolbar">';
|
||||
html += '<button type="button" class="btn-expand-all" title="' +
|
||||
this.escapeAttr(trans.expand_all || 'Expand all') + '">';
|
||||
html += this.esIcon('add_box') + ' ' + this.escapeHtml(trans.expand_all || 'Expand all');
|
||||
html += '</button>';
|
||||
html += '<button type="button" class="btn-collapse-all" title="' +
|
||||
this.escapeAttr(trans.collapse_all || 'Collapse all') + '">';
|
||||
html += this.esIcon('indeterminate_check_box') + ' ' + this.escapeHtml(trans.collapse_all || 'Collapse all');
|
||||
html += '</button>';
|
||||
html += '</div>';
|
||||
|
||||
// Tree items
|
||||
html += '<div class="tree-items">';
|
||||
html += this.renderTreeItems(this.treeData, 0, selectedIds);
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
$container.html(html);
|
||||
|
||||
// Update count
|
||||
var totalCount = this.treeFlatData ? this.treeFlatData.length : 0;
|
||||
var selectedCount = selectedIds.length;
|
||||
var categoryLabel = entityType === 'cms_categories' ? 'CMS categories' : 'categories';
|
||||
var countText = totalCount + ' ' + categoryLabel;
|
||||
if (selectedCount > 0) {
|
||||
countText += ' (' + selectedCount + ' selected)';
|
||||
}
|
||||
this.$dropdown.find('.results-count').text(countText);
|
||||
|
||||
// Update select children button states
|
||||
this.updateSelectChildrenButtons(this.$dropdown.find('.tree-item'));
|
||||
},
|
||||
|
||||
/**
|
||||
* Render tree items recursively
|
||||
* @param {Array} nodes - Tree nodes
|
||||
* @param {number} level - Current depth level
|
||||
* @param {Array} selectedIds - Currently selected IDs
|
||||
* @returns {string} HTML string
|
||||
*/
|
||||
renderTreeItems: function(nodes, level, selectedIds) {
|
||||
var self = this;
|
||||
var html = '';
|
||||
var trans = this.config.trans || {};
|
||||
|
||||
nodes.forEach(function(node) {
|
||||
var hasChildren = node.children && node.children.length > 0;
|
||||
var isSelected = selectedIds.indexOf(parseInt(node.id, 10)) !== -1;
|
||||
var indent = level * 20;
|
||||
|
||||
var itemClass = 'tree-item';
|
||||
if (hasChildren) itemClass += ' has-children';
|
||||
if (isSelected) itemClass += ' selected';
|
||||
if (!node.active) itemClass += ' inactive';
|
||||
|
||||
html += '<div class="' + itemClass + '" data-id="' + node.id + '" ';
|
||||
html += 'data-name="' + self.escapeAttr(node.name) + '" ';
|
||||
html += 'data-level="' + level + '" ';
|
||||
html += 'data-parent-id="' + (node.parent_id || 0) + '">';
|
||||
|
||||
// Indentation
|
||||
html += '<span class="tree-indent" style="width: ' + indent + 'px;"></span>';
|
||||
|
||||
// Toggle button (expand/collapse)
|
||||
if (hasChildren) {
|
||||
html += '<span class="tree-toggle">' + self.esIcon('arrow_drop_down') + '</span>';
|
||||
// Select with children button (next to toggle on the left)
|
||||
html += '<button type="button" class="btn-select-children" title="' +
|
||||
self.escapeAttr(trans.select_with_children || 'Select with all children') + '">';
|
||||
html += self.esIcon('check_box');
|
||||
html += '</button>';
|
||||
} else {
|
||||
html += '<span class="tree-toggle tree-leaf"></span>';
|
||||
}
|
||||
|
||||
// Checkbox indicator
|
||||
html += '<span class="tree-checkbox">' + this.esIcon('check') + '</span>';
|
||||
|
||||
// Category icon
|
||||
html += '<span class="tree-icon">' + this.esIcon('folder') + '</span>';
|
||||
|
||||
// Name
|
||||
html += '<span class="tree-name">' + self.escapeHtml(node.name) + '</span>';
|
||||
|
||||
// Product/page count with clickable preview
|
||||
var itemCount = node.product_count || node.page_count || 0;
|
||||
if (itemCount > 0) {
|
||||
var countLabel = node.page_count ? (trans.pages || 'pages') : (trans.products || 'products');
|
||||
html += '<span class="tree-count clickable" data-category-id="' + node.id + '" ';
|
||||
html += 'title="' + self.escapeAttr(itemCount + ' ' + countLabel) + '">';
|
||||
html += self.esIcon('visibility') + ' ' + itemCount;
|
||||
html += '</span>';
|
||||
}
|
||||
|
||||
// Inactive badge
|
||||
if (!node.active) {
|
||||
html += '<span class="tree-badge inactive">' +
|
||||
self.escapeHtml(trans.inactive || 'Inactive') + '</span>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
// Render children
|
||||
if (hasChildren) {
|
||||
html += '<div class="tree-children">';
|
||||
html += self.renderTreeItems(node.children, level + 1, selectedIds);
|
||||
html += '</div>';
|
||||
}
|
||||
});
|
||||
|
||||
return html;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get selected IDs from the current picker's chips
|
||||
* @returns {Array} Array of selected IDs
|
||||
*/
|
||||
getSelectedIdsFromChips: function() {
|
||||
var selectedIds = [];
|
||||
|
||||
if (!this.activeGroup) return selectedIds;
|
||||
|
||||
var $block = this.$wrapper.find('.target-block[data-block-type="' + this.activeGroup.blockType + '"]');
|
||||
var $group = $block.find('.selection-group[data-group-index="' + this.activeGroup.groupIndex + '"]');
|
||||
var $picker;
|
||||
|
||||
if (this.activeGroup.section === 'include') {
|
||||
$picker = $group.find('.include-picker');
|
||||
} else {
|
||||
var $excludeRow = $group.find('.exclude-row[data-exclude-index="' + this.activeGroup.excludeIndex + '"]');
|
||||
$picker = $excludeRow.find('.exclude-picker');
|
||||
}
|
||||
|
||||
$picker.find('.entity-chip').each(function() {
|
||||
selectedIds.push(parseInt($(this).data('id'), 10));
|
||||
});
|
||||
|
||||
return selectedIds;
|
||||
},
|
||||
|
||||
/**
|
||||
* Filter category tree by search query
|
||||
* @param {string} query - Search query
|
||||
*/
|
||||
filterCategoryTree: function(query) {
|
||||
var $tree = this.$dropdown.find('.category-tree');
|
||||
if (!$tree.length) return;
|
||||
|
||||
var $items = $tree.find('.tree-item');
|
||||
var $children = $tree.find('.tree-children');
|
||||
query = (query || '').toLowerCase().trim();
|
||||
|
||||
// Remove any inline display styles set by jQuery .toggle()
|
||||
$items.css('display', '');
|
||||
|
||||
if (!query) {
|
||||
$items.removeClass('filtered-out filter-match');
|
||||
$children.removeClass('filter-expanded');
|
||||
return;
|
||||
}
|
||||
|
||||
// Mark all as filtered out first
|
||||
$items.addClass('filtered-out').removeClass('filter-match');
|
||||
|
||||
// Find matching items and show them with their parents
|
||||
$items.each(function() {
|
||||
var $item = $(this);
|
||||
var name = ($item.data('name') || '').toLowerCase();
|
||||
|
||||
if (name.indexOf(query) !== -1) {
|
||||
$item.removeClass('filtered-out');
|
||||
|
||||
// Show parent containers
|
||||
$item.parents('.tree-children').addClass('filter-expanded');
|
||||
$item.parents('.tree-item').removeClass('filtered-out');
|
||||
|
||||
// Show children of matching item
|
||||
$item.next('.tree-children').find('.tree-item').removeClass('filtered-out');
|
||||
$item.next('.tree-children').addClass('filter-expanded');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Find all descendant tree items of a given item
|
||||
* @param {jQuery} $item - Parent tree item
|
||||
* @param {jQuery} $allItems - All tree items (for performance)
|
||||
* @returns {Array} Array of descendant jQuery elements
|
||||
*/
|
||||
findTreeDescendants: function($item, $allItems) {
|
||||
var descendants = [];
|
||||
var parentId = parseInt($item.data('id'), 10);
|
||||
var level = parseInt($item.data('level'), 10);
|
||||
|
||||
// Find immediate children first
|
||||
var $next = $item.next('.tree-children');
|
||||
if ($next.length) {
|
||||
$next.find('.tree-item').each(function() {
|
||||
descendants.push(this);
|
||||
});
|
||||
}
|
||||
|
||||
return descendants;
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the state of select-children buttons based on selection
|
||||
* @param {jQuery} $allItems - All tree items
|
||||
*/
|
||||
updateSelectChildrenButtons: function($allItems) {
|
||||
var self = this;
|
||||
var trans = this.config.trans || {};
|
||||
|
||||
$allItems.filter('.has-children').each(function() {
|
||||
var $item = $(this);
|
||||
var $btn = $item.find('.btn-select-children');
|
||||
if (!$btn.length) return;
|
||||
|
||||
var $children = $item.next('.tree-children');
|
||||
if (!$children.length) return;
|
||||
|
||||
var $childItems = $children.find('.tree-item');
|
||||
var isParentSelected = $item.hasClass('selected');
|
||||
var allChildrenSelected = true;
|
||||
|
||||
$childItems.each(function() {
|
||||
if (!$(this).hasClass('selected')) {
|
||||
allChildrenSelected = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (isParentSelected && allChildrenSelected) {
|
||||
$btn.find('i').replaceWith(self.esIcon('indeterminate_check_box'));
|
||||
$btn.attr('title', trans.deselect_with_children || 'Deselect with all children');
|
||||
} else {
|
||||
$btn.find('i').replaceWith(self.esIcon('add_box'));
|
||||
$btn.attr('title', trans.select_with_children || 'Select with all children');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -1,407 +0,0 @@
|
||||
/**
|
||||
* Entity Selector - Utilities Module
|
||||
* Helper functions: escape, validation, icons, search history
|
||||
* @partial _utils.js (must be loaded first)
|
||||
*
|
||||
* EXTRACTION SOURCE: assets/js/admin/entity-selector.js
|
||||
* Lines: 7552-7570 (escapeHtml, escapeAttr)
|
||||
* 7577-7590 (getEntityTypeLabel)
|
||||
* 6289-6350 (validate, showValidationError, clearValidationError)
|
||||
* 7115-7137 (showRangeInputError)
|
||||
* 7728-7745 (getBlockMode, isBlockSingleMode)
|
||||
* 7707-7723 (getCurrentSingleSelection)
|
||||
* 5411-5467 (search history methods)
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
// Create mixin namespace
|
||||
window._EntitySelectorMixins = window._EntitySelectorMixins || {};
|
||||
|
||||
// ---------------------------------------------------------------
|
||||
// Icon framework detection & FA4 mapping (module-level singleton)
|
||||
// ---------------------------------------------------------------
|
||||
var _iconMode = null;
|
||||
|
||||
/**
|
||||
* Material Icons → FontAwesome 4 class mapping.
|
||||
* FA4 uses class-based icons (icon-name), Material uses text content.
|
||||
*/
|
||||
var FA4_MAP = {
|
||||
'account_tree': 'icon-sitemap',
|
||||
'add': 'icon-plus',
|
||||
'add_box': 'icon-plus-square',
|
||||
'arrow_downward': 'icon-sort-desc',
|
||||
'arrow_drop_down': 'icon-caret-down',
|
||||
'arrow_right': 'icon-chevron-right',
|
||||
'arrow_upward': 'icon-sort-asc',
|
||||
'block': 'icon-ban',
|
||||
'brush': 'icon-paint-brush',
|
||||
'business': 'icon-building',
|
||||
'check': 'icon-check',
|
||||
'check_box': 'icon-check-square',
|
||||
'check_box_outline_blank': 'icon-square-o',
|
||||
'check_circle': 'icon-check-circle',
|
||||
'close': 'icon-times',
|
||||
'delete': 'icon-trash',
|
||||
'description': 'icon-file-text',
|
||||
'error': 'icon-exclamation-circle',
|
||||
'event': 'icon-calendar',
|
||||
'event_busy': 'icon-calendar-times-o',
|
||||
'expand_less': 'icon-chevron-up',
|
||||
'expand_more': 'icon-chevron-down',
|
||||
'filter_list': 'icon-filter',
|
||||
'flag': 'icon-flag',
|
||||
'folder': 'icon-folder',
|
||||
'folder_open': 'icon-folder-open',
|
||||
'indeterminate_check_box': 'icon-minus-square',
|
||||
'info': 'icon-info-circle',
|
||||
'inventory_2': 'icon-archive',
|
||||
'label': 'icon-tag',
|
||||
'language': 'icon-globe',
|
||||
'lightbulb': 'icon-lightbulb-o',
|
||||
'list': 'icon-list',
|
||||
'list_alt': 'icon-list-alt',
|
||||
'local_shipping': 'icon-truck',
|
||||
'lock': 'icon-lock',
|
||||
'my_location': 'icon-crosshairs',
|
||||
'open_in_full': 'icon-expand',
|
||||
'payments': 'icon-credit-card',
|
||||
'progress_activity': 'icon-circle-o-notch',
|
||||
'schedule': 'icon-clock-o',
|
||||
'search': 'icon-search',
|
||||
'shopping_cart': 'icon-shopping-cart',
|
||||
'shuffle': 'icon-random',
|
||||
'sort': 'icon-sort',
|
||||
'sort_by_alpha': 'icon-sort-alpha-asc',
|
||||
'star': 'icon-star',
|
||||
'sync': 'icon-refresh',
|
||||
'tune': 'icon-sliders',
|
||||
'visibility': 'icon-eye',
|
||||
'warning': 'icon-warning',
|
||||
'widgets': 'icon-th-large'
|
||||
};
|
||||
|
||||
/**
|
||||
* Reverse map: FontAwesome 4 class → Material Icons name.
|
||||
* Built once lazily from FA4_MAP + extra mappings for FA4 names
|
||||
* that don't appear as values in FA4_MAP.
|
||||
*/
|
||||
var _REVERSE_FA4_MAP = null;
|
||||
|
||||
var EXTRA_REVERSE_MAPPINGS = {
|
||||
'icon-cube': 'inventory',
|
||||
'icon-folder-o': 'folder',
|
||||
'icon-file-text-o': 'description',
|
||||
'icon-briefcase': 'work',
|
||||
'icon-user': 'person',
|
||||
'icon-users': 'group',
|
||||
'icon-money': 'payments',
|
||||
'icon-tasks': 'checklist',
|
||||
'icon-calculator': 'calculate',
|
||||
'icon-asterisk': 'star',
|
||||
'icon-bar-chart': 'bar_chart',
|
||||
'icon-cogs': 'settings',
|
||||
'icon-cog': 'settings',
|
||||
'icon-tags': 'label',
|
||||
'icon-list-ul': 'list',
|
||||
'icon-th': 'grid_view',
|
||||
'icon-certificate': 'verified',
|
||||
'icon-power-off': 'power_settings_new',
|
||||
'icon-circle-o': 'radio_button_unchecked'
|
||||
};
|
||||
|
||||
function getReverseFa4Map() {
|
||||
if (_REVERSE_FA4_MAP !== null) return _REVERSE_FA4_MAP;
|
||||
_REVERSE_FA4_MAP = {};
|
||||
// Invert FA4_MAP: value → key
|
||||
for (var material in FA4_MAP) {
|
||||
if (FA4_MAP.hasOwnProperty(material)) {
|
||||
var fa4Class = FA4_MAP[material];
|
||||
if (!_REVERSE_FA4_MAP[fa4Class]) {
|
||||
_REVERSE_FA4_MAP[fa4Class] = material;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Merge extras
|
||||
for (var fa4 in EXTRA_REVERSE_MAPPINGS) {
|
||||
if (EXTRA_REVERSE_MAPPINGS.hasOwnProperty(fa4) && !_REVERSE_FA4_MAP[fa4]) {
|
||||
_REVERSE_FA4_MAP[fa4] = EXTRA_REVERSE_MAPPINGS[fa4];
|
||||
}
|
||||
}
|
||||
return _REVERSE_FA4_MAP;
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize an icon name — handles both Material and FA4 class names.
|
||||
* @param {string} name - Icon name (Material or FA4 format)
|
||||
* @param {string} mode - 'material' or 'fa4'
|
||||
* @returns {object} { name: string, extra: string, rawFa4: boolean }
|
||||
*/
|
||||
function normalizeIconName(name, mode) {
|
||||
var extra = '';
|
||||
var rawFa4 = false;
|
||||
|
||||
if (name.indexOf('icon-') === 0) {
|
||||
// FA4 class name input — may have extra classes (e.g. "icon-power-off text-success")
|
||||
var spaceIdx = name.indexOf(' ');
|
||||
var fa4Class = (spaceIdx !== -1) ? name.substring(0, spaceIdx) : name;
|
||||
if (spaceIdx !== -1) extra = name.substring(spaceIdx + 1);
|
||||
|
||||
if (mode === 'material') {
|
||||
var reverseMap = getReverseFa4Map();
|
||||
var materialName = reverseMap[fa4Class];
|
||||
if (materialName) {
|
||||
return { name: materialName, extra: extra, rawFa4: false };
|
||||
}
|
||||
// Fallback: strip 'icon-' and convert hyphens to underscores
|
||||
var fallback = fa4Class.substring(5).replace(/-/g, '_');
|
||||
return { name: fallback, extra: extra, rawFa4: false };
|
||||
}
|
||||
|
||||
// FA4 mode + FA4 input — use as-is
|
||||
return { name: fa4Class, extra: extra, rawFa4: true };
|
||||
}
|
||||
|
||||
// Material Icons name — pass through
|
||||
return { name: name, extra: extra, rawFa4: false };
|
||||
}
|
||||
|
||||
/**
|
||||
* Detect icon framework: 'material' (PS 8+/9+) or 'fa4' (PS 1.6/1.7).
|
||||
* Checks PHP-set data attribute first, falls back to font detection.
|
||||
*/
|
||||
function detectIconMode() {
|
||||
if (_iconMode !== null) return _iconMode;
|
||||
|
||||
// 1. PHP sets data-icon-mode on the wrapper
|
||||
var $w = $('.entity-selector-trait[data-icon-mode], .target-conditions-trait[data-icon-mode]').first();
|
||||
if ($w.length && $w.data('icon-mode')) {
|
||||
_iconMode = $w.data('icon-mode');
|
||||
return _iconMode;
|
||||
}
|
||||
|
||||
// 2. Fallback: probe whether Material Icons font is loaded
|
||||
var test = document.createElement('i');
|
||||
test.className = 'material-icons';
|
||||
test.style.cssText = 'position:absolute;left:-9999px;top:-9999px;font-size:16px;pointer-events:none';
|
||||
test.textContent = 'check';
|
||||
(document.body || document.documentElement).appendChild(test);
|
||||
var family = (window.getComputedStyle(test).fontFamily || '').toLowerCase();
|
||||
test.parentNode.removeChild(test);
|
||||
|
||||
_iconMode = (family.indexOf('material') !== -1) ? 'material' : 'fa4';
|
||||
return _iconMode;
|
||||
}
|
||||
|
||||
// Utility functions mixin
|
||||
window._EntitySelectorMixins.utils = {
|
||||
|
||||
/**
|
||||
* Debounce function - delays execution until after wait milliseconds
|
||||
* @param {Function} func - Function to debounce
|
||||
* @param {number} wait - Milliseconds to wait
|
||||
* @returns {Function} Debounced function
|
||||
*/
|
||||
debounce: function(func, wait) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(function() {
|
||||
func.apply(context, args);
|
||||
}, wait);
|
||||
};
|
||||
},
|
||||
|
||||
escapeHtml: function(str) {
|
||||
if (str === null || str === undefined) return '';
|
||||
return String(str)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
},
|
||||
|
||||
escapeAttr: function(str) {
|
||||
if (str === null || str === undefined) return '';
|
||||
return String(str)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
},
|
||||
|
||||
/**
|
||||
* Icon helper — returns HTML for an icon that works on PS 1.6 through 9.x.
|
||||
* Accepts both Material Icons names and FA4 class names as input.
|
||||
* Automatically uses Material Icons (PS 8+/9+) or FontAwesome 4 (PS 1.6/1.7).
|
||||
*
|
||||
* @param {string} name - Icon name (Material or FA4 format, e.g. 'search', 'icon-cube')
|
||||
* @param {string} [extraClass] - Additional CSS class(es) (e.g. 'es-spin', 'method-trigger-icon')
|
||||
* @returns {string} HTML string for an <i> element
|
||||
*/
|
||||
esIcon: function(name, extraClass) {
|
||||
var mode = detectIconMode();
|
||||
var normalized = normalizeIconName(name, mode);
|
||||
var iconName = normalized.name;
|
||||
// Merge extra classes from normalization
|
||||
if (normalized.extra) {
|
||||
extraClass = extraClass ? extraClass + ' ' + normalized.extra : normalized.extra;
|
||||
}
|
||||
|
||||
if (mode === 'material') {
|
||||
var cls = 'material-icons es-icon';
|
||||
if (extraClass) cls += ' ' + extraClass;
|
||||
return '<i class="' + cls + '">' + iconName + '</i>';
|
||||
}
|
||||
// FA4 mode
|
||||
if (normalized.rawFa4) {
|
||||
// Input was already an FA4 class — use directly
|
||||
var cls = iconName + ' es-icon';
|
||||
} else {
|
||||
// Input was Material — map to FA4
|
||||
var cls = (FA4_MAP[iconName] || 'icon-circle') + ' es-icon';
|
||||
}
|
||||
if (extraClass) cls += ' ' + extraClass;
|
||||
return '<i class="' + cls + '"></i>';
|
||||
},
|
||||
|
||||
/**
|
||||
* Update an existing <i> icon element to show a different icon.
|
||||
* Handles both Material Icons and FA4 modes.
|
||||
* Accepts both Material Icons names and FA4 class names as input.
|
||||
*
|
||||
* @param {jQuery} $el - The <i> element to update
|
||||
* @param {string} name - Icon name (Material or FA4 format)
|
||||
* @param {string} [extraClass] - Additional CSS class(es) to preserve
|
||||
*/
|
||||
esIconUpdate: function($el, name, extraClass) {
|
||||
var mode = detectIconMode();
|
||||
var normalized = normalizeIconName(name, mode);
|
||||
var iconName = normalized.name;
|
||||
if (normalized.extra) {
|
||||
extraClass = extraClass ? extraClass + ' ' + normalized.extra : normalized.extra;
|
||||
}
|
||||
|
||||
if (mode === 'material') {
|
||||
var cls = 'material-icons es-icon';
|
||||
if (extraClass) cls += ' ' + extraClass;
|
||||
$el.attr('class', cls).text(iconName);
|
||||
} else {
|
||||
if (normalized.rawFa4) {
|
||||
var cls = iconName + ' es-icon';
|
||||
} else {
|
||||
var cls = (FA4_MAP[iconName] || 'icon-circle') + ' es-icon';
|
||||
}
|
||||
if (extraClass) cls += ' ' + extraClass;
|
||||
$el.attr('class', cls).text('');
|
||||
}
|
||||
},
|
||||
|
||||
getEntityTypeIcon: function(entityType) {
|
||||
var icons = {
|
||||
'products': 'shopping_cart',
|
||||
'categories': 'folder_open',
|
||||
'manufacturers': 'business',
|
||||
'suppliers': 'local_shipping',
|
||||
'attributes': 'list_alt',
|
||||
'features': 'label',
|
||||
'cms': 'description',
|
||||
'cms_categories': 'folder'
|
||||
};
|
||||
return icons[entityType] || 'widgets';
|
||||
},
|
||||
|
||||
getEntityTypeLabel: function(entityType) {
|
||||
var trans = this.config.trans || {};
|
||||
var labels = {
|
||||
'products': trans.product || 'Product',
|
||||
'categories': trans.category || 'Category',
|
||||
'manufacturers': trans.manufacturer || 'Manufacturer',
|
||||
'suppliers': trans.supplier || 'Supplier',
|
||||
'attributes': trans.attribute || 'Attribute',
|
||||
'features': trans.feature || 'Feature',
|
||||
'cms': trans.cms_page || 'CMS Page',
|
||||
'cms_categories': trans.cms_category || 'CMS Category'
|
||||
};
|
||||
return labels[entityType] || entityType;
|
||||
},
|
||||
|
||||
validate: function() {
|
||||
var isRequired = this.$wrapper.data('required') === 1 || this.$wrapper.data('required') === '1';
|
||||
if (!isRequired) return true;
|
||||
|
||||
var hasData = false;
|
||||
this.$wrapper.find('.target-block').each(function() {
|
||||
if ($(this).find('.selection-group').length > 0) {
|
||||
hasData = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (!hasData) {
|
||||
this.showValidationError();
|
||||
return false;
|
||||
}
|
||||
|
||||
this.clearValidationError();
|
||||
return true;
|
||||
},
|
||||
|
||||
showValidationError: function() {
|
||||
this.$wrapper.addClass('has-validation-error');
|
||||
var message = this.$wrapper.data('required-message') || 'Please select at least one item';
|
||||
this.$wrapper.find('.trait-validation-error').remove();
|
||||
var $error = $('<div>', {
|
||||
class: 'trait-validation-error',
|
||||
html: this.esIcon('warning') + ' ' + message
|
||||
});
|
||||
this.$wrapper.find('.condition-trait-header').after($error);
|
||||
$('html, body').animate({ scrollTop: this.$wrapper.offset().top - 100 }, 300);
|
||||
if (!this.$wrapper.find('.condition-trait-body').is(':visible')) {
|
||||
this.$wrapper.find('.condition-trait-body').slideDown(200);
|
||||
this.$wrapper.removeClass('collapsed');
|
||||
}
|
||||
},
|
||||
|
||||
clearValidationError: function() {
|
||||
this.$wrapper.removeClass('has-validation-error');
|
||||
this.$wrapper.find('.trait-validation-error').remove();
|
||||
},
|
||||
|
||||
getBlockMode: function(blockType) {
|
||||
var blockDef = this.config.blocks[blockType];
|
||||
return (blockDef && blockDef.mode) ? blockDef.mode : 'multi';
|
||||
},
|
||||
|
||||
isBlockSingleMode: function(blockType) {
|
||||
return this.getBlockMode(blockType) === 'single';
|
||||
},
|
||||
|
||||
getCurrentSingleSelection: function() {
|
||||
if ((this.config.mode || 'multi') !== 'single') return null;
|
||||
var $chip = this.$wrapper.find('.entity-chips .entity-chip').first();
|
||||
if ($chip.length) {
|
||||
var $block = $chip.closest('.target-block');
|
||||
return {
|
||||
name: $chip.find('.chip-name').text() || $chip.data('id'),
|
||||
entityType: $block.data('block-type') || 'item'
|
||||
};
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if entity type supports tree browsing
|
||||
*/
|
||||
supportsTreeBrowsing: function(entityType) {
|
||||
return entityType === 'categories' || entityType === 'cms_categories';
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -1,365 +0,0 @@
|
||||
/**
|
||||
* Entity Selector - Validation Module
|
||||
* Conflict detection and prevention for entity selections
|
||||
* @partial _validation.js
|
||||
*
|
||||
* Features:
|
||||
* - Same entity in include & exclude detection
|
||||
* - Parent-child conflict detection for tree entities
|
||||
* - Redundant selection detection
|
||||
* - Error message display
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
window._EntitySelectorMixins = window._EntitySelectorMixins || {};
|
||||
|
||||
window._EntitySelectorMixins.validation = {
|
||||
|
||||
/**
|
||||
* Validate a selection before adding it
|
||||
* Returns { valid: true } or { valid: false, error: 'message', type: 'conflict_type' }
|
||||
*
|
||||
* @param {number|string} id - Entity ID to validate
|
||||
* @param {string} name - Entity name (for error messages)
|
||||
* @param {string} section - 'include' or 'exclude'
|
||||
* @param {Object} data - Additional data (parent_id, etc.)
|
||||
* @returns {Object} Validation result
|
||||
*/
|
||||
validateSelection: function(id, name, section, data) {
|
||||
if (!this.activeGroup) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
var trans = this.config.trans || {};
|
||||
id = parseInt(id, 10);
|
||||
|
||||
var $block = this.$wrapper.find('.target-block[data-block-type="' + this.activeGroup.blockType + '"]');
|
||||
var $group = $block.find('.selection-group[data-group-index="' + this.activeGroup.groupIndex + '"]');
|
||||
|
||||
// Get include chips
|
||||
var includeIds = this.getChipIds($group.find('.include-picker'));
|
||||
|
||||
// Get all exclude chips (from all exclude rows)
|
||||
var excludeIds = [];
|
||||
$group.find('.exclude-row').each(function() {
|
||||
var $excludePicker = $(this).find('.exclude-picker');
|
||||
var ids = [];
|
||||
$excludePicker.find('.entity-chip').each(function() {
|
||||
ids.push(parseInt($(this).data('id'), 10));
|
||||
});
|
||||
excludeIds = excludeIds.concat(ids);
|
||||
});
|
||||
|
||||
// 1. Check for same entity in include & exclude
|
||||
var conflictResult = this.checkIncludeExcludeConflict(id, name, section, includeIds, excludeIds, trans);
|
||||
if (!conflictResult.valid) {
|
||||
return conflictResult;
|
||||
}
|
||||
|
||||
// 2. Check for redundant selection (already selected in same section)
|
||||
var redundantResult = this.checkRedundantSelection(id, name, section, includeIds, excludeIds, trans);
|
||||
if (!redundantResult.valid) {
|
||||
return redundantResult;
|
||||
}
|
||||
|
||||
// 3. Check for parent-child conflicts (only for tree entities)
|
||||
var searchEntity = this.activeGroup.searchEntity;
|
||||
if (searchEntity === 'categories' || searchEntity === 'cms_categories') {
|
||||
var treeResult = this.checkTreeConflicts(id, name, section, data, includeIds, excludeIds, trans);
|
||||
if (!treeResult.valid) {
|
||||
return treeResult;
|
||||
}
|
||||
}
|
||||
|
||||
return { valid: true };
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if entity is in both include and exclude
|
||||
*/
|
||||
checkIncludeExcludeConflict: function(id, name, section, includeIds, excludeIds, trans) {
|
||||
if (section === 'include' && excludeIds.indexOf(id) !== -1) {
|
||||
return {
|
||||
valid: false,
|
||||
type: 'include_exclude_conflict',
|
||||
error: (trans.error_in_exclude || '"{name}" is already in the exclude list. Remove it from exclude first.').replace('{name}', name)
|
||||
};
|
||||
}
|
||||
|
||||
if (section === 'exclude' && includeIds.indexOf(id) !== -1) {
|
||||
return {
|
||||
valid: false,
|
||||
type: 'include_exclude_conflict',
|
||||
error: (trans.error_in_include || '"{name}" is already in the include list. Remove it from include first.').replace('{name}', name)
|
||||
};
|
||||
}
|
||||
|
||||
return { valid: true };
|
||||
},
|
||||
|
||||
/**
|
||||
* Check for redundant selection (already selected)
|
||||
*/
|
||||
checkRedundantSelection: function(id, name, section, includeIds, excludeIds, trans) {
|
||||
if (section === 'include' && includeIds.indexOf(id) !== -1) {
|
||||
return {
|
||||
valid: false,
|
||||
type: 'redundant',
|
||||
error: (trans.error_already_selected || '"{name}" is already selected.').replace('{name}', name)
|
||||
};
|
||||
}
|
||||
|
||||
if (section === 'exclude' && excludeIds.indexOf(id) !== -1) {
|
||||
return {
|
||||
valid: false,
|
||||
type: 'redundant',
|
||||
error: (trans.error_already_excluded || '"{name}" is already in an exclude list.').replace('{name}', name)
|
||||
};
|
||||
}
|
||||
|
||||
return { valid: true };
|
||||
},
|
||||
|
||||
/**
|
||||
* Check for parent-child conflicts in tree entities
|
||||
*/
|
||||
checkTreeConflicts: function(id, name, section, data, includeIds, excludeIds, trans) {
|
||||
// Need tree data for parent-child lookups
|
||||
if (!this.treeFlatData) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
var parentId = data && data.parentId ? parseInt(data.parentId, 10) : null;
|
||||
|
||||
// Build lookup for quick access
|
||||
var lookup = {};
|
||||
this.treeFlatData.forEach(function(item) {
|
||||
lookup[parseInt(item.id, 10)] = item;
|
||||
});
|
||||
|
||||
// Get all ancestor IDs
|
||||
var ancestorIds = this.getAncestorIds(id, lookup);
|
||||
|
||||
// Get all descendant IDs
|
||||
var descendantIds = this.getDescendantIds(id, lookup);
|
||||
|
||||
if (section === 'include') {
|
||||
// Check if any ancestor is excluded
|
||||
for (var i = 0; i < ancestorIds.length; i++) {
|
||||
if (excludeIds.indexOf(ancestorIds[i]) !== -1) {
|
||||
var ancestorName = lookup[ancestorIds[i]] ? lookup[ancestorIds[i]].name : 'Parent';
|
||||
return {
|
||||
valid: false,
|
||||
type: 'parent_excluded',
|
||||
error: (trans.error_parent_excluded || 'Cannot include "{name}" because its parent "{parent}" is excluded.').replace('{name}', name).replace('{parent}', ancestorName)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Check if any descendant is excluded
|
||||
for (var j = 0; j < descendantIds.length; j++) {
|
||||
if (excludeIds.indexOf(descendantIds[j]) !== -1) {
|
||||
var descendantName = lookup[descendantIds[j]] ? lookup[descendantIds[j]].name : 'Child';
|
||||
return {
|
||||
valid: false,
|
||||
type: 'child_excluded',
|
||||
error: (trans.error_child_excluded || 'Cannot include "{name}" because its child "{child}" is excluded. Remove the child from exclude first.').replace('{name}', name).replace('{child}', descendantName)
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (section === 'exclude') {
|
||||
// Check if any ancestor is included
|
||||
for (var k = 0; k < ancestorIds.length; k++) {
|
||||
if (includeIds.indexOf(ancestorIds[k]) !== -1) {
|
||||
var parentName = lookup[ancestorIds[k]] ? lookup[ancestorIds[k]].name : 'Parent';
|
||||
return {
|
||||
valid: false,
|
||||
type: 'parent_included',
|
||||
error: (trans.error_parent_included || 'Cannot exclude "{name}" because its parent "{parent}" is included. This would create a contradiction.').replace('{name}', name).replace('{parent}', parentName)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Check if any descendant is included (warning about implicit exclusion)
|
||||
var includedDescendants = [];
|
||||
for (var m = 0; m < descendantIds.length; m++) {
|
||||
if (includeIds.indexOf(descendantIds[m]) !== -1) {
|
||||
var childName = lookup[descendantIds[m]] ? lookup[descendantIds[m]].name : 'Child';
|
||||
includedDescendants.push(childName);
|
||||
}
|
||||
}
|
||||
|
||||
if (includedDescendants.length > 0) {
|
||||
return {
|
||||
valid: false,
|
||||
type: 'children_included',
|
||||
error: (trans.error_children_included || 'Cannot exclude "{name}" because its children ({children}) are included. Remove them from include first.').replace('{name}', name).replace('{children}', includedDescendants.slice(0, 3).join(', ') + (includedDescendants.length > 3 ? '...' : ''))
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return { valid: true };
|
||||
},
|
||||
|
||||
/**
|
||||
* Get all ancestor IDs for a given item
|
||||
*/
|
||||
getAncestorIds: function(id, lookup) {
|
||||
var ancestors = [];
|
||||
var current = lookup[id];
|
||||
|
||||
while (current && current.parent_id) {
|
||||
var parentId = parseInt(current.parent_id, 10);
|
||||
if (parentId && lookup[parentId]) {
|
||||
ancestors.push(parentId);
|
||||
current = lookup[parentId];
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return ancestors;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get all descendant IDs for a given item
|
||||
*/
|
||||
getDescendantIds: function(id, lookup) {
|
||||
var descendants = [];
|
||||
var self = this;
|
||||
|
||||
// Find direct children
|
||||
Object.keys(lookup).forEach(function(key) {
|
||||
var item = lookup[key];
|
||||
if (parseInt(item.parent_id, 10) === id) {
|
||||
var childId = parseInt(item.id, 10);
|
||||
descendants.push(childId);
|
||||
// Recursively get children's descendants
|
||||
var childDescendants = self.getDescendantIds(childId, lookup);
|
||||
descendants = descendants.concat(childDescendants);
|
||||
}
|
||||
});
|
||||
|
||||
return descendants;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get chip IDs from a picker
|
||||
*/
|
||||
getChipIds: function($picker) {
|
||||
var ids = [];
|
||||
$picker.find('.entity-chip').each(function() {
|
||||
ids.push(parseInt($(this).data('id'), 10));
|
||||
});
|
||||
return ids;
|
||||
},
|
||||
|
||||
/**
|
||||
* Validate pending selections (for tree view bulk operations)
|
||||
* Returns array of invalid items
|
||||
*/
|
||||
validatePendingSelections: function(pendingSelections, section) {
|
||||
var self = this;
|
||||
var errors = [];
|
||||
|
||||
if (!pendingSelections || !pendingSelections.length) {
|
||||
return errors;
|
||||
}
|
||||
|
||||
pendingSelections.forEach(function(sel) {
|
||||
var result = self.validateSelection(sel.id, sel.name, section, sel.data || {});
|
||||
if (!result.valid) {
|
||||
errors.push({
|
||||
id: sel.id,
|
||||
name: sel.name,
|
||||
error: result.error,
|
||||
type: result.type
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return errors;
|
||||
},
|
||||
|
||||
/**
|
||||
* Show validation error toast
|
||||
*/
|
||||
showValidationError: function(message) {
|
||||
var trans = this.config.trans || {};
|
||||
var title = trans.validation_error || 'Selection Conflict';
|
||||
|
||||
// Remove existing toast
|
||||
$('.es-validation-toast').remove();
|
||||
|
||||
// Create toast HTML
|
||||
var html = '<div class="es-validation-toast">';
|
||||
html += '<div class="es-toast-icon">' + this.esIcon('warning') + '</div>';
|
||||
html += '<div class="es-toast-content">';
|
||||
html += '<div class="es-toast-title">' + this.escapeHtml(title) + '</div>';
|
||||
html += '<div class="es-toast-message">' + this.escapeHtml(message) + '</div>';
|
||||
html += '</div>';
|
||||
html += '<button type="button" class="es-toast-close">' + this.esIcon('close') + '</button>';
|
||||
html += '</div>';
|
||||
|
||||
var $toast = $(html);
|
||||
$('body').append($toast);
|
||||
|
||||
// Position near dropdown if visible
|
||||
if (this.$dropdown && this.$dropdown.hasClass('show')) {
|
||||
var dropdownOffset = this.$dropdown.offset();
|
||||
$toast.css({
|
||||
position: 'fixed',
|
||||
top: dropdownOffset.top - $toast.outerHeight() - 10,
|
||||
left: dropdownOffset.left,
|
||||
zIndex: 10001
|
||||
});
|
||||
} else {
|
||||
$toast.css({
|
||||
position: 'fixed',
|
||||
top: 20,
|
||||
right: 20,
|
||||
zIndex: 10001
|
||||
});
|
||||
}
|
||||
|
||||
// Animate in
|
||||
$toast.hide().fadeIn(200);
|
||||
|
||||
// Auto-dismiss after 5 seconds
|
||||
setTimeout(function() {
|
||||
$toast.fadeOut(200, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}, 5000);
|
||||
|
||||
// Close button
|
||||
$toast.on('click', '.es-toast-close', function() {
|
||||
$toast.fadeOut(200, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Validate and add selection (wrapper that validates before adding)
|
||||
* Returns true if added successfully, false if validation failed
|
||||
*/
|
||||
validateAndAddSelection: function($picker, id, name, data, section) {
|
||||
var result = this.validateSelection(id, name, section, data || {});
|
||||
|
||||
if (!result.valid) {
|
||||
this.showValidationError(result.error);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Validation passed, add the selection
|
||||
this.addSelection($picker, id, name, data);
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -1 +0,0 @@
|
||||
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;
|
||||
@@ -1 +0,0 @@
|
||||
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;
|
||||
@@ -1 +0,0 @@
|
||||
// Placeholder - _core.js
|
||||
@@ -1 +0,0 @@
|
||||
// Placeholder - _timeline.js
|
||||
@@ -1 +0,0 @@
|
||||
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;
|
||||
@@ -1 +0,0 @@
|
||||
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;
|
||||
@@ -1,351 +0,0 @@
|
||||
/**
|
||||
* Entity Selector Mixins
|
||||
* Reusable patterns - prefer Bootstrap utilities in HTML where possible
|
||||
*/
|
||||
|
||||
@use "sass:color";
|
||||
@use 'variables' as *;
|
||||
|
||||
// =============================================================================
|
||||
// Layout
|
||||
// =============================================================================
|
||||
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin flex-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@mixin grid-columns($cols) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat($cols, 1fr);
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Text
|
||||
// =============================================================================
|
||||
|
||||
@mixin text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Interactive Elements
|
||||
// =============================================================================
|
||||
|
||||
// Reset button styles
|
||||
@mixin button-reset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Focus ring (Bootstrap 4 style)
|
||||
@mixin focus-ring($color: $es-primary) {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba($color, 0.25);
|
||||
}
|
||||
|
||||
// Interactive hover state
|
||||
@mixin interactive-item {
|
||||
cursor: pointer;
|
||||
transition: background-color $es-transition-fast, color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background-color: $es-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Cards & Containers
|
||||
// =============================================================================
|
||||
|
||||
@mixin card {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
|
||||
@mixin dropdown-container {
|
||||
position: absolute;
|
||||
z-index: $es-z-dropdown;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
box-shadow: $es-shadow-lg;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Form Elements
|
||||
// =============================================================================
|
||||
|
||||
// Reset input styles (for inputs in custom wrappers)
|
||||
@mixin input-reset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input-base {
|
||||
width: 100%;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
font-size: $es-font-size-sm;
|
||||
line-height: $es-line-height-normal;
|
||||
color: $es-text-primary;
|
||||
background-color: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-md;
|
||||
transition: border-color $es-transition-fast, box-shadow $es-transition-fast;
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
@include focus-ring($es-primary);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $es-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Scrollbar
|
||||
// =============================================================================
|
||||
|
||||
@mixin custom-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: $es-gray-100;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $es-gray-300;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: $es-gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Badges & Chips
|
||||
// =============================================================================
|
||||
|
||||
@mixin badge($bg: $es-gray-200, $color: $es-gray-700) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.125rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
line-height: 1;
|
||||
background-color: $bg;
|
||||
color: $color;
|
||||
border-radius: $es-radius-full;
|
||||
}
|
||||
|
||||
// Count badge with preview icon (used for tab badges, match counts, totals)
|
||||
// Note: Eye icon is provided in HTML via <i class="material-icons">visibility</i>
|
||||
@mixin count-badge($bg: $es-primary) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 0.5rem;
|
||||
background: $bg;
|
||||
color: $es-white;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
border-radius: $es-radius-full;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 2px 8px rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
// Focus state - maintain styled appearance
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba($bg, 0.3), 0 2px 8px rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
// Loading state - spinner icon replaces eye
|
||||
&.loading {
|
||||
cursor: wait;
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Inactive/empty state
|
||||
&.inactive,
|
||||
&.no-matches {
|
||||
background: $es-slate-400;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Popover open state
|
||||
&.popover-open {
|
||||
background: color.adjust($bg, $lightness: -10%);
|
||||
box-shadow: 0 2px 8px rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
// Icon inside badge (eye, spinner, etc.)
|
||||
i {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:hover i {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.preview-count {
|
||||
font-weight: $es-font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes spin-pulse {
|
||||
0% { transform: rotate(0deg); opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
100% { transform: rotate(360deg); opacity: 1; }
|
||||
}
|
||||
|
||||
// Global spin utility classes (Material Icons replacement for icon-spin / icon-spin-pulse)
|
||||
.es-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.es-spin-pulse {
|
||||
animation: spin-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@mixin chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-xs $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
background: $es-gray-200;
|
||||
color: $es-gray-700;
|
||||
border-radius: $es-radius-full;
|
||||
|
||||
.chip-remove {
|
||||
@include button-reset;
|
||||
@include flex-center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 10px;
|
||||
color: $es-text-muted;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Toggle Switch
|
||||
// =============================================================================
|
||||
|
||||
@mixin toggle-switch($width: 36px, $height: 20px) {
|
||||
position: relative;
|
||||
width: $width;
|
||||
height: $height;
|
||||
border-radius: $height;
|
||||
background: $es-gray-400;
|
||||
transition: background-color $es-transition-normal;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: $height - 4px;
|
||||
height: $height - 4px;
|
||||
background: $es-white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
transition: transform $es-transition-normal;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $es-success;
|
||||
|
||||
&::after {
|
||||
transform: translateX($width - $height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Screen Reader Only
|
||||
// =============================================================================
|
||||
|
||||
@mixin sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
/**
|
||||
* Entity Selector Variables
|
||||
* Bootstrap 4 compatible values for PrestaShop admin theme
|
||||
*
|
||||
* Imports shared variables from prestashop-admin package
|
||||
* and maps them to $es-* prefixed aliases for this package
|
||||
*/
|
||||
|
||||
// Import shared variables from prestashop-admin
|
||||
@use '../../../prestashop-admin/assets/scss/variables' as admin;
|
||||
|
||||
// =============================================================================
|
||||
// Base Colors
|
||||
// =============================================================================
|
||||
|
||||
$es-white: #ffffff !default;
|
||||
$es-black: #000000 !default;
|
||||
|
||||
// Primary (from prestashop-admin)
|
||||
$es-primary: admin.$primary !default;
|
||||
$es-primary-hover: #1a9ab7 !default;
|
||||
$es-primary-light: rgba(37, 185, 215, 0.1) !default;
|
||||
|
||||
// Semantic colors (from prestashop-admin)
|
||||
$es-success: admin.$success !default;
|
||||
$es-success-light: #d4edda !default;
|
||||
$es-success-dark: #1e7e34 !default;
|
||||
|
||||
$es-danger: admin.$danger !default;
|
||||
$es-danger-light: #f8d7da !default;
|
||||
$es-danger-dark: #bd2130 !default;
|
||||
|
||||
$es-warning: admin.$warning !default;
|
||||
$es-warning-light: #fff3cd !default;
|
||||
|
||||
$es-info: admin.$info !default;
|
||||
$es-info-light: #d1ecf1 !default;
|
||||
|
||||
// =============================================================================
|
||||
// Gray Scale (Bootstrap 4)
|
||||
// =============================================================================
|
||||
|
||||
$es-gray-100: admin.$light !default;
|
||||
$es-gray-200: #e9ecef !default;
|
||||
$es-gray-300: admin.$border-color !default;
|
||||
$es-gray-400: #ced4da !default;
|
||||
$es-gray-500: #adb5bd !default;
|
||||
$es-gray-600: admin.$secondary !default;
|
||||
$es-gray-700: #495057 !default;
|
||||
$es-gray-800: admin.$dark !default;
|
||||
$es-gray-900: #212529 !default;
|
||||
|
||||
// Slate (subtle variations)
|
||||
$es-slate-50: #f8fafc !default;
|
||||
$es-slate-100: #f1f5f9 !default;
|
||||
$es-slate-200: #e2e8f0 !default;
|
||||
$es-slate-300: #cbd5e1 !default;
|
||||
$es-slate-400: #94a3b8 !default;
|
||||
$es-slate-500: #64748b !default;
|
||||
$es-slate-600: #475569 !default;
|
||||
$es-slate-700: #334155 !default;
|
||||
$es-slate-800: #1e293b !default;
|
||||
$es-slate-900: #0f172a !default;
|
||||
|
||||
// Cyan
|
||||
$es-cyan-50: #ecfeff !default;
|
||||
$es-cyan-100: #cffafe !default;
|
||||
$es-cyan-200: #a5f3fc !default;
|
||||
$es-cyan-500: #06b6d4 !default;
|
||||
$es-cyan-600: #0891b2 !default;
|
||||
$es-cyan-700: #0e7490 !default;
|
||||
|
||||
// =============================================================================
|
||||
// Semantic Aliases
|
||||
// =============================================================================
|
||||
|
||||
$es-bg-header: $es-gray-100 !default;
|
||||
$es-bg-hover: $es-gray-200 !default;
|
||||
$es-bg-active: $es-gray-200 !default;
|
||||
$es-bg-body: $es-white !default;
|
||||
|
||||
$es-border-color: admin.$border-color !default;
|
||||
$es-border-light: $es-gray-200 !default;
|
||||
$es-border-dark: $es-gray-400 !default;
|
||||
|
||||
$es-text-primary: $es-gray-900 !default;
|
||||
$es-text-secondary: $es-gray-700 !default;
|
||||
$es-text-muted: $es-gray-600 !default;
|
||||
$es-text-light: $es-gray-500 !default;
|
||||
|
||||
// =============================================================================
|
||||
// Spacing (Bootstrap 4 compatible, derived from admin.$spacer)
|
||||
// =============================================================================
|
||||
|
||||
$es-spacing-xs: admin.$spacer * 0.25 !default; // 4px
|
||||
$es-spacing-sm: admin.$spacer * 0.5 !default; // 8px
|
||||
$es-spacing-md: admin.$spacer !default; // 16px
|
||||
$es-spacing-lg: admin.$spacer * 1.5 !default; // 24px
|
||||
$es-spacing-xl: admin.$spacer * 2 !default; // 32px
|
||||
|
||||
// =============================================================================
|
||||
// Border Radius (from prestashop-admin)
|
||||
// =============================================================================
|
||||
|
||||
$es-radius-sm: admin.$border-radius-sm !default;
|
||||
$es-radius-md: admin.$border-radius !default;
|
||||
$es-radius-lg: admin.$border-radius-lg !default;
|
||||
$es-radius-xl: 0.5rem !default;
|
||||
$es-radius-full: 50rem !default;
|
||||
|
||||
// =============================================================================
|
||||
// Box Shadows (Bootstrap 4 compatible)
|
||||
// =============================================================================
|
||||
|
||||
$es-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !default;
|
||||
$es-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !default;
|
||||
$es-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175) !default;
|
||||
$es-shadow-xl: 0 1.5rem 4rem rgba(0, 0, 0, 0.2) !default;
|
||||
|
||||
// =============================================================================
|
||||
// Transitions
|
||||
// =============================================================================
|
||||
|
||||
$es-transition-fast: 0.15s ease-in-out !default;
|
||||
$es-transition-normal: 0.2s ease-in-out !default;
|
||||
$es-transition-slow: 0.3s ease-in-out !default;
|
||||
|
||||
// =============================================================================
|
||||
// Z-Index (below Bootstrap modal)
|
||||
// =============================================================================
|
||||
|
||||
$es-z-dropdown: 1000 !default;
|
||||
$es-z-modal: 1050 !default;
|
||||
$es-z-popover: 1060 !default;
|
||||
$es-z-tooltip: 1070 !default;
|
||||
|
||||
// =============================================================================
|
||||
// Typography
|
||||
// =============================================================================
|
||||
|
||||
$es-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
||||
|
||||
$es-font-size-xs: 0.75rem !default; // 12px
|
||||
$es-font-size-sm: 0.875rem !default; // 14px
|
||||
$es-font-size-base: 1rem !default; // 16px
|
||||
$es-font-size-lg: 1.125rem !default; // 18px
|
||||
|
||||
$es-font-weight-normal: 400 !default;
|
||||
$es-font-weight-medium: 500 !default;
|
||||
$es-font-weight-semibold: 600 !default;
|
||||
$es-font-weight-bold: 700 !default;
|
||||
|
||||
$es-line-height-tight: 1.25 !default;
|
||||
$es-line-height-normal: 1.5 !default;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,396 +0,0 @@
|
||||
/**
|
||||
* Combination Attributes Picker Component
|
||||
* Product attribute combination selection styles
|
||||
*/
|
||||
|
||||
@use "sass:color";
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
|
||||
// Main container
|
||||
.combination-attributes-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
// Mode toggle (Any/All)
|
||||
.combination-mode-toggle {
|
||||
display: inline-flex;
|
||||
gap: 0.25rem;
|
||||
padding: 0.125rem;
|
||||
background: $es-slate-100;
|
||||
border-radius: $es-radius-md;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.combination-mode-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
color: $es-text-muted;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mode-label {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $es-primary;
|
||||
background: rgba($es-primary, 0.1);
|
||||
}
|
||||
|
||||
&:has(input[type="radio"]:checked) {
|
||||
background: $es-primary;
|
||||
color: $es-white;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
// Groups container
|
||||
.combination-groups-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Loading/Empty/Error states
|
||||
.combination-loading,
|
||||
.combination-empty,
|
||||
.combination-error {
|
||||
color: $es-text-muted;
|
||||
font-style: italic;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.combination-error {
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
// Section header
|
||||
.combinations-section {
|
||||
margin-bottom: $es-spacing-md;
|
||||
}
|
||||
|
||||
.combinations-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.combinations-label {
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
.combinations-help {
|
||||
font-size: 11px;
|
||||
color: $es-slate-400;
|
||||
}
|
||||
|
||||
// Toggle combinations button
|
||||
.btn-toggle-combinations {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-primary;
|
||||
background: transparent;
|
||||
border: 1px solid $es-primary;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove-combinations {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-danger;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Attribute Group
|
||||
// =============================================================================
|
||||
|
||||
.comb-attr-group {
|
||||
flex: none;
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-gray-300;
|
||||
border-radius: $es-radius-sm;
|
||||
overflow: hidden;
|
||||
|
||||
&.has-selections {
|
||||
border-color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.comb-attr-group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.375rem 0.625rem;
|
||||
background: $es-slate-100;
|
||||
border-bottom: 1px solid $es-gray-300;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-slate-800;
|
||||
|
||||
.comb-attr-group.has-selections & {
|
||||
background: $es-cyan-50;
|
||||
border-bottom-color: $es-cyan-200;
|
||||
}
|
||||
}
|
||||
|
||||
.comb-attr-group-name {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.comb-attr-group-count {
|
||||
flex-shrink: 0;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 0.25rem;
|
||||
background: $es-gray-300;
|
||||
border-radius: $es-radius-full;
|
||||
font-size: 11px;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: $es-text-muted;
|
||||
|
||||
.comb-attr-group.has-selections & {
|
||||
background: $es-primary;
|
||||
color: $es-white;
|
||||
}
|
||||
}
|
||||
|
||||
// Toolbar
|
||||
.comb-attr-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
background: $es-slate-50;
|
||||
border-bottom: 1px solid $es-slate-100;
|
||||
}
|
||||
|
||||
.comb-toolbar-btn {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-gray-300;
|
||||
border-radius: $es-radius-sm;
|
||||
color: $es-text-muted;
|
||||
cursor: pointer;
|
||||
font-size: $es-font-size-xs;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
border-color: $es-slate-400;
|
||||
color: $es-slate-800;
|
||||
}
|
||||
}
|
||||
|
||||
.comb-attr-search {
|
||||
flex: 1;
|
||||
min-width: 60px;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border: 1px solid $es-gray-300;
|
||||
border-radius: $es-radius-sm;
|
||||
font-size: 11px;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $es-slate-400;
|
||||
}
|
||||
}
|
||||
|
||||
// Values container
|
||||
.comb-attr-values {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
.comb-attr-loading,
|
||||
.comb-attr-empty,
|
||||
.comb-attr-error {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: $es-slate-400;
|
||||
font-size: 11px;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.comb-attr-error {
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
// Individual value
|
||||
.comb-attr-value {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-slate-400;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 11px;
|
||||
color: $es-slate-600;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
border-color: $es-text-muted;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $es-primary;
|
||||
border-color: $es-primary-hover;
|
||||
color: $es-white;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-hover;
|
||||
border-color: color.adjust($es-primary-hover, $lightness: -5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comb-attr-value-count {
|
||||
font-size: 9px;
|
||||
color: $es-slate-400;
|
||||
background: $es-slate-100;
|
||||
padding: 1px 0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
min-width: 14px;
|
||||
text-align: center;
|
||||
|
||||
.comb-attr-value.selected & {
|
||||
color: $es-white;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Combination Conditions (Row-based)
|
||||
// =============================================================================
|
||||
|
||||
.combination-conditions-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.combination-condition-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-sm;
|
||||
}
|
||||
|
||||
.combination-group-select,
|
||||
.combination-values-select {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.combination-equals {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.btn-add-combination-condition {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-primary;
|
||||
background: transparent;
|
||||
border: 1px dashed $es-primary;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove-combination-row {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-danger, 0.1);
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,358 +0,0 @@
|
||||
/**
|
||||
* Condition Trait Base Styles
|
||||
* Shared styling for all condition trait components
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Base condition trait container
|
||||
.condition-trait {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
margin-bottom: $es-spacing-lg;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Collapsed state
|
||||
.condition-trait.collapsed {
|
||||
.condition-trait-header {
|
||||
border-bottom-color: transparent;
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Trait Header
|
||||
// =============================================================================
|
||||
|
||||
.condition-trait-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-lg;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.875rem $es-spacing-lg;
|
||||
background: $es-slate-50;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
cursor: pointer;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
}
|
||||
}
|
||||
|
||||
.trait-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-md;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.trait-icon {
|
||||
font-size: 1.125rem;
|
||||
color: $es-text-muted;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trait-title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.trait-title {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-slate-800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trait-subtitle {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Schedule summary (shows current config at a glance)
|
||||
.trait-summary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-primary;
|
||||
background: rgba($es-primary, 0.08);
|
||||
border-radius: $es-radius-full;
|
||||
white-space: nowrap;
|
||||
margin-left: $es-spacing-md;
|
||||
flex-shrink: 0;
|
||||
max-width: 320px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.trait-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-md;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.trait-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// Collapse icon
|
||||
.collapse-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-muted;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border-radius: $es-radius-sm;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: $es-primary;
|
||||
background: rgba($es-primary, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
// Show all toggle
|
||||
.trait-show-all-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-primary;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Trait total count badge (global fallback)
|
||||
.trait-total-count {
|
||||
@include count-badge($es-primary);
|
||||
}
|
||||
|
||||
// Required indicator
|
||||
.trait-required {
|
||||
color: $es-danger;
|
||||
font-size: $es-font-size-xs;
|
||||
}
|
||||
|
||||
// Validation error
|
||||
.trait-validation-error {
|
||||
color: $es-danger;
|
||||
font-size: $es-font-size-xs;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
// Trait toggle button
|
||||
.trait-toggle {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-secondary;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-50;
|
||||
border-color: $es-gray-300;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $es-primary;
|
||||
border-color: $es-primary;
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Trait Body
|
||||
// =============================================================================
|
||||
|
||||
.condition-trait-body {
|
||||
padding: $es-spacing-lg;
|
||||
border-radius: 0 0 $es-radius-lg $es-radius-lg;
|
||||
background: $es-white;
|
||||
animation: slideDown 0.2s ease-out;
|
||||
}
|
||||
|
||||
// Condition trait collapsed - hide body
|
||||
.condition-trait.collapsed .condition-trait-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Section Styles
|
||||
// =============================================================================
|
||||
|
||||
.schedule-section,
|
||||
.context-section {
|
||||
margin-bottom: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
border-bottom: 1px solid $es-slate-100;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 13px;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-slate-600;
|
||||
margin-bottom: $es-spacing-md;
|
||||
|
||||
i {
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-slate-400;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section-content {
|
||||
// Container for section content
|
||||
}
|
||||
|
||||
.section-hint {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 11px;
|
||||
color: $es-slate-400;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Full-width Form Group Override
|
||||
// =============================================================================
|
||||
|
||||
.form-group.condition-trait-fullwidth {
|
||||
display: block !important;
|
||||
|
||||
> .control-label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
> .col-lg-8,
|
||||
> .col-lg-8.col-lg-offset-3 {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
padding-left: $es-spacing-lg !important;
|
||||
padding-right: $es-spacing-lg !important;
|
||||
margin: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Condition traits group label
|
||||
.condition-traits-group-label {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-slate-700;
|
||||
margin-bottom: $es-spacing-md;
|
||||
}
|
||||
|
||||
.condition-traits-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-md;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Collapse Header (form-content layout)
|
||||
// =============================================================================
|
||||
|
||||
.entity-selector-collapse-header {
|
||||
padding: 0;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
|
||||
.btn-collapse-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: $es-primary;
|
||||
font-size: $es-font-size-sm;
|
||||
cursor: pointer;
|
||||
transition: color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: $es-primary-hover;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
font-size: 1.25rem;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.collapse-label {
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// When collapsed, rotate icon
|
||||
.condition-trait.collapsed .entity-selector-collapse-header {
|
||||
.collapse-icon {
|
||||
// Icon already shows expand_more when collapsed
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Animations
|
||||
// =============================================================================
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,516 +0,0 @@
|
||||
/**
|
||||
* Entity Item - Shared Base Component
|
||||
* Unified styling for entity items in chips, lists, and previews
|
||||
*
|
||||
* Variants:
|
||||
* - .entity-item (base) - default list-row style
|
||||
* - .entity-item.chip-style - pill/chip style (compact)
|
||||
* - .entity-item.card-style - card/grid style
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// =============================================================================
|
||||
// Entity Item Sizing
|
||||
// =============================================================================
|
||||
|
||||
$entity-item-image-sm: 20px;
|
||||
$entity-item-image-md: 32px;
|
||||
$entity-item-image-lg: 48px;
|
||||
|
||||
// =============================================================================
|
||||
// Base Entity Item (list-row layout)
|
||||
// =============================================================================
|
||||
|
||||
.entity-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: background $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-bg-hover;
|
||||
}
|
||||
|
||||
// Clickable variant
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Selected state
|
||||
&.selected {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Entity Item Image
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.entity-item-image {
|
||||
flex-shrink: 0;
|
||||
width: $entity-item-image-md;
|
||||
height: $entity-item-image-md;
|
||||
object-fit: cover;
|
||||
border-radius: $es-radius-sm;
|
||||
background: $es-slate-100;
|
||||
}
|
||||
|
||||
// Size variants
|
||||
.entity-item-image--sm {
|
||||
width: $entity-item-image-sm;
|
||||
height: $entity-item-image-sm;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.entity-item-image--lg {
|
||||
width: $entity-item-image-lg;
|
||||
height: $entity-item-image-lg;
|
||||
}
|
||||
|
||||
// No-image placeholder
|
||||
.entity-item-no-image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: $entity-item-image-md;
|
||||
height: $entity-item-image-md;
|
||||
background: $es-slate-100;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
font-size: $es-font-size-sm;
|
||||
|
||||
&--sm {
|
||||
width: $entity-item-image-sm;
|
||||
height: $entity-item-image-sm;
|
||||
font-size: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Entity Item Info (name + meta)
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.entity-item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.entity-item-name {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-primary;
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
.entity-item-meta {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Entity Item Badge/Price (right side)
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.entity-item-badge {
|
||||
flex-shrink: 0;
|
||||
padding: 0.125rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
background: $es-slate-100;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
}
|
||||
|
||||
.entity-item-price {
|
||||
flex-shrink: 0;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Entity Item Actions (remove button, etc.)
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.entity-item-action {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: $es-text-muted;
|
||||
border-radius: 50%;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Chip Style Variant (compact pill)
|
||||
// =============================================================================
|
||||
|
||||
.entity-item.chip-style {
|
||||
display: inline-flex;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: $es-slate-100;
|
||||
border-radius: $es-radius-full;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
}
|
||||
|
||||
.entity-item-image {
|
||||
width: $entity-item-image-sm;
|
||||
height: $entity-item-image-sm;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.entity-item-no-image {
|
||||
width: $entity-item-image-sm;
|
||||
height: $entity-item-image-sm;
|
||||
font-size: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.entity-item-info {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.entity-item-name {
|
||||
font-size: $es-font-size-xs;
|
||||
}
|
||||
|
||||
.entity-item-meta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.entity-item-action {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// List Style Variant (bordered rows)
|
||||
// =============================================================================
|
||||
|
||||
.entity-item.list-style {
|
||||
padding: $es-spacing-sm 0;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: 0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $es-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Entity Item Container (wrapper for multiple items)
|
||||
// =============================================================================
|
||||
|
||||
.entity-items-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: $es-slate-50;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-md;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Toolbar (filter, sort, count, clear)
|
||||
.entity-items-toolbar {
|
||||
display: none;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
padding-bottom: 0;
|
||||
background: transparent;
|
||||
|
||||
&.has-items {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter input
|
||||
.entity-items-filter {
|
||||
all: unset;
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
min-width: 80px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0.2rem 0.5rem 0.2rem 1.5rem;
|
||||
background: $es-white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 0.375rem center;
|
||||
background-size: 10px;
|
||||
border: 1px solid $es-slate-300;
|
||||
border-radius: $es-radius-sm;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
color: $es-text-primary;
|
||||
box-sizing: border-box;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&::placeholder {
|
||||
color: $es-text-muted;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $es-primary;
|
||||
box-shadow: 0 0 0 2px rgba($es-primary, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Sort dropdown
|
||||
.entity-items-sort {
|
||||
all: unset;
|
||||
flex: 0 0 auto;
|
||||
padding: 0.2rem 1.25rem 0.2rem 0.5rem;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm;
|
||||
background: $es-white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.375rem center;
|
||||
background-size: 8px;
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
color: $es-text-secondary;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
border-color: $es-primary;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $es-primary;
|
||||
box-shadow: 0 0 0 2px rgba($es-primary, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Count badge
|
||||
.entity-items-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 0.125rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
font-size: 10px;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
border-radius: $es-radius-sm;
|
||||
white-space: nowrap;
|
||||
line-height: 1.4;
|
||||
|
||||
&.has-filter {
|
||||
background: $es-cyan-100;
|
||||
color: $es-cyan-700;
|
||||
}
|
||||
}
|
||||
|
||||
// Clear button
|
||||
.entity-items-clear {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 0.25rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
color: $es-danger;
|
||||
font-size: 10px;
|
||||
font-weight: $es-font-weight-medium;
|
||||
background: rgba($es-danger, 0.1);
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
white-space: nowrap;
|
||||
line-height: 1.4;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger;
|
||||
color: $es-white;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 9px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Items list area
|
||||
.entity-items-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-sm $es-spacing-md $es-spacing-md;
|
||||
min-height: 40px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
@include custom-scrollbar;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// List layout (vertical)
|
||||
&.list-layout {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0;
|
||||
padding: $es-spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Load more section
|
||||
.entity-items-load-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: transparent;
|
||||
border-top: 1px dashed $es-border-color;
|
||||
|
||||
.load-more-label {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
.load-more-select {
|
||||
appearance: none;
|
||||
padding: 0.25rem 1.75rem 0.25rem 0.5rem;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm;
|
||||
background: $es-white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.5rem center;
|
||||
background-size: 8px;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-primary;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
line-height: 1.3;
|
||||
|
||||
&:hover {
|
||||
border-color: $es-primary;
|
||||
background-color: $es-primary-light;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $es-primary;
|
||||
box-shadow: 0 0 0 2px rgba($es-primary, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.load-more-remaining {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
|
||||
.remaining-count {
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-load-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $es-spacing-xs;
|
||||
margin: 0;
|
||||
border: none;
|
||||
color: $es-primary;
|
||||
background: $es-primary-light;
|
||||
border-radius: $es-radius-sm;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
font: inherit;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-primary, 0.2);
|
||||
}
|
||||
|
||||
&.loading {
|
||||
cursor: wait;
|
||||
|
||||
i {
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Empty & Loading States
|
||||
// =============================================================================
|
||||
|
||||
.entity-items-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-xl;
|
||||
text-align: center;
|
||||
color: $es-text-muted;
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-items-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $es-spacing-xl;
|
||||
color: $es-text-muted;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
}
|
||||
@@ -1,450 +0,0 @@
|
||||
/**
|
||||
* Entity Selector - Main Component Styles
|
||||
* Wrapper, header, body, tabs, blocks
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Main wrapper (supports both .target-conditions-trait and .entity-selector-trait)
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
|
||||
// Base Material Icons sizing — 18px throughout entity-selector
|
||||
// !important needed to override .bootstrap .material-icons:not(.js-mobile-menu) { font-size: inherit }
|
||||
.material-icons {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
// Trait Header (collapsible)
|
||||
.condition-trait-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-md;
|
||||
padding: 0.875rem $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.trait-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.trait-icon {
|
||||
font-size: $es-font-size-lg;
|
||||
color: $es-text-muted;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trait-title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.trait-title {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trait-subtitle {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Total count badge in header
|
||||
.trait-total-count {
|
||||
@include count-badge($es-primary);
|
||||
margin-left: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// Show all toggle switch
|
||||
.trait-show-all-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin-right: 0.75rem;
|
||||
padding: 0.25rem $es-spacing-sm;
|
||||
border-radius: $es-radius-sm;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
.show-all-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background: $es-slate-300;
|
||||
border-radius: $es-radius-full;
|
||||
transition: background-color $es-transition-normal;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $es-white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
transition: transform $es-transition-normal;
|
||||
}
|
||||
}
|
||||
|
||||
.show-all-checkbox:checked + .toggle-slider {
|
||||
background: $es-success;
|
||||
|
||||
&::after {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Validation error states
|
||||
&.has-validation-error {
|
||||
border-color: $es-danger;
|
||||
box-shadow: 0 0 0 3px rgba($es-danger, 0.1);
|
||||
|
||||
.condition-trait-header {
|
||||
border-bottom-color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.trait-validation-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: 0.625rem $es-spacing-md;
|
||||
background: $es-danger-light;
|
||||
color: #b91c1c;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-bottom: 1px solid #fecaca;
|
||||
|
||||
i {
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Required indicator
|
||||
&.trait-required .trait-title::after {
|
||||
content: ' *';
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
// Body
|
||||
.condition-trait-body {
|
||||
padding: 0;
|
||||
background: $es-white;
|
||||
border-radius: 0 0 $es-radius-lg $es-radius-lg;
|
||||
}
|
||||
|
||||
// Block type tabs
|
||||
.target-block-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
background: $es-slate-100;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
.target-block-tab {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
flex: none;
|
||||
min-width: 0;
|
||||
padding: 0.625rem $es-spacing-md;
|
||||
margin-bottom: -1px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-slate-700;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $es-white;
|
||||
border-bottom-color: $es-cyan-500;
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
i.material-icons {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-badge {
|
||||
@include count-badge($es-primary);
|
||||
}
|
||||
|
||||
&.has-data:not(.active) .tab-badge {
|
||||
@include count-badge($es-slate-400);
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs row with actions (form-content layout)
|
||||
.entity-selector-tabs-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: $es-slate-100;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
|
||||
.target-block-tabs {
|
||||
flex: 1;
|
||||
border-bottom: 0;
|
||||
border-radius: $es-radius-lg 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Expand/collapse groups button (standalone, in tabs row)
|
||||
.entity-selector-actions:not(.btn-toggle-blocks) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $es-spacing-xs $es-spacing-md;
|
||||
border-left: 1px solid $es-border-color;
|
||||
|
||||
.btn-toggle-groups {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-slate-400;
|
||||
border-radius: $es-radius-md;
|
||||
color: $es-slate-700;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
color: $es-primary;
|
||||
border-color: $es-primary;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expand/collapse toggle area (entire section is clickable)
|
||||
.entity-selector-actions.btn-toggle-blocks {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 $es-spacing-md;
|
||||
background: $es-slate-100;
|
||||
border-left: 1px solid $es-border-color;
|
||||
color: $es-slate-400;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// When expanded - highlight the toggle area
|
||||
.entity-selector-trait:not(.blocks-collapsed) .entity-selector-actions.btn-toggle-blocks {
|
||||
background: $es-primary-light;
|
||||
border-left-color: $es-primary;
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
// Blocks content wrapper (for form-content layout collapse)
|
||||
.entity-selector-blocks-content {
|
||||
// Inherits styles from condition-trait-body context
|
||||
}
|
||||
|
||||
// Block container
|
||||
.target-block-container {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.target-block-content {
|
||||
padding: $es-spacing-md;
|
||||
}
|
||||
|
||||
.target-block-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Block header (for standalone blocks)
|
||||
.target-block-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
// Empty state
|
||||
.target-block-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-xl;
|
||||
text-align: center;
|
||||
color: $es-text-muted;
|
||||
|
||||
i {
|
||||
font-size: 2rem !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Collapse toggle
|
||||
.trait-collapse-toggle,
|
||||
.collapse-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
cursor: pointer;
|
||||
transition: transform $es-transition-normal;
|
||||
|
||||
&.collapsed {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Header actions
|
||||
.trait-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// Collapsed state
|
||||
&.collapsed {
|
||||
.condition-trait-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.condition-trait-header {
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Single mode specific styles
|
||||
.target-conditions-trait.single-mode,
|
||||
.entity-selector-trait.single-mode {
|
||||
.target-block-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.target-block-container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Header action buttons
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.header-action-btn {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-muted;
|
||||
background: transparent;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,982 +0,0 @@
|
||||
/**
|
||||
* Groups Component
|
||||
* Selection groups, include/exclude sections, method selectors
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
|
||||
// Group container
|
||||
.target-group {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Group header
|
||||
.target-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
.target-group-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
|
||||
.group-number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 0.25rem;
|
||||
background: $es-primary;
|
||||
color: $es-white;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-bold;
|
||||
border-radius: $es-radius-full;
|
||||
}
|
||||
}
|
||||
|
||||
.target-group-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.group-action-btn {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
&.danger:hover {
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Group body
|
||||
.target-group-body,
|
||||
.group-body {
|
||||
padding: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Include section
|
||||
.include-section {
|
||||
margin-bottom: $es-spacing-md;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
&.label-include {
|
||||
color: $es-success-dark;
|
||||
|
||||
i {
|
||||
color: $es-success;
|
||||
}
|
||||
}
|
||||
|
||||
&.label-exclude {
|
||||
color: $es-danger;
|
||||
|
||||
i {
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Method selector
|
||||
.method-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.method-selector-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.method-select {
|
||||
@include input-base;
|
||||
padding-right: 2rem;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
|
||||
background-position: right 0.5rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em 1.5em;
|
||||
}
|
||||
|
||||
.method-help-btn {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-full;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Value picker (search trigger)
|
||||
.value-picker {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.value-picker-trigger {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
width: 100%;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-md;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
text-align: left;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
border-color: $es-slate-300;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
@include focus-ring($es-primary);
|
||||
}
|
||||
|
||||
i {
|
||||
color: $es-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Pattern input (text input for patterns)
|
||||
.pattern-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pattern-input {
|
||||
@include input-base;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.pattern-add-btn {
|
||||
@include button-reset;
|
||||
position: absolute;
|
||||
right: 0.25rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-primary;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Multi-range input (price ranges)
|
||||
.multi-range-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.range-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.range-input {
|
||||
@include input-base;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.range-separator {
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
.range-remove-btn {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.range-add-btn {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
color: $es-primary;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Multi-select tiles (stock status, etc.)
|
||||
.multi-select-tiles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.multi-select-tile {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: $es-slate-100;
|
||||
color: $es-text-secondary;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $es-radius-full;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $es-primary-light;
|
||||
color: $es-primary;
|
||||
border-color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Exclude section
|
||||
.exclude-section {
|
||||
margin-top: $es-spacing-md;
|
||||
padding-top: $es-spacing-md;
|
||||
border-top: 1px dashed $es-border-color;
|
||||
}
|
||||
|
||||
// Legacy exclude-rows (if used elsewhere)
|
||||
.exclude-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.exclude-row-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.exclude-remove-btn {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
flex-shrink: 0;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.add-exclude-btn {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-top: $es-spacing-sm;
|
||||
padding: 0.25rem 0.5rem;
|
||||
color: $es-danger;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border: 1px dashed $es-danger;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Add group button (used in block-footer)
|
||||
.btn-add-group {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.5rem 0.875rem;
|
||||
color: $es-primary;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
background: rgba($es-primary, 0.05);
|
||||
border: 1px dashed $es-primary;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-primary, 0.1);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Block footer
|
||||
.block-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-md;
|
||||
border-top: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
// Block body
|
||||
.block-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Groups container
|
||||
.groups-container {
|
||||
padding: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Groups empty state
|
||||
.groups-empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $es-spacing-xl;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
// Selection group
|
||||
.selection-group {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
margin-bottom: $es-spacing-md;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.group-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.group-collapse-toggle i {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Group header
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
cursor: pointer;
|
||||
|
||||
&.group-header-single {
|
||||
padding: $es-spacing-xs $es-spacing-md;
|
||||
background: transparent;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.group-collapse-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
color: $es-text-muted;
|
||||
|
||||
i {
|
||||
font-size: 20px !important;
|
||||
transition: transform $es-transition-fast;
|
||||
}
|
||||
}
|
||||
|
||||
.group-name-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.group-name-input {
|
||||
flex: 1;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $es-white;
|
||||
border-color: $es-border-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $es-text-muted;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.group-count-badge {
|
||||
@include count-badge($es-primary);
|
||||
}
|
||||
|
||||
.btn-remove-group {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Group include section - green accent to distinguish from exclude
|
||||
.group-include {
|
||||
margin-bottom: $es-spacing-md;
|
||||
padding: $es-spacing-sm;
|
||||
background: rgba($es-success, 0.03);
|
||||
border: 1px solid rgba($es-success, 0.2);
|
||||
border-radius: $es-radius-md;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// Method selector wrapper (from PHP)
|
||||
.method-selector-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.method-info-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.include-method-select,
|
||||
.exclude-method-select {
|
||||
flex: 1;
|
||||
@include input-base;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Lock indicator for method selector (when excludes are present)
|
||||
.selector-locked {
|
||||
.include-method-select {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.lock-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-warning;
|
||||
cursor: help;
|
||||
|
||||
i {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.mpr-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: $es-spacing-xs $es-spacing-sm;
|
||||
background: $es-slate-800;
|
||||
color: $es-white;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-normal;
|
||||
white-space: nowrap;
|
||||
border-radius: $es-radius-sm;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&:hover .mpr-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Group excludes section
|
||||
.group-excludes {
|
||||
margin-top: $es-spacing-md;
|
||||
}
|
||||
|
||||
.except-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin: 0 0 $es-spacing-sm 0;
|
||||
|
||||
// Lines on both sides
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: rgba($es-danger, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.except-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
border-radius: $es-radius-full;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
i {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.exclude-rows-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.exclude-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $es-spacing-sm;
|
||||
background: rgba($es-danger, 0.03);
|
||||
border: 1px solid rgba($es-danger, 0.15);
|
||||
border-radius: $es-radius-md;
|
||||
|
||||
// Value picker inside exclude row - full width
|
||||
.value-picker {
|
||||
width: 100%;
|
||||
margin-top: $es-spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.exclude-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-sm;
|
||||
width: 100%;
|
||||
|
||||
.method-selector-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// Delete button at the far right
|
||||
.btn-remove-exclude-row {
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove-exclude-row {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-exclude,
|
||||
.btn-add-another-exclude {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-top: $es-spacing-sm;
|
||||
padding: 0.375rem 0.625rem;
|
||||
color: $es-danger;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
background: transparent;
|
||||
border: 1px dashed rgba($es-danger, 0.5);
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
border-color: $es-danger;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Group modifiers (inline version from PHP)
|
||||
// Uses negative margins to break out of .group-body padding
|
||||
// Elements use .mpr-input-compact class to opt out of admin.css global sizing
|
||||
.group-modifiers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
margin: $es-spacing-md (-$es-spacing-md) (-$es-spacing-md);
|
||||
background: $es-slate-50;
|
||||
border-top: 1px solid $es-border-color;
|
||||
border-radius: 0 0 $es-radius-lg $es-radius-lg;
|
||||
}
|
||||
|
||||
.modifier-inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Common height for all modifier controls
|
||||
$modifier-height: 26px;
|
||||
|
||||
.group-modifier-limit {
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
min-width: 50px;
|
||||
height: $modifier-height;
|
||||
padding: 0 0.375rem;
|
||||
font-size: $es-font-size-xs;
|
||||
text-align: center;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Sort modifier - input group style (select + button glued together)
|
||||
.modifier-sort {
|
||||
gap: 0; // Remove gap to glue select + button together
|
||||
|
||||
.modifier-label {
|
||||
margin-right: 0.375rem; // Keep space between label and input group
|
||||
}
|
||||
|
||||
.group-modifier-sort {
|
||||
width: auto;
|
||||
height: $modifier-height;
|
||||
padding: 0 1.25rem 0 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm 0 0 $es-radius-sm;
|
||||
border-right: none;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
outline: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sort-dir {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $modifier-height;
|
||||
height: $modifier-height;
|
||||
color: $es-text-muted;
|
||||
background: $es-slate-100;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: 0 $es-radius-sm $es-radius-sm 0;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback for elements outside .modifier-sort context
|
||||
.group-modifier-sort {
|
||||
height: $modifier-height;
|
||||
padding: 0 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sort-dir {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $modifier-height;
|
||||
height: $modifier-height;
|
||||
color: $es-text-muted;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.group-preview-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: $es-slate-100;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-full;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// OR separator between groups
|
||||
.group-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $es-spacing-sm 0;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: $es-border-color;
|
||||
margin: 0 $es-spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
// Group modifiers (limit, sort)
|
||||
.group-modifiers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-md;
|
||||
padding-top: $es-spacing-md;
|
||||
margin-top: $es-spacing-md;
|
||||
border-top: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
.modifier-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.modifier-label {
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-muted;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modifier-input {
|
||||
@include input-base;
|
||||
width: 80px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
}
|
||||
|
||||
.modifier-select {
|
||||
@include input-base;
|
||||
width: auto;
|
||||
padding: 0.25rem 1.5rem 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
|
||||
background-position: right 0.25rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.25em 1.25em;
|
||||
}
|
||||
|
||||
// Condition match count badge
|
||||
.condition-match-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
background: $es-slate-100;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-full;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
}
|
||||
|
||||
&.has-results {
|
||||
background: $es-primary-light;
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
// Country holidays variant - use calendar icon style
|
||||
&.country-holidays {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
color: #8b5cf6;
|
||||
|
||||
&:hover {
|
||||
background: rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
&.clickable {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,644 +0,0 @@
|
||||
/**
|
||||
* List Preview Component
|
||||
* Popover and modal views for entity preview
|
||||
*
|
||||
* Uses shared entity-item base for item styling.
|
||||
* This file only contains popover/modal container styles.
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// =============================================================================
|
||||
// Preview Popover Container
|
||||
// =============================================================================
|
||||
|
||||
.target-preview-popover,
|
||||
.target-list-preview-popover {
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
box-shadow: $es-shadow-lg;
|
||||
overflow: hidden;
|
||||
|
||||
// Arrow pointing to badge
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid $es-border-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $es-white;
|
||||
}
|
||||
|
||||
// Positioned to the right - arrow on left
|
||||
&.position-right {
|
||||
&::before,
|
||||
&::after {
|
||||
left: 20px;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Positioned to the left - arrow on right
|
||||
&.position-left {
|
||||
&::before,
|
||||
&::after {
|
||||
left: auto;
|
||||
right: 20px;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Preview Header
|
||||
// =============================================================================
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
|
||||
.preview-title {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
.preview-close {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Preview Tabs (entity type switcher)
|
||||
// =============================================================================
|
||||
|
||||
.preview-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
background: $es-slate-50;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
.preview-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $es-white;
|
||||
border-bottom-color: $es-primary;
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Preview Filter
|
||||
// =============================================================================
|
||||
|
||||
.preview-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-white;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
|
||||
i {
|
||||
color: $es-text-muted;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.preview-filter-input {
|
||||
all: unset;
|
||||
flex: 1;
|
||||
padding: 0.25rem 0;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-primary;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::placeholder {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Preview Contents (tabbed content areas)
|
||||
// =============================================================================
|
||||
|
||||
.preview-contents {
|
||||
max-height: 350px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
display: none;
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
@include custom-scrollbar;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Preview Items Container
|
||||
// =============================================================================
|
||||
|
||||
.preview-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $es-spacing-xs $es-spacing-sm;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Preview Item - Uses entity-item patterns
|
||||
// Maps legacy classes to shared styling
|
||||
// =============================================================================
|
||||
|
||||
.preview-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: background $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-bg-hover;
|
||||
}
|
||||
|
||||
// Clickable items
|
||||
&[data-id] {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Image - matches chip image sizing for consistency
|
||||
.preview-item-image {
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: cover;
|
||||
border-radius: $es-radius-sm;
|
||||
background: $es-slate-100;
|
||||
}
|
||||
|
||||
// No-image placeholder
|
||||
.preview-item-no-image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: $es-slate-100;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
// Info container
|
||||
.preview-item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
// Name
|
||||
.preview-item-name {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-primary;
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
// Meta/ref (category, email, etc.)
|
||||
.preview-item-ref,
|
||||
.preview-item-meta {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
// Price badge
|
||||
.preview-item-price {
|
||||
flex-shrink: 0;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-primary;
|
||||
background: $es-primary-light;
|
||||
border-radius: $es-radius-sm;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Preview Footer (load more)
|
||||
// =============================================================================
|
||||
|
||||
.preview-footer {
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-slate-50;
|
||||
border-top: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
.load-more-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
|
||||
.load-more-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.load-more-select {
|
||||
appearance: none;
|
||||
padding: 0.25rem 1.75rem 0.25rem 0.5rem;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm;
|
||||
background: $es-white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.5rem center;
|
||||
background-size: 8px;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-primary;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
line-height: 1.3;
|
||||
|
||||
&:hover {
|
||||
border-color: $es-primary;
|
||||
background-color: $es-primary-light;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $es-primary;
|
||||
box-shadow: 0 0 0 2px rgba($es-primary, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.load-more-of {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.remaining-count {
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
.btn-load-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $es-spacing-xs;
|
||||
margin: 0;
|
||||
border: none;
|
||||
color: $es-primary;
|
||||
background: $es-primary-light;
|
||||
border-radius: $es-radius-sm;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
font: inherit;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-primary, 0.2);
|
||||
}
|
||||
|
||||
&.loading {
|
||||
cursor: wait;
|
||||
|
||||
i {
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Preview States
|
||||
// =============================================================================
|
||||
|
||||
.preview-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-xl;
|
||||
text-align: center;
|
||||
color: $es-text-muted;
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $es-spacing-xl;
|
||||
color: $es-text-muted;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: $es-primary;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Total Summary Popover (header total badge click)
|
||||
// =============================================================================
|
||||
|
||||
.total-preview-popover {
|
||||
min-width: 240px;
|
||||
max-width: 320px;
|
||||
|
||||
.preview-popover-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
|
||||
.preview-popover-title {
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
.preview-popover-count {
|
||||
flex-shrink: 0;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-muted;
|
||||
background: $es-slate-200;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: $es-radius-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-popover-body {
|
||||
padding: $es-spacing-xs 0;
|
||||
}
|
||||
|
||||
.total-summary-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.total-summary-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-50;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
color: $es-text-muted;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.summary-item-label {
|
||||
flex: 1;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
.summary-item-count {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-primary;
|
||||
background: rgba($es-primary, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: $es-radius-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make trait-total-count clickable
|
||||
.trait-total-count {
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.popover-open {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Schedule Dropdown Preview
|
||||
// Inline dropdown for schedule details in admin list
|
||||
// =============================================================================
|
||||
|
||||
.mpr-dropdown-preview {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 6px;
|
||||
z-index: 1000;
|
||||
padding: 0.625rem 0.75rem;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
box-shadow: $es-shadow-lg;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
white-space: nowrap; // Allow dropdown to grow as needed
|
||||
|
||||
&.is-open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mpr-dropdown-preview__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.25rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba($es-border-color, 0.5);
|
||||
}
|
||||
|
||||
// Icon styles
|
||||
> .material-icons,
|
||||
> i:first-child {
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
font-size: 14px !important;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mpr-dropdown-preview__muted {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// Schedule inline layout
|
||||
.mpr-dropdown-preview__schedule {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.mpr-dropdown-preview__schedule-row {
|
||||
display: inline;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: ',';
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mpr-dropdown-preview__day {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.mpr-dropdown-preview__hours {
|
||||
color: $es-primary;
|
||||
font-weight: 500;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
// Badge trigger for preview dropdown/popover
|
||||
.mpr-badge--preview {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
position: relative;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
border-radius: 50rem;
|
||||
cursor: pointer;
|
||||
text-transform: none;
|
||||
|
||||
.material-icons {
|
||||
font-size: 12px !important;
|
||||
line-height: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.mpr-badge--preview-primary {
|
||||
background: $es-primary;
|
||||
color: $es-white;
|
||||
}
|
||||
|
||||
.mpr-badge--preview-success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.mpr-badge--preview-warning {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.mpr-badge--preview-muted {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
@@ -1,225 +0,0 @@
|
||||
/**
|
||||
* Method Dropdown Component
|
||||
* Custom select dropdown with icons for method selection
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
|
||||
// Method dropdown trigger button
|
||||
.method-dropdown-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
height: 36px;
|
||||
padding: 0 $es-spacing-md;
|
||||
border-radius: $es-radius-md;
|
||||
background: $es-white;
|
||||
color: $es-slate-800;
|
||||
font-size: $es-font-size-sm;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
min-width: 180px;
|
||||
max-width: 320px;
|
||||
border: 1px solid $es-border-color;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-50;
|
||||
border-color: $es-gray-300;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
border-color: $es-primary;
|
||||
box-shadow: 0 0 0 3px rgba($es-primary, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.method-trigger-icon {
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-muted;
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.method-trigger-label {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
|
||||
.method-trigger-caret {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-slate-400;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// Locked state
|
||||
.selector-locked .method-dropdown-trigger {
|
||||
background: $es-slate-100;
|
||||
color: $es-slate-400;
|
||||
cursor: not-allowed;
|
||||
border-color: $es-border-color;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
border-color: $es-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Method selector wrapper
|
||||
.method-selector-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Hidden select (for form submission)
|
||||
.method-select-hidden {
|
||||
position: absolute !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Global fallback for hidden method selects
|
||||
.method-select-hidden {
|
||||
position: absolute !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Method Dropdown Menu (appended to body, outside trait wrappers)
|
||||
// =============================================================================
|
||||
|
||||
.method-dropdown-menu {
|
||||
position: absolute;
|
||||
z-index: $es-z-dropdown + 1;
|
||||
min-width: 200px;
|
||||
max-width: 360px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-lg;
|
||||
padding: 0.375rem 0;
|
||||
border: 1px solid $es-border-color;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
||||
animation: methodDropdownFadeIn 0.15s ease;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
@keyframes methodDropdownFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Method dropdown item
|
||||
.method-dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
padding: 0.5rem $es-spacing-md;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.1s;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba($es-primary, 0.08);
|
||||
}
|
||||
|
||||
.method-item-icon {
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-muted;
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.selected .method-item-icon {
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
.method-item-label {
|
||||
flex: 1;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-slate-700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.selected .method-item-label {
|
||||
color: $es-cyan-700;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
|
||||
.method-item-check {
|
||||
font-size: $es-font-size-xs;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Method dropdown optgroup
|
||||
.method-dropdown-optgroup {
|
||||
margin-top: 0.25rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.method-optgroup-label {
|
||||
padding: 0.5rem $es-spacing-md;
|
||||
font-size: 11px;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-muted;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
background: $es-slate-50;
|
||||
border-top: 1px solid $es-slate-100;
|
||||
border-bottom: 1px solid $es-slate-100;
|
||||
|
||||
.method-dropdown-optgroup:first-child & {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.method-optgroup-items {
|
||||
padding: 0.25rem 0;
|
||||
|
||||
.method-dropdown-item {
|
||||
padding-left: $es-spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Method info placeholder
|
||||
.method-info-placeholder {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -1,488 +0,0 @@
|
||||
/**
|
||||
* Modal Component
|
||||
* Preview modals, confirmation dialogs
|
||||
*/
|
||||
|
||||
@use "sass:color";
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Modal backdrop
|
||||
.mpr-modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: $es-z-modal;
|
||||
opacity: 0;
|
||||
transition: opacity $es-transition-normal;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal container
|
||||
.mpr-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.95);
|
||||
z-index: $es-z-modal + 1;
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
max-height: 90vh;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-xl;
|
||||
box-shadow: $es-shadow-xl;
|
||||
opacity: 0;
|
||||
transition: all $es-transition-normal;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
&.modal-sm {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
&.modal-lg {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
&.modal-xl {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
&.modal-fullscreen {
|
||||
width: 95%;
|
||||
max-width: none;
|
||||
height: 90vh;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal header
|
||||
.mpr-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mpr-modal-title {
|
||||
font-size: $es-font-size-base;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mpr-modal-close {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: $es-font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal body
|
||||
.mpr-modal-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: $es-spacing-lg;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
// Modal footer
|
||||
.mpr-modal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
background: $es-bg-header;
|
||||
border-top: 1px solid $es-border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mpr-modal-btn {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&.btn-secondary {
|
||||
color: $es-text-secondary;
|
||||
background: $es-slate-100;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
color: $es-white;
|
||||
background: $es-primary;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
color: $es-white;
|
||||
background: $es-danger;
|
||||
|
||||
&:hover {
|
||||
background: color.adjust($es-danger, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// Preview popover styles moved to _list-preview.scss
|
||||
|
||||
.popover-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
.popover-close {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: $es-spacing-sm;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
.popover-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-top: 1px solid $es-border-color;
|
||||
border-radius: 0 0 $es-radius-lg $es-radius-lg;
|
||||
}
|
||||
|
||||
.popover-info {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
.popover-load-more {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-primary;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Popover arrow
|
||||
.popover-arrow {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
transform: rotate(45deg);
|
||||
|
||||
&.arrow-top {
|
||||
top: -7px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.arrow-bottom {
|
||||
bottom: -7px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Holiday Preview Modal
|
||||
// ==========================================================================
|
||||
|
||||
#mpr-holiday-preview-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $es-z-modal;
|
||||
|
||||
&.show {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mpr-modal-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mpr-modal-dialog {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
max-width: 480px;
|
||||
max-height: 80vh;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-lg;
|
||||
box-shadow: $es-shadow-xl;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mpr-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mpr-modal-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
font-size: $es-font-size-base;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
margin: 0;
|
||||
|
||||
i.material-icons {
|
||||
font-size: 20px !important;
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.mpr-modal-close {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.mpr-modal-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: $es-spacing-lg;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
// Loading state
|
||||
.holiday-preview-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-xl 0;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
|
||||
i {
|
||||
font-size: $es-font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Empty state
|
||||
.holiday-preview-empty {
|
||||
text-align: center;
|
||||
padding: $es-spacing-xl 0;
|
||||
color: $es-text-muted;
|
||||
|
||||
i.material-icons {
|
||||
font-size: 48px !important;
|
||||
opacity: 0.5;
|
||||
margin-bottom: $es-spacing-md;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $es-spacing-xs;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Holiday list
|
||||
.holiday-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.holiday-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-md;
|
||||
border-left: 3px solid $es-success;
|
||||
|
||||
&.holiday-type-bank {
|
||||
border-left-color: $es-info;
|
||||
}
|
||||
|
||||
&.holiday-type-observance {
|
||||
border-left-color: $es-warning;
|
||||
}
|
||||
|
||||
&.holiday-type-regional {
|
||||
border-left-color: #8b5cf6;
|
||||
}
|
||||
}
|
||||
|
||||
.holiday-date {
|
||||
flex-shrink: 0;
|
||||
min-width: 100px;
|
||||
|
||||
.holiday-day {
|
||||
display: block;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
.holiday-weekday {
|
||||
display: block;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.holiday-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.holiday-name {
|
||||
display: block;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-primary;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.holiday-type-badge {
|
||||
display: inline-block;
|
||||
margin-top: $es-spacing-xs;
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: 10px;
|
||||
font-weight: $es-font-weight-medium;
|
||||
text-transform: capitalize;
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
border-radius: $es-radius-sm;
|
||||
}
|
||||
|
||||
.holiday-preview-note {
|
||||
margin-top: $es-spacing-md;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -1,369 +0,0 @@
|
||||
/**
|
||||
* Schedule Conditions Component
|
||||
* DateTime picker, weekly timeline, holidays
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Schedule conditions wrapper
|
||||
.schedule-conditions-trait {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
|
||||
// Schedule header
|
||||
.schedule-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-md;
|
||||
padding: 0.875rem $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
|
||||
i {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Schedule body
|
||||
.schedule-body {
|
||||
padding: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Schedule section
|
||||
.schedule-section {
|
||||
margin-bottom: $es-spacing-lg;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
|
||||
i {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-section-description {
|
||||
margin-bottom: $es-spacing-md;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
// DateTime range picker
|
||||
.datetime-range {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-md;
|
||||
}
|
||||
|
||||
.datetime-field {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.datetime-label {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
.datetime-input {
|
||||
@include input-base;
|
||||
}
|
||||
|
||||
// Weekly schedule
|
||||
.weekly-schedule {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.day-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-sm;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-md;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.day-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.day-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.day-name {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
// Timeline slider
|
||||
.timeline-slider {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 24px;
|
||||
background: $es-slate-200;
|
||||
border-radius: $es-radius-full;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.timeline-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: $es-primary;
|
||||
border-radius: $es-radius-full;
|
||||
transition: all $es-transition-fast;
|
||||
}
|
||||
|
||||
.timeline-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $es-white;
|
||||
border: 2px solid $es-primary;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: grab;
|
||||
box-shadow: $es-shadow-sm;
|
||||
transition: box-shadow $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $es-shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
&.handle-start {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.handle-end {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Time display
|
||||
.day-times {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
min-width: 120px;
|
||||
font-size: $es-font-size-xs;
|
||||
font-family: monospace;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
.time-separator {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
// Holiday exclusions
|
||||
.holiday-section {
|
||||
padding: $es-spacing-md;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-md;
|
||||
}
|
||||
|
||||
.holiday-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin-bottom: $es-spacing-md;
|
||||
}
|
||||
|
||||
.holiday-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.holiday-label {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
.holiday-countries {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.holiday-country-chip {
|
||||
@include chip;
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
background: $es-primary-light;
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Server time display
|
||||
.server-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-info-light;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-info;
|
||||
|
||||
i {
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
font-family: monospace;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
// Schedule summary
|
||||
.schedule-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-md;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-secondary;
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
|
||||
i {
|
||||
color: $es-success;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
&.inactive i {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Collapsed state
|
||||
.schedule-conditions-trait.collapsed {
|
||||
.schedule-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.schedule-header {
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Schedule toggle row (form-content layout)
|
||||
.schedule-toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: $es-slate-100;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
|
||||
.schedule-toggle-switch {
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
}
|
||||
|
||||
.schedule-toggle-actions {
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
border-left: 1px solid $es-border-color;
|
||||
cursor: pointer;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
color: $es-slate-400;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Schedule summary badges (read-only indicators in header)
|
||||
.schedule-summary-badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
padding: 0 $es-spacing-sm;
|
||||
}
|
||||
|
||||
.schedule-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: $es-slate-200;
|
||||
color: $es-slate-600;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-full;
|
||||
white-space: nowrap;
|
||||
|
||||
.material-icons {
|
||||
font-size: 14px !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// Section hint after embedded entity selector - add margin
|
||||
.schedule-holidays .section-hint {
|
||||
margin-top: $es-spacing-md;
|
||||
}
|
||||
@@ -1,142 +0,0 @@
|
||||
/**
|
||||
* Tips Box Component
|
||||
* Pro tips and help information display
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
|
||||
// Tips box container
|
||||
.target-tips-box {
|
||||
margin: $es-spacing-lg $es-spacing-md $es-spacing-md;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
}
|
||||
|
||||
// Tips header (clickable to expand/collapse)
|
||||
.tips-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
// Lightbulb icon
|
||||
> i:first-child {
|
||||
font-size: 1rem;
|
||||
color: $es-warning;
|
||||
}
|
||||
|
||||
// Title text
|
||||
> span {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-slate-600;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle chevron icon
|
||||
.tips-toggle {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-slate-400;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
// Expanded state
|
||||
.target-tips-box.expanded {
|
||||
.tips-toggle {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Tips content (hidden by default)
|
||||
.tips-content {
|
||||
display: none;
|
||||
padding: 0 $es-spacing-lg $es-spacing-lg;
|
||||
}
|
||||
|
||||
// Tips grid layout
|
||||
.tips-grid {
|
||||
display: grid;
|
||||
gap: $es-spacing-md;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
// Individual tip item
|
||||
.tip-item {
|
||||
display: flex;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-md;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-md;
|
||||
border: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
// Tip icon
|
||||
.tip-icon {
|
||||
flex-shrink: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $es-primary-light;
|
||||
border-radius: $es-radius-md;
|
||||
color: $es-primary;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
// Tip text content
|
||||
.tip-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-slate-700;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 11px;
|
||||
color: $es-text-muted;
|
||||
line-height: 1.625;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tips footer
|
||||
.tips-footer {
|
||||
margin-top: $es-spacing-md;
|
||||
padding: 0.625rem $es-spacing-md;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-md;
|
||||
border: 1px dashed $es-gray-300;
|
||||
font-size: 11px;
|
||||
color: $es-text-muted;
|
||||
line-height: 1.625;
|
||||
|
||||
i {
|
||||
color: $es-primary;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
/**
|
||||
* Tooltip Component
|
||||
* Info tooltips for method help
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
|
||||
// =============================================================================
|
||||
// Info Wrapper (tooltip trigger)
|
||||
// =============================================================================
|
||||
|
||||
.mpr-info-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
cursor: help;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.25rem;
|
||||
|
||||
.material-icons {
|
||||
font-size: 16px !important;
|
||||
color: $es-text-muted;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
&:hover .material-icons {
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Fixed Tooltip (appended to body on hover)
|
||||
// =============================================================================
|
||||
|
||||
.mpr-tooltip-fixed {
|
||||
position: fixed;
|
||||
background: $es-white;
|
||||
color: $es-slate-800;
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
white-space: normal;
|
||||
z-index: 10500;
|
||||
max-width: 320px;
|
||||
min-width: 180px;
|
||||
text-align: left;
|
||||
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(64, 68, 82, 0.16) 0px 0px 0px 1px,
|
||||
rgba(64, 68, 82, 0.08) 0px 2px 5px 0px;
|
||||
pointer-events: none;
|
||||
|
||||
// Pinned tooltip allows interaction
|
||||
&.pinned {
|
||||
pointer-events: auto;
|
||||
padding-right: $es-spacing-xl + 1rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-bottom: 0.375rem;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0.5rem 0 0;
|
||||
padding-left: 1.25rem;
|
||||
|
||||
li {
|
||||
margin: 0.25rem 0;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close button for pinned tooltips
|
||||
.mpr-tooltip-close {
|
||||
position: absolute;
|
||||
top: 0.375rem;
|
||||
right: 0.375rem;
|
||||
padding: 0.125rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: $es-radius-sm;
|
||||
line-height: 1;
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
.material-icons {
|
||||
font-size: 16px !important;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
|
||||
.material-icons {
|
||||
color: $es-slate-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,343 +0,0 @@
|
||||
/**
|
||||
* Category Tree Component
|
||||
* Hierarchical tree view for category selection inside dropdown
|
||||
*/
|
||||
|
||||
@use "sass:color";
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Category tree container (inside dropdown)
|
||||
.category-tree {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Tree toolbar inside dropdown
|
||||
.category-tree .tree-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-xs $es-spacing-sm;
|
||||
background: $es-slate-50;
|
||||
border-bottom: 1px solid $es-border-light;
|
||||
flex-shrink: 0;
|
||||
|
||||
.btn-expand-all,
|
||||
.btn-collapse-all {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: $es-spacing-xs $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-secondary;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
border-color: $es-slate-300;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tree items container
|
||||
.category-tree .tree-items {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Tree item
|
||||
.tree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-xs $es-spacing-sm;
|
||||
cursor: pointer;
|
||||
transition: background $es-transition-fast;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $es-primary-light;
|
||||
|
||||
.tree-name {
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
.tree-checkbox {
|
||||
color: $es-primary;
|
||||
|
||||
i {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.6;
|
||||
|
||||
.tree-name {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
&.filtered-out {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.filter-match {
|
||||
background: $es-warning-light;
|
||||
|
||||
&.selected {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// All tree element styles nested under .category-tree for specificity
|
||||
.category-tree {
|
||||
// Tree indentation
|
||||
.tree-indent {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Tree toggle (expand/collapse)
|
||||
.tree-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
box-sizing: border-box;
|
||||
color: $es-text-secondary;
|
||||
flex-shrink: 0;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
&.tree-leaf {
|
||||
cursor: default;
|
||||
visibility: hidden;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
transition: transform $es-transition-fast;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-item.collapsed > .tree-toggle i {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
// Tree checkbox indicator - 12x12 to match PrestaShop admin standards
|
||||
.tree-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: 2px;
|
||||
background: $es-white;
|
||||
|
||||
i {
|
||||
font-size: 8px;
|
||||
opacity: 0;
|
||||
color: $es-white;
|
||||
transition: opacity $es-transition-fast;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-item.selected .tree-checkbox {
|
||||
background: $es-primary;
|
||||
border-color: $es-primary;
|
||||
|
||||
i {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Tree icon
|
||||
.tree-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
box-sizing: border-box;
|
||||
color: $es-text-muted;
|
||||
flex-shrink: 0;
|
||||
|
||||
i {
|
||||
font-size: 12px; // match visual weight of other icons
|
||||
}
|
||||
}
|
||||
|
||||
.tree-item.selected .tree-icon {
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
// Tree name
|
||||
.tree-name {
|
||||
flex: 1;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-primary;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Tree product/page count with preview
|
||||
.tree-count {
|
||||
@include count-badge($es-primary);
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
padding: 0 $es-spacing-sm;
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
&.clickable {
|
||||
&.loading {
|
||||
pointer-events: none;
|
||||
|
||||
i {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover-open {
|
||||
background: color.adjust($es-primary, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Select children button - positioned on the left next to toggle
|
||||
.btn-select-children {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
box-sizing: border-box;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
opacity: 0.3;
|
||||
transition: all $es-transition-fast;
|
||||
flex-shrink: 0;
|
||||
|
||||
i {
|
||||
font-size: 14px; // larger to visually match other icons
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $es-primary;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-item:hover .btn-select-children {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
// Tree badge (inactive, etc.)
|
||||
.tree-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.125rem $es-spacing-xs;
|
||||
font-size: 9px;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
border-radius: $es-radius-sm;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.inactive {
|
||||
color: $es-warning;
|
||||
background: $es-warning-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Tree children container
|
||||
.tree-children {
|
||||
display: block;
|
||||
|
||||
&.filter-expanded {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-item.collapsed + .tree-children {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Filtering - must be inside .category-tree for specificity
|
||||
.tree-item.filtered-out {
|
||||
display: none !important;
|
||||
}
|
||||
} // end .category-tree
|
||||
|
||||
// Loading/empty/error states
|
||||
.category-tree .tree-loading,
|
||||
.category-tree .dropdown-empty,
|
||||
.category-tree .dropdown-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $es-spacing-xl;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
|
||||
i {
|
||||
margin-right: $es-spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.category-tree .dropdown-error {
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
// Tree view mode in dropdown
|
||||
.target-search-dropdown.view-tree {
|
||||
.dropdown-results {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.category-tree {
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
.tree-items {
|
||||
max-height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
/**
|
||||
* Validation Toast Component
|
||||
* Error notifications for selection conflicts
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Validation error toast
|
||||
.es-validation-toast {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-md;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-danger;
|
||||
border-left: 4px solid $es-danger;
|
||||
border-radius: $es-radius-md;
|
||||
box-shadow: $es-shadow-lg;
|
||||
max-width: 400px;
|
||||
animation: es-toast-slide-in 0.2s ease-out;
|
||||
|
||||
.es-toast-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-danger;
|
||||
flex-shrink: 0;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.es-toast-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.es-toast-title {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-danger;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.es-toast-message {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-secondary;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.es-toast-close {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
flex-shrink: 0;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes es-toast-slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -1,281 +0,0 @@
|
||||
/**
|
||||
* Value Picker Component
|
||||
* Search boxes, input types, range inputs
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
|
||||
// Value picker container
|
||||
.value-picker {
|
||||
padding: $es-spacing-sm 0;
|
||||
|
||||
&[style*="display: none"],
|
||||
&[style*="display:none"] {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.include-picker,
|
||||
.exclude-picker {
|
||||
// Section-specific picker styles
|
||||
}
|
||||
|
||||
// Entity search box
|
||||
.entity-search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-xs;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:focus-within {
|
||||
border-color: $es-primary;
|
||||
box-shadow: 0 0 0 2px rgba($es-primary, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
input.entity-search-input,
|
||||
input.entity-search-input[type="text"] {
|
||||
@include input-reset;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto !important;
|
||||
max-width: none !important;
|
||||
padding: 0.375rem;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-primary;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&::placeholder {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $es-primary;
|
||||
|
||||
i {
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.range-min-input,
|
||||
.range-max-input {
|
||||
@include input-base;
|
||||
width: 100px;
|
||||
padding: $es-spacing-sm;
|
||||
text-align: center;
|
||||
font-size: $es-font-size-sm;
|
||||
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.range-separator {
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
|
||||
.btn-add-range {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: $es-white;
|
||||
background: $es-primary;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-hover;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Multi-range container
|
||||
.multi-range-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// Date range box
|
||||
.date-range-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.date-from-input,
|
||||
.date-to-input {
|
||||
@include input-base;
|
||||
width: 140px;
|
||||
padding: $es-spacing-sm;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
// Multi-select tiles
|
||||
.multi-select-tiles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.tile-option {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
color: $es-text-muted;
|
||||
background: transparent;
|
||||
border: 1px dashed $es-border-color;
|
||||
border-radius: 100px; // Pill shape
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-normal;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: $es-text-secondary;
|
||||
border-color: $es-slate-400;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $es-primary;
|
||||
background: $es-primary-light;
|
||||
border: 1px solid $es-primary;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 11px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.selected i {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tile-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Select input box
|
||||
.select-input-box {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.select-value-input {
|
||||
@include input-base;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
font-size: $es-font-size-sm;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
// Boolean input box
|
||||
.boolean-input-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-success-light;
|
||||
color: $es-success-dark;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
|
||||
.boolean-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
|
||||
&::before {
|
||||
content: '\2713';
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
// Condition match count badge
|
||||
.condition-match-count {
|
||||
@include count-badge($es-primary);
|
||||
margin-left: $es-spacing-sm;
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;
|
||||
@@ -1 +0,0 @@
|
||||
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;
|
||||
@@ -1,161 +0,0 @@
|
||||
/**
|
||||
* Form Integration Styles
|
||||
* Handles PrestaShop admin form layout overrides
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
|
||||
// Base border reset for all entity-selector elements
|
||||
.target-conditions-trait,
|
||||
.target-conditions-trait *,
|
||||
.entity-selector-trait,
|
||||
.entity-selector-trait *,
|
||||
.method-dropdown-menu,
|
||||
.method-dropdown-menu *,
|
||||
.target-preview-popover,
|
||||
.target-preview-popover * {
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
border-color: $es-border-color;
|
||||
}
|
||||
|
||||
// Full-width form group override using :has()
|
||||
// Excludes .layout-form-group which uses standard PrestaShop form layout
|
||||
.form-group:has(.entity-selector-trait:not(.layout-form-group)),
|
||||
.form-group:has(.target-conditions-trait:not(.layout-form-group)),
|
||||
.form-group:has(.condition-trait:not(.layout-form-group)) {
|
||||
display: block;
|
||||
|
||||
> .control-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .col-lg-8 {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-left: $es-spacing-md;
|
||||
padding-right: $es-spacing-md;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback class for browsers without :has() support
|
||||
.form-group.condition-trait-fullwidth {
|
||||
display: block;
|
||||
|
||||
> .control-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .col-lg-8 {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-left: $es-spacing-md;
|
||||
padding-right: $es-spacing-md;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
// SAFEGUARD: Force label visibility for form-group layout widgets
|
||||
// This overrides any conflicting rules (including fallback class rules)
|
||||
// when the widget has layout-form-group class indicating standard form integration
|
||||
.form-group:has(.layout-form-group) > .control-label {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
// Dropdown overflow fix
|
||||
// When dropdown is open, parent containers must allow overflow
|
||||
.panel:has(.target-search-dropdown.show),
|
||||
.card:has(.target-search-dropdown.show),
|
||||
.form-wrapper:has(.target-search-dropdown.show),
|
||||
.panel-body:has(.target-search-dropdown.show),
|
||||
.card-body:has(.target-search-dropdown.show),
|
||||
.form-group:has(.target-search-dropdown.show),
|
||||
.col-lg-8:has(.target-search-dropdown.show),
|
||||
.col-lg-12:has(.target-search-dropdown.show) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
// Target conditions wrapper hierarchy overflow fix
|
||||
.target-conditions-trait:has(.target-search-dropdown.show),
|
||||
.entity-selector-trait:has(.target-search-dropdown.show),
|
||||
.condition-trait-body:has(.target-search-dropdown.show),
|
||||
.target-block-content:has(.target-search-dropdown.show),
|
||||
.target-block-groups:has(.target-search-dropdown.show),
|
||||
.target-group:has(.target-search-dropdown.show),
|
||||
.target-group-body:has(.target-search-dropdown.show),
|
||||
.target-search-wrapper:has(.target-search-dropdown.show) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Embedded Layout
|
||||
// =============================================================================
|
||||
// Use .layout-embedded for entity selectors nested inside other components
|
||||
// Removes outer wrapper styling to avoid redundant borders/backgrounds
|
||||
|
||||
.target-conditions-trait.layout-embedded,
|
||||
.entity-selector-trait.layout-embedded {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
// Remove padding from groups container when embedded
|
||||
.groups-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Remove block body padding
|
||||
.block-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Remove block footer border when embedded
|
||||
.block-footer {
|
||||
border-top: none;
|
||||
padding: $es-spacing-sm 0 0;
|
||||
}
|
||||
|
||||
// Simplify selection group when embedded - single thin border only
|
||||
.selection-group {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-slate-200;
|
||||
border-radius: $es-radius-md;
|
||||
|
||||
// Lighter group header in embedded mode
|
||||
.group-header {
|
||||
background: $es-slate-50;
|
||||
border-bottom-color: $es-slate-200;
|
||||
padding: $es-spacing-xs $es-spacing-sm;
|
||||
border-radius: $es-radius-md $es-radius-md 0 0;
|
||||
}
|
||||
|
||||
// Reduce group body padding (slightly more than $es-spacing-sm for readability)
|
||||
.group-body {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
// Reduce group-include section padding
|
||||
.group-include {
|
||||
padding: $es-spacing-xs;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// Smaller modifiers section
|
||||
.group-modifiers {
|
||||
padding: $es-spacing-xs $es-spacing-sm;
|
||||
margin: $es-spacing-sm (-$es-spacing-sm) (-$es-spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
// Empty state - smaller padding
|
||||
.groups-empty-state {
|
||||
padding: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Smaller add group button
|
||||
.btn-add-group {
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: $es-font-size-xs;
|
||||
}
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
/**
|
||||
* Responsive Styles
|
||||
* Media query adjustments for different screen sizes
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
|
||||
// Tablet and below
|
||||
@media (max-width: 991px) {
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
.condition-trait-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.trait-header-right {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.target-block-tabs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile
|
||||
@media (max-width: 767px) {
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
.target-block-tab {
|
||||
padding: $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
}
|
||||
|
||||
.target-group-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.target-search-dropdown {
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-results-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// High-resolution displays
|
||||
@media (min-width: 1600px) {
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
.dropdown-results-grid.view-grid-3 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;
|
||||
@@ -1,33 +0,0 @@
|
||||
/**
|
||||
* Entity Selector Styles
|
||||
* @package prestashop-entity-selector
|
||||
* @version 2.0.0
|
||||
*
|
||||
* Compiles to: assets/css/admin/entity-selector.css
|
||||
*/
|
||||
|
||||
// Foundation
|
||||
@use 'variables' as *;
|
||||
@use 'mixins' as *;
|
||||
|
||||
// Layouts
|
||||
@use 'layouts/form-integration';
|
||||
@use 'layouts/responsive';
|
||||
|
||||
// Components
|
||||
@use 'components/entity-selector';
|
||||
@use 'components/entity-item'; // Shared base for chips and list items
|
||||
@use 'components/dropdown';
|
||||
@use 'components/chips';
|
||||
@use 'components/groups';
|
||||
@use 'components/value-picker';
|
||||
@use 'components/modal';
|
||||
@use 'components/list-preview';
|
||||
@use 'components/schedule';
|
||||
@use 'components/tips';
|
||||
@use 'components/condition-trait';
|
||||
@use 'components/combinations';
|
||||
@use 'components/method-dropdown';
|
||||
@use 'components/tooltip';
|
||||
@use 'components/tree';
|
||||
@use 'components/validation';
|
||||
Reference in New Issue
Block a user