refactor: add options to chart
- method to return the node data
- wrapper for showing the hierarchy
diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.js b/erpnext/hr/page/organizational_chart/organizational_chart.js
index 0fe724c..ca98552 100644
--- a/erpnext/hr/page/organizational_chart/organizational_chart.js
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.js
@@ -8,10 +8,12 @@
$(wrapper).bind('show', () => {
frappe.require('/assets/js/hierarchy-chart.min.js', () => {
let organizational_chart = undefined;
+ let method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
+
if (frappe.is_mobile()) {
- organizational_chart = new erpnext.HierarchyChartMobile(wrapper);
+ organizational_chart = new erpnext.HierarchyChartMobile(wrapper, method);
} else {
- organizational_chart = new erpnext.HierarchyChart(wrapper);
+ organizational_chart = new erpnext.HierarchyChart(wrapper, method);
}
organizational_chart.show();
});
diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.py b/erpnext/hr/page/organizational_chart/organizational_chart.py
index ae91a91..f3aa138 100644
--- a/erpnext/hr/page/organizational_chart/organizational_chart.py
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.py
@@ -9,7 +9,7 @@
filters.append(['company', '=', company])
if not fields:
- fields = ['employee_name', 'name', 'reports_to', 'image', 'designation']
+ fields = ['employee_name as name', 'name as id', 'reports_to', 'image', 'designation as title']
if is_root:
parent = ''
@@ -27,9 +27,9 @@
for employee in employees:
is_expandable = frappe.get_all('Employee', filters=[
- ['reports_to', '=', employee.get('name')]
+ ['reports_to', '=', employee.get('id')]
])
- employee.connections = get_connections(employee.name)
+ employee.connections = get_connections(employee.id)
employee.expandable = 1 if is_expandable else 0
return employees
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
index fd84d4e..052f140 100644
--- a/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
+++ b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
@@ -1,8 +1,14 @@
erpnext.HierarchyChart = class {
-
- constructor(wrapper) {
+ /* Options:
+ - wrapper: wrapper for the hierarchy view
+ - method:
+ - to get the data for each node
+ - this method should return id, name, title, image, and connections for each node
+ */
+ constructor(wrapper, method) {
this.wrapper = $(wrapper);
this.page = wrapper.page;
+ this.method = method;
this.page.main.css({
'min-height': '300px',
@@ -114,8 +120,6 @@
}
render_root_node() {
- this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
-
let me = this;
frappe.call({
@@ -128,12 +132,12 @@
let data = r.message[0];
let root_node = new me.Node({
- id: data.name,
+ id: data.id,
parent: me.$hierarchy.find('.root-level'),
parent_id: undefined,
image: data.image,
- name: data.employee_name,
- title: data.designation,
+ name: data.name,
+ title: data.title,
expandable: true,
connections: data.connections,
is_root: true,
@@ -225,7 +229,7 @@
this.add_node(node, data);
setTimeout(() => {
- this.add_connector(node.id, data.name);
+ this.add_connector(node.id, data.id);
}, 250);
});
}
@@ -240,12 +244,12 @@
var $li = $('<li class="child-node"></li>');
return new this.Node({
- id: data.name,
+ id: data.id,
parent: $li.appendTo(node.$children),
parent_id: node.id,
image: data.image,
- name: data.employee_name,
- title: data.designation,
+ name: data.name,
+ title: data.title,
expandable: data.expandable,
connections: data.connections,
children: undefined
@@ -333,7 +337,7 @@
(child_nodes) => {
if (child_nodes) {
$.each(child_nodes, (_i, data) => {
- this.add_connector(node_parent, data.name);
+ this.add_connector(node_parent, data.id);
});
}
}
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
index c705681..1b8bc2e 100644
--- a/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
+++ b/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
@@ -1,8 +1,14 @@
erpnext.HierarchyChartMobile = class {
-
- constructor(wrapper) {
+ /* Options:
+ - wrapper: wrapper for the hierarchy view
+ - method:
+ - to get the data for each node
+ - this method should return id, name, title, image, and connections for each node
+ */
+ constructor(wrapper, method) {
this.wrapper = $(wrapper);
this.page = wrapper.page;
+ this.method = method;
this.page.main.css({
'min-height': '300px',
@@ -123,8 +129,6 @@
}
render_root_node() {
- this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
-
let me = this;
frappe.call({
@@ -137,12 +141,12 @@
let data = r.message[0];
let root_node = new me.Node({
- id: data.name,
+ id: data.id,
parent: me.$hierarchy.find('.root-level'),
parent_id: undefined,
image: data.image,
- name: data.employee_name,
- title: data.designation,
+ name: data.name,
+ title: data.title,
expandable: true,
connections: data.connections,
is_root: true,
@@ -249,10 +253,10 @@
if (child_nodes) {
$.each(child_nodes, (_i, data) => {
this.add_node(node, data);
- $(`#${data.name}`).addClass('active-child');
+ $(`#${data.id}`).addClass('active-child');
setTimeout(() => {
- this.add_connector(node.id, data.name);
+ this.add_connector(node.id, data.id);
}, 250);
});
}
@@ -266,12 +270,12 @@
var $li = $('<li class="child-node"></li>');
return new this.Node({
- id: data.name,
+ id: data.id,
parent: $li.appendTo(node.$children),
parent_id: node.id,
image: data.image,
- name: data.employee_name,
- title: data.designation,
+ name: data.name,
+ title: data.title,
expandable: data.expandable,
connections: data.connections,
children: undefined
@@ -418,7 +422,7 @@
${html}
<span class="avatar avatar-small">
<div class="avatar-frame standard-image avatar-extra-count"
- title="${extra_nodes.map(node => node.employee_name).join(', ')}">
+ title="${extra_nodes.map(node => node.name).join(', ')}">
+${extra_nodes.length}
</div>
</span>
@@ -443,7 +447,7 @@
}
get_avatar(node) {
- return `<span class="avatar avatar-small" title="${node.employee_name}">
+ return `<span class="avatar avatar-small" title="${node.name}">
<span class="avatar-frame" src=${node.image} style="background-image: url(${node.image})"></span>
</span>`
}