From 520268002fca6ac05766829eb7e27f97bbc29b5d Mon Sep 17 00:00:00 2001 From: Rucha Mahabal Date: Thu, 15 Jun 2023 13:10:19 +0530 Subject: [PATCH 1/2] refactor!: remove hierarchy charts --- erpnext/public/build.json | 8 +- erpnext/public/js/hierarchy-chart.bundle.js | 3 - .../hierarchy_chart_desktop.js | 608 ------------------ .../hierarchy_chart/hierarchy_chart_mobile.js | 550 ---------------- erpnext/public/js/templates/node_card.html | 33 - erpnext/public/scss/erpnext.bundle.scss | 1 - erpnext/public/scss/hierarchy_chart.scss | 313 --------- erpnext/utilities/hierarchy_chart.py | 36 -- 8 files changed, 1 insertion(+), 1551 deletions(-) delete mode 100644 erpnext/public/js/hierarchy-chart.bundle.js delete mode 100644 erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js delete mode 100644 erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js delete mode 100644 erpnext/public/js/templates/node_card.html delete mode 100644 erpnext/public/scss/hierarchy_chart.scss delete mode 100644 erpnext/utilities/hierarchy_chart.py diff --git a/erpnext/public/build.json b/erpnext/public/build.json index 3d38aca418..1bed541831 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 02703139dd..0000000000 --- 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 a585aa614f..0000000000 --- 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 = $( - ``); - - this.page.main - .find('#hierarchy-chart') - .empty() - .append(this.$hierarchy); - - this.nodes = {}; - } - - make_svg_markers() { - $('#hierarchy-chart-wrapper').remove(); - - this.page.main.append(` -
- - - - - - - - - - - - - - - - - - - -
-
-
`); - } - - 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: $('
  • ').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(` -
  • - `); - } - - if (!node.$children) { - node.$children = $('') - .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 = $(''); - - 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(` -
  • - `); - 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: $('
  • ').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 52236e7df9..0000000000 --- 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 = $(`
    `); - 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(` - - - - - - - - - - - - - - - - - - - `); - } - - setup_hierarchy() { - $(`#connectors`).empty(); - if (this.$hierarchy) - this.$hierarchy.remove(); - - if (this.$sibling_group) - this.$sibling_group.empty(); - - this.$hierarchy = $( - ``); - - 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( - `
    ` - ); - - 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 = $('') - .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 = $('
  • '); - - 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(`
  • `); - 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} - -
    - +${extra_nodes.length} -
    -     - `; - } - - if (html) { - const $node_group = - $(`
    -
    - ${html} -
    -
    `); - - if (collapsed) - $node_group.addClass('collapsed'); - - return $node_group; - } - - return null; - } - - get_avatar(node) { - return ` - - `; - } - - 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(` -
  • - `); - 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 4cb6ee03c0..0000000000 --- a/erpnext/public/js/templates/node_card.html +++ /dev/null @@ -1,33 +0,0 @@ -
    -
    -
    - - - -
    -
    -
    - {{ name }} -
    - {{ frappe.utils.icon("edit", "xs") }} - {{ __("Edit") }} -
    -
    -
    -
    {{ title }}
    - - {% if is_mobile %} -
    - · {{ connections }} -
    - {% else %} - {% if connections == 1 %} -
    · {{ connections }} Connection
    - {% else %} -
    · {{ connections }} Connections
    - {% endif %} - {% endif %} -
    -
    -
    -
    diff --git a/erpnext/public/scss/erpnext.bundle.scss b/erpnext/public/scss/erpnext.bundle.scss index b68ddf52b2..d3313c7cee 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 57d5e8414a..0000000000 --- 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; -} diff --git a/erpnext/utilities/hierarchy_chart.py b/erpnext/utilities/hierarchy_chart.py deleted file mode 100644 index 4bf4353cdf..0000000000 --- a/erpnext/utilities/hierarchy_chart.py +++ /dev/null @@ -1,36 +0,0 @@ -# Copyright (c) 2021, Frappe Technologies Pvt. Ltd. and Contributors -# MIT License. See license.txt - - -import frappe -from frappe import _ - - -@frappe.whitelist() -def get_all_nodes(method, company): - """Recursively gets all data from nodes""" - method = frappe.get_attr(method) - - if method not in frappe.whitelisted: - frappe.throw(_("Not Permitted"), frappe.PermissionError) - - root_nodes = method(company=company) - result = [] - nodes_to_expand = [] - - for root in root_nodes: - data = method(root.id, company) - result.append(dict(parent=root.id, parent_name=root.name, data=data)) - nodes_to_expand.extend( - [{"id": d.get("id"), "name": d.get("name")} for d in data if d.get("expandable")] - ) - - while nodes_to_expand: - parent = nodes_to_expand.pop(0) - data = method(parent.get("id"), company) - result.append(dict(parent=parent.get("id"), parent_name=parent.get("name"), data=data)) - for d in data: - if d.get("expandable"): - nodes_to_expand.append({"id": d.get("id"), "name": d.get("name")}) - - return result From 8c374f57ed309a973b83cf8d1463888012a3ecc2 Mon Sep 17 00:00:00 2001 From: Rucha Mahabal Date: Thu, 15 Jun 2023 13:56:05 +0530 Subject: [PATCH 2/2] chore: remove html2canvas from dependencies - was used for hierarchy charts (org charts) --- .eslintrc | 1 - package.json | 1 - yarn.lock | 19 ------------------- 3 files changed, 21 deletions(-) diff --git a/.eslintrc b/.eslintrc index 276d6ff372..12fefa0968 100644 --- a/.eslintrc +++ b/.eslintrc @@ -154,7 +154,6 @@ "before": true, "beforeEach": true, "onScan": true, - "html2canvas": true, "extend_cscript": true, "localforage": true } diff --git a/package.json b/package.json index 6c11e9dddc..4e686f7ca7 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "html2canvas": "^1.1.4", "onscan.js": "^1.5.2" } } diff --git a/yarn.lock b/yarn.lock index 8e5d1bd1c1..fa1b1d673b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,25 +2,6 @@ # yarn lockfile v1 -base64-arraybuffer@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz#4b944fac0191aa5907afe2d8c999ccc57ce80f45" - integrity sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ== - -css-line-break@1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.1.1.tgz#d5e9bdd297840099eb0503c7310fd34927a026ef" - integrity sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA== - dependencies: - base64-arraybuffer "^0.2.0" - -html2canvas@^1.1.4: - version "1.1.4" - resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.1.4.tgz#53ae91cd26e9e9e623c56533cccb2e3f57c8124c" - integrity sha512-uHgQDwrXsRmFdnlOVFvHin9R7mdjjZvoBoXxicPR+NnucngkaLa5zIDW9fzMkiip0jSffyTyWedE8iVogYOeWg== - dependencies: - css-line-break "1.1.1" - onscan.js@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/onscan.js/-/onscan.js-1.5.2.tgz#14ed636e5f4c3f0a78bacbf9a505dad3140ee341"