Subtabs are in perfect state, with perfect visual, but no sub-subtabs

custom_subtabs/public/css/custom_subtabs.css

@@ -1,25 +1,39 @@
-/* Main tab styling */
+.sub-tab-container {
-.nav-item.active {
+    margin: 0 !important;
-    border-bottom: 2px solid #171717 !important;
+    padding: 0 !important;
-    font-weight: bold !important;
+    display: flex !important;
-    color: #171717 !important;
+    justify-content: flex-start !important;
+    border-bottom: 1px solid #ddd !important;
 }
 
-/* Subtab styling */
+.sub-tab-container .sub-tab {
-.sub-tab.active {
+    margin: 0 !important;
-    border-bottom: 2px solid #171717 !important;
+    background: none !important;
-    font-weight: bold !important;
+    border: none !important;
-    color: #171717 !important;
+    padding: 0 !important;
 }
 
-/* Sub-subtab styling */
+.sub-tab-container .sub-tab a {
-.sub-sub-tab.active {
+    text-decoration: none !important;
-    border-bottom: 2px solid #171717 !important;
+    display: block !important;
-    font-weight: bold !important;
+    padding: 10px 15px !important;
-    color: #171717 !important;
+    color: #555 !important;
+    border: none !important;
+    font-size: 14px !important;
+    font-weight: normal !important;
+    margin: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
 }
 
-/* Remove double line */
+.sub-tab-container .sub-tab a:hover {
-.nav-item, .sub-tab, .sub-sub-tab {
+    color: #000 !important; /* Цвет текста при наведении */
-    border-bottom: none !important;
+}
+
+.sub-tab-container .sub-tab.active a {
+    color: #000 !important; /* Черный текст для активного таба */
+    font-weight: 600 !important; /* Жирный шрифт */
+    border-bottom: 1px solid #000 !important; /* Черная активная полоска снизу */
+    background-color: transparent !important; /* Без фона */
+    border-radius: 0 !important; /* Без скруглений */
 }

custom_subtabs/public/js/custom_subtabs.js

@@ -20,55 +20,55 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
         tabs.each((index, tab) => {
             const tabLabel = $(tab).text().trim();
             console.log(`Processing subtabs for main tab: '${tabLabel}'`);
+
             if (subtabs[tabLabel]) {
-                let subtabContainer = $(tab).find(".sub-tab-container");
+                const tabContentId = $(tab).find("a").attr("aria-controls");
-                if (!subtabContainer.length) {
+                const tabContent = $(`#${tabContentId}`);
-                    subtabContainer = $("<ul class='sub-tab-container nav'></ul>");
+
-                    $(tab).append(subtabContainer);
+                if (!tabContent.length) {
+                    console.warn(`Content container not found for main tab: '${tabLabel}'`);
+                    return;
                 }
 
+                const sectionContainer = tabContent.find(".row.form-section.card-section.visible-section");
+
+                if (!sectionContainer.length) {
+                    console.warn(`Section container not found for main tab: '${tabLabel}'`);
+                    return;
+                }
+
+                sectionContainer.find('.section-body').remove(); // Удаление лишнего
+                let subtabContainer = sectionContainer.find('.sub-tab-container');
+                if (!subtabContainer.length) {
+                    subtabContainer = $("<div class='sub-tab-container nav' data-parent-id='" + tabContentId + "'></div>");
+                    sectionContainer.append(subtabContainer);
+                }            
+                
                 subtabs[tabLabel].forEach((subtab) => {
                     const subtabElement = tabs.filter((_, el) => $(el).text().trim() === subtab);
-
+                
                     if (subtabElement.length) {
                         const subtabClone = subtabElement.clone();
-                        subtabClone.addClass("sub-tab").find("a").removeAttr("href");
+                
-                        subtabContainer.append(subtabClone);
+                        // Убедимся, что мы добавляем только нужные классы
-                        subtabElement.remove();
+                        subtabClone.addClass("sub-tab"); // Добавляем только класс sub-tab
-
+                        // Удаляем только атрибут href, если он мешает работе
+                        subtabClone.find("a").removeAttr("href");
+                        
+                        subtabClone.attr("data-parent-id", tabContentId); // Присваиваем parent-id
+                
+                        subtabContainer.append(subtabClone); // Добавляем к контейнеру
+                        subtabElement.remove(); // Удаляем оригинал
+                
                         console.log(`Processed subtab: '${subtab}' under main tab '${tabLabel}'`);
-
-                        // Process sub-subtabs
-                        if (subtabs[subtab]) {
-                            let subsubtabContainer = subtabClone.find(".sub-sub-tab-container");
-                            if (!subsubtabContainer.length) {
-                                subsubtabContainer = $("<ul class='sub-sub-tab-container nav'></ul>");
-                                subtabClone.append(subsubtabContainer);
-                            }
-
-                            subtabs[subtab].forEach((subsubtab) => {
-                                const subsubtabElement = tabs.filter((_, el) => $(el).text().trim() === subsubtab);
-
-                                if (subsubtabElement.length) {
-                                    const subsubtabClone = subsubtabElement.clone();
-                                    subsubtabClone.addClass("sub-sub-tab").find("a").removeAttr("href");
-                                    subsubtabContainer.append(subsubtabClone);
-                                    subsubtabElement.remove();
-
-                                    console.log(`Processed sub-subtab: '${subsubtab}' under subtab '${subtab}'`);
-                                } else {
-                                    console.warn(`Sub-subtab element not found for '${subsubtab}'`);
-                                }
-                            });
-                        }
                     } else {
                         console.warn(`Subtab element not found for '${subtab}'`);
                     }
-                });
+                });                
             }
         });
 
-        // Handle tab activation
+        // Handle main tab activation
         $(".nav-item").on("click", function () {
             const clickedTab = $(this);
             const tabId = clickedTab.find("a").attr("aria-controls");
@@ -79,35 +79,67 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
             const tabContent = document.querySelector(`#${tabId}`);
             if (tabContent) {
                 $(tabContent).addClass("active show").css("display", "block");
+                console.log(`Main tab content displayed:`, tabContent.outerHTML);
             } else {
                 console.warn(`Tab content not found for ID: ${tabId}`);
             }
 
             $(".nav-item").removeClass("active");
             clickedTab.addClass("active");
+
+            // Show related subtabs without hiding any subtabs
+            $(".sub-tab-container").each(function () {
+                const containerParentId = $(this).attr("data-parent-id");
+                if (containerParentId === tabId) {
+                    console.log(`Displaying subtabs for parent tab: '${tabId}'`);
+                    $(this).find(".sub-tab").css("display", "block");
+                }
+            });
         });
 
         // Handle subtab activation
         $(".sub-tab").on("click", function (event) {
             event.stopPropagation();
-
+        
             const clickedSubtab = $(this);
             const subtabId = clickedSubtab.find("a").attr("aria-controls");
-
+            const parentTabId = clickedSubtab.attr("data-parent-id");
-            console.log(`Activating subtab: '${clickedSubtab.text().trim()}' (ID: ${subtabId})`);
+        
-
+            console.log(`Subtab clicked: '${clickedSubtab.text().trim()}' (ID: ${subtabId})`);
-            $(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none");
+        
+            // Убедиться, что родительский таб остается активным
+            const parentTabContent = document.querySelector(`#${parentTabId}`);
+            if (parentTabContent) {
+                $(parentTabContent)
+                    .addClass("active show")
+                    .css("display", "block")
+                    .attr("style", ""); // Сброс style
+                console.log(`Ensured parent tab content stays active for: '${parentTabId}', HTML:`, parentTabContent.outerHTML);
+            } else {
+                console.warn(`Parent tab content not found for ID: ${parentTabId}`);
+            }
+        
+            // Активировать субтаб
+            $(".sub-tab").removeClass("active"); // Убираем активные классы с других субтабов
+            clickedSubtab.addClass("active");
+            console.log(`Activated subtab: '${clickedSubtab.text().trim()}'`);
+        
+            // Отобразить контент субтаба
             const subtabContent = document.querySelector(`#${subtabId}`);
             if (subtabContent) {
-                $(subtabContent).addClass("active show").css("display", "block");
+                $(subtabContent)
+                    .addClass("active show")
+                    .css("display", "block");
+                console.log(`Displaying content for subtab: '${subtabId}', HTML:`, subtabContent.outerHTML);
             } else {
                 console.warn(`Subtab content not found for ID: ${subtabId}`);
             }
-
+        
-            $(".sub-tab").removeClass("active");
+            // Убедиться, что все субтабы остаются видимыми
-            clickedSubtab.addClass("active");
+            $(`.sub-tab-container[data-parent-id="${parentTabId}"] .sub-tab`).css("display", "block");
+            console.log(`Ensured all subtabs for parent tab '${parentTabId}' are visible.`);
         });
-
+        
         // Handle sub-subtab activation
         $(".sub-sub-tab").on("click", function (event) {
             event.stopPropagation();
@@ -117,16 +149,18 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
 
             console.log(`Activating sub-subtab: '${clickedSubsubtab.text().trim()}' (ID: ${subsubtabId})`);
 
+            $(".sub-sub-tab").removeClass("active");
+            clickedSubsubtab.addClass("active");
+            console.log(`Activated sub-subtab: '${clickedSubsubtab.text().trim()}'`);
+
             $(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none");
             const subsubtabContent = document.querySelector(`#${subsubtabId}`);
             if (subsubtabContent) {
                 $(subsubtabContent).addClass("active show").css("display", "block");
+                console.log(`Displaying content for sub-subtab: '${subsubtabId}', HTML:`, subsubtabContent.outerHTML);
             } else {
                 console.warn(`Sub-subtab content not found for ID: ${subsubtabId}`);
             }
-
-            $(".sub-sub-tab").removeClass("active");
-            clickedSubsubtab.addClass("active");
         });
     }, 500);
 };