diff --git a/frappe/public/icons/timeless/icons.svg b/frappe/public/icons/timeless/icons.svg index d6c409aada..b8dbde9d94 100644 --- a/frappe/public/icons/timeless/icons.svg +++ b/frappe/public/icons/timeless/icons.svg @@ -978,4 +978,10 @@ Tip: use lucide.svg in /icons for all downloaded icons + + + + + + diff --git a/frappe/public/js/frappe/views/reports/query_report.js b/frappe/public/js/frappe/views/reports/query_report.js index 6e721066ac..71e68bf8ef 100644 --- a/frappe/public/js/frappe/views/reports/query_report.js +++ b/frappe/public/js/frappe/views/reports/query_report.js @@ -530,12 +530,17 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList { const { filters = [] } = this.report_settings; let filter_area = this.page.page_form; + this.filters = []; + if (this.report_settings.seperate_check_filters) this.setup_check_filter_area(); this.filters = filters - .map((df) => { + .map((df, index) => { if (df.fieldtype === "Break") return; - - let f = this.page.add_field(df, filter_area); - + let f; + if (df.fieldtype === "Check" && this.check_filter_area) { + f = this.page.add_field(df, this.check_filter_area); + } else { + f = this.page.add_field(df, filter_area); + } if (df.default) { f.set_input(df.default); } @@ -574,7 +579,13 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList { return f; }) .filter(Boolean); - + if (this.report_settings.seperate_check_filters) this.move_check_filter_area(); + if (this.report_settings.collapsible_filters) { + this.filters_hidden = true; + this.filter_row_length = this.get_filter_row_length(); + this.add_collapse_button(); + this.toggle_filter_visiblity(); + } this.refresh_filters_dependency(); if (this.filters.length === 0) { // hide page form if no filters @@ -584,6 +595,60 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList { } } + move_check_filter_area() { + this.page.page_form.append(this.check_filter_area); + } + + setup_check_filter_area() { + let check_filter_area = "
"; + this.page.page_form.append(check_filter_area); + this.check_filter_area = this.page.page_form.find(".check-filter-area"); + } + + get_filter_row_length() { + let max_width = document.documentElement.clientWidth; + let all_filters_position = this.filters.map((f) => f.wrapper.getBoundingClientRect().x); + let closest_width = all_filters_position.reduce(function (prev, curr) { + return Math.abs(curr - max_width) < Math.abs(prev - max_width) ? curr : prev; + }); + return all_filters_position.indexOf(closest_width) + 1; + } + + toggle_filter_visiblity() { + let icon_name; + if (this.filters_hidden) { + for (let i = this.filter_row_length; i < this.filters.length; i++) { + $(this.filters[i].wrapper).addClass("hidden"); + } + this.check_filter_area.css("display", "none"); + this.filters_hidden = false; + icon_name = "chevron-down"; + } else { + for (let i = this.filter_row_length; i < this.filters.length; i++) { + $(this.filters[i].wrapper).removeClass("hidden"); + } + this.check_filter_area.css("display", "flex"); + this.filters_hidden = true; + icon_name = "chevron-up"; + } + this.$collapse_button.find("use").attr("href", `#icon-${icon_name}`); + } + + add_collapse_button() { + const me = this; + let filter_no = this.filter_row_length - 1; + if (this.filters[filter_no]) { + this.$collapse_button = $(`
${frappe.utils.icon("chevron-down", "md")}
`); + $(this.filters[filter_no].wrapper).append(this.$collapse_button); + $(this.filters[filter_no].wrapper).css("display", "flex"); + $(this.filters[filter_no].wrapper).css("align-items", "center"); + $(this.filters[filter_no].wrapper).css("gap", "5px"); + this.$collapse_button.on("click", function () { + me.toggle_filter_visiblity(); + }); + } + } + set_filters(filters) { this.filters.map((f) => { if (f.fieldtype == "MultiSelectList") { diff --git a/frappe/public/scss/desk/report.scss b/frappe/public/scss/desk/report.scss index f5e0367a5b..aae8bbd5d2 100644 --- a/frappe/public/scss/desk/report.scss +++ b/frappe/public/scss/desk/report.scss @@ -297,3 +297,7 @@ .input-group > * { margin-right: 10px; } +.check-filter-area { + display: flex; + flex-wrap: wrap; +}