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

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

@ -565,11 +565,12 @@ class OrgChartMobile {
frappe.run_serially([
() => 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_parent.find('.collapsed-level')
.append(node_group);
}
},
() => this.setup_node_group_action()
]);
}
}
@ -651,7 +652,6 @@ class OrgChartMobile {
setup_node_click_action(node) {
let me = this;
let node_element = $(`#${node.id}`);
let node_object = null;
node_element.click(function() {
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) {
this.$hierarchy.append(`
<li class="level">
@ -676,7 +685,7 @@ class OrgChartMobile {
node.$link.appendTo(this.$hierarchy.find('.level:last'));
}
get_node_group(nodes, sibling) {
get_node_group(nodes, parent, collapsed=true) {
let limit = 2;
const display_nodes = nodes.slice(0, limit);
const extra_nodes = nodes.slice(limit);
@ -700,14 +709,23 @@ class OrgChartMobile {
`;
}
const $node_group =
$(`<div class="node-group card cursor-pointer" data-sibling=${sibling}>
<div class="avatar-group right overlap">
${html}
</div>
</div>`);
if (html) {
const $node_group =
$(`<div class="node-group card cursor-pointer" data-parent=${parent}>
<div class="avatar-group right overlap">
${html}
</div>
</div>`);
return $node_group;
if (collapsed)
$node_group.addClass('collapsed');
else
$node_group.addClass('mb-4');
return $node_group;
}
return null;
}
get_avatar(node) {
@ -716,6 +734,30 @@ class OrgChartMobile {
</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) {
let level = $(`#${node.id}`).parent().parent();

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

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