diff --git a/myproject/products/static/products/js/catalog.js b/myproject/products/static/products/js/catalog.js index 636e3ff..bc40808 100644 --- a/myproject/products/static/products/js/catalog.js +++ b/myproject/products/static/products/js/catalog.js @@ -13,8 +13,8 @@ document.addEventListener('DOMContentLoaded', function() { // ======================================== document.querySelectorAll('.category-header').forEach(header => { header.addEventListener('click', function(e) { - // Игнорируем клик по редактируемому полю - if (e.target.classList.contains('category-name-editable') || + // Игнорируем клик по кнопке переименования и полю ввода + if (e.target.classList.contains('category-rename-btn') || e.target.classList.contains('category-name-input')) { return; } @@ -120,17 +120,20 @@ document.addEventListener('DOMContentLoaded', function() { } // ======================================== - // Inline-редактирование названий категорий + // Inline-редактирование названий категорий (через иконку карандаша) // ======================================== - document.querySelectorAll('.category-name-editable').forEach(nameSpan => { - nameSpan.addEventListener('click', function(e) { + document.querySelectorAll('.category-rename-btn').forEach(btn => { + btn.addEventListener('click', function(e) { e.stopPropagation(); - // Уже редактируется? - if (this.querySelector('input')) return; - const categoryId = this.dataset.categoryId; - const currentName = this.textContent.trim(); + const header = this.closest('.category-header'); + const nameSpan = header.querySelector('.category-name'); + + // Уже редактируется? + if (nameSpan.querySelector('input')) return; + + const currentName = nameSpan.textContent.trim(); // Создаем input const input = document.createElement('input'); @@ -140,9 +143,9 @@ document.addEventListener('DOMContentLoaded', function() { input.style.cssText = 'width: 100%; border: 1px solid #0d6efd; border-radius: 3px; padding: 2px 6px; font-size: inherit; outline: none;'; // Сохраняем оригинальный текст - this.dataset.originalName = currentName; - this.textContent = ''; - this.appendChild(input); + nameSpan.dataset.originalName = currentName; + nameSpan.textContent = ''; + nameSpan.appendChild(input); input.focus(); input.select(); @@ -156,7 +159,7 @@ document.addEventListener('DOMContentLoaded', function() { return; } - if (newName === this.dataset.originalName) { + if (newName === nameSpan.dataset.originalName) { // Название не изменилось cancelEdit(); return; @@ -180,7 +183,7 @@ document.addEventListener('DOMContentLoaded', function() { if (data.success) { // Успешно сохранено - this.textContent = data.name; + nameSpan.textContent = data.name; } else { // Ошибка alert(data.error || 'Ошибка при сохранении'); @@ -195,7 +198,7 @@ document.addEventListener('DOMContentLoaded', function() { // Функция отмены const cancelEdit = () => { - this.textContent = this.dataset.originalName; + nameSpan.textContent = nameSpan.dataset.originalName; }; // Enter - сохранить diff --git a/myproject/products/templates/products/catalog.html b/myproject/products/templates/products/catalog.html index e16b8b0..6923adf 100644 --- a/myproject/products/templates/products/catalog.html +++ b/myproject/products/templates/products/catalog.html @@ -118,16 +118,21 @@ .catalog-list .catalog-item .card-body .mt-1 { margin-top: 0 !important; } - /* Inline-редактирование названий категорий */ - .category-name-editable { - cursor: text; + /* Кнопка переименования категории */ + .category-rename-btn { + opacity: 0; + cursor: pointer; + color: #6c757d; + font-size: 0.75rem; padding: 2px 4px; - margin: -2px -4px; - border-radius: 3px; - transition: background-color 0.15s; + transition: opacity 0.2s, color 0.15s; } - .category-name-editable:hover { - background-color: #e7f1ff; + .category-header:hover .category-rename-btn { + opacity: 0.5; + } + .category-rename-btn:hover { + opacity: 1 !important; + color: #0d6efd; } {% endblock %} diff --git a/myproject/products/templates/products/catalog_tree_node.html b/myproject/products/templates/products/catalog_tree_node.html index 1e1fcd0..123dc98 100644 --- a/myproject/products/templates/products/catalog_tree_node.html +++ b/myproject/products/templates/products/catalog_tree_node.html @@ -10,12 +10,13 @@ {% endif %} - {{ node.category.name }} + {{ node.category.name }} {% with products_count=node.category.products.count kits_count=node.category.kits.count %} {% if products_count or kits_count %} {{ products_count|add:kits_count }} {% endif %} {% endwith %} + {% if node.children %}