From f15e8b7f5a50cc686e3139b4aee63726a01f6413 Mon Sep 17 00:00:00 2001 From: Rucha Mahabal Date: Tue, 29 Jun 2021 21:26:47 +0530 Subject: [PATCH] refactor: add options to chart - method to return the node data - wrapper for showing the hierarchy --- .../organizational_chart.js | 6 ++-- .../organizational_chart.py | 6 ++-- .../hierarchy_chart_desktop.js | 28 +++++++++------- .../hierarchy_chart/hierarchy_chart_mobile.js | 32 +++++++++++-------- 4 files changed, 41 insertions(+), 31 deletions(-) diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.js b/erpnext/hr/page/organizational_chart/organizational_chart.js index 0fe724c78e..ca9855286c 100644 --- a/erpnext/hr/page/organizational_chart/organizational_chart.js +++ b/erpnext/hr/page/organizational_chart/organizational_chart.js @@ -8,10 +8,12 @@ frappe.pages['organizational-chart'].on_page_load = function(wrapper) { $(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 ae91a919b2..f3aa13897d 100644 --- a/erpnext/hr/page/organizational_chart/organizational_chart.py +++ b/erpnext/hr/page/organizational_chart/organizational_chart.py @@ -9,7 +9,7 @@ def get_children(parent=None, company=None, exclude_node=None, is_root=False, is 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 @@ def get_children(parent=None, company=None, exclude_node=None, is_root=False, is 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 fd84d4ea5c..052f140c13 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 @@ erpnext.HierarchyChart = class { } render_root_node() { - this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children'; - let me = this; frappe.call({ @@ -128,12 +132,12 @@ erpnext.HierarchyChart = class { 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 @@ erpnext.HierarchyChart = class { 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 @@ erpnext.HierarchyChart = class { var $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 @@ erpnext.HierarchyChart = class { (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 c705681438..1b8bc2e8e0 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 @@ erpnext.HierarchyChartMobile = class { } render_root_node() { - this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children'; - let me = this; frappe.call({ @@ -137,12 +141,12 @@ erpnext.HierarchyChartMobile = class { 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 @@ erpnext.HierarchyChartMobile = class { 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 @@ erpnext.HierarchyChartMobile = class { var $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 @@ erpnext.HierarchyChartMobile = class { ${html}
    + title="${extra_nodes.map(node => node.name).join(', ')}"> +${extra_nodes.length}
    @@ -443,7 +447,7 @@ erpnext.HierarchyChartMobile = class { } get_avatar(node) { - return ` + return ` ` }