chore: create separate files for Desktop and Mobile view and bundle assets
diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.js b/erpnext/hr/page/organizational_chart/organizational_chart.js
index efb367a..0fe724c 100644
--- a/erpnext/hr/page/organizational_chart/organizational_chart.js
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.js
@@ -5,927 +5,15 @@
single_column: true
});
- // let organizational_chart = undefined;
- // if (frappe.is_mobile()) {
- // organizational_chart = new OrgChartMobile(wrapper);
- // } else {
- // organizational_chart = new OrgChart(wrapper);
- // }
-
- let organizational_chart = new OrgChartMobile(wrapper);
- $(wrapper).bind('show', ()=> {
- organizational_chart.show();
- });
-};
-
-class OrgChart {
-
- constructor(wrapper) {
- this.wrapper = $(wrapper);
- this.page = wrapper.page;
-
- this.page.main.css({
- 'min-height': '300px',
- 'max-height': '600px',
- 'overflow': 'auto',
- 'position': 'relative'
- });
- this.page.main.addClass('frappe-card');
-
- this.nodes = {};
- this.setup_node_class();
- }
-
- setup_node_class() {
- let me = this;
- this.Node = class {
- constructor({
- id, parent, parent_id, image, name, title, expandable, connections, is_root // eslint-disable-line
- }) {
- // to setup values passed via constructor
- $.extend(this, arguments[0]);
-
- this.expanded = 0;
-
- me.nodes[this.id] = this;
- me.make_node_element(this);
- me.setup_node_click_action(this);
- }
- }
- }
-
- make_node_element(node) {
- let node_card = frappe.render_template('node_card', {
- id: node.id,
- name: node.name,
- title: node.title,
- image: node.image,
- parent: node.parent_id,
- connections: node.connections
- });
-
- node.parent.append(node_card);
- node.$link = $(`#${node.id}`);
- }
-
- show() {
- frappe.breadcrumbs.add('HR');
-
- let me = this;
- let company = this.page.add_field({
- fieldtype: 'Link',
- options: 'Company',
- fieldname: 'company',
- placeholder: __('Select Company'),
- default: frappe.defaults.get_default('company'),
- only_select: true,
- reqd: 1,
- change: () => {
- me.company = undefined;
-
- if (company.get_value() && me.company != company.get_value()) {
- me.company = company.get_value();
-
- // svg for connectors
- me.make_svg_markers()
-
- if (me.$hierarchy)
- me.$hierarchy.remove();
-
- // setup hierarchy
- me.$hierarchy = $(
- `<ul class="hierarchy">
- <li class="root-level level"></li>
- </ul>`);
-
- me.page.main.append(me.$hierarchy);
- me.render_root_node();
- }
- }
- });
-
- company.refresh();
- $(`[data-fieldname="company"]`).trigger('change');
- }
-
- make_svg_markers() {
- $('#arrows').remove();
-
- this.page.main.prepend(`
- <svg id="arrows" width="100%" height="100%">
- <defs>
- <marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
- <path d="M 0 0 L 10 5 L 0 10 z"></path>
- </marker>
- <marker id="arrowhead-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-300)">
- <path d="M 0 0 L 10 5 L 0 10 z"></path>
- </marker>
-
- <marker id="arrowstart-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-500)">
- <circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-500)"/>
- </marker>
- <marker id="arrowstart-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-300)">
- <circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-300)"/>
- </marker>
- </defs>
- <g id="connectors" fill="none">
- </g>
- </svg>`);
- }
-
- render_root_node() {
- this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
-
- let me = this;
-
- frappe.call({
- method: me.method,
- args: {
- company: me.company
- },
- callback: function(r) {
- if (r.message.length) {
- let data = r.message[0];
-
- let root_node = new me.Node({
- id: data.name,
- parent: me.$hierarchy.find('.root-level'),
- parent_id: undefined,
- image: data.image,
- name: data.employee_name,
- title: data.designation,
- expandable: true,
- connections: data.connections,
- is_root: true,
- });
-
- me.expand_node(root_node);
- }
- }
- })
- }
-
- expand_node(node) {
- let is_sibling = this.selected_node && this.selected_node.parent_id === node.parent_id;
- this.set_selected_node(node);
- this.show_active_path(node);
- this.collapse_previous_level_nodes(node);
-
- // since the previous node collapses, all connections to that node need to be rebuilt
- // if a sibling node is clicked, connections don't need to be rebuilt
- if (!is_sibling) {
- // rebuild outgoing connections
- this.refresh_connectors(node.parent_id);
-
- // rebuild incoming connections
- let grandparent = $(`#${node.parent_id}`).attr('data-parent');
- this.refresh_connectors(grandparent)
- }
-
- if (node.expandable && !node.expanded) {
- return this.load_children(node);
- }
- }
-
- collapse_node() {
- if (this.selected_node.expandable) {
- this.selected_node.$children.hide();
- $(`path[data-parent="${this.selected_node.id}"]`).hide();
- this.selected_node.expanded = false;
- }
- }
-
- show_active_path(node) {
- // mark node parent on active path
- $(`#${node.parent_id}`).addClass('active-path');
- }
-
- load_children(node) {
- frappe.run_serially([
- () => this.get_child_nodes(node.id),
- (child_nodes) => this.render_child_nodes(node, child_nodes)
- ]);
- }
-
- get_child_nodes(node_id) {
- let me = this;
- return new Promise(resolve => {
- frappe.call({
- method: this.method,
- args: {
- parent: node_id,
- company: me.company
- },
- callback: (r) => {
- resolve(r.message);
- }
- });
- });
- }
-
- render_child_nodes(node, child_nodes) {
- const last_level = this.$hierarchy.find('.level:last').index();
- const current_level = $(`#${node.id}`).parent().parent().parent().index();
-
- if (last_level === current_level) {
- this.$hierarchy.append(`
- <li class="level"></li>
- `);
- }
-
- if (!node.$children) {
- node.$children = $('<ul class="node-children"></ul>')
- .hide()
- .appendTo(this.$hierarchy.find('.level:last'));
-
- node.$children.empty();
-
- if (child_nodes) {
- $.each(child_nodes, (_i, data) => {
- this.add_node(node, data);
-
- setTimeout(() => {
- this.add_connector(node.id, data.name);
- }, 250);
- });
- }
- }
-
- node.$children.show();
- $(`path[data-parent="${node.id}"]`).show();
- node.expanded = true;
- }
-
- add_node(node, data) {
- var $li = $('<li class="child-node"></li>');
-
- return new this.Node({
- id: data.name,
- parent: $li.appendTo(node.$children),
- parent_id: node.id,
- image: data.image,
- name: data.employee_name,
- title: data.designation,
- expandable: data.expandable,
- connections: data.connections,
- children: undefined
- });
- }
-
- add_connector(parent_id, child_id) {
- let parent_node = document.querySelector(`#${parent_id}`);
- let child_node = document.querySelector(`#${child_id}`);
-
- // variable for the namespace
- const svgns = 'http://www.w3.org/2000/svg';
- let path = document.createElementNS(svgns, 'path');
-
- // we need to connect right side of the parent to the left side of the child node
- let pos_parent_right = {
- x: parent_node.offsetLeft + parent_node.offsetWidth,
- y: parent_node.offsetTop + parent_node.offsetHeight / 2
- };
- let pos_child_left = {
- x: child_node.offsetLeft - 5,
- y: child_node.offsetTop + child_node.offsetHeight / 2
- };
-
- let connector =
- "M" +
- (pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
- "C" +
- (pos_parent_right.x + 100) + "," + (pos_parent_right.y) + " " +
- (pos_child_left.x - 100) + "," + (pos_child_left.y) + " " +
- (pos_child_left.x) + "," + (pos_child_left.y);
-
- path.setAttribute("d", connector);
- path.setAttribute("data-parent", parent_id);
- path.setAttribute("data-child", child_id);
-
- if ($(`#${parent_id}`).hasClass('active')) {
- path.setAttribute("class", "active-connector");
- path.setAttribute("marker-start", "url(#arrowstart-active)");
- path.setAttribute("marker-end", "url(#arrowhead-active)");
- } else if ($(`#${parent_id}`).hasClass('active-path')) {
- path.setAttribute("class", "collapsed-connector");
- path.setAttribute("marker-start", "url(#arrowstart-collapsed)");
- path.setAttribute("marker-end", "url(#arrowhead-collapsed)");
- }
-
- $('#connectors').append(path);
- }
-
- set_selected_node(node) {
- // remove .active class from the current node
- $('.active').removeClass('active');
-
- // add active class to the newly selected node
- this.selected_node = node;
- node.$link.addClass('active');
- }
-
- collapse_previous_level_nodes(node) {
- let node_parent = $(`#${node.parent_id}`);
-
- let previous_level_nodes = node_parent.parent().parent().children('li');
- if (node_parent.parent().hasClass('root-level')) {
- previous_level_nodes = node_parent.parent().children('li');
- }
-
- let node_card = undefined;
-
- previous_level_nodes.each(function() {
- node_card = $(this).find('.node-card');
-
- if (!node_card.hasClass('active-path')) {
- node_card.addClass('collapsed');
- }
- });
- }
-
- refresh_connectors(node_parent) {
- if (!node_parent) return;
-
- $(`path[data-parent="${node_parent}"]`).remove();
-
- frappe.run_serially([
- () => this.get_child_nodes(node_parent),
- (child_nodes) => {
- if (child_nodes) {
- $.each(child_nodes, (_i, data) => {
- this.add_connector(node_parent, data.name);
- });
- }
- }
- ]);
- }
-
- setup_node_click_action(node) {
- let me = this;
- let node_element = $(`#${node.id}`);
-
- node_element.click(function() {
- let is_sibling = me.selected_node.parent_id === node.parent_id;
-
- if (is_sibling) {
- me.collapse_node();
- } else if (node_element.is(':visible')
- && (node_element.hasClass('collapsed') || node_element.hasClass('active-path'))) {
- me.remove_levels_after_node(node);
- me.remove_orphaned_connectors();
- }
-
- me.expand_node(node);
- });
- }
-
- remove_levels_after_node(node) {
- let level = $(`#${node.id}`).parent().parent().parent();
-
- if ($(`#${node.id}`).parent().hasClass('root-level')) {
- level = $(`#${node.id}`).parent();
- }
-
- level = $('.hierarchy > li:eq('+ level.index() + ')');
- level.nextAll('li').remove();
-
- let nodes = level.find('.node-card');
- let node_object = undefined;
-
- $.each(nodes, (_i, element) => {
- node_object = this.nodes[element.id];
- node_object.expanded = 0;
- node_object.$children = undefined;
- });
-
- nodes.removeClass('collapsed active-path');
- }
-
- remove_orphaned_connectors() {
- let paths = $('#connectors > path');
- $.each(paths, (_i, path) => {
- let parent = $(path).data('parent');
- let child = $(path).data('child');
-
- if ($(parent).length || $(child).length)
- return;
-
- $(path).remove();
- })
- }
-}
-
-
-class OrgChartMobile {
-
- constructor(wrapper) {
- this.wrapper = $(wrapper);
- this.page = wrapper.page;
-
- this.page.main.css({
- 'min-height': '300px',
- 'max-height': '600px',
- 'overflow': 'auto',
- 'position': 'relative'
- });
- this.page.main.addClass('frappe-card');
-
- this.nodes = {};
- this.setup_node_class();
- }
-
- setup_node_class() {
- let me = this;
- this.Node = class {
- constructor({
- id, parent, parent_id, image, name, title, expandable, connections, is_root // eslint-disable-line
- }) {
- // to setup values passed via constructor
- $.extend(this, arguments[0]);
-
- this.expanded = 0;
-
- me.nodes[this.id] = this;
- me.make_node_element(this);
- me.setup_node_click_action(this);
- }
- }
- }
-
- make_node_element(node) {
- let node_card = frappe.render_template('node_card', {
- id: node.id,
- name: node.name,
- title: node.title,
- image: node.image,
- parent: node.parent_id,
- connections: node.connections,
- is_mobile: 1
- });
-
- node.parent.append(node_card);
- node.$link = $(`#${node.id}`);
- node.$link.addClass('mobile-node');
- }
-
- show() {
- frappe.breadcrumbs.add('HR');
-
- let me = this;
- let company = this.page.add_field({
- fieldtype: 'Link',
- options: 'Company',
- fieldname: 'company',
- placeholder: __('Select Company'),
- default: frappe.defaults.get_default('company'),
- only_select: true,
- reqd: 1,
- change: () => {
- me.company = undefined;
-
- if (company.get_value() && me.company != company.get_value()) {
- me.company = company.get_value();
-
- // svg for connectors
- me.make_svg_markers()
-
- if (me.$sibling_group)
- me.$sibling_group.remove();
-
- // setup sibling group wrapper
- me.$sibling_group = $(`<div class="sibling-group mt-4 mb-4"></div>`);
- me.page.main.append(me.$sibling_group);
-
- if (me.$hierarchy)
- me.$hierarchy.remove();
-
- // setup hierarchy
- me.$hierarchy = $(
- `<ul class="hierarchy-mobile">
- <li class="root-level level"></li>
- </ul>`);
-
- me.page.main.append(me.$hierarchy);
- me.render_root_node();
- }
- }
- });
-
- company.refresh();
- $(`[data-fieldname="company"]`).trigger('change');
- }
-
- make_svg_markers() {
- $('#arrows').remove();
-
- this.page.main.prepend(`
- <svg id="arrows" width="100%" height="100%">
- <defs>
- <marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
- <path d="M 0 0 L 10 5 L 0 10 z"></path>
- </marker>
- <marker id="arrowhead-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-300)">
- <path d="M 0 0 L 10 5 L 0 10 z"></path>
- </marker>
-
- <marker id="arrowstart-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-500)">
- <circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-500)"/>
- </marker>
- <marker id="arrowstart-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-300)">
- <circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-300)"/>
- </marker>
- </defs>
- <g id="connectors" fill="none">
- </g>
- </svg>`);
- }
-
- render_root_node() {
- this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
-
- let me = this;
-
- frappe.call({
- method: me.method,
- args: {
- company: me.company
- },
- callback: function(r) {
- if (r.message.length) {
- let data = r.message[0];
-
- let root_node = new me.Node({
- id: data.name,
- parent: me.$hierarchy.find('.root-level'),
- parent_id: undefined,
- image: data.image,
- name: data.employee_name,
- title: data.designation,
- expandable: true,
- connections: data.connections,
- is_root: true,
- });
-
- me.expand_node(root_node);
- }
- }
- })
- }
-
- expand_node(node) {
- const is_same_node = (this.selected_node && this.selected_node.id === node.id);
- this.set_selected_node(node);
- this.show_active_path(node);
-
- if (this.$sibling_group) {
- const sibling_parent = this.$sibling_group.find('.node-group').attr('data-parent');
- if (node.parent_id !== sibling_parent)
- this.$sibling_group.empty();
- }
-
- if (!is_same_node) {
- // since the previous/parent node collapses, all connections to that node need to be rebuilt
- // rebuild outgoing connections of parent
- this.refresh_connectors(node.parent_id, node.id);
-
- // rebuild incoming connections of parent
- let grandparent = $(`#${node.parent_id}`).attr('data-parent');
- this.refresh_connectors(grandparent, node.parent_id);
- }
-
- if (node.expandable && !node.expanded) {
- return this.load_children(node);
- }
- }
-
- collapse_node() {
- let node = this.selected_node;
- if (node.expandable) {
- node.$children.hide();
- node.expanded = false;
-
- // add a collapsed level to show the collapsed parent
- // and a button beside it to move to that level
- let node_parent = node.$link.parent();
- node_parent.prepend(
- `<div class="collapsed-level d-flex flex-row"></div>`
- );
-
- node_parent
- .find('.collapsed-level')
- .append(node.$link);
-
- frappe.run_serially([
- () => this.get_child_nodes(node.parent_id, node.id),
- (child_nodes) => this.get_node_group(child_nodes, node.parent_id),
- (node_group) => {
- node_parent.find('.collapsed-level')
- .append(node_group);
- },
- () => this.setup_node_group_action()
- ]);
- }
- }
-
- show_active_path(node) {
- // mark node parent on active path
- $(`#${node.parent_id}`).addClass('active-path');
- }
-
- load_children(node) {
- frappe.run_serially([
- () => this.get_child_nodes(node.id),
- (child_nodes) => this.render_child_nodes(node, child_nodes)
- ]);
- }
-
- get_child_nodes(node_id, exclude_node=null) {
- let me = this;
- return new Promise(resolve => {
- frappe.call({
- method: this.method,
- args: {
- parent: node_id,
- company: me.company,
- exclude_node: exclude_node
- },
- callback: (r) => {
- resolve(r.message);
- }
- });
- });
- }
-
- render_child_nodes(node, child_nodes) {
- if (!node.$children) {
- node.$children = $('<ul class="node-children"></ul>')
- .hide()
- .appendTo(node.$link.parent());
-
- node.$children.empty();
-
- if (child_nodes) {
- $.each(child_nodes, (_i, data) => {
- this.add_node(node, data);
- $(`#${data.name}`).addClass('active-child');
-
- setTimeout(() => {
- this.add_connector(node.id, data.name);
- }, 250);
- });
- }
- }
-
- node.$children.show();
- node.expanded = true;
- }
-
- add_node(node, data) {
- var $li = $('<li class="child-node"></li>');
-
- return new this.Node({
- id: data.name,
- parent: $li.appendTo(node.$children),
- parent_id: node.id,
- image: data.image,
- name: data.employee_name,
- title: data.designation,
- expandable: data.expandable,
- connections: data.connections,
- children: undefined
- });
- }
-
- add_connector(parent_id, child_id) {
- let parent_node = document.querySelector(`#${parent_id}`);
- let child_node = document.querySelector(`#${child_id}`);
-
- // variable for the namespace
- const svgns = 'http://www.w3.org/2000/svg';
- let path = document.createElementNS(svgns, 'path');
-
- let connector = undefined;
-
- if ($(`#${parent_id}`).hasClass('active')) {
- connector = this.get_connector_for_active_node(parent_node, child_node);
- } else if ($(`#${parent_id}`).hasClass('active-path')) {
- connector = this.get_connector_for_collapsed_node(parent_node, child_node);
- }
-
- path.setAttribute("d", connector);
- this.set_path_attributes(path, parent_id, child_id);
-
- $('#connectors').append(path);
- }
-
- get_connector_for_active_node(parent_node, child_node) {
- // we need to connect the bottom left of the parent to the left side of the child node
- let pos_parent_bottom = {
- x: parent_node.offsetLeft + 20,
- y: parent_node.offsetTop + parent_node.offsetHeight
- };
- let pos_child_left = {
- x: child_node.offsetLeft - 5,
- y: child_node.offsetTop + child_node.offsetHeight / 2
- };
-
- let connector =
- "M" +
- (pos_parent_bottom.x) + "," + (pos_parent_bottom.y) + " " +
- "L" +
- (pos_parent_bottom.x) + "," + (pos_child_left.y) + " " +
- "L" +
- (pos_child_left.x) + "," + (pos_child_left.y);
-
- return connector;
- }
-
- get_connector_for_collapsed_node(parent_node, child_node) {
- // we need to connect the bottom left of the parent to the top left of the child node
- let pos_parent_bottom = {
- x: parent_node.offsetLeft + 20,
- y: parent_node.offsetTop + parent_node.offsetHeight
- };
- let pos_child_top = {
- x: child_node.offsetLeft + 20,
- y: child_node.offsetTop
- };
-
- let connector =
- "M" +
- (pos_parent_bottom.x) + "," + (pos_parent_bottom.y) + " " +
- "L" +
- (pos_child_top.x) + "," + (pos_child_top.y);
-
- return connector;
- }
-
- set_path_attributes(path, parent_id, child_id) {
- path.setAttribute("data-parent", parent_id);
- path.setAttribute("data-child", child_id);
-
- if ($(`#${parent_id}`).hasClass('active')) {
- path.setAttribute("class", "active-connector");
- path.setAttribute("marker-start", "url(#arrowstart-active)");
- path.setAttribute("marker-end", "url(#arrowhead-active)");
- } else if ($(`#${parent_id}`).hasClass('active-path')) {
- path.setAttribute("class", "collapsed-connector");
- }
- }
-
- set_selected_node(node) {
- // remove .active class from the current node
- $('.active').removeClass('active');
-
- // add active class to the newly selected node
- this.selected_node = node;
- node.$link.addClass('active');
- }
-
- setup_node_click_action(node) {
- let me = this;
- let node_element = $(`#${node.id}`);
-
- node_element.click(function() {
- if (node_element.is(':visible') && node_element.hasClass('active-path')) {
- me.remove_levels_after_node(node);
- me.remove_orphaned_connectors();
+ $(wrapper).bind('show', () => {
+ frappe.require('/assets/js/hierarchy-chart.min.js', () => {
+ let organizational_chart = undefined;
+ if (frappe.is_mobile()) {
+ organizational_chart = new erpnext.HierarchyChartMobile(wrapper);
} else {
- me.add_node_to_hierarchy(node, true);
- me.collapse_node();
+ organizational_chart = new erpnext.HierarchyChart(wrapper);
}
-
- me.expand_node(node);
+ organizational_chart.show();
});
- }
-
- setup_node_group_action() {
- let me = this;
-
- $('.node-group').on('click', function() {
- let parent = $(this).attr('data-parent');
- me.expand_sibling_group_node(parent);
- });
- }
-
- add_node_to_hierarchy(node) {
- this.$hierarchy.append(`
- <li class="level">
- <div class="node-level d-flex flex-row">
- </div>
- </li>
- `);
-
- node.$link.appendTo(this.$hierarchy.find('.level:last'));
- }
-
- get_node_group(nodes, parent, collapsed=true) {
- let limit = 2;
- const display_nodes = nodes.slice(0, limit);
- const extra_nodes = nodes.slice(limit);
-
- let html = display_nodes.map(node =>
- this.get_avatar(node)
- ).join('');
-
- if (extra_nodes.length === 1) {
- let node = extra_nodes[0];
- html += this.get_avatar(node);
- } else if (extra_nodes.length > 1) {
- html = `
- ${html}
- <span class="avatar avatar-small">
- <div class="avatar-frame standard-image avatar-extra-count"
- title="${extra_nodes.map(node => node.employee_name).join(', ')}">
- +${extra_nodes.length}
- </div>
- </span>
- `;
- }
-
- if (html) {
- const $node_group =
- $(`<div class="node-group card cursor-pointer" data-parent=${parent}>
- <div class="avatar-group right overlap">
- ${html}
- </div>
- </div>`);
-
- if (collapsed)
- $node_group.addClass('collapsed');
-
- return $node_group;
- }
-
- return null;
- }
-
- get_avatar(node) {
- return `<span class="avatar avatar-small" title="${node.employee_name}">
- <span class="avatar-frame" src=${node.image} style="background-image: url(${node.image})"></span>
- </span>`
- }
-
- expand_sibling_group_node(parent) {
- let node_object = this.nodes[parent];
- let node = node_object.$link;
- node.removeClass('active-child active-path');
- node_object.expanded = 0;
- node_object.$children = undefined;
-
- // show parent's siblings and expand parent node
- frappe.run_serially([
- () => this.get_child_nodes(node_object.parent_id, node_object.id),
- (child_nodes) => this.get_node_group(child_nodes, node_object.parent_id, false),
- (node_group) => {
- if (node_group)
- this.$sibling_group.empty().append(node_group);
- },
- () => this.setup_node_group_action(),
- () => {
- this.$hierarchy.empty().append(`
- <li class="level"></li>
- `);
- this.$hierarchy.find('.level').append(node);
- $(`#connectors`).empty();
- this.expand_node(node_object);
- }
- ]);
- }
-
- remove_levels_after_node(node) {
- let level = $(`#${node.id}`).parent().parent();
-
- level = $('.hierarchy-mobile > li:eq('+ (level.index()) + ')');
- level.nextAll('li').remove();
-
- let current_node = level.find(`#${node.id}`);
- let node_object = this.nodes[node.id];
-
- current_node.removeClass('active-child active-path');
- node_object.expanded = 0;
- node_object.$children = undefined;
-
- level.empty().append(current_node);
- }
-
- remove_orphaned_connectors() {
- let paths = $('#connectors > path');
- $.each(paths, (_i, path) => {
- let parent = $(path).data('parent');
- let child = $(path).data('child');
-
- if ($(parent).length || $(child).length)
- return;
-
- $(path).remove();
- })
- }
-
- refresh_connectors(node_parent, node_id) {
- if (!node_parent) return;
-
- $(`path[data-parent="${node_parent}"]`).remove();
- this.add_connector(node_parent, node_id);
- }
-}
\ No newline at end of file
+ });
+};
\ No newline at end of file
diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index d3ebcdf..3c60e3e 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -4,7 +4,7 @@
"public/less/hub.less",
"public/scss/call_popup.scss",
"public/scss/point-of-sale.scss",
- "public/scss/organizational_chart.scss"
+ "public/scss/hierarchy_chart.scss"
],
"css/marketplace.css": [
"public/less/hub.less"
@@ -44,7 +44,8 @@
"public/js/call_popup/call_popup.js",
"public/js/utils/dimension_tree_filter.js",
"public/js/telephony.js",
- "public/js/templates/call_link.html"
+ "public/js/templates/call_link.html",
+ "public/js/templates/node_card.html"
],
"js/item-dashboard.min.js": [
"stock/dashboard/item_dashboard.html",
@@ -67,5 +68,9 @@
"public/js/bank_reconciliation_tool/data_table_manager.js",
"public/js/bank_reconciliation_tool/number_card.js",
"public/js/bank_reconciliation_tool/dialog_manager.js"
+ ],
+ "js/hierarchy-chart.min.js": [
+ "public/js/hierarchy_chart/hierarchy_chart_desktop.js",
+ "public/js/hierarchy_chart/hierarchy_chart_mobile.js"
]
}
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
new file mode 100644
index 0000000..fd84d4e
--- /dev/null
+++ b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
@@ -0,0 +1,396 @@
+erpnext.HierarchyChart = class {
+
+ constructor(wrapper) {
+ this.wrapper = $(wrapper);
+ this.page = wrapper.page;
+
+ this.page.main.css({
+ 'min-height': '300px',
+ 'max-height': '600px',
+ 'overflow': 'auto',
+ 'position': 'relative'
+ });
+ this.page.main.addClass('frappe-card');
+
+ this.nodes = {};
+ this.setup_node_class();
+ }
+
+ setup_node_class() {
+ let me = this;
+ this.Node = class {
+ constructor({
+ id, parent, parent_id, image, name, title, expandable, connections, is_root // eslint-disable-line
+ }) {
+ // to setup values passed via constructor
+ $.extend(this, arguments[0]);
+
+ this.expanded = 0;
+
+ me.nodes[this.id] = this;
+ me.make_node_element(this);
+ me.setup_node_click_action(this);
+ }
+ }
+ }
+
+ make_node_element(node) {
+ let node_card = frappe.render_template('node_card', {
+ id: node.id,
+ name: node.name,
+ title: node.title,
+ image: node.image,
+ parent: node.parent_id,
+ connections: node.connections
+ });
+
+ node.parent.append(node_card);
+ node.$link = $(`#${node.id}`);
+ }
+
+ show() {
+ frappe.breadcrumbs.add('HR');
+
+ let me = this;
+ let company = this.page.add_field({
+ fieldtype: 'Link',
+ options: 'Company',
+ fieldname: 'company',
+ placeholder: __('Select Company'),
+ default: frappe.defaults.get_default('company'),
+ only_select: true,
+ reqd: 1,
+ change: () => {
+ me.company = undefined;
+
+ if (company.get_value() && me.company != company.get_value()) {
+ me.company = company.get_value();
+
+ // svg for connectors
+ me.make_svg_markers()
+
+ if (me.$hierarchy)
+ me.$hierarchy.remove();
+
+ // setup hierarchy
+ me.$hierarchy = $(
+ `<ul class="hierarchy">
+ <li class="root-level level"></li>
+ </ul>`);
+
+ me.page.main.append(me.$hierarchy);
+ me.render_root_node();
+ }
+ }
+ });
+
+ company.refresh();
+ $(`[data-fieldname="company"]`).trigger('change');
+ }
+
+ make_svg_markers() {
+ $('#arrows').remove();
+
+ this.page.main.prepend(`
+ <svg id="arrows" width="100%" height="100%">
+ <defs>
+ <marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
+ <path d="M 0 0 L 10 5 L 0 10 z"></path>
+ </marker>
+ <marker id="arrowhead-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-300)">
+ <path d="M 0 0 L 10 5 L 0 10 z"></path>
+ </marker>
+
+ <marker id="arrowstart-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-500)">
+ <circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-500)"/>
+ </marker>
+ <marker id="arrowstart-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-300)">
+ <circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-300)"/>
+ </marker>
+ </defs>
+ <g id="connectors" fill="none">
+ </g>
+ </svg>`);
+ }
+
+ render_root_node() {
+ this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
+
+ let me = this;
+
+ frappe.call({
+ method: me.method,
+ args: {
+ company: me.company
+ },
+ callback: function(r) {
+ if (r.message.length) {
+ let data = r.message[0];
+
+ let root_node = new me.Node({
+ id: data.name,
+ parent: me.$hierarchy.find('.root-level'),
+ parent_id: undefined,
+ image: data.image,
+ name: data.employee_name,
+ title: data.designation,
+ expandable: true,
+ connections: data.connections,
+ is_root: true,
+ });
+
+ me.expand_node(root_node);
+ }
+ }
+ })
+ }
+
+ expand_node(node) {
+ let is_sibling = this.selected_node && this.selected_node.parent_id === node.parent_id;
+ this.set_selected_node(node);
+ this.show_active_path(node);
+ this.collapse_previous_level_nodes(node);
+
+ // since the previous node collapses, all connections to that node need to be rebuilt
+ // if a sibling node is clicked, connections don't need to be rebuilt
+ if (!is_sibling) {
+ // rebuild outgoing connections
+ this.refresh_connectors(node.parent_id);
+
+ // rebuild incoming connections
+ let grandparent = $(`#${node.parent_id}`).attr('data-parent');
+ this.refresh_connectors(grandparent)
+ }
+
+ if (node.expandable && !node.expanded) {
+ return this.load_children(node);
+ }
+ }
+
+ collapse_node() {
+ if (this.selected_node.expandable) {
+ this.selected_node.$children.hide();
+ $(`path[data-parent="${this.selected_node.id}"]`).hide();
+ this.selected_node.expanded = false;
+ }
+ }
+
+ show_active_path(node) {
+ // mark node parent on active path
+ $(`#${node.parent_id}`).addClass('active-path');
+ }
+
+ load_children(node) {
+ frappe.run_serially([
+ () => this.get_child_nodes(node.id),
+ (child_nodes) => this.render_child_nodes(node, child_nodes)
+ ]);
+ }
+
+ get_child_nodes(node_id) {
+ let me = this;
+ return new Promise(resolve => {
+ frappe.call({
+ method: this.method,
+ args: {
+ parent: node_id,
+ company: me.company
+ },
+ callback: (r) => {
+ resolve(r.message);
+ }
+ });
+ });
+ }
+
+ render_child_nodes(node, child_nodes) {
+ const last_level = this.$hierarchy.find('.level:last').index();
+ const current_level = $(`#${node.id}`).parent().parent().parent().index();
+
+ if (last_level === current_level) {
+ this.$hierarchy.append(`
+ <li class="level"></li>
+ `);
+ }
+
+ if (!node.$children) {
+ node.$children = $('<ul class="node-children"></ul>')
+ .hide()
+ .appendTo(this.$hierarchy.find('.level:last'));
+
+ node.$children.empty();
+
+ if (child_nodes) {
+ $.each(child_nodes, (_i, data) => {
+ this.add_node(node, data);
+
+ setTimeout(() => {
+ this.add_connector(node.id, data.name);
+ }, 250);
+ });
+ }
+ }
+
+ node.$children.show();
+ $(`path[data-parent="${node.id}"]`).show();
+ node.expanded = true;
+ }
+
+ add_node(node, data) {
+ var $li = $('<li class="child-node"></li>');
+
+ return new this.Node({
+ id: data.name,
+ parent: $li.appendTo(node.$children),
+ parent_id: node.id,
+ image: data.image,
+ name: data.employee_name,
+ title: data.designation,
+ expandable: data.expandable,
+ connections: data.connections,
+ children: undefined
+ });
+ }
+
+ add_connector(parent_id, child_id) {
+ let parent_node = document.querySelector(`#${parent_id}`);
+ let child_node = document.querySelector(`#${child_id}`);
+
+ // variable for the namespace
+ const svgns = 'http://www.w3.org/2000/svg';
+ let path = document.createElementNS(svgns, 'path');
+
+ // we need to connect right side of the parent to the left side of the child node
+ let pos_parent_right = {
+ x: parent_node.offsetLeft + parent_node.offsetWidth,
+ y: parent_node.offsetTop + parent_node.offsetHeight / 2
+ };
+ let pos_child_left = {
+ x: child_node.offsetLeft - 5,
+ y: child_node.offsetTop + child_node.offsetHeight / 2
+ };
+
+ let connector =
+ "M" +
+ (pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
+ "C" +
+ (pos_parent_right.x + 100) + "," + (pos_parent_right.y) + " " +
+ (pos_child_left.x - 100) + "," + (pos_child_left.y) + " " +
+ (pos_child_left.x) + "," + (pos_child_left.y);
+
+ path.setAttribute("d", connector);
+ path.setAttribute("data-parent", parent_id);
+ path.setAttribute("data-child", child_id);
+
+ if ($(`#${parent_id}`).hasClass('active')) {
+ path.setAttribute("class", "active-connector");
+ path.setAttribute("marker-start", "url(#arrowstart-active)");
+ path.setAttribute("marker-end", "url(#arrowhead-active)");
+ } else if ($(`#${parent_id}`).hasClass('active-path')) {
+ path.setAttribute("class", "collapsed-connector");
+ path.setAttribute("marker-start", "url(#arrowstart-collapsed)");
+ path.setAttribute("marker-end", "url(#arrowhead-collapsed)");
+ }
+
+ $('#connectors').append(path);
+ }
+
+ set_selected_node(node) {
+ // remove .active class from the current node
+ $('.active').removeClass('active');
+
+ // add active class to the newly selected node
+ this.selected_node = node;
+ node.$link.addClass('active');
+ }
+
+ collapse_previous_level_nodes(node) {
+ let node_parent = $(`#${node.parent_id}`);
+
+ let previous_level_nodes = node_parent.parent().parent().children('li');
+ if (node_parent.parent().hasClass('root-level')) {
+ previous_level_nodes = node_parent.parent().children('li');
+ }
+
+ let node_card = undefined;
+
+ previous_level_nodes.each(function() {
+ node_card = $(this).find('.node-card');
+
+ if (!node_card.hasClass('active-path')) {
+ node_card.addClass('collapsed');
+ }
+ });
+ }
+
+ refresh_connectors(node_parent) {
+ if (!node_parent) return;
+
+ $(`path[data-parent="${node_parent}"]`).remove();
+
+ frappe.run_serially([
+ () => this.get_child_nodes(node_parent),
+ (child_nodes) => {
+ if (child_nodes) {
+ $.each(child_nodes, (_i, data) => {
+ this.add_connector(node_parent, data.name);
+ });
+ }
+ }
+ ]);
+ }
+
+ setup_node_click_action(node) {
+ let me = this;
+ let node_element = $(`#${node.id}`);
+
+ node_element.click(function() {
+ let is_sibling = me.selected_node.parent_id === node.parent_id;
+
+ if (is_sibling) {
+ me.collapse_node();
+ } else if (node_element.is(':visible')
+ && (node_element.hasClass('collapsed') || node_element.hasClass('active-path'))) {
+ me.remove_levels_after_node(node);
+ me.remove_orphaned_connectors();
+ }
+
+ me.expand_node(node);
+ });
+ }
+
+ remove_levels_after_node(node) {
+ let level = $(`#${node.id}`).parent().parent().parent();
+
+ if ($(`#${node.id}`).parent().hasClass('root-level')) {
+ level = $(`#${node.id}`).parent();
+ }
+
+ level = $('.hierarchy > li:eq('+ level.index() + ')');
+ level.nextAll('li').remove();
+
+ let nodes = level.find('.node-card');
+ let node_object = undefined;
+
+ $.each(nodes, (_i, element) => {
+ node_object = this.nodes[element.id];
+ node_object.expanded = 0;
+ node_object.$children = undefined;
+ });
+
+ nodes.removeClass('collapsed active-path');
+ }
+
+ remove_orphaned_connectors() {
+ let paths = $('#connectors > path');
+ $.each(paths, (_i, path) => {
+ let parent = $(path).data('parent');
+ let child = $(path).data('child');
+
+ if ($(parent).length || $(child).length)
+ return;
+
+ $(path).remove();
+ })
+ }
+}
\ No newline at end of file
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
new file mode 100644
index 0000000..c705681
--- /dev/null
+++ b/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
@@ -0,0 +1,513 @@
+erpnext.HierarchyChartMobile = class {
+
+ constructor(wrapper) {
+ this.wrapper = $(wrapper);
+ this.page = wrapper.page;
+
+ this.page.main.css({
+ 'min-height': '300px',
+ 'max-height': '600px',
+ 'overflow': 'auto',
+ 'position': 'relative'
+ });
+ this.page.main.addClass('frappe-card');
+
+ this.nodes = {};
+ this.setup_node_class();
+ }
+
+ setup_node_class() {
+ let me = this;
+ this.Node = class {
+ constructor({
+ id, parent, parent_id, image, name, title, expandable, connections, is_root // eslint-disable-line
+ }) {
+ // to setup values passed via constructor
+ $.extend(this, arguments[0]);
+
+ this.expanded = 0;
+
+ me.nodes[this.id] = this;
+ me.make_node_element(this);
+ me.setup_node_click_action(this);
+ }
+ }
+ }
+
+ make_node_element(node) {
+ let node_card = frappe.render_template('node_card', {
+ id: node.id,
+ name: node.name,
+ title: node.title,
+ image: node.image,
+ parent: node.parent_id,
+ connections: node.connections,
+ is_mobile: 1
+ });
+
+ node.parent.append(node_card);
+ node.$link = $(`#${node.id}`);
+ node.$link.addClass('mobile-node');
+ }
+
+ show() {
+ frappe.breadcrumbs.add('HR');
+
+ let me = this;
+ let company = this.page.add_field({
+ fieldtype: 'Link',
+ options: 'Company',
+ fieldname: 'company',
+ placeholder: __('Select Company'),
+ default: frappe.defaults.get_default('company'),
+ only_select: true,
+ reqd: 1,
+ change: () => {
+ me.company = undefined;
+
+ if (company.get_value() && me.company != company.get_value()) {
+ me.company = company.get_value();
+
+ // svg for connectors
+ me.make_svg_markers()
+
+ if (me.$sibling_group)
+ me.$sibling_group.remove();
+
+ // setup sibling group wrapper
+ me.$sibling_group = $(`<div class="sibling-group mt-4 mb-4"></div>`);
+ me.page.main.append(me.$sibling_group);
+
+ if (me.$hierarchy)
+ me.$hierarchy.remove();
+
+ // setup hierarchy
+ me.$hierarchy = $(
+ `<ul class="hierarchy-mobile">
+ <li class="root-level level"></li>
+ </ul>`);
+
+ me.page.main.append(me.$hierarchy);
+ me.render_root_node();
+ }
+ }
+ });
+
+ company.refresh();
+ $(`[data-fieldname="company"]`).trigger('change');
+ }
+
+ make_svg_markers() {
+ $('#arrows').remove();
+
+ this.page.main.prepend(`
+ <svg id="arrows" width="100%" height="100%">
+ <defs>
+ <marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
+ <path d="M 0 0 L 10 5 L 0 10 z"></path>
+ </marker>
+ <marker id="arrowhead-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-300)">
+ <path d="M 0 0 L 10 5 L 0 10 z"></path>
+ </marker>
+
+ <marker id="arrowstart-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-500)">
+ <circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-500)"/>
+ </marker>
+ <marker id="arrowstart-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-300)">
+ <circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-300)"/>
+ </marker>
+ </defs>
+ <g id="connectors" fill="none">
+ </g>
+ </svg>`);
+ }
+
+ render_root_node() {
+ this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
+
+ let me = this;
+
+ frappe.call({
+ method: me.method,
+ args: {
+ company: me.company
+ },
+ callback: function(r) {
+ if (r.message.length) {
+ let data = r.message[0];
+
+ let root_node = new me.Node({
+ id: data.name,
+ parent: me.$hierarchy.find('.root-level'),
+ parent_id: undefined,
+ image: data.image,
+ name: data.employee_name,
+ title: data.designation,
+ expandable: true,
+ connections: data.connections,
+ is_root: true,
+ });
+
+ me.expand_node(root_node);
+ }
+ }
+ })
+ }
+
+ expand_node(node) {
+ const is_same_node = (this.selected_node && this.selected_node.id === node.id);
+ this.set_selected_node(node);
+ this.show_active_path(node);
+
+ if (this.$sibling_group) {
+ const sibling_parent = this.$sibling_group.find('.node-group').attr('data-parent');
+ if (node.parent_id !== sibling_parent)
+ this.$sibling_group.empty();
+ }
+
+ if (!is_same_node) {
+ // since the previous/parent node collapses, all connections to that node need to be rebuilt
+ // rebuild outgoing connections of parent
+ this.refresh_connectors(node.parent_id, node.id);
+
+ // rebuild incoming connections of parent
+ let grandparent = $(`#${node.parent_id}`).attr('data-parent');
+ this.refresh_connectors(grandparent, node.parent_id);
+ }
+
+ if (node.expandable && !node.expanded) {
+ return this.load_children(node);
+ }
+ }
+
+ collapse_node() {
+ let node = this.selected_node;
+ if (node.expandable) {
+ node.$children.hide();
+ node.expanded = false;
+
+ // add a collapsed level to show the collapsed parent
+ // and a button beside it to move to that level
+ let node_parent = node.$link.parent();
+ node_parent.prepend(
+ `<div class="collapsed-level d-flex flex-row"></div>`
+ );
+
+ node_parent
+ .find('.collapsed-level')
+ .append(node.$link);
+
+ frappe.run_serially([
+ () => this.get_child_nodes(node.parent_id, node.id),
+ (child_nodes) => this.get_node_group(child_nodes, node.parent_id),
+ (node_group) => {
+ node_parent.find('.collapsed-level')
+ .append(node_group);
+ },
+ () => this.setup_node_group_action()
+ ]);
+ }
+ }
+
+ show_active_path(node) {
+ // mark node parent on active path
+ $(`#${node.parent_id}`).addClass('active-path');
+ }
+
+ load_children(node) {
+ frappe.run_serially([
+ () => this.get_child_nodes(node.id),
+ (child_nodes) => this.render_child_nodes(node, child_nodes)
+ ]);
+ }
+
+ get_child_nodes(node_id, exclude_node=null) {
+ let me = this;
+ return new Promise(resolve => {
+ frappe.call({
+ method: this.method,
+ args: {
+ parent: node_id,
+ company: me.company,
+ exclude_node: exclude_node
+ },
+ callback: (r) => {
+ resolve(r.message);
+ }
+ });
+ });
+ }
+
+ render_child_nodes(node, child_nodes) {
+ if (!node.$children) {
+ node.$children = $('<ul class="node-children"></ul>')
+ .hide()
+ .appendTo(node.$link.parent());
+
+ node.$children.empty();
+
+ if (child_nodes) {
+ $.each(child_nodes, (_i, data) => {
+ this.add_node(node, data);
+ $(`#${data.name}`).addClass('active-child');
+
+ setTimeout(() => {
+ this.add_connector(node.id, data.name);
+ }, 250);
+ });
+ }
+ }
+
+ node.$children.show();
+ node.expanded = true;
+ }
+
+ add_node(node, data) {
+ var $li = $('<li class="child-node"></li>');
+
+ return new this.Node({
+ id: data.name,
+ parent: $li.appendTo(node.$children),
+ parent_id: node.id,
+ image: data.image,
+ name: data.employee_name,
+ title: data.designation,
+ expandable: data.expandable,
+ connections: data.connections,
+ children: undefined
+ });
+ }
+
+ add_connector(parent_id, child_id) {
+ let parent_node = document.querySelector(`#${parent_id}`);
+ let child_node = document.querySelector(`#${child_id}`);
+
+ // variable for the namespace
+ const svgns = 'http://www.w3.org/2000/svg';
+ let path = document.createElementNS(svgns, 'path');
+
+ let connector = undefined;
+
+ if ($(`#${parent_id}`).hasClass('active')) {
+ connector = this.get_connector_for_active_node(parent_node, child_node);
+ } else if ($(`#${parent_id}`).hasClass('active-path')) {
+ connector = this.get_connector_for_collapsed_node(parent_node, child_node);
+ }
+
+ path.setAttribute("d", connector);
+ this.set_path_attributes(path, parent_id, child_id);
+
+ $('#connectors').append(path);
+ }
+
+ get_connector_for_active_node(parent_node, child_node) {
+ // we need to connect the bottom left of the parent to the left side of the child node
+ let pos_parent_bottom = {
+ x: parent_node.offsetLeft + 20,
+ y: parent_node.offsetTop + parent_node.offsetHeight
+ };
+ let pos_child_left = {
+ x: child_node.offsetLeft - 5,
+ y: child_node.offsetTop + child_node.offsetHeight / 2
+ };
+
+ let connector =
+ "M" +
+ (pos_parent_bottom.x) + "," + (pos_parent_bottom.y) + " " +
+ "L" +
+ (pos_parent_bottom.x) + "," + (pos_child_left.y) + " " +
+ "L" +
+ (pos_child_left.x) + "," + (pos_child_left.y);
+
+ return connector;
+ }
+
+ get_connector_for_collapsed_node(parent_node, child_node) {
+ // we need to connect the bottom left of the parent to the top left of the child node
+ let pos_parent_bottom = {
+ x: parent_node.offsetLeft + 20,
+ y: parent_node.offsetTop + parent_node.offsetHeight
+ };
+ let pos_child_top = {
+ x: child_node.offsetLeft + 20,
+ y: child_node.offsetTop
+ };
+
+ let connector =
+ "M" +
+ (pos_parent_bottom.x) + "," + (pos_parent_bottom.y) + " " +
+ "L" +
+ (pos_child_top.x) + "," + (pos_child_top.y);
+
+ return connector;
+ }
+
+ set_path_attributes(path, parent_id, child_id) {
+ path.setAttribute("data-parent", parent_id);
+ path.setAttribute("data-child", child_id);
+
+ if ($(`#${parent_id}`).hasClass('active')) {
+ path.setAttribute("class", "active-connector");
+ path.setAttribute("marker-start", "url(#arrowstart-active)");
+ path.setAttribute("marker-end", "url(#arrowhead-active)");
+ } else if ($(`#${parent_id}`).hasClass('active-path')) {
+ path.setAttribute("class", "collapsed-connector");
+ }
+ }
+
+ set_selected_node(node) {
+ // remove .active class from the current node
+ $('.active').removeClass('active');
+
+ // add active class to the newly selected node
+ this.selected_node = node;
+ node.$link.addClass('active');
+ }
+
+ setup_node_click_action(node) {
+ let me = this;
+ let node_element = $(`#${node.id}`);
+
+ node_element.click(function() {
+ if (node_element.is(':visible') && node_element.hasClass('active-path')) {
+ me.remove_levels_after_node(node);
+ me.remove_orphaned_connectors();
+ } else {
+ me.add_node_to_hierarchy(node, true);
+ me.collapse_node();
+ }
+
+ me.expand_node(node);
+ });
+ }
+
+ setup_node_group_action() {
+ let me = this;
+
+ $('.node-group').on('click', function() {
+ let parent = $(this).attr('data-parent');
+ me.expand_sibling_group_node(parent);
+ });
+ }
+
+ add_node_to_hierarchy(node) {
+ this.$hierarchy.append(`
+ <li class="level">
+ <div class="node-level d-flex flex-row">
+ </div>
+ </li>
+ `);
+
+ node.$link.appendTo(this.$hierarchy.find('.level:last'));
+ }
+
+ get_node_group(nodes, parent, collapsed=true) {
+ let limit = 2;
+ const display_nodes = nodes.slice(0, limit);
+ const extra_nodes = nodes.slice(limit);
+
+ let html = display_nodes.map(node =>
+ this.get_avatar(node)
+ ).join('');
+
+ if (extra_nodes.length === 1) {
+ let node = extra_nodes[0];
+ html += this.get_avatar(node);
+ } else if (extra_nodes.length > 1) {
+ html = `
+ ${html}
+ <span class="avatar avatar-small">
+ <div class="avatar-frame standard-image avatar-extra-count"
+ title="${extra_nodes.map(node => node.employee_name).join(', ')}">
+ +${extra_nodes.length}
+ </div>
+ </span>
+ `;
+ }
+
+ if (html) {
+ const $node_group =
+ $(`<div class="node-group card cursor-pointer" data-parent=${parent}>
+ <div class="avatar-group right overlap">
+ ${html}
+ </div>
+ </div>`);
+
+ if (collapsed)
+ $node_group.addClass('collapsed');
+
+ return $node_group;
+ }
+
+ return null;
+ }
+
+ get_avatar(node) {
+ return `<span class="avatar avatar-small" title="${node.employee_name}">
+ <span class="avatar-frame" src=${node.image} style="background-image: url(${node.image})"></span>
+ </span>`
+ }
+
+ expand_sibling_group_node(parent) {
+ let node_object = this.nodes[parent];
+ let node = node_object.$link;
+ node.removeClass('active-child active-path');
+ node_object.expanded = 0;
+ node_object.$children = undefined;
+
+ // show parent's siblings and expand parent node
+ frappe.run_serially([
+ () => this.get_child_nodes(node_object.parent_id, node_object.id),
+ (child_nodes) => this.get_node_group(child_nodes, node_object.parent_id, false),
+ (node_group) => {
+ if (node_group)
+ this.$sibling_group.empty().append(node_group);
+ },
+ () => this.setup_node_group_action(),
+ () => {
+ this.$hierarchy.empty().append(`
+ <li class="level"></li>
+ `);
+ this.$hierarchy.find('.level').append(node);
+ $(`#connectors`).empty();
+ this.expand_node(node_object);
+ }
+ ]);
+ }
+
+ remove_levels_after_node(node) {
+ let level = $(`#${node.id}`).parent().parent();
+
+ level = $('.hierarchy-mobile > li:eq('+ (level.index()) + ')');
+ level.nextAll('li').remove();
+
+ let current_node = level.find(`#${node.id}`);
+ let node_object = this.nodes[node.id];
+
+ current_node.removeClass('active-child active-path');
+ node_object.expanded = 0;
+ node_object.$children = undefined;
+
+ level.empty().append(current_node);
+ }
+
+ remove_orphaned_connectors() {
+ let paths = $('#connectors > path');
+ $.each(paths, (_i, path) => {
+ let parent = $(path).data('parent');
+ let child = $(path).data('child');
+
+ if ($(parent).length || $(child).length)
+ return;
+
+ $(path).remove();
+ })
+ }
+
+ refresh_connectors(node_parent, node_id) {
+ if (!node_parent) return;
+
+ $(`path[data-parent="${node_parent}"]`).remove();
+ this.add_connector(node_parent, node_id);
+ }
+}
\ No newline at end of file
diff --git a/erpnext/hr/page/organizational_chart/node_card.html b/erpnext/public/js/templates/node_card.html
similarity index 100%
rename from erpnext/hr/page/organizational_chart/node_card.html
rename to erpnext/public/js/templates/node_card.html
diff --git a/erpnext/public/scss/organizational_chart.scss b/erpnext/public/scss/hierarchy_chart.scss
similarity index 100%
rename from erpnext/public/scss/organizational_chart.scss
rename to erpnext/public/scss/hierarchy_chart.scss