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;
+}