fix(organizational-chart): show empty state when no data is available

Fixes #3940

Author: krishna-254

hrms/public/js/hierarchy-chart.bundle.js

@@ -1,3 +1,4 @@
 import "./hierarchy_chart/hierarchy_chart_desktop.js";
 import "./hierarchy_chart/hierarchy_chart_mobile.js";
 import "./templates/node_card.html";
+import "./templates/hierarchy_empty_state.html";

hrms/public/js/hierarchy_chart/hierarchy_chart_desktop.js

@@ -12,22 +12,12 @@ hrms.HierarchyChart = class {
 		this.method = method;
 		this.doctype = doctype;
 
-		this.setup_page_style();
 		this.page.main.addClass("frappe-card");
 
 		this.nodes = {};
 		this.setup_node_class();
 	}
 
-	setup_page_style() {
-		this.page.main.css({
-			"min-height": "300px",
-			"max-height": "700px",
-			overflow: "auto",
-			position: "relative",
-		});
-	}
-
 	setup_node_class() {
 		let me = this;
 		this.Node = class {
@@ -228,6 +218,15 @@ hrms.HierarchyChart = class {
 			})
 			.then((r) => {
 				if (r.message.length) {
+					me.page.body.find("#hierarchy-empty-root").remove();
+
+					me.page.main.css({
+						"min-height": "300px",
+						"max-height": "700px",
+						overflow: "auto",
+						position: "relative",
+					});
+
 					let expand_node;
 					let node;
 
@@ -255,6 +254,39 @@ hrms.HierarchyChart = class {
 					if (!expanded_view) {
 						me.expand_node(expand_node);
 					}
+				} else {
+					me.page.body.find("#hierarchy-empty-root").remove();
+					const empty_html = frappe.render_template("hierarchy_empty_state", {
+						doctype: me.doctype,
+						company: me.company,
+						can_create: frappe.model.can_create("Employee"),
+						device_type: "desktop",
+					});
+
+					$("#hierarchy-chart-wrapper").remove();
+					me.page.body.append(empty_html);
+
+					me.page.main.css({
+						"min-height": "100%",
+						"max-height": "100%",
+					});
+
+					(function () {
+						const root = document.getElementById("hierarchy-empty-root");
+						if (!root) return;
+						try {
+							const rect = root.getBoundingClientRect();
+							const windowHeight = window.innerHeight;
+							const height = Math.max(300, Math.floor(windowHeight - rect.top - 20));
+							root.style.height = height + "px";
+							root.style.overflow = "auto";
+							root.style.position = "relative";
+						} catch (e) {}
+					})();
+					me.page.body.find("#add-doc-btn").on("click", () => {
+						frappe.route_options = { company: me.company };
+						frappe.new_doc(me.doctype);
+					});
 				}
 			});
 	}

hrms/public/js/hierarchy_chart/hierarchy_chart_mobile.js

@@ -11,12 +11,6 @@ hrms.HierarchyChartMobile = class {
 		this.method = method;
 		this.doctype = doctype;
 
-		this.page.main.css({
-			"min-height": "300px",
-			"max-height": "600px",
-			overflow: "auto",
-			position: "relative",
-		});
 		this.page.main.addClass("frappe-card");
 
 		this.nodes = {};
@@ -155,6 +149,15 @@ hrms.HierarchyChartMobile = class {
 			})
 			.then((r) => {
 				if (r.message.length) {
+					me.page.body.find("#hierarchy-empty-root").remove();
+
+					me.page.main.css({
+						"min-height": "300px",
+						"max-height": "600px",
+						overflow: "auto",
+						position: "relative",
+					});
+
 					let root_level = me.$hierarchy.find(".root-level");
 					root_level.empty();
 
@@ -171,6 +174,40 @@ hrms.HierarchyChartMobile = class {
 							is_root: true,
 						});
 					});
+				} else {
+					me.page.body.find("#hierarchy-empty-root").remove();
+					me.page.main.css({
+						"min-height": "100%",
+						"max-height": "100%",
+						overflow: "auto",
+						position: "relative",
+					});
+
+					const empty = frappe.render_template("hierarchy_empty_state", {
+						doctype: me.doctype,
+						company: me.company,
+						can_create: frappe.model.can_create(me.doctype),
+						device_type: "mobile",
+					});
+
+					me.page.main.append(empty);
+
+					(function () {
+						const root = document.getElementById("hierarchy-empty-root");
+						if (!root) return;
+						try {
+							const rect = root.getBoundingClientRect();
+							const windowHeight = window.innerHeight;
+							const height = Math.max(300, Math.floor(windowHeight - rect.top - 20));
+							root.style.height = height + "px";
+							root.style.overflow = "auto";
+							root.style.position = "relative";
+						} catch (e) {}
+					})();
+					me.page.body.find("#add-doc-btn").on("click", () => {
+						frappe.route_options = { company: me.company };
+						frappe.new_doc(me.doctype);
+					});
 				}
 			});
 	}

hrms/public/js/templates/hierarchy_empty_state.html

@@ -0,0 +1,32 @@
+
+<div id="hierarchy-empty-root" class="text-muted flex flex-1 items-center justify-center align-center text-center">
+  <div class="">
+    <div class="empty-apps-state">
+      <svg class="icon icon-xl" style="stroke: var(--text-light);">
+        <use href="#icon-small-file"></use>
+      </svg>
+      <div class="mt-4 mb-2">
+        {{ __("You haven't created a {0} for {1} yet.", [__(doctype), __(company)]) }}
+      </div>
+
+      {% if can_create %}
+        {% if device_type == "desktop" %}
+          <button
+            class="btn btn-default btn-sm btn-new-doc hidden-xs"
+            id="add-doc-btn"
+          >
+            {{ __("Create a new {0}", [__(doctype)]) }}
+          </button>
+        {% else %}
+          <button
+            class="btn btn-primary btn-new-doc visible-xs"
+            id="add-doc-btn"
+          >
+            {{ __("Create {0}", [__(doctype)]) }}
+          </button>
+        {% endif %}
+      {% endif %}
+
+    </div>
+  </div>
+</div>