refactor: add options to chart
- method to return the node data - wrapper for showing the hierarchy
This commit is contained in:
Rucha Mahabal
parent
bcc998e8c2
commit
f15e8b7f5a
@ -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();
|
||||
});
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 = $('<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 @@ 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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 = $('<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 @@ erpnext.HierarchyChartMobile = class {
|
||||
${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 @@ erpnext.HierarchyChartMobile = class {
|
||||
}
|
||||
|
||||
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>`
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user