feat: Organizational Chart
This commit is contained in:
Rucha Mahabal
parent
7c0383a9a6
commit
c1ba35b25b
@ -476,13 +476,14 @@ def get_employee_emails(employee_list):
|
|||||||
return employee_emails
|
return employee_emails
|
||||||
|
|
||||||
@frappe.whitelist()
|
@frappe.whitelist()
|
||||||
def get_children(doctype, parent=None, company=None, is_root=False, is_tree=False):
|
def get_children(doctype, parent=None, company=None, is_root=False, is_tree=False, fields=None):
|
||||||
|
|
||||||
filters = [['status', '!=', 'Left']]
|
filters = [['status', '!=', 'Left']]
|
||||||
if company and company != 'All Companies':
|
if company and company != 'All Companies':
|
||||||
filters.append(['company', '=', company])
|
filters.append(['company', '=', company])
|
||||||
|
|
||||||
fields = ['name as value', 'employee_name as title']
|
if not fields:
|
||||||
|
fields = ['name as value', 'employee_name as title']
|
||||||
|
|
||||||
if is_root:
|
if is_root:
|
||||||
parent = ''
|
parent = ''
|
||||||
|
|||||||
0
erpnext/hr/page/organizational_chart/__init__.py
Normal file
0
erpnext/hr/page/organizational_chart/__init__.py
Normal file
27
erpnext/hr/page/organizational_chart/node_card.html
Normal file
27
erpnext/hr/page/organizational_chart/node_card.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<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 ml-5">
|
||||||
|
<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 connections == 1 %}
|
||||||
|
<div class="node-connections text-muted ml-2">· {{ connections }} {{ __("Connection") }} </div>
|
||||||
|
{% else %}
|
||||||
|
<div class="node-connections text-muted ml-2">· {{ connections }} {{ __("Connections") }} </div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
409
erpnext/hr/page/organizational_chart/organizational_chart.js
Normal file
409
erpnext/hr/page/organizational_chart/organizational_chart.js
Normal file
@ -0,0 +1,409 @@
|
|||||||
|
frappe.pages['organizational-chart'].on_page_load = function(wrapper) {
|
||||||
|
frappe.ui.make_app_page({
|
||||||
|
parent: wrapper,
|
||||||
|
title: __('Organizational Chart'),
|
||||||
|
single_column: true
|
||||||
|
});
|
||||||
|
|
||||||
|
let organizational_chart = new OrganizationalChart(wrapper);
|
||||||
|
$(wrapper).bind('show', ()=> {
|
||||||
|
organizational_chart.show();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
class OrganizationalChart {
|
||||||
|
|
||||||
|
constructor(wrapper) {
|
||||||
|
this.wrapper = $(wrapper);
|
||||||
|
this.page = wrapper.page;
|
||||||
|
|
||||||
|
this.page.main.css({
|
||||||
|
'min-height': '300px',
|
||||||
|
'max-height': '600px',
|
||||||
|
'overflow': 'auto',
|
||||||
|
'position': 'relative'
|
||||||
|
});
|
||||||
|
this.page.main.addClass('frappe-card');
|
||||||
|
|
||||||
|
this.nodes = {};
|
||||||
|
this.setup_node_class();
|
||||||
|
}
|
||||||
|
|
||||||
|
setup_node_class() {
|
||||||
|
let me = this;
|
||||||
|
this.Node = class {
|
||||||
|
constructor({
|
||||||
|
id, parent, parent_id, image, name, title, expandable, connections, is_root // eslint-disable-line
|
||||||
|
}) {
|
||||||
|
// to setup values passed via constructor
|
||||||
|
$.extend(this, arguments[0]);
|
||||||
|
|
||||||
|
this.expanded = 0;
|
||||||
|
|
||||||
|
me.nodes[this.id] = this;
|
||||||
|
me.make_node_element(this);
|
||||||
|
me.setup_node_click_action(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
make_node_element(node) {
|
||||||
|
let node_card = frappe.render_template('node_card', {
|
||||||
|
id: node.id,
|
||||||
|
name: node.name,
|
||||||
|
title: node.title,
|
||||||
|
image: node.image,
|
||||||
|
parent: node.parent_id,
|
||||||
|
connections: node.connections
|
||||||
|
});
|
||||||
|
|
||||||
|
node.parent.append(node_card);
|
||||||
|
node.$link = $(`#${node.id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
show() {
|
||||||
|
frappe.breadcrumbs.add('HR');
|
||||||
|
|
||||||
|
let me = this;
|
||||||
|
let company = this.page.add_field({
|
||||||
|
fieldtype: 'Link',
|
||||||
|
options: 'Company',
|
||||||
|
fieldname: 'company',
|
||||||
|
placeholder: __('Select Company'),
|
||||||
|
default: frappe.defaults.get_default('company'),
|
||||||
|
only_select: true,
|
||||||
|
reqd: 1,
|
||||||
|
change: () => {
|
||||||
|
me.company = undefined;
|
||||||
|
|
||||||
|
if (company.get_value() && me.company != company.get_value()) {
|
||||||
|
me.company = company.get_value();
|
||||||
|
|
||||||
|
// svg for connectors
|
||||||
|
me.make_svg_markers()
|
||||||
|
|
||||||
|
if (me.$hierarchy)
|
||||||
|
me.$hierarchy.remove();
|
||||||
|
|
||||||
|
// setup hierarchy
|
||||||
|
me.$hierarchy = $(
|
||||||
|
`<ul class="hierarchy">
|
||||||
|
<li class="root-level level"></li>
|
||||||
|
</ul>`);
|
||||||
|
|
||||||
|
me.page.main.append(me.$hierarchy);
|
||||||
|
me.render_root_node();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
company.refresh();
|
||||||
|
$(`[data-fieldname="company"]`).trigger('change');
|
||||||
|
}
|
||||||
|
|
||||||
|
make_svg_markers() {
|
||||||
|
$('#arrows').remove();
|
||||||
|
|
||||||
|
this.page.main.prepend(`
|
||||||
|
<svg id="arrows" width="100%" height="100%">
|
||||||
|
<defs>
|
||||||
|
<marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
|
||||||
|
<path d="M 0 0 L 10 5 L 0 10 z"></path>
|
||||||
|
</marker>
|
||||||
|
<marker id="arrowhead-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-300)">
|
||||||
|
<path d="M 0 0 L 10 5 L 0 10 z"></path>
|
||||||
|
</marker>
|
||||||
|
|
||||||
|
<marker id="arrowstart-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-500)">
|
||||||
|
<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-500)"/>
|
||||||
|
</marker>
|
||||||
|
<marker id="arrowstart-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-300)">
|
||||||
|
<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-300)"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
<g id="connectors" fill="none">
|
||||||
|
</g>
|
||||||
|
</svg>`);
|
||||||
|
}
|
||||||
|
|
||||||
|
render_root_node() {
|
||||||
|
this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
|
||||||
|
|
||||||
|
let me = this;
|
||||||
|
|
||||||
|
frappe.call({
|
||||||
|
method: me.method,
|
||||||
|
args: {
|
||||||
|
company: me.company
|
||||||
|
},
|
||||||
|
callback: function(r) {
|
||||||
|
if (r.message.length) {
|
||||||
|
let data = r.message[0];
|
||||||
|
|
||||||
|
let root_node = new me.Node({
|
||||||
|
id: data.name,
|
||||||
|
parent: me.$hierarchy.find('.root-level'),
|
||||||
|
parent_id: undefined,
|
||||||
|
image: data.image,
|
||||||
|
name: data.employee_name,
|
||||||
|
title: data.designation,
|
||||||
|
expandable: true,
|
||||||
|
connections: data.connections,
|
||||||
|
is_root: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
me.expand_node(root_node);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
expand_node(node) {
|
||||||
|
let is_sibling = this.selected_node && this.selected_node.parent_id === node.parent_id;
|
||||||
|
this.set_selected_node(node);
|
||||||
|
this.show_active_path(node);
|
||||||
|
this.collapse_previous_level_nodes(node);
|
||||||
|
|
||||||
|
// since the previous node collapses, all connections to that node need to be rebuilt
|
||||||
|
// if a sibling node is clicked, connections don't need to be rebuilt
|
||||||
|
if (!is_sibling) {
|
||||||
|
// rebuild outgoing connections
|
||||||
|
this.refresh_connectors(node.parent_id);
|
||||||
|
|
||||||
|
// rebuild incoming connections
|
||||||
|
let grandparent = $(`#${node.parent_id}`).attr('data-parent');
|
||||||
|
this.refresh_connectors(grandparent)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node.expandable && !node.expanded) {
|
||||||
|
return this.load_children(node);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
collapse_node() {
|
||||||
|
if (this.selected_node.expandable) {
|
||||||
|
this.selected_node.$children.hide();
|
||||||
|
$(`path[data-parent="${this.selected_node.id}"]`).hide();
|
||||||
|
this.selected_node.expanded = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
show_active_path(node) {
|
||||||
|
// mark node parent on active path
|
||||||
|
$(`#${node.parent_id}`).addClass('active-path');
|
||||||
|
}
|
||||||
|
|
||||||
|
load_children(node) {
|
||||||
|
frappe.run_serially([
|
||||||
|
() => this.get_child_nodes(node.id),
|
||||||
|
(child_nodes) => this.render_child_nodes(node, child_nodes)
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
get_child_nodes(node_id) {
|
||||||
|
let me = this;
|
||||||
|
return new Promise(resolve => {
|
||||||
|
frappe.call({
|
||||||
|
method: this.method,
|
||||||
|
args: {
|
||||||
|
parent: node_id,
|
||||||
|
company: me.company
|
||||||
|
},
|
||||||
|
callback: (r) => {
|
||||||
|
resolve(r.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render_child_nodes(node, child_nodes) {
|
||||||
|
const last_level = this.$hierarchy.find('.level:last').index();
|
||||||
|
const current_level = $(`#${node.id}`).parent().parent().parent().index();
|
||||||
|
|
||||||
|
if (last_level === current_level) {
|
||||||
|
this.$hierarchy.append(`
|
||||||
|
<li class="level"></li>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!node.$children) {
|
||||||
|
node.$children = $('<ul class="node-children"></ul>')
|
||||||
|
.hide()
|
||||||
|
.appendTo(this.$hierarchy.find('.level:last'));
|
||||||
|
|
||||||
|
node.$children.empty();
|
||||||
|
|
||||||
|
if (child_nodes) {
|
||||||
|
$.each(child_nodes, (_i, data) => {
|
||||||
|
this.add_node(node, data);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.add_connector(node.id, data.name);
|
||||||
|
}, 250);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
node.$children.show();
|
||||||
|
$(`path[data-parent="${node.id}"]`).show();
|
||||||
|
node.expanded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
add_node(node, data) {
|
||||||
|
var $li = $('<li class="child-node"></li>');
|
||||||
|
|
||||||
|
return new this.Node({
|
||||||
|
id: data.name,
|
||||||
|
parent: $li.appendTo(node.$children),
|
||||||
|
parent_id: node.id,
|
||||||
|
image: data.image,
|
||||||
|
name: data.employee_name,
|
||||||
|
title: data.designation,
|
||||||
|
expandable: data.expandable,
|
||||||
|
connections: data.connections,
|
||||||
|
children: undefined
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
add_connector(parent_id, child_id) {
|
||||||
|
let parent_node = document.querySelector(`#${parent_id}`);
|
||||||
|
let child_node = document.querySelector(`#${child_id}`);
|
||||||
|
|
||||||
|
// variable for the namespace
|
||||||
|
const svgns = 'http://www.w3.org/2000/svg';
|
||||||
|
let path = document.createElementNS(svgns, 'path');
|
||||||
|
|
||||||
|
// we need to connect right side of the parent to the left side of the child node
|
||||||
|
let pos_parent_right = {
|
||||||
|
x: parent_node.offsetLeft + parent_node.offsetWidth,
|
||||||
|
y: parent_node.offsetTop + parent_node.offsetHeight / 2
|
||||||
|
};
|
||||||
|
let pos_child_left = {
|
||||||
|
x: child_node.offsetLeft - 5,
|
||||||
|
y: child_node.offsetTop + child_node.offsetHeight / 2
|
||||||
|
};
|
||||||
|
|
||||||
|
let connector =
|
||||||
|
"M" +
|
||||||
|
(pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
|
||||||
|
"C" +
|
||||||
|
(pos_parent_right.x + 100) + "," + (pos_parent_right.y) + " " +
|
||||||
|
(pos_child_left.x - 100) + "," + (pos_child_left.y) + " " +
|
||||||
|
(pos_child_left.x) + "," + (pos_child_left.y);
|
||||||
|
|
||||||
|
path.setAttribute("d", connector);
|
||||||
|
path.setAttribute("data-parent", parent_id);
|
||||||
|
path.setAttribute("data-child", child_id);
|
||||||
|
|
||||||
|
if ($(`#${parent_id}`).hasClass('active')) {
|
||||||
|
path.setAttribute("class", "active-connector");
|
||||||
|
path.setAttribute("marker-start", "url(#arrowstart-active)");
|
||||||
|
path.setAttribute("marker-end", "url(#arrowhead-active)");
|
||||||
|
} else if ($(`#${parent_id}`).hasClass('active-path')) {
|
||||||
|
path.setAttribute("class", "collapsed-connector");
|
||||||
|
path.setAttribute("marker-start", "url(#arrowstart-collapsed)");
|
||||||
|
path.setAttribute("marker-end", "url(#arrowhead-collapsed)");
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#connectors').append(path);
|
||||||
|
}
|
||||||
|
|
||||||
|
set_selected_node(node) {
|
||||||
|
// remove .active class from the current node
|
||||||
|
$('.active').removeClass('active');
|
||||||
|
|
||||||
|
// add active class to the newly selected node
|
||||||
|
this.selected_node = node;
|
||||||
|
node.$link.addClass('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
collapse_previous_level_nodes(node) {
|
||||||
|
let node_parent = $(`#${node.parent_id}`);
|
||||||
|
|
||||||
|
let previous_level_nodes = node_parent.parent().parent().children('li');
|
||||||
|
if (node_parent.parent().hasClass('root-level')) {
|
||||||
|
previous_level_nodes = node_parent.parent().children('li');
|
||||||
|
}
|
||||||
|
|
||||||
|
let node_card = undefined;
|
||||||
|
|
||||||
|
previous_level_nodes.each(function() {
|
||||||
|
node_card = $(this).find('.node-card');
|
||||||
|
|
||||||
|
if (!node_card.hasClass('active-path')) {
|
||||||
|
node_card.addClass('collapsed');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh_connectors(node_parent) {
|
||||||
|
if (!node_parent) return;
|
||||||
|
|
||||||
|
$(`path[data-parent="${node_parent}"]`).remove();
|
||||||
|
|
||||||
|
frappe.run_serially([
|
||||||
|
() => this.get_child_nodes(node_parent),
|
||||||
|
(child_nodes) => {
|
||||||
|
if (child_nodes) {
|
||||||
|
$.each(child_nodes, (_i, data) => {
|
||||||
|
this.add_connector(node_parent, data.name);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
setup_node_click_action(node) {
|
||||||
|
let me = this;
|
||||||
|
let node_element = $(`#${node.id}`);
|
||||||
|
|
||||||
|
node_element.click(function() {
|
||||||
|
let is_sibling = me.selected_node.parent_id === node.parent_id;
|
||||||
|
|
||||||
|
if (is_sibling) {
|
||||||
|
me.collapse_node();
|
||||||
|
} else if (node_element.is(':visible')
|
||||||
|
&& (node_element.hasClass('collapsed') || node_element.hasClass('active-path'))) {
|
||||||
|
me.remove_levels_after_node(node);
|
||||||
|
me.remove_orphaned_connectors();
|
||||||
|
}
|
||||||
|
|
||||||
|
me.expand_node(node);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
remove_levels_after_node(node) {
|
||||||
|
let level = $(`#${node.id}`).parent().parent().parent();
|
||||||
|
|
||||||
|
if ($(`#${node.id}`).parent().hasClass('root-level')) {
|
||||||
|
level = $(`#${node.id}`).parent();
|
||||||
|
}
|
||||||
|
|
||||||
|
level = $('.hierarchy > li:eq('+ level.index() + ')');
|
||||||
|
level.nextAll('li').remove();
|
||||||
|
|
||||||
|
let nodes = level.find('.node-card');
|
||||||
|
let node_object = undefined;
|
||||||
|
|
||||||
|
$.each(nodes, (_i, element) => {
|
||||||
|
node_object = this.nodes[element.id];
|
||||||
|
node_object.expanded = 0;
|
||||||
|
node_object.$children = undefined;
|
||||||
|
});
|
||||||
|
|
||||||
|
nodes.removeClass('collapsed active-path');
|
||||||
|
}
|
||||||
|
|
||||||
|
remove_orphaned_connectors() {
|
||||||
|
let paths = $('#connectors > path');
|
||||||
|
$.each(paths, (_i, path) => {
|
||||||
|
let parent = $(path).data('parent');
|
||||||
|
let child = $(path).data('child');
|
||||||
|
|
||||||
|
if ($(parent).length || $(child).length)
|
||||||
|
return;
|
||||||
|
|
||||||
|
$(path).remove();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"content": null,
|
||||||
|
"creation": "2021-05-25 10:53:10.107241",
|
||||||
|
"docstatus": 0,
|
||||||
|
"doctype": "Page",
|
||||||
|
"idx": 0,
|
||||||
|
"modified": "2021-05-25 10:53:18.201931",
|
||||||
|
"modified_by": "Administrator",
|
||||||
|
"module": "HR",
|
||||||
|
"name": "organizational-chart",
|
||||||
|
"owner": "Administrator",
|
||||||
|
"page_name": "Organizational Chart",
|
||||||
|
"roles": [
|
||||||
|
{
|
||||||
|
"role": "HR User"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"role": "HR Manager"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"script": null,
|
||||||
|
"standard": "Yes",
|
||||||
|
"style": null,
|
||||||
|
"system_page": 0,
|
||||||
|
"title": "Organizational Chart"
|
||||||
|
}
|
||||||
49
erpnext/hr/page/organizational_chart/organizational_chart.py
Normal file
49
erpnext/hr/page/organizational_chart/organizational_chart.py
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
from __future__ import unicode_literals
|
||||||
|
import frappe
|
||||||
|
|
||||||
|
@frappe.whitelist()
|
||||||
|
def get_children(parent=None, company=None, is_root=False, is_tree=False, fields=None):
|
||||||
|
|
||||||
|
filters = [['status', '!=', 'Left']]
|
||||||
|
if company and company != 'All Companies':
|
||||||
|
filters.append(['company', '=', company])
|
||||||
|
|
||||||
|
if not fields:
|
||||||
|
fields = ['employee_name', 'name', 'reports_to', 'image', 'designation']
|
||||||
|
|
||||||
|
if is_root:
|
||||||
|
parent = ''
|
||||||
|
if parent and company and parent!=company:
|
||||||
|
filters.append(['reports_to', '=', parent])
|
||||||
|
else:
|
||||||
|
filters.append(['reports_to', '=', ''])
|
||||||
|
|
||||||
|
employees = frappe.get_list('Employee', fields=fields,
|
||||||
|
filters=filters, order_by='name')
|
||||||
|
|
||||||
|
for employee in employees:
|
||||||
|
is_expandable = frappe.get_all('Employee', filters=[
|
||||||
|
['reports_to', '=', employee.get('name')]
|
||||||
|
])
|
||||||
|
employee.connections = get_connections(employee.name)
|
||||||
|
employee.expandable = 1 if is_expandable else 0
|
||||||
|
|
||||||
|
return employees
|
||||||
|
|
||||||
|
|
||||||
|
def get_connections(employee):
|
||||||
|
num_connections = 0
|
||||||
|
|
||||||
|
connections = frappe.get_list('Employee', filters=[
|
||||||
|
['reports_to', '=', employee]
|
||||||
|
])
|
||||||
|
num_connections += len(connections)
|
||||||
|
|
||||||
|
while connections:
|
||||||
|
for entry in connections:
|
||||||
|
connections = frappe.get_list('Employee', filters=[
|
||||||
|
['reports_to', '=', entry.name]
|
||||||
|
])
|
||||||
|
num_connections += len(connections)
|
||||||
|
|
||||||
|
return num_connections
|
||||||
@ -3,7 +3,8 @@
|
|||||||
"public/less/erpnext.less",
|
"public/less/erpnext.less",
|
||||||
"public/less/hub.less",
|
"public/less/hub.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/organizational_chart.scss"
|
||||||
],
|
],
|
||||||
"css/marketplace.css": [
|
"css/marketplace.css": [
|
||||||
"public/less/hub.less"
|
"public/less/hub.less"
|
||||||
|
|||||||
209
erpnext/public/scss/organizational_chart.scss
Normal file
209
erpnext/public/scss/organizational_chart.scss
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
.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;
|
||||||
|
|
||||||
|
.btn-edit-node {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-chart-node {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-edit-icon {
|
||||||
|
display: 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-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;
|
||||||
|
height: 5rem;
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-chart-node {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-edit-icon {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-chart-node {
|
||||||
|
margin-right: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-edit-icon > .icon{
|
||||||
|
stroke: var(--blue-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-name {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hierarchy li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.child-node {
|
||||||
|
margin: 0px 0px 16px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#arrows {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-connector {
|
||||||
|
stroke: var(--blue-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsed-connector {
|
||||||
|
stroke: var(--blue-300);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user