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

Member index view - collapse other filter sections when one is clicked (#17740)

Browse source 
* collapse any filter sections when a new one is clicked

* add a cypress test
This commit is contained in:
Suzanne Aitchison 2022-05-24 14:51:18 +01:00 • committed by GitHub
parent dc9a482e08
commit e62684342f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 90 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/javascript/packs/admin/users/controls.js vendored
View file

@ -1,9 +1,5 @@
import { initializeFiltersModal } from './filtersModal';
import { INTERACTIVE_ELEMENTS_QUERY } from '@utilities/dropdownUtils';
import {
showWindowModal,
closeWindowModal,
WINDOW_MODAL_ID,
} from '@utilities/showModal';
const expandSearchButton = document.getElementById('expand-search-btn');
const expandFilterButton = document.getElementById('expand-filter-btn');
@ -117,28 +113,6 @@ const toggleIndicator = ({ value, indicator }) => {
}
};
/**
* Controls the triggering of the filters popover modal
*/
const initializeFilterPopoverButtons = () => {
document.querySelectorAll('.js-open-filter-modal-btn').forEach((button) => {
button.addEventListener('click', () => {
showWindowModal({
contentSelector: '.js-filters-modal',
showHeader: false,
sheet: true,
sheetAlign: 'right',
size: 'small',
onOpen: () => {
document
.querySelector(`#${WINDOW_MODAL_ID} .js-filter-modal-cancel-btn`)
.addEventListener('click', closeWindowModal);
},
});
});
});
};
initializeExpandingSections();
initializeSectionIndicators();
initializeFilterPopoverButtons();
initializeFiltersModal();

59
app/javascript/packs/admin/users/filtersModal.js Normal file
View file

@ -0,0 +1,59 @@
import {
showWindowModal,
closeWindowModal,
WINDOW_MODAL_ID,
} from '@utilities/showModal';
/**
* Details panels will automatically expand on click when required.
* We want to make sure only _one_ panel is expanded at any given time,
* so here we collapse any which don't match the click's target
*/
const initializeFilterDetailsToggles = () => {
const allDetailsPanels = document.querySelectorAll(
`#${WINDOW_MODAL_ID} details`,
);
allDetailsPanels?.forEach((panel) => {
panel.addEventListener('toggle', ({ target }) => {
// If the panel is closing, do nothing
if (target.getAttribute('open') === null) {
return;
}
const {
dataset: { section: clickedSection },
} = target;
document
.querySelectorAll(`#${WINDOW_MODAL_ID} details[open]`)
.forEach((openPanel) => {
if (openPanel.dataset?.section !== clickedSection) {
openPanel.removeAttribute('open');
}
});
});
});
};
const initializeModalCloseButton = () =>
document
.querySelector(`#${WINDOW_MODAL_ID} .js-filter-modal-cancel-btn`)
.addEventListener('click', closeWindowModal);
export const initializeFiltersModal = () => {
document.querySelectorAll('.js-open-filter-modal-btn').forEach((button) => {
button.addEventListener('click', () => {
showWindowModal({
contentSelector: '.js-filters-modal',
showHeader: false,
sheet: true,
sheetAlign: 'right',
size: 'small',
onOpen: () => {
initializeModalCloseButton();
initializeFilterDetailsToggles();
},
});
});
});
};

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

@ -5,7 +5,7 @@
<button type="button" class="c-btn">Clear filters</button>
</div>
<div class="py-4">
<details class="admin-details">
<details data-section="roles" class="admin-details">
<summary class="py-4 flex justify-between text-uppercase color-base-60 fs-s">Member roles<%= crayons_icon_tag("chevron-down", aria_hidden: true, class: "summary-icon") %></summary>
<fieldset class="pb-4">
<legend class="screen-reader-only">Member roles</legend>
@ -15,19 +15,19 @@
</div>
</fieldset>
</details>
<details class="admin-details">
<details data-section="status" class="admin-details">
<summary class="py-4 flex justify-between text-uppercase color-base-60 fs-s">Status<%= crayons_icon_tag("chevron-down", aria_hidden: true, class: "summary-icon") %></summary>
Status options
</details>
<details class="admin-details">
<details data-section="joining-date" class="admin-details">
<summary class="py-4 flex justify-between text-uppercase color-base-60 fs-s">Joining date<%= crayons_icon_tag("chevron-down", aria_hidden: true, class: "summary-icon") %></summary>
Joining date options
</details>
<details class="admin-details">
<details data-section="last-activity" class="admin-details">
<summary class="py-4 flex justify-between text-uppercase color-base-60 fs-s">Last activity<%= crayons_icon_tag("chevron-down", aria_hidden: true, class: "summary-icon") %></summary>
Last activity options
</details>
<details class="admin-details">
<details data-section="organizations" class="admin-details">
<summary class="py-4 flex justify-between text-uppercase color-base-60 fs-s">Organizations<%= crayons_icon_tag("chevron-down", aria_hidden: true, class: "summary-icon") %></summary>
Organizations options
</details>

24
cypress/integration/seededFlows/adminFlows/users/filterUserIndex.spec.js Normal file
View file

@ -0,0 +1,24 @@
describe('Filter user index', () => {
beforeEach(() => {
cy.testSetup();
cy.fixture('users/adminUser.json').as('user');
cy.enableFeatureFlag('member_index_view')
.then(() => cy.get('@user'))
.then((user) => cy.loginAndVisit(user, '/admin/member_manager/users'));
});
it('Collapses previously opened sections when a new section is expanded', () => {
// TODO: When the V1 Filter input is removed, we can change this to cy.findByRole('button', { name: 'Filter' })
cy.findAllByRole('button', { name: 'Filter' }).last().click();
cy.getModal().within(() => {
cy.findAllByText('Member roles').first().click();
cy.findByRole('group', { name: 'Member roles' }).should('be.visible');
cy.findByText('Status').click();
cy.findByText('Status options').should('be.visible');
cy.findByRole('group', { name: 'Member roles' }).should('not.be.visible');
});
});
});