From 25c5cff3defed353b59f1096c00c0e8715ff377d Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Tue, 29 Jun 2021 15:06:09 +0530
Subject: [PATCH] fix: expanded node group interactions and visibility

---
 .../organizational_chart.js                   | 23 +++++++++++++++----
 erpnext/public/scss/organizational_chart.scss |  9 +++++++-
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.js b/erpnext/hr/page/organizational_chart/organizational_chart.js
index edaf46162e..f693cf6ba6 100644
--- a/erpnext/hr/page/organizational_chart/organizational_chart.js
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.js
@@ -486,6 +486,13 @@ class OrgChartMobile {
 				if (company.get_value() && me.company != company.get_value()) {
 					me.company = company.get_value();
 
+					if (me.$sibling_group)
+						me.$sibling_group.remove();
+
+					// setup sibling group wrapper
+					me.$sibling_group = $(`<div class="sibling-group mt-4 mb-4"></div>`);
+					me.page.main.append(me.$sibling_group);
+
 					if (me.$hierarchy)
 						me.$hierarchy.remove();
 
@@ -541,6 +548,12 @@ class OrgChartMobile {
 		this.set_selected_node(node);
 		this.show_active_path(node);
 
+		if (this.$sibling_group) {
+			const sibling_parent = this.$sibling_group.find('.node-group').attr('data-parent');
+			if (node.parent_id !== sibling_parent)
+				this.$sibling_group.empty();
+		}
+
 		if (node.expandable && !node.expanded) {
 			return this.load_children(node);
 		}
@@ -719,8 +732,6 @@ class OrgChartMobile {
 
 			if (collapsed)
 				$node_group.addClass('collapsed');
-			else
-				$node_group.addClass('mb-4');
 
 			return $node_group;
 		}
@@ -746,13 +757,15 @@ class OrgChartMobile {
 			() => this.get_child_nodes(node_object.parent_id, node_object.id),
 			(child_nodes) => this.get_node_group(child_nodes, node_object.parent_id, false),
 			(node_group) => {
-				this.$hierarchy.empty().append(node_group) },
+				if (node_group)
+					this.$sibling_group.empty().append(node_group);
+			},
 			() => this.setup_node_group_action(),
 			() => {
-				this.$hierarchy.append(`
+				this.$hierarchy.empty().append(`
 					<li class="level"></li>
 				`);
-				this.$hierarchy.append(node);
+				this.$hierarchy.find('.level').append(node);
 				this.expand_node(node_object);
 			}
 		]);
diff --git a/erpnext/public/scss/organizational_chart.scss b/erpnext/public/scss/organizational_chart.scss
index b6d50a0470..6012c01573 100644
--- a/erpnext/public/scss/organizational_chart.scss
+++ b/erpnext/public/scss/organizational_chart.scss
@@ -215,7 +215,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding-top: 30px;
+	padding-top: 10px;
 	padding-left: 0px;
 }
 
@@ -250,6 +250,7 @@
 
 .collapsed-level {
 	margin-bottom: 16px;
+	width: 18rem;
 }
 
 .node-group {
@@ -281,4 +282,10 @@
 .node-group.collapsed {
 	width: 5rem;
 	margin-left: 12px;
+}
+
+.sibling-group {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
\ No newline at end of file