vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Merge pull request #20342 from alyf-de/clear-all-filters

Browse source 
fix: clear all filters when in list view
This commit is contained in:
Shariq Ansari 2023-04-17 21:23:09 +05:30 • committed by GitHub
commit 4d92189cde
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 66 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
cypress/integration/folder_navigation.js
View file

@ -7,8 +7,8 @@ context("Folder Navigation", () => {
it("Adding Folders", () => {
//Adding filter to go into the home folder
cy.get(".filter-selector > .btn").findByText("1 filter").click();
cy.findByRole("button", { name: "Clear Filters" }).click();
cy.get(".filter-x-button").click();
cy.click_filter_button();
cy.get(".filter-action-buttons > .text-muted").findByText("+ Add a Filter").click();
cy.get(".fieldname-select-area > .awesomplete > .form-control:last").type("Fol{enter}");
cy.get(
@ -47,9 +47,13 @@ context("Folder Navigation", () => {
//Adding a file inside the Test Folder
cy.findByRole("button", { name: "Add File" }).eq(0).click({ force: true });
cy.get(".file-uploader").findByText("Link").click();
cy.get(".input-group > .form-control").type(
"https://wallpaperplay.com/walls/full/8/2/b/72402.jpg"
);
cy.get(".input-group > input.form-control:visible").as("upload_input");
cy.get("@upload_input").type("https://wallpaperplay.com/walls/full/8/2/b/72402.jpg", {
waitForAnimations: false,
parseSpecialCharSequences: false,
force: true,
delay: 100,
});
cy.click_modal_primary_button("Upload");
//To check if the added file is present in the Test Folder

2
cypress/integration/list_paging.js
View file

@ -12,7 +12,7 @@ context("List Paging", () => {
it("test load more with count selection buttons", () => {
cy.visit("/app/todo/view/report");
cy.clear_filters();
cy.get(".filter-x-button").click();
cy.get(".list-paging-area .list-count").should("contain.text", "20 of");
cy.get(".list-paging-area .btn-more").click();

1
cypress/integration/list_view_drag_select.js
View file

@ -5,6 +5,7 @@ context("List View", () => {
});
it("List view check rows on drag", () => {
cy.get(".filter-x-button").click();
cy.get(".list-row-checkbox").then(($checkbox) => {
cy.wrap($checkbox).first().trigger("mousedown");
cy.get(".level.list-row").each(($ele) => {

2
cypress/integration/sidebar.js
View file

@ -53,7 +53,7 @@ context("Sidebar", () => {
);
//To check if there is no filter added to the listview
cy.get(".filter-selector > .btn").should("contain", "Filter");
cy.get(".filter-button").should("contain", "Filter");
//To add a filter to display data into the listview
cy.get(".group-by-field.show > .dropdown-menu > .group-by-item > .dropdown-item").click();

2
cypress/support/commands.js
View file

@ -479,7 +479,7 @@ Cypress.Commands.add("click_listview_row_item_with_text", (text) => {
});
Cypress.Commands.add("click_filter_button", () => {
cy.get(".filter-selector > .btn").click();
cy.get(".filter-button").click();
});
Cypress.Commands.add("click_listview_primary_button", (btn_name) => {

10
frappe/public/icons/timeless/icons.svg
View file

@ -237,8 +237,14 @@
<path d="M2.5 3.5h2m7 9h2m-10-6h6m-3 3h6" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
<symbol viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="icon-filter">
<path d="M2 4h12M4 8h8m-5.5 4h3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<symbol viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon-filter">
<path stroke-width="1.2" d="M3.68016 3L15.4502 3C16.1 3 16.4787 3.73367 16.1023 4.26337L11.6585 10.5177C11.5383 10.6869 11.4737 10.8893 11.4737 11.0969L11.4737 16.4053C11.4737 16.6516 11.1934 16.7929 10.9954 16.6466L8.72152 14.9665C8.46635 14.7779 8.31579 14.4795 8.31579 14.1622L8.31579 11.1327C8.31579 10.9031 8.2368 10.6805 8.09208 10.5023L3.05913 4.3043C2.63456 3.78145 3.00664 3 3.68016 3Z" stroke="var(--icon-stroke)" stroke-linecap="round"/>
</symbol>
<symbol viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon-filter-x">
<path stroke-width="1.2" d="M8.5 3L3.66449 3.00002C2.99369 3.00002 2.62075 3.77596 3.0398 4.29977L8.15768 10.6971C8.29953 10.8744 8.37681 11.0947 8.37681 11.3218L8.37681 14.4565C8.37681 14.7713 8.525 15.0677 8.77681 15.2565L11.0852 16.9878C11.283 17.1362 11.5652 16.9951 11.5652 16.7478L11.5652 11.3742C11.5652 11.1155 11.6654 10.8669 11.8448 10.6806L12.5 10" stroke="var(--icon-stroke)" stroke-linecap="round"/>
<path stroke-width="1.2" d="M11 3L16 8" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
<path stroke-width="1.2" d="M16 3L11 8" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="icon-list">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 111 KiB

After

Width:  |  Height:  |  Size: 112 KiB

23
frappe/public/js/frappe/list/base_list.js
View file

@ -831,22 +831,31 @@ class FilterArea {
make_filter_list() {
$(`<div class="filter-selector">
<button class="btn btn-default btn-sm filter-button">
<span class="filter-icon">
${frappe.utils.icon("filter")}
</span>
<span class="button-label hidden-xs">
<div class="btn-group">
<button class="btn btn-default btn-sm filter-button">
<span class="filter-icon">
${frappe.utils.icon("filter")}
</span>
<span class="button-label hidden-xs">
${__("Filter")}
<span>
</button>
<span>
</button>
<button class="btn btn-default btn-sm filter-x-button" title="${__("Clear all filters")}">
<span class="filter-icon">
${frappe.utils.icon("filter-x")}
</span>
</button>
</div>
</div>`).appendTo(this.$filter_list_wrapper);
this.filter_button = this.$filter_list_wrapper.find(".filter-button");
this.filter_x_button = this.$filter_list_wrapper.find(".filter-x-button");
this.filter_list = new frappe.ui.FilterGroup({
base_list: this.list_view,
parent: this.$filter_list_wrapper,
doctype: this.list_view.doctype,
filter_button: this.filter_button,
filter_x_button: this.filter_x_button,
default_filters: [],
on_change: () => this.refresh_list_view(),
});

29
frappe/public/js/frappe/ui/filters/filter_list.js
View file

@ -14,9 +14,29 @@ frappe.ui.FilterGroup = class {
make_popover() {
this.init_filter_popover();
this.set_clear_all_filters_event();
this.set_popover_events();
}
set_clear_all_filters_event() {
this.filter_x_button.on("click", () => {
this.toggle_empty_filters(true);
if (typeof this.base_list !== "undefined") {
// It's a list view. Clear all the filters, also the ones in the
// FilterArea outside this FilterGroup
this.base_list.filter_area.clear();
} else {
// Not a list view, just clear the filters in this FilterGroup
this.clear_filters();
}
this.update_filter_button();
});
}
hide_popover() {
this.filter_button.popover("hide");
}
init_filter_popover() {
this.filter_button.popover({
content: this.get_filter_area_template(),
@ -54,7 +74,7 @@ frappe.ui.FilterGroup = class {
!$(e.target).is(this.filter_button) &&
!in_datepicker
) {
this.wrapper && this.filter_button.popover("hide");
this.wrapper && this.hide_popover();
}
}
});
@ -85,7 +105,7 @@ frappe.ui.FilterGroup = class {
// REDESIGN-TODO: (Temporary) Review and find best solution for this
frappe.router.on("change", () => {
if (this.wrapper && this.wrapper.is(":visible")) {
this.filter_button.popover("hide");
this.hide_popover();
}
});
}
@ -130,11 +150,10 @@ frappe.ui.FilterGroup = class {
this.toggle_empty_filters(true);
this.clear_filters();
this.on_change();
this.hide_popover();
});
this.wrapper.find(".apply-filters").on("click", () => {
this.filter_button.popover("hide");
});
this.wrapper.find(".apply-filters").on("click", () => this.hide_popover());
}
add_filters(filters) {

4
frappe/public/scss/desk/filters.scss
View file

@ -1,7 +1,5 @@
.filter-icon.active {
use {
stroke: var(--text-on-blue);
}
--icon-stroke: var(--text-on-blue);
}
.filter-popover {

7
frappe/public/scss/desk/list.scss
View file

@ -378,13 +378,14 @@ input.list-check-all {
padding: 0 var(--padding-xs);
}
.filter-button {
margin: 5px;
// padding: 4px 8px;
.filter-selector .btn-group {
margin: var(--margin-xs);
}
.filter-button.btn-primary-light {
color: var(--text-on-blue);
outline: 1px solid var(--bg-dark-blue);
z-index: 1;
}
.sort-selector {