refactor!: remove hierarchy charts
diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index 3d38aca..1bed541 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -2,8 +2,7 @@
"css/erpnext.css": [
"public/less/erpnext.less",
"public/scss/call_popup.scss",
- "public/scss/point-of-sale.scss",
- "public/scss/hierarchy_chart.scss"
+ "public/scss/point-of-sale.scss"
],
"js/erpnext-web.min.js": [
"public/js/website_utils.js",
@@ -37,7 +36,6 @@
"public/js/utils/dimension_tree_filter.js",
"public/js/telephony.js",
"public/js/templates/call_link.html",
- "public/js/templates/node_card.html",
"public/js/bulk_transaction_processing.js"
],
"js/item-dashboard.min.js": [
@@ -62,10 +60,6 @@
"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"
- ],
"js/e-commerce.min.js": [
"e_commerce/product_ui/views.js",
"e_commerce/product_ui/grid.js",
diff --git a/erpnext/public/js/hierarchy-chart.bundle.js b/erpnext/public/js/hierarchy-chart.bundle.js
deleted file mode 100644
index 0270313..0000000
--- a/erpnext/public/js/hierarchy-chart.bundle.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import "./hierarchy_chart/hierarchy_chart_desktop.js";
-import "./hierarchy_chart/hierarchy_chart_mobile.js";
-import "./templates/node_card.html";
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
deleted file mode 100644
index a585aa6..0000000
--- a/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
+++ /dev/null
@@ -1,608 +0,0 @@
-import html2canvas from 'html2canvas';
-erpnext.HierarchyChart = class {
- /* Options:
- - doctype
- - 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(doctype, wrapper, method) {
- this.page = wrapper.page;
- 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': '600px',
- 'overflow': 'auto',
- 'position': 'relative'
- });
- }
-
- 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);
-
- if (!me.all_nodes_expanded) {
- me.setup_node_click_action(this);
- }
-
- me.setup_edit_node_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: false
- });
-
- node.parent.append(node_card);
- node.$link = $(`[id="${node.id}"]`);
- }
-
- show() {
- this.setup_actions();
- if ($(`[data-fieldname="company"]`).length) return;
- 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;
- $('#hierarchy-chart-wrapper').remove();
-
- if (company.get_value()) {
- me.company = company.get_value();
-
- // svg for connectors
- me.make_svg_markers();
- me.setup_hierarchy();
- me.render_root_nodes();
- me.all_nodes_expanded = false;
- } else {
- frappe.throw(__('Please select a company first.'));
- }
- }
- });
-
- company.refresh();
- $(`[data-fieldname="company"]`).trigger('change');
- $(`[data-fieldname="company"] .link-field`).css('z-index', 2);
- }
-
- setup_actions() {
- let me = this;
- this.page.clear_inner_toolbar();
- this.page.add_inner_button(__('Export'), function() {
- me.export_chart();
- });
-
- this.page.add_inner_button(__('Expand All'), function() {
- me.load_children(me.root_node, true);
- me.all_nodes_expanded = true;
-
- me.page.remove_inner_button(__('Expand All'));
- me.page.add_inner_button(__('Collapse All'), function() {
- me.setup_hierarchy();
- me.render_root_nodes();
- me.all_nodes_expanded = false;
-
- me.page.remove_inner_button(__('Collapse All'));
- me.setup_actions();
- });
- });
- }
-
- export_chart() {
- frappe.dom.freeze(__('Exporting...'));
- this.page.main.css({
- 'min-height': '',
- 'max-height': '',
- 'overflow': 'visible',
- 'position': 'fixed',
- 'left': '0',
- 'top': '0'
- });
-
- $('.node-card').addClass('exported');
-
- html2canvas(document.querySelector('#hierarchy-chart-wrapper'), {
- scrollY: -window.scrollY,
- scrollX: 0
- }).then(function(canvas) {
- // Export the canvas to its data URI representation
- let dataURL = canvas.toDataURL('image/png');
-
- // download the image
- let a = document.createElement('a');
- a.href = dataURL;
- a.download = 'hierarchy_chart';
- a.click();
- }).finally(() => {
- frappe.dom.unfreeze();
- });
-
- this.setup_page_style();
- $('.node-card').removeClass('exported');
- }
-
- setup_hierarchy() {
- if (this.$hierarchy)
- this.$hierarchy.remove();
-
- $(`#connectors`).empty();
-
- // setup hierarchy
- this.$hierarchy = $(
- `<ul class="hierarchy">
- <li class="root-level level">
- <ul class="node-children"></ul>
- </li>
- </ul>`);
-
- this.page.main
- .find('#hierarchy-chart')
- .empty()
- .append(this.$hierarchy);
-
- this.nodes = {};
- }
-
- make_svg_markers() {
- $('#hierarchy-chart-wrapper').remove();
-
- this.page.main.append(`
- <div id="hierarchy-chart-wrapper">
- <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>
- <div id="hierarchy-chart">
- </div>
- </div>`);
- }
-
- render_root_nodes(expanded_view=false) {
- let me = this;
-
- return frappe.call({
- method: me.method,
- args: {
- company: me.company
- }
- }).then(r => {
- if (r.message.length) {
- let expand_node = undefined;
- let node = undefined;
-
- $.each(r.message, (_i, data) => {
- if ($(`[id="${data.id}"]`).length)
- return;
-
- node = new me.Node({
- id: data.id,
- parent: $('<li class="child-node"></li>').appendTo(me.$hierarchy.find('.node-children')),
- parent_id: undefined,
- image: data.image,
- name: data.name,
- title: data.title,
- expandable: true,
- connections: data.connections,
- is_root: true
- });
-
- if (!expand_node && data.connections)
- expand_node = node;
- });
-
- me.root_node = expand_node;
- if (!expanded_view) {
- me.expand_node(expand_node);
- }
- }
- });
- }
-
- expand_node(node) {
- const 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 = $(`[id="${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
- $(`[id="${node.parent_id}"]`).addClass('active-path');
- }
-
- load_children(node, deep=false) {
- if (!deep) {
- frappe.run_serially([
- () => this.get_child_nodes(node.id),
- (child_nodes) => this.render_child_nodes(node, child_nodes)
- ]);
- } else {
- frappe.run_serially([
- () => frappe.dom.freeze(),
- () => this.setup_hierarchy(),
- () => this.render_root_nodes(true),
- () => this.get_all_nodes(),
- (data_list) => this.render_children_of_all_nodes(data_list),
- () => frappe.dom.unfreeze()
- ]);
- }
- }
-
- get_child_nodes(node_id) {
- let me = this;
- return new Promise(resolve => {
- frappe.call({
- method: me.method,
- args: {
- parent: node_id,
- company: me.company
- }
- }).then(r => resolve(r.message));
- });
- }
-
- render_child_nodes(node, child_nodes) {
- const last_level = this.$hierarchy.find('.level:last').index();
- const current_level = $(`[id="${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) => {
- if (!$(`[id="${data.id}"]`).length) {
- this.add_node(node, data);
- setTimeout(() => {
- this.add_connector(node.id, data.id);
- }, 250);
- }
- });
- }
- }
-
- node.$children.show();
- $(`path[data-parent="${node.id}"]`).show();
- node.expanded = true;
- }
-
- get_all_nodes() {
- let me = this;
- return new Promise(resolve => {
- frappe.call({
- method: 'erpnext.utilities.hierarchy_chart.get_all_nodes',
- args: {
- method: me.method,
- company: me.company
- },
- callback: (r) => {
- resolve(r.message);
- }
- });
- });
- }
-
- render_children_of_all_nodes(data_list) {
- let entry = undefined;
- let node = undefined;
-
- while (data_list.length) {
- // to avoid overlapping connectors
- entry = data_list.shift();
- node = this.nodes[entry.parent];
- if (node) {
- this.render_child_nodes_for_expanded_view(node, entry.data);
- } else if (data_list.length) {
- data_list.push(entry);
- }
- }
- }
-
- render_child_nodes_for_expanded_view(node, child_nodes) {
- node.$children = $('<ul class="node-children"></ul>');
-
- const last_level = this.$hierarchy.find('.level:last').index();
- const node_level = $(`[id="${node.id}"]`).parent().parent().parent().index();
-
- if (last_level === node_level) {
- this.$hierarchy.append(`
- <li class="level"></li>
- `);
- node.$children.appendTo(this.$hierarchy.find('.level:last'));
- } else {
- node.$children.appendTo(this.$hierarchy.find('.level:eq(' + (node_level + 1) + ')'));
- }
-
- node.$children.hide().empty();
-
- if (child_nodes) {
- $.each(child_nodes, (_i, data) => {
- this.add_node(node, data);
- setTimeout(() => {
- this.add_connector(node.id, data.id);
- }, 250);
- });
- }
-
- node.$children.show();
- $(`path[data-parent="${node.id}"]`).show();
- node.expanded = true;
- }
-
- add_node(node, data) {
- return new this.Node({
- id: data.id,
- parent: $('<li class="child-node"></li>').appendTo(node.$children),
- parent_id: node.id,
- image: data.image,
- name: data.name,
- title: data.title,
- expandable: data.expandable,
- connections: data.connections,
- children: undefined
- });
- }
-
- add_connector(parent_id, child_id) {
- // using pure javascript for better performance
- const parent_node = document.getElementById(`${parent_id}`);
- const child_node = document.getElementById(`${child_id}`);
-
- let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-
- // we need to connect right side of the parent to the left side of the child node
- const pos_parent_right = {
- x: parent_node.offsetLeft + parent_node.offsetWidth,
- y: parent_node.offsetTop + parent_node.offsetHeight / 2
- };
- const pos_child_left = {
- x: child_node.offsetLeft - 5,
- y: child_node.offsetTop + child_node.offsetHeight / 2
- };
-
- const connector = this.get_connector(pos_parent_right, pos_child_left);
-
- path.setAttribute('d', connector);
- this.set_path_attributes(path, parent_id, child_id);
-
- document.getElementById('connectors').appendChild(path);
- }
-
- get_connector(pos_parent_right, pos_child_left) {
- if (pos_parent_right.y === pos_child_left.y) {
- // don't add arcs if it's a straight line
- return "M" +
- (pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
- "L"+
- (pos_child_left.x) + "," + (pos_child_left.y);
- } else {
- let arc_1 = "";
- let arc_2 = "";
- let offset = 0;
-
- if (pos_parent_right.y > pos_child_left.y) {
- // if child is above parent on Y axis 1st arc is anticlocwise
- // second arc is clockwise
- arc_1 = "a10,10 1 0 0 10,-10 ";
- arc_2 = "a10,10 0 0 1 10,-10 ";
- offset = 10;
- } else {
- // if child is below parent on Y axis 1st arc is clockwise
- // second arc is anticlockwise
- arc_1 = "a10,10 0 0 1 10,10 ";
- arc_2 = "a10,10 1 0 0 10,10 ";
- offset = -10;
- }
-
- return "M" + (pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
- "L" +
- (pos_parent_right.x + 40) + "," + (pos_parent_right.y) + " " +
- arc_1 +
- "L" +
- (pos_parent_right.x + 50) + "," + (pos_child_left.y + offset) + " " +
- arc_2 +
- "L"+
- (pos_child_left.x) + "," + (pos_child_left.y);
- }
- }
-
- set_path_attributes(path, parent_id, child_id) {
- path.setAttribute("data-parent", parent_id);
- path.setAttribute("data-child", child_id);
- const parent = $(`[id="${parent_id}"]`);
-
- if (parent.hasClass('active')) {
- path.setAttribute("class", "active-connector");
- path.setAttribute("marker-start", "url(#arrowstart-active)");
- path.setAttribute("marker-end", "url(#arrowhead-active)");
- } else {
- path.setAttribute("class", "collapsed-connector");
- path.setAttribute("marker-start", "url(#arrowstart-collapsed)");
- path.setAttribute("marker-end", "url(#arrowhead-collapsed)");
- }
- }
-
- set_selected_node(node) {
- // remove active class from the current node
- if (this.selected_node)
- this.selected_node.$link.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 = $(`[id="${node.parent_id}"]`);
- let previous_level_nodes = node_parent.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.id);
- });
- }
- }
- ]);
- }
-
- setup_node_click_action(node) {
- let me = this;
- let node_element = $(`[id="${node.id}"]`);
-
- node_element.click(function() {
- const 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);
- });
- }
-
- setup_edit_node_action(node) {
- let node_element = $(`[id="${node.id}"]`);
- let me = this;
-
- node_element.find('.btn-edit-node').click(function() {
- frappe.set_route('Form', me.doctype, node.id);
- });
- }
-
- remove_levels_after_node(node) {
- let level = $(`[id="${node.id}"]`).parent().parent().parent().index();
-
- level = $('.hierarchy > li:eq('+ level + ')');
- 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) => {
- const parent = $(path).data('parent');
- const child = $(path).data('child');
-
- if ($(`[id="${parent}"]`).length && $(`[id="${child}"]`).length)
- return;
-
- $(path).remove();
- });
- }
-};
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
deleted file mode 100644
index 52236e7..0000000
--- a/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
+++ /dev/null
@@ -1,550 +0,0 @@
-erpnext.HierarchyChartMobile = class {
- /* Options:
- - doctype
- - 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(doctype, wrapper, method) {
- this.page = wrapper.page;
- 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 = {};
- 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);
- me.setup_edit_node_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: true
- });
-
- node.parent.append(node_card);
- node.$link = $(`[id="${node.id}"]`);
- node.$link.addClass('mobile-node');
- }
-
- show() {
- let me = this;
- if ($(`[data-fieldname="company"]`).length) return;
-
- 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);
-
- me.setup_hierarchy();
- me.render_root_nodes();
- }
- }
- });
-
- 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>`);
- }
-
- setup_hierarchy() {
- $(`#connectors`).empty();
- if (this.$hierarchy)
- this.$hierarchy.remove();
-
- if (this.$sibling_group)
- this.$sibling_group.empty();
-
- this.$hierarchy = $(
- `<ul class="hierarchy-mobile">
- <li class="root-level level"></li>
- </ul>`);
-
- this.page.main.append(this.$hierarchy);
- }
-
- render_root_nodes() {
- let me = this;
-
- frappe.call({
- method: me.method,
- args: {
- company: me.company
- },
- }).then(r => {
- if (r.message.length) {
- let root_level = me.$hierarchy.find('.root-level');
- root_level.empty();
-
- $.each(r.message, (_i, data) => {
- return new me.Node({
- id: data.id,
- parent: root_level,
- parent_id: undefined,
- image: data.image,
- name: data.name,
- title: data.title,
- expandable: true,
- connections: data.connections,
- is_root: true
- });
- });
- }
- });
- }
-
- 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 !== undefined && 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 = $(`[id="${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) {
- node.$children.hide();
- node.expanded = 0;
-
- // 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
- $(`[id="${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: me.method,
- args: {
- parent: node_id,
- company: me.company,
- exclude_node: exclude_node
- }
- }).then(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);
- $(`[id="${data.id}"]`).addClass('active-child');
-
- setTimeout(() => {
- this.add_connector(node.id, data.id);
- }, 250);
- });
- }
- }
-
- node.$children.show();
- node.expanded = 1;
- }
-
- add_node(node, data) {
- var $li = $('<li class="child-node"></li>');
-
- return new this.Node({
- id: data.id,
- parent: $li.appendTo(node.$children),
- parent_id: node.id,
- image: data.image,
- name: data.name,
- title: data.title,
- expandable: data.expandable,
- connections: data.connections,
- children: undefined
- });
- }
-
- add_connector(parent_id, child_id) {
- const parent_node = document.getElementById(`${parent_id}`);
- const child_node = document.getElementById(`${child_id}`);
-
- const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-
- let connector = undefined;
-
- if ($(`[id="${parent_id}"]`).hasClass('active')) {
- connector = this.get_connector_for_active_node(parent_node, child_node);
- } else if ($(`[id="${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);
-
- document.getElementById('connectors').appendChild(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 - 10) + " " +
- "a10,10 1 0 0 10,10 " +
- "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);
- const parent = $(`[id="${parent_id}"]`);
-
- if (parent.hasClass('active')) {
- path.setAttribute("class", "active-connector");
- path.setAttribute("marker-start", "url(#arrowstart-active)");
- path.setAttribute("marker-end", "url(#arrowhead-active)");
- } else if (parent.hasClass('active-path')) {
- path.setAttribute("class", "collapsed-connector");
- }
- }
-
- set_selected_node(node) {
- // remove .active class from the current node
- if (this.selected_node)
- this.selected_node.$link.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 = $(`[id="${node.id}"]`);
-
- node_element.click(function() {
- let el = undefined;
-
- if (node.is_root) {
- el = $(this).detach();
- me.$hierarchy.empty();
- $(`#connectors`).empty();
- me.add_node_to_hierarchy(el, node);
- } else if (node_element.is(':visible') && node_element.hasClass('active-path')) {
- me.remove_levels_after_node(node);
- me.remove_orphaned_connectors();
- } else {
- el = $(this).detach();
- me.add_node_to_hierarchy(el, node);
- me.collapse_node();
- }
-
- me.expand_node(node);
- });
- }
-
- setup_edit_node_action(node) {
- let node_element = $(`[id="${node.id}"]`);
- let me = this;
-
- node_element.find('.btn-edit-node').click(function() {
- frappe.set_route('Form', me.doctype, node.id);
- });
- }
-
- setup_node_group_action() {
- let me = this;
-
- $('.node-group').on('click', function() {
- let parent = $(this).attr('data-parent');
- if (parent === 'undefined') {
- me.setup_hierarchy();
- me.render_root_nodes();
- } else {
- me.expand_sibling_group_node(parent);
- }
- });
- }
-
- add_node_to_hierarchy(node_element, node) {
- this.$hierarchy.append(`<li class="level"></li>`);
- node_element.removeClass('active-child active-path');
- this.$hierarchy.find('.level:last').append(node_element);
-
- let node_object = this.nodes[node.id];
- node_object.expanded = 0;
- node_object.$children = undefined;
- this.nodes[node.id] = node_object;
- }
-
- 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.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.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;
- this.nodes[node.id] = node_object;
-
- // 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.reattach_and_expand_node(node, node_object)
- ]);
- }
-
- reattach_and_expand_node(node, node_object) {
- var el = node.detach();
-
- this.$hierarchy.empty().append(`
- <li class="level"></li>
- `);
- this.$hierarchy.find('.level').append(el);
- $(`#connectors`).empty();
- this.expand_node(node_object);
- }
-
- remove_levels_after_node(node) {
- let level = $(`[id="${node.id}"]`).parent().parent().index();
-
- level = $('.hierarchy-mobile > li:eq('+ level + ')');
- level.nextAll('li').remove();
-
- let node_object = this.nodes[node.id];
- let current_node = level.find(`[id="${node.id}"]`).detach();
-
- 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) => {
- const parent = $(path).data('parent');
- const child = $(path).data('child');
-
- if ($(`[id="${parent}"]`).length && $(`[id="${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);
- }
-};
diff --git a/erpnext/public/js/templates/node_card.html b/erpnext/public/js/templates/node_card.html
deleted file mode 100644
index 4cb6ee0..0000000
--- a/erpnext/public/js/templates/node_card.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="node-card card cursor-pointer" id="{%= id %}" data-parent="{%= parent %}">
- <div class="node-meta d-flex flex-row">
- <div class="mr-3">
- <span class="avatar node-image" title="{{ name }}">
- <span class="avatar-frame" src={{image}} style="background-image: url(\'{%= image %}\')"></span>
- </span>
- </div>
- <div>
- <div class="node-name d-flex flex-row mb-1">
- <span class="ellipsis">{{ name }}</span>
- <div class="btn-xs btn-edit-node d-flex flex-row">
- <a class="node-edit-icon">{{ frappe.utils.icon("edit", "xs") }}</a>
- <span class="edit-chart-node text-xs">{{ __("Edit") }}</span>
- </div>
- </div>
- <div class="node-info d-flex flex-row mb-1">
- <div class="node-title text-muted ellipsis">{{ title }}</div>
-
- {% if is_mobile %}
- <div class="node-connections text-muted ml-2 ellipsis">
- · {{ connections }} <span class="fa fa-level-down"></span>
- </div>
- {% else %}
- {% if connections == 1 %}
- <div class="node-connections text-muted ml-2 ellipsis">· {{ connections }} Connection</div>
- {% else %}
- <div class="node-connections text-muted ml-2 ellipsis">· {{ connections }} Connections</div>
- {% endif %}
- {% endif %}
- </div>
- </div>
- </div>
-</div>
diff --git a/erpnext/public/scss/erpnext.bundle.scss b/erpnext/public/scss/erpnext.bundle.scss
index b68ddf5..d3313c7 100644
--- a/erpnext/public/scss/erpnext.bundle.scss
+++ b/erpnext/public/scss/erpnext.bundle.scss
@@ -1,4 +1,3 @@
@import "./erpnext";
@import "./call_popup";
@import "./point-of-sale";
-@import "./hierarchy_chart";
diff --git a/erpnext/public/scss/hierarchy_chart.scss b/erpnext/public/scss/hierarchy_chart.scss
deleted file mode 100644
index 57d5e84..0000000
--- a/erpnext/public/scss/hierarchy_chart.scss
+++ /dev/null
@@ -1,313 +0,0 @@
-.node-card {
- background: white;
- stroke: 1px solid var(--gray-200);
- box-shadow: var(--shadow-base);
- border-radius: 0.5rem;
- padding: 0.75rem;
- margin-left: 3rem;
- width: 18rem;
- overflow: hidden;
-
- .btn-edit-node {
- display: none;
- }
-
- .edit-chart-node {
- display: none;
- }
-
- .node-edit-icon {
- display: none;
- }
-}
-
-.node-card.exported {
- box-shadow: none
-}
-
-.node-image {
- width: 3.0rem;
- height: 3.0rem;
-}
-
-.node-name {
- font-size: 1rem;
- line-height: 1.72;
-}
-
-.node-title {
- font-size: 0.75rem;
- line-height: 1.35;
-}
-
-.node-info {
- width: 12.7rem;
-}
-
-.node-connections {
- font-size: 0.75rem;
- line-height: 1.35;
-}
-
-.node-card.active {
- background: var(--blue-50);
- border: 1px solid var(--blue-500);
- box-shadow: var(--shadow-md);
- border-radius: 0.5rem;
- padding: 0.75rem;
- width: 18rem;
-
- .btn-edit-node {
- display: flex;
- background: var(--blue-100);
- color: var(--blue-500);
- padding: .25rem .5rem;
- font-size: .75rem;
- justify-content: center;
- box-shadow: var(--shadow-sm);
- margin-left: auto;
- }
-
- .edit-chart-node {
- display: block;
- margin-right: 0.25rem;
- }
-
- .node-edit-icon {
- display: block;
- }
-
- .node-edit-icon > .icon{
- stroke: var(--blue-500);
- }
-
- .node-name {
- align-items: center;
- justify-content: space-between;
- margin-bottom: 2px;
- width: 12.2rem;
- }
-}
-
-.node-card.active-path {
- background: var(--blue-100);
- border: 1px solid var(--blue-300);
- box-shadow: var(--shadow-sm);
- border-radius: 0.5rem;
- padding: 0.75rem;
- width: 15rem;
- height: 3.0rem;
-
- .btn-edit-node {
- display: none !important;
- }
-
- .edit-chart-node {
- display: none;
- }
-
- .node-edit-icon {
- display: none;
- }
-
- .node-info {
- display: none;
- }
-
- .node-title {
- display: none;
- }
-
- .node-connections {
- display: none;
- }
-
- .node-name {
- font-size: 0.85rem;
- line-height: 1.35;
- }
-
- .node-image {
- width: 1.5rem;
- height: 1.5rem;
- }
-
- .node-meta {
- align-items: baseline;
- }
-}
-
-.node-card.collapsed {
- background: white;
- stroke: 1px solid var(--gray-200);
- box-shadow: var(--shadow-sm);
- border-radius: 0.5rem;
- padding: 0.75rem;
- width: 15rem;
- height: 3.0rem;
-
- .btn-edit-node {
- display: none !important;
- }
-
- .edit-chart-node {
- display: none;
- }
-
- .node-edit-icon {
- display: none;
- }
-
- .node-info {
- display: none;
- }
-
- .node-title {
- display: none;
- }
-
- .node-connections {
- display: none;
- }
-
- .node-name {
- font-size: 0.85rem;
- line-height: 1.35;
- }
-
- .node-image {
- width: 1.5rem;
- height: 1.5rem;
- }
-
- .node-meta {
- align-items: baseline;
- }
-}
-
-// horizontal hierarchy tree view
-#hierarchy-chart-wrapper {
- padding-top: 30px;
-
- #arrows {
- margin-top: -80px;
- }
-}
-
-.hierarchy {
- display: flex;
-}
-
-.hierarchy li {
- list-style-type: none;
-}
-
-.child-node {
- margin: 0px 0px 16px 0px;
-}
-
-.hierarchy, .hierarchy-mobile {
- .level {
- margin-right: 8px;
- align-items: flex-start;
- flex-direction: column;
- }
-}
-
-#arrows {
- position: absolute;
- overflow: visible;
-}
-
-.active-connector {
- stroke: var(--blue-500);
-}
-
-.collapsed-connector {
- stroke: var(--blue-300);
-}
-
-// mobile
-
-.hierarchy-mobile {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding-top: 10px;
- padding-left: 0px;
-}
-
-.hierarchy-mobile li {
- list-style-type: none;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
-}
-
-.mobile-node {
- margin-left: 0;
-}
-
-.mobile-node.active-path {
- width: 12.25rem;
-}
-
-.active-child {
- width: 15.5rem;
-}
-
-.mobile-node .node-connections {
- max-width: 80px;
-}
-
-.hierarchy-mobile .node-children {
- margin-top: 16px;
-}
-
-.root-level .node-card {
- margin: 0 0 16px;
-}
-
-// node group
-
-.collapsed-level {
- margin-bottom: 16px;
- width: 18rem;
-}
-
-.node-group {
- background: white;
- border: 1px solid var(--gray-300);
- box-shadow: var(--shadow-sm);
- border-radius: 0.5rem;
- padding: 0.75rem;
- width: 18rem;
- height: 3rem;
- overflow: hidden;
- align-items: center;
-}
-
-.node-group .avatar-group {
- margin-left: 0px;
-}
-
-.node-group .avatar-extra-count {
- background-color: var(--blue-100);
- color: var(--blue-500);
-}
-
-.node-group .avatar-frame {
- width: 1.5rem;
- height: 1.5rem;
-}
-
-.node-group.collapsed {
- width: 5rem;
- margin-left: 12px;
-}
-
-.sibling-group {
- display: flex;
- flex-direction: column;
- align-items: center;
-}