From b9e02af74acf1b1813d868ed09fbbc6209b6b398 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Tue, 25 Nov 2025 00:37:41 +0300
Subject: [PATCH] Improve: Auto-expand parent category and clarify
 expand/collapse buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improvements to category tree UX:
- Auto-expand parent category after creating subcategory at any nesting level
- Recursive ancestor expansion using elegant DOM traversal with .closest()
- Smooth scroll to newly created category with visual feedback
- Replace icon buttons with text: "Развернуть все" / "Свернуть все"
- Eliminates confusion between "+" for adding category vs expanding tree

Technical implementation:
- URL parameter ?expand=<parent_id> to preserve state after page reload
- Recursive expandAncestors() function traverses up the DOM tree
- Uses :scope selector for precise parent-child relationship queries
- Auto-cleans URL parameter after expansion using history.replaceState()

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../products/static/products/js/catalog.js    | 66 ++++++++++++++++++-
 .../products/templates/products/catalog.html  |  8 +--
 2 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/myproject/products/static/products/js/catalog.js b/myproject/products/static/products/js/catalog.js
index d48eebc..122f20c 100644
--- a/myproject/products/static/products/js/catalog.js
+++ b/myproject/products/static/products/js/catalog.js
@@ -355,7 +355,12 @@ document.addEventListener('DOMContentLoaded', function() {
                 const data = await response.json();
 
                 if (data.success) {
-                    location.reload();
+                    // Если создали подкатегорию - сохраняем ID родителя для раскрытия после reload
+                    if (parentId) {
+                        location.href = `${window.location.pathname}?expand=${parentId}`;
+                    } else {
+                        location.reload();
+                    }
                 } else {
                     // Удаляем input ДО alert
                     inputContainer.remove();
@@ -401,6 +406,65 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
+    // ========================================
+    // Автоматическое раскрытие категории после создания подкатегории
+    // ========================================
+    const urlParams = new URLSearchParams(window.location.search);
+    const expandCategoryId = urlParams.get('expand');
+
+    if (expandCategoryId) {
+        // Находим целевую категорию
+        const targetNode = document.querySelector(`.category-node[data-category-id="${expandCategoryId}"]`);
+
+        if (targetNode) {
+            // Рекурсивно раскрываем всех предков (от корня до целевой категории)
+            function expandAncestors(node) {
+                // Ищем родительский .category-children контейнер
+                const parentChildrenContainer = node.closest('.category-children');
+
+                if (parentChildrenContainer) {
+                    // Раскрываем этот контейнер
+                    parentChildrenContainer.classList.remove('d-none');
+
+                    // Находим родительский .category-node
+                    const parentNode = parentChildrenContainer.closest('.category-node');
+
+                    if (parentNode) {
+                        // Раскрываем chevron родителя
+                        const toggle = parentNode.querySelector(':scope > .category-header > .category-toggle');
+                        if (toggle) {
+                            toggle.classList.remove('collapsed');
+                        }
+
+                        // Рекурсивно раскрываем предков выше
+                        expandAncestors(parentNode);
+                    }
+                }
+            }
+
+            // Раскрываем всех предков
+            expandAncestors(targetNode);
+
+            // Раскрываем children самой целевой категории
+            const childrenContainer = targetNode.querySelector(':scope > .category-children');
+            if (childrenContainer) {
+                childrenContainer.classList.remove('d-none');
+
+                const toggle = targetNode.querySelector(':scope > .category-header > .category-toggle');
+                if (toggle) {
+                    toggle.classList.remove('collapsed');
+                }
+            }
+
+            // Плавный скролл к целевой категории
+            targetNode.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+            // Очищаем URL от параметра expand
+            const cleanUrl = window.location.pathname + window.location.hash;
+            window.history.replaceState({}, document.title, cleanUrl);
+        }
+    }
+
     // Получение CSRF токена
     function getCsrfToken() {
         const cookieValue = document.cookie
diff --git a/myproject/products/templates/products/catalog.html b/myproject/products/templates/products/catalog.html
index bca7a44..1a033ca 100644
--- a/myproject/products/templates/products/catalog.html
+++ b/myproject/products/templates/products/catalog.html
@@ -151,11 +151,11 @@
             <div class="card shadow-sm border-0 mb-3">
                 <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
                     <strong><i class="bi bi-folder-tree text-primary"></i> Категории</strong>
-                    <div class="d-flex gap-2">
+                    <div class="d-flex gap-2 align-items-center">
                         <i class="bi bi-plus-circle text-success cursor-pointer" id="add-root-category-btn" title="Добавить категорию" style="font-size: 1.2rem; cursor: pointer;"></i>
-                        <div class="btn-group btn-group-sm">
-                            <button class="btn btn-outline-secondary btn-sm py-0" id="expand-all" title="Развернуть"><i class="bi bi-plus-square"></i></button>
-                            <button class="btn btn-outline-secondary btn-sm py-0" id="collapse-all" title="Свернуть"><i class="bi bi-dash-square"></i></button>
+                        <div class="d-flex gap-1">
+                            <button class="btn btn-outline-secondary btn-sm" id="expand-all" style="font-size: 0.75rem;">Развернуть</button>
+                            <button class="btn btn-outline-secondary btn-sm" id="collapse-all" style="font-size: 0.75rem;">Свернуть</button>
                         </div>
                     </div>
                 </div>