Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(mobile): sibling node group expansion and rendering

Browse Source
This commit is contained in:
Rucha Mahabal 2021-06-29 11:12:47 +05:30
parent cce19db826
commit 6e3a7b4a75
2 changed files with 60 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
erpnext/hr/page/organizational_chart/organizational_chart.js
View File

@ -565,11 +565,12 @@ class OrgChartMobile {
frappe.run_serially([ frappe.run_serially([
() => this.get_child_nodes(node.parent_id, node.id), () => this.get_child_nodes(node.parent_id, node.id),
(child_nodes) => this.get_node_group(child_nodes, node.id), (child_nodes) => this.get_node_group(child_nodes, node.parent_id),
(node_group) => { (node_group) => {
node_parent.find('.collapsed-level') node_parent.find('.collapsed-level')
.append(node_group); .append(node_group);
} },
() => this.setup_node_group_action()
]); ]);
} }
} }
@ -651,7 +652,6 @@ class OrgChartMobile {
setup_node_click_action(node) { setup_node_click_action(node) {
let me = this; let me = this;
let node_element = $(`#${node.id}`); let node_element = $(`#${node.id}`);
let node_object = null;
node_element.click(function() { node_element.click(function() {
if (node_element.is(':visible') && node_element.hasClass('active-path')) { if (node_element.is(':visible') && node_element.hasClass('active-path')) {
@ -665,6 +665,15 @@ class OrgChartMobile {
}); });
} }
setup_node_group_action() {
let me = this;
$('.node-group').on('click', function() {
let parent = $(this).attr('data-parent');
me.expand_sibling_group_node(parent);
});
}
add_node_to_hierarchy(node) { add_node_to_hierarchy(node) {
this.$hierarchy.append(` this.$hierarchy.append(`
<li class="level"> <li class="level">
@ -676,7 +685,7 @@ class OrgChartMobile {
node.$link.appendTo(this.$hierarchy.find('.level:last')); node.$link.appendTo(this.$hierarchy.find('.level:last'));
} }
get_node_group(nodes, sibling) { get_node_group(nodes, parent, collapsed=true) {
let limit = 2; let limit = 2;
const display_nodes = nodes.slice(0, limit); const display_nodes = nodes.slice(0, limit);
const extra_nodes = nodes.slice(limit); const extra_nodes = nodes.slice(limit);
@ -700,22 +709,55 @@ class OrgChartMobile {
`; `;
} }
if (html) {
const $node_group = const $node_group =
$(`<div class="node-group card cursor-pointer" data-sibling=${sibling}> $(`<div class="node-group card cursor-pointer" data-parent=${parent}>
<div class="avatar-group right overlap"> <div class="avatar-group right overlap">
${html} ${html}
</div> </div>
</div>`); </div>`);
if (collapsed)
$node_group.addClass('collapsed');
else
$node_group.addClass('mb-4');
return $node_group; return $node_group;
} }
return null;
}
get_avatar(node) { get_avatar(node) {
return `<span class="avatar avatar-small" title="${node.employee_name}"> return `<span class="avatar avatar-small" title="${node.employee_name}">
<span class="avatar-frame" src=${node.image} style="background-image: url(${node.image})"></span> <span class="avatar-frame" src=${node.image} style="background-image: url(${node.image})"></span>
</span>` </span>`
} }
expand_sibling_group_node(parent) {
let node_object = this.nodes[parent];
let node = node_object.$link;
node.removeClass('active-child active-path');
node_object.expanded = 0;
node_object.$children = undefined;
// show parent's siblings and expand parent node
frappe.run_serially([
() => this.get_child_nodes(node_object.parent_id, node_object.id),
(child_nodes) => this.get_node_group(child_nodes, node_object.parent_id, false),
(node_group) => {
this.$hierarchy.empty().append(node_group) },
() => this.setup_node_group_action(),
() => {
this.$hierarchy.append(`
<li class="level"></li>
`);
this.$hierarchy.append(node);
this.expand_node(node_object);
}
]);
}
remove_levels_after_node(node) { remove_levels_after_node(node) {
let level = $(`#${node.id}`).parent().parent(); let level = $(`#${node.id}`).parent().parent();

9
erpnext/public/scss/organizational_chart.scss
View File

@ -258,10 +258,10 @@
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.75rem; padding: 0.75rem;
margin-left: 12px; width: 18rem;
width: 5rem;
height: 3rem; height: 3rem;
overflow: hidden; overflow: hidden;
align-items: center;
} }
.node-group .avatar-group { .node-group .avatar-group {
@ -277,3 +277,8 @@
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
} }
.node-group.collapsed {
width: 5rem;
margin-left: 12px;
}