maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add clear all functionality to filters modal (#18210)

Browse source
This commit is contained in:
Suzanne Aitchison 2022-07-25 16:47:41 +01:00 • committed by GitHub
parent 253cb27559
commit dab96a77f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/javascript/packs/admin/users/filtersModal.js
View file

@ -98,13 +98,34 @@ const initializeFilterDetailsToggles = () => {
/**
* Each filter section has a "Clear filter" button, visible only if one of its values is currently selected.
* Here we initialize the show/hide behaviour, as well as the "clear" behaviour.
* There is also a "Clear all filters" button.
* We use a single listener on the modal to handle all clear button clicks.
*/
const initializeFilterClearButtons = () => {
// Handle clicks on clear filter buttons with a single listener on the modal
document
.getElementById(WINDOW_MODAL_ID)
.addEventListener('click', ({ target }) => {
if (target.classList.contains('js-clear-all-filters-btn')) {
// Execute the related "clear" action for all checkbox groups
document
.querySelectorAll(`#${WINDOW_MODAL_ID} .js-clear-filter-btn`)
.forEach((button) => {
const {
dataset: { checkboxFieldsetSelector },
} = button;
clearAllCheckboxesInFieldset(
document.querySelector(
`#${WINDOW_MODAL_ID} ${checkboxFieldsetSelector}`,
),
);
});
// Clear the date range picker
document.querySelector(`#${WINDOW_MODAL_ID} #joining_start`).value = '';
document.querySelector(`#${WINDOW_MODAL_ID} #joining_end`).value = '';
}
if (!target.classList.contains('js-clear-filter-btn')) {
return;
}
@ -122,8 +143,7 @@ const initializeFilterClearButtons = () => {
}
});
// Set up change listeners on each form group so we can toggle the button/status indicator visibility
// TODO: The current setup assumes checkbox groups, but as we develop this modal we will need to consider the date picker ranges too
// Set up change listeners on each checkbox group so we can toggle the button/status indicator visibility
document.querySelectorAll('.js-clear-filter-btn').forEach((button) => {
const { checkboxFieldsetSelector, filterIndicatorSelector } =
button.dataset;

2
app/views/admin/users/index/_filters_modal.html.erb
View file

@ -2,7 +2,7 @@
<%= form_with url: admin_users_path, method: :get, local: true, class: "flex flex-col h-100" do |f| %>
<div class="flex justify-between items-center border-0 border-b-1 border-base-10 border-solid -mx-7 px-7 pb-2">
<h2 class="crayons-subtitle-2">Filters</h2>
<button type="button" class="c-btn">Clear filters</button>
<button type="button" class="js-clear-all-filters-btn c-btn">Clear filters</button>
</div>
<p id="filters-description" class="mt-4 crayons-field__description">Members who match any of the selected filters will be displayed</p>
<div class="py-4">

36
cypress/e2e/seededFlows/adminFlows/users/filterUserIndex.spec.js
View file

@ -72,6 +72,42 @@ describe('Filter user index', () => {
);
});
it('Clears all filters', () => {
openFiltersModal();
cy.getModal().within(() => {
cy.findAllByText('Joining date').first().click();
cy.findByRole('textbox', { name: /Joined after/ })
.as('joinStart')
.type('01/01/2020');
cy.findByRole('textbox', { name: /Joined before/ })
.as('joinEnd')
.type('01/01/2020');
cy.findAllByText('Member roles').first().click();
cy.findByRole('group', { name: 'Member roles' }).should('be.visible');
cy.findByRole('checkbox', { name: 'Super Admin' }).as('role').check();
cy.findAllByText('Status').first().click();
cy.findByRole('group', { name: 'Status' }).should('be.visible');
cy.findByRole('checkbox', { name: 'Trusted' }).as('status').check();
cy.findAllByText('Organizations').first().click();
cy.findByRole('group', { name: 'Organizations' }).should('be.visible');
cy.findByRole('checkbox', { name: 'Bachmanity' })
.as('organization')
.check();
cy.findByRole('button', { name: 'Clear filters' }).click();
// Check the selected filters are no longer applied
cy.get('@joinStart').should('have.value', '');
cy.get('@joinEnd').should('have.value', '');
cy.get('@role').should('not.be.checked');
cy.get('@status').should('not.be.checked');
cy.get('@organization').should('not.be.checked');
});
});
describe('Member roles', () => {
it('Expands and collapses list of roles', () => {
openFiltersModal();