feat: set variable datatable tree depth
This commit is contained in:
parent
feef3b57c1
commit
281d53d98f
1 changed files with 39 additions and 5 deletions
|
|
@ -1961,11 +1961,16 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
|
|||
this.page.main
|
||||
);
|
||||
if (this.tree_report) {
|
||||
this.$tree_footer = $(`<div class="tree-footer col-md-6">
|
||||
<button class="btn btn-xs btn-default" data-action="expand_all_rows">
|
||||
${__("Expand All")}</button>
|
||||
<button class="btn btn-xs btn-default" data-action="collapse_all_rows">
|
||||
${__("Collapse All")}</button>
|
||||
this.$tree_footer = $(`<div class="tree-footer col-md-3">
|
||||
<div class="input-group">
|
||||
<input id="tree-level" type="number" class="form-control" aria-label="Tree Level" value="2">
|
||||
<button class="btn btn-xs btn-primary" data-action="set_tree_level">
|
||||
${__("Set Level")}</button>
|
||||
<button class="btn btn-xs btn-secondary" data-action="expand_all_rows">
|
||||
${__("Expand All")}</button>
|
||||
<button class="btn btn-xs btn-secondary" data-action="collapse_all_rows">
|
||||
${__("Collapse All")}</button>
|
||||
</div>
|
||||
</div>`);
|
||||
$(this.$report_footer).append(this.$tree_footer);
|
||||
this.$tree_footer.find("[data-action=collapse_all_rows]").show();
|
||||
|
|
@ -1984,16 +1989,45 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
|
|||
|
||||
expand_all_rows() {
|
||||
this.$tree_footer.find("[data-action=expand_all_rows]").hide();
|
||||
let rows = this.datatable.rowmanager.datamanager.getRows();
|
||||
let maxDepth = rows.reduce((max, row) => {
|
||||
return Math.max(max, row.meta.indent || 0);
|
||||
}, 0);
|
||||
var treeLevel = maxDepth + 1;
|
||||
this.$tree_footer.find("#tree-level").val(treeLevel);
|
||||
this.datatable.rowmanager.expandAllNodes();
|
||||
this.$tree_footer.find("[data-action=collapse_all_rows]").show();
|
||||
}
|
||||
|
||||
collapse_all_rows() {
|
||||
this.$tree_footer.find("[data-action=collapse_all_rows]").hide();
|
||||
this.$tree_footer.find("#tree-level").val(1);
|
||||
this.datatable.rowmanager.collapseAllNodes();
|
||||
this.$tree_footer.find("[data-action=expand_all_rows]").show();
|
||||
}
|
||||
|
||||
set_tree_level() {
|
||||
var inputVal = parseInt(this.$tree_footer.find("#tree-level").val(), 10) || 0;
|
||||
let rows = this.datatable.rowmanager.datamanager.getRows();
|
||||
let maxDepth = rows.reduce((max, row) => {
|
||||
return Math.max(max, row.meta.indent || 0);
|
||||
}, 0);
|
||||
var treeLevel = Math.min(maxDepth + 1, Math.max(1, inputVal));
|
||||
var treeDepth = treeLevel - 1;
|
||||
this.$tree_footer.find("#tree-level").val(treeLevel);
|
||||
if (treeDepth === 0) {
|
||||
this.$tree_footer.find("[data-action=collapse_all_rows]").hide();
|
||||
} else {
|
||||
this.$tree_footer.find("[data-action=collapse_all_rows]").show();
|
||||
}
|
||||
this.datatable.rowmanager.setTreeDepth(treeDepth);
|
||||
if (treeDepth === 0) {
|
||||
this.$tree_footer.find("[data-action=expand_all_rows]").show();
|
||||
} else {
|
||||
this.$tree_footer.find("[data-action=expand_all_rows]").hide();
|
||||
}
|
||||
}
|
||||
|
||||
message_div(message) {
|
||||
return `<div class='flex justify-center align-center text-muted' style='height: 50vh;'>
|
||||
<div>${message}</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue