feat(mobile): sibling node group expansion and rendering
diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.js b/erpnext/hr/page/organizational_chart/organizational_chart.js
index 5739a11..edaf461 100644
--- a/erpnext/hr/page/organizational_chart/organizational_chart.js
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.js
@@ -565,11 +565,12 @@
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 @@
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 @@
});
}
+ 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 @@
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 @@
`;
}
- 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 @@
</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();
diff --git a/erpnext/public/scss/organizational_chart.scss b/erpnext/public/scss/organizational_chart.scss
index 02446be..b6d50a0 100644
--- a/erpnext/public/scss/organizational_chart.scss
+++ b/erpnext/public/scss/organizational_chart.scss
@@ -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;
}
\ No newline at end of file