diff --git a/custom_subtabs/public/js/custom_subtabs.js b/custom_subtabs/public/js/custom_subtabs.js index 887674f..548fa66 100644 --- a/custom_subtabs/public/js/custom_subtabs.js +++ b/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 = $(""); 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"); // Добавляем только класс sub-tab - // Удаляем только атрибут href, если он мешает работе + subtabClone.addClass("sub-tab"); subtabClone.find("a").removeAttr("href"); - - subtabClone.attr("data-parent-id", tabContentId); // Присваиваем parent-id - - subtabContainer.append(subtabClone); // Добавляем к контейнеру - subtabElement.remove(); // Удаляем оригинал - + subtabClone.attr("data-parent-id", tabContentId); + + subtabContainer.append(subtabClone); + 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); - } else { - console.warn(`Tab content not found for ID: ${tabId}`); + console.log(`Activated main tab: '${tabId}' with content shown.`); } $(".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"); - - console.log(`Subtab clicked: '${clickedSubtab.text().trim()}' (ID: ${subtabId})`); - - // Убедиться, что родительский таб остается активным - 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"); // Убираем активные классы с других субтабов + const subtabName = clickedSubtab.text().trim(); + + console.log(`Subtab clicked: '${subtabName}' (ID: ${subtabId})`); + + $(".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"); - console.log(`Displaying content for subtab: '${subtabId}', HTML:`, subtabContent.outerHTML); - } else { - console.warn(`Subtab content not found for ID: ${subtabId}`); + + hideAllTabContents(); + + const subtabContent = $(`#${subtabId}`); + if (subtabContent.length) { + subtabContent.addClass("active show").css("display", "block"); + console.log(`Displaying content for subtab: '${subtabName}'`); } - - // Убедиться, что все субтабы остаются видимыми - $(`.sub-tab-container[data-parent-id="${parentTabId}"] .sub-tab`).css("display", "block"); - console.log(`Ensured all subtabs for parent tab '${parentTabId}' are visible.`); + + findParentAndShowSubtabs(subtabName); }); - - // Handle sub-subtab activation - $(".sub-sub-tab").on("click", function (event) { - event.stopPropagation(); - const clickedSubsubtab = $(this); - const subsubtabId = clickedSubsubtab.find("a").attr("aria-controls"); + // Debug log + 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})`); - - $(".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}`); - } - }); + console.log("Debug State:"); + console.log("Active Main Tab:", activeMainTab); + console.log("Active Subtabs:", activeSubTabs); + console.log("Visible Content:", visibleContent); + }, 2000); }, 500); };