fix(Hierarchy Chart): check if company is set before loading children (#38985)

* fix(Org Chart): check if company is set before loading children

* refactor: avoid assigning undefined values, use empty strings, null instead

* fix: returning to org chart view from employee master does not render chart

- the check for company field is truthy from the employee doctype, so it does not render company field again. Explicitly check for company field on the same page

* fix(Org Chart Mobile): check if company is set before loading children

erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js

@@ -68,7 +68,7 @@ erpnext.HierarchyChart = class {
 
 	show() {
 		this.setup_actions();
-		if ($(`[data-fieldname="company"]`).length) return;
+		if (this.page.main.find('[data-fieldname="company"]').length) return;
 		let me = this;
 
 		let company = this.page.add_field({
@@ -80,7 +80,7 @@ erpnext.HierarchyChart = class {
 			only_select: true,
 			reqd: 1,
 			change: () => {
-				me.company = undefined;
+				me.company = '';
 				$('#hierarchy-chart-wrapper').remove();
 
 				if (company.get_value()) {
@@ -219,8 +219,8 @@ erpnext.HierarchyChart = class {
 			}
 		}).then(r => {
 			if (r.message.length) {
-				let expand_node = undefined;
-				let node = undefined;
+				let expand_node;
+				let node;
 
 				$.each(r.message, (_i, data) => {
 					if ($(`[id="${data.id}"]`).length)
@@ -229,7 +229,7 @@ erpnext.HierarchyChart = class {
 					node = new me.Node({
 						id: data.id,
 						parent: $('<li class="child-node"></li>').appendTo(me.$hierarchy.find('.node-children')),
-						parent_id: undefined,
+						parent_id: '',
 						image: data.image,
 						name: data.name,
 						title: data.title,
@@ -286,6 +286,10 @@ erpnext.HierarchyChart = class {
 	}
 
 	load_children(node, deep=false) {
+		if (!this.company) {
+			frappe.throw(__('Please select a company first.'));
+		}
+
 		if (!deep) {
 			frappe.run_serially([
 				() => this.get_child_nodes(node.id),
@@ -367,8 +371,8 @@ erpnext.HierarchyChart = class {
 	}
 
 	render_children_of_all_nodes(data_list) {
-		let entry = undefined;
-		let node = undefined;
+		let entry;
+		let node;
 
 		while (data_list.length) {
 			// to avoid overlapping connectors
@@ -423,7 +427,7 @@ erpnext.HierarchyChart = class {
 			title: data.title,
 			expandable: data.expandable,
 			connections: data.connections,
-			children: undefined
+			children: null,
 		});
 	}
 
@@ -519,7 +523,7 @@ erpnext.HierarchyChart = class {
 	collapse_previous_level_nodes(node) {
 		let node_parent = $(`[id="${node.parent_id}"]`);
 		let previous_level_nodes = node_parent.parent().parent().children('li');
-		let node_card = undefined;
+		let node_card;
 
 		previous_level_nodes.each(function() {
 			node_card = $(this).find('.node-card');
@@ -582,12 +586,12 @@ erpnext.HierarchyChart = class {
 		level.nextAll('li').remove();
 
 		let nodes = level.find('.node-card');
-		let node_object = undefined;
+		let node_object;
 
 		$.each(nodes, (_i, element) => {
 			node_object = this.nodes[element.id];
 			node_object.expanded = 0;
-			node_object.$children = undefined;
+			node_object.$children = null;
 		});
 
 		nodes.removeClass('collapsed active-path');

erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js

@@ -59,8 +59,8 @@ erpnext.HierarchyChartMobile = class {
 	}
 
 	show() {
+		if (this.page.main.find('[data-fieldname="company"]').length) return;
 		let me = this;
-		if ($(`[data-fieldname="company"]`).length) return;
 
 		let company = this.page.add_field({
 			fieldtype: 'Link',
@@ -71,7 +71,7 @@ erpnext.HierarchyChartMobile = class {
 			only_select: true,
 			reqd: 1,
 			change: () => {
-				me.company = undefined;
+				me.company = '';
 
 				if (company.get_value() && me.company != company.get_value()) {
 					me.company = company.get_value();
@@ -154,7 +154,7 @@ erpnext.HierarchyChartMobile = class {
 					return new me.Node({
 						id: data.id,
 						parent: root_level,
-						parent_id: undefined,
+						parent_id: '',
 						image: data.image,
 						name: data.name,
 						title: data.title,
@@ -174,7 +174,7 @@ erpnext.HierarchyChartMobile = class {
 
 		if (this.$sibling_group) {
 			const sibling_parent = this.$sibling_group.find('.node-group').attr('data-parent');
-			if (node.parent_id !== undefined && node.parent_id != sibling_parent)
+			if (node.parent_id != '' && node.parent_id != sibling_parent)
 				this.$sibling_group.empty();
 		}
 
@@ -225,6 +225,10 @@ erpnext.HierarchyChartMobile = class {
 	}
 
 	load_children(node) {
+		if (!this.company) {
+			frappe.throw(__('Please select a company first'));
+		}
+
 		frappe.run_serially([
 			() => this.get_child_nodes(node.id),
 			(child_nodes) => this.render_child_nodes(node, child_nodes)
@@ -281,7 +285,7 @@ erpnext.HierarchyChartMobile = class {
 			title: data.title,
 			expandable: data.expandable,
 			connections: data.connections,
-			children: undefined
+			children: null
 		});
 	}
 
@@ -291,7 +295,7 @@ erpnext.HierarchyChartMobile = class {
 
 		const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 
-		let connector = undefined;
+		let connector = null;
 
 		if ($(`[id="${parent_id}"]`).hasClass('active')) {
 			connector = this.get_connector_for_active_node(parent_node, child_node);
@@ -377,7 +381,7 @@ erpnext.HierarchyChartMobile = class {
 		let node_element = $(`[id="${node.id}"]`);
 
 		node_element.click(function() {
-			let el = undefined;
+			let el = null;
 
 			if (node.is_root) {
 				el = $(this).detach();
@@ -411,7 +415,7 @@ erpnext.HierarchyChartMobile = class {
 
 		$('.node-group').on('click', function() {
 			let parent = $(this).attr('data-parent');
-			if (parent === 'undefined') {
+			if (parent == '') {
 				me.setup_hierarchy();
 				me.render_root_nodes();
 			} else {
@@ -427,7 +431,7 @@ erpnext.HierarchyChartMobile = class {
 
 		let node_object = this.nodes[node.id];
 		node_object.expanded = 0;
-		node_object.$children = undefined;
+		node_object.$children = null;
 		this.nodes[node.id] = node_object;
 	}
 
@@ -484,7 +488,7 @@ erpnext.HierarchyChartMobile = class {
 
 		node.removeClass('active-child active-path');
 		node_object.expanded = 0;
-		node_object.$children = undefined;
+		node_object.$children = null;
 		this.nodes[node.id] = node_object;
 
 		// show parent's siblings and expand parent node
@@ -523,7 +527,7 @@ erpnext.HierarchyChartMobile = class {
 		current_node.removeClass('active-child active-path');
 
 		node_object.expanded = 0;
-		node_object.$children = undefined;
+		node_object.$children = null;
 
 		level.empty().append(current_node);
 	}