Sub and Sub Sub Tabs works well
This commit is contained in:
parent
9fc4ad8c23
commit
587ab6edf5
|
|
@ -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,7 +105,6 @@ 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>");
|
||||
|
|
@ -46,23 +113,15 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
|
|||
|
||||
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);
|
||||
|
||||
subtabClone.attr("data-parent-id", tabContentId); // Присваиваем parent-id
|
||||
|
||||
subtabContainer.append(subtabClone); // Добавляем к контейнеру
|
||||
subtabElement.remove(); // Удаляем оригинал
|
||||
|
||||
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");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -103,64 +162,42 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
|
|||
|
||||
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})`);
|
||||
|
||||
// Убедиться, что родительский таб остается активным
|
||||
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"); // Убираем активные классы с других субтабов
|
||||
$(".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();
|
||||
// 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();
|
||||
|
||||
const clickedSubsubtab = $(this);
|
||||
const subsubtabId = clickedSubsubtab.find("a").attr("aria-controls");
|
||||
|
||||
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);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue