Group subsections tabs for DHIS2 dataentry

data-entry-contentscript.js

/*
  Group subsections tabs (with names "section@subsection1", "section@subsection2") into a single tab "section"
  Save as a contentscript in DHIS2 app customJS/CSS (https://www.dhis2.org/download/appstore/customjscss.zip)
*/

var init = function(contentEl) {
	var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
	var displayingTabs = contentEl.children().size() > 0;
	var observer = new MutationObserver(function(mutations, observer) {
		if (!displayingTabs && contentEl.children().size() > 0) {
			groupSubsections({separator: "@"});
			displayingTabs = true;
		}
	});

	observer.observe(contentEl.get(0), {subtree: true, attributes: true});
};

var groupSubsections = function(options) {
	var separator = options.separator || "@";

	var groupsOfSections = _
		.chain($("#tabs li").toArray())
		.groupBy(el => $(el).text().split(separator)[0])
		.select((elements, name) => elements.length > 1)
		.value();

	groupsOfSections.forEach(sections => {
		var firstSection = $(sections[0]);
		var firstSectionContents = $("#" + firstSection.attr("aria-controls"));
		var title = $(firstSection).text().split(separator).slice(1).join(" ");
		firstSectionContents
			.wrapInner($("<div>"));
		firstSectionContents.
			.prepend($("<h2>").text(title));

		sections.slice(1).forEach(section => {
			var sectionContents = $("#" + $(section).attr("aria-controls"))
				.wrapInner($("<div>"));
			var title = $(section).text().split(separator).slice(1).join(" ");

			firstSectionContents
				.append($("<h2>").text(title))
				.append(sectionContents.children());
			section.remove();
		});

		var sectionName = firstSection.text().split(separator)[0];
		firstSection.children("a").text(sectionName);

		firstSectionContents.accordion();
	});
};

$(() => init($("#contentDiv")));