Sub and Sub Sub Tabs works well

custom_subtabs/public/js/custom_subtabs.js

@@ -16,6 +16,74 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
         const subtabs = hierarchy.subtabs || {};
         console.log("Subtabs:", subtabs);
 
+        // Function to show tab content
+        function showTabContent(tabId) {
+            const tabPane = document.getElementById(tabId);
+            if (tabPane) {
+                tabPane.style.display = 'block';
+                tabPane.classList.add('active', 'show');
+                console.log(`Tab content for '${tabId}' is now visible.`);
+            } else {
+                console.error(`Tab with ID '${tabId}' not found.`);
+            }
+        }
+
+        // Function to hide all tab contents
+        function hideAllTabContents() {
+            $(".form-tab-content > .tab-pane").each(function () {
+                $(this).removeClass("active show").css("display", "none");
+            });
+        }
+
+        // Function to handle showing/hiding subtabs and sub-subtabs
+        function findParentAndShowSubtabs(currentTabName) {
+            if (!currentTabName) return;
+
+            let parentTabName = null;
+
+            // Find the parent tab and its subtabs
+            for (const [mainTab, subtabsArray] of Object.entries(subtabs)) {
+                if (subtabsArray.includes(currentTabName)) {
+                    parentTabName = mainTab;
+                    break;
+                }
+            }
+
+            if (!parentTabName) {
+                console.log(`Parent tab not found for: ${currentTabName}`);
+                return;
+            }
+
+            console.log(`Parent tab: ${parentTabName}`);
+
+            // Show the subtabs for the parent tab
+            const parentSubtabs = subtabs[parentTabName] || [];
+            parentSubtabs.forEach((subtabName) => {
+                const subtabElement = $(`.nav-item:contains(${subtabName})`);
+                const subtabContentId = `item-${subtabName.toLowerCase().replace(/\s+/g, '_')}_tab`;
+                const subtabContent = $(`#${subtabContentId}`);
+
+                if (subtabElement.length) {
+                    subtabElement.css("display", "block");
+                    console.log(`Made subtab visible: ${subtabName}`);
+
+                    // If the current tab is the subtab, show its content
+                    if (subtabName === currentTabName) {
+                        subtabContent.addClass("active show").css("display", "block");
+                        console.log(`Displayed content for subtab: '${subtabName}'`);
+                    }
+                } else {
+                    console.warn(`Subtab element not found in DOM: '${subtabName}'`);
+                }
+            });
+
+            // Show the parent tab's content
+            showTabContent(`item-${parentTabName.toLowerCase().replace(/\s+/g, '_')}_tab`);
+
+            // Recursively handle the parent tab
+            findParentAndShowSubtabs(parentTabName);
+        }
+
         // Process subtabs
         tabs.each((index, tab) => {
             const tabLabel = $(tab).text().trim();
@@ -37,34 +105,25 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
                     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");
-                        // Убедимся, что мы добавляем только нужные классы
-                        subtabClone.addClass("sub-tab"); // Добавляем только класс sub-tab
-                        // Удаляем только атрибут href, если он мешает работе
                         subtabClone.find("a").removeAttr("href");
-                        
+                        subtabClone.attr("data-parent-id", tabContentId);
-                        subtabClone.attr("data-parent-id", tabContentId); // Присваиваем parent-id
+
-                
+                        subtabContainer.append(subtabClone);
-                        subtabContainer.append(subtabClone); // Добавляем к контейнеру
+                        subtabElement.remove();
-                        subtabElement.remove(); // Удаляем оригинал
-                
                         console.log(`Processed subtab: '${subtab}' under main tab '${tabLabel}'`);
-                    } else {
-                        console.warn(`Subtab element not found for '${subtab}'`);
                     }
-                });                
+                });
             }
         });
 
@@ -73,26 +132,26 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
             const clickedTab = $(this);
             const tabId = clickedTab.find("a").attr("aria-controls");
 
-            console.log(`Activating main tab: '${clickedTab.text().trim()}' (ID: ${tabId})`);
+            console.log(`Main tab clicked: '${clickedTab.text().trim()}' (ID: ${tabId})`);
+
+            hideAllTabContents();
 
-            $(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none");
             const tabContent = document.querySelector(`#${tabId}`);
             if (tabContent) {
                 $(tabContent).addClass("active show").css("display", "block");
-                console.log(`Main tab content displayed:`, tabContent.outerHTML);
+                console.log(`Activated main tab: '${tabId}' with content shown.`);
-            } 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");
+                    console.log(`Displaying subtabs for parent tab: '${tabId}'`);
+                } else {
+                    $(this).find(".sub-tab").css("display", "none");
                 }
             });
         });
@@ -100,67 +159,45 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
         // 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");
+            const subtabName = clickedSubtab.text().trim();
-        
+
-            console.log(`Subtab clicked: '${clickedSubtab.text().trim()}' (ID: ${subtabId})`);
+            console.log(`Subtab clicked: '${subtabName}' (ID: ${subtabId})`);
-        
+
-            // Убедиться, что родительский таб остается активным
+            $(".sub-tab").removeClass("active");
-            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()}'`);
+
-        
+            hideAllTabContents();
-            // Отобразить контент субтаба
+
-            const subtabContent = document.querySelector(`#${subtabId}`);
+            const subtabContent = $(`#${subtabId}`);
-            if (subtabContent) {
+            if (subtabContent.length) {
-                $(subtabContent)
+                subtabContent.addClass("active show").css("display", "block");
-                    .addClass("active show")
+                console.log(`Displaying content for subtab: '${subtabName}'`);
-                    .css("display", "block");
-                console.log(`Displaying content for subtab: '${subtabId}', HTML:`, subtabContent.outerHTML);
-            } else {
-                console.warn(`Subtab content not found for ID: ${subtabId}`);
             }
-        
+
-            // Убедиться, что все субтабы остаются видимыми
+            findParentAndShowSubtabs(subtabName);
-            $(`.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();
 
-            const clickedSubsubtab = $(this);
+        // Debug log
-            const subsubtabId = clickedSubsubtab.find("a").attr("aria-controls");
+        setInterval(() => {
+            const activeMainTab = $(".nav-item.active").text().trim();
+            const activeSubTabs = $(".sub-tab.active")
+                .map(function () {
+                    return $(this).text().trim();
+                })
+                .get();
+            const visibleContent = $(".form-tab-content > .tab-pane:visible")
+                .map(function () {
+                    return $(this).attr("id");
+                })
+                .get();
 
-            console.log(`Activating sub-subtab: '${clickedSubsubtab.text().trim()}' (ID: ${subsubtabId})`);
+            console.log("Debug State:");
-
+            console.log("Active Main Tab:", activeMainTab);
-            $(".sub-sub-tab").removeClass("active");
+            console.log("Active Subtabs:", activeSubTabs);
-            clickedSubsubtab.addClass("active");
+            console.log("Visible Content:", visibleContent);
-            console.log(`Activated sub-subtab: '${clickedSubsubtab.text().trim()}'`);
+        }, 2000);
-
-            $(".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}`);
-            }
-        });
     }, 500);
 };