Merge pull request #35709 from ruchamahabal/remove-hierarchy-chart
This commit is contained in:
Rucha Mahabal
GitHub
commit
6dd5117f61
@ -154,7 +154,6 @@
|
|||||||
"before": true,
|
"before": true,
|
||||||
"beforeEach": true,
|
"beforeEach": true,
|
||||||
"onScan": true,
|
"onScan": true,
|
||||||
"html2canvas": true,
|
|
||||||
"extend_cscript": true,
|
"extend_cscript": true,
|
||||||
"localforage": true
|
"localforage": true
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,8 +2,7 @@
|
|||||||
"css/erpnext.css": [
|
"css/erpnext.css": [
|
||||||
"public/less/erpnext.less",
|
"public/less/erpnext.less",
|
||||||
"public/scss/call_popup.scss",
|
"public/scss/call_popup.scss",
|
||||||
"public/scss/point-of-sale.scss",
|
"public/scss/point-of-sale.scss"
|
||||||
"public/scss/hierarchy_chart.scss"
|
|
||||||
],
|
],
|
||||||
"js/erpnext-web.min.js": [
|
"js/erpnext-web.min.js": [
|
||||||
"public/js/website_utils.js",
|
"public/js/website_utils.js",
|
||||||
@ -37,7 +36,6 @@
|
|||||||
"public/js/utils/dimension_tree_filter.js",
|
"public/js/utils/dimension_tree_filter.js",
|
||||||
"public/js/telephony.js",
|
"public/js/telephony.js",
|
||||||
"public/js/templates/call_link.html",
|
"public/js/templates/call_link.html",
|
||||||
"public/js/templates/node_card.html",
|
|
||||||
"public/js/bulk_transaction_processing.js"
|
"public/js/bulk_transaction_processing.js"
|
||||||
],
|
],
|
||||||
"js/item-dashboard.min.js": [
|
"js/item-dashboard.min.js": [
|
||||||
@ -62,10 +60,6 @@
|
|||||||
"public/js/bank_reconciliation_tool/number_card.js",
|
"public/js/bank_reconciliation_tool/number_card.js",
|
||||||
"public/js/bank_reconciliation_tool/dialog_manager.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": [
|
"js/e-commerce.min.js": [
|
||||||
"e_commerce/product_ui/views.js",
|
"e_commerce/product_ui/views.js",
|
||||||
"e_commerce/product_ui/grid.js",
|
"e_commerce/product_ui/grid.js",
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
import "./hierarchy_chart/hierarchy_chart_desktop.js";
|
|
||||||
import "./hierarchy_chart/hierarchy_chart_mobile.js";
|
|
||||||
import "./templates/node_card.html";
|
|
||||||
@ -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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -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);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -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>
|
|
||||||
@ -1,4 +1,3 @@
|
|||||||
@import "./erpnext";
|
@import "./erpnext";
|
||||||
@import "./call_popup";
|
@import "./call_popup";
|
||||||
@import "./point-of-sale";
|
@import "./point-of-sale";
|
||||||
@import "./hierarchy_chart";
|
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
@ -13,7 +13,6 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {},
|
"devDependencies": {},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"html2canvas": "^1.1.4",
|
|
||||||
"onscan.js": "^1.5.2"
|
"onscan.js": "^1.5.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
19
yarn.lock
19
yarn.lock
@ -2,25 +2,6 @@
|
|||||||
# yarn lockfile v1
|
# 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:
|
onscan.js@^1.5.2:
|
||||||
version "1.5.2"
|
version "1.5.2"
|
||||||
resolved "https://registry.yarnpkg.com/onscan.js/-/onscan.js-1.5.2.tgz#14ed636e5f4c3f0a78bacbf9a505dad3140ee341"
|
resolved "https://registry.yarnpkg.com/onscan.js/-/onscan.js-1.5.2.tgz#14ed636e5f4c3f0a78bacbf9a505dad3140ee341"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user