zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-12 20:49:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

3050 - simplify sort header event listeners

Browse source
This commit is contained in:
Rachid Mrad 2025-01-28 19:25:58 -05:00
parent 0c1def30aa
commit 5553140405
No known key found for this signature in database
1 changed files with 30 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/registrar/assets/src/js/getgov/table-base.js
View file

@ -129,7 +129,7 @@ export class BaseTable {
this.displayName = itemName; this.displayName = itemName;
this.sectionSelector = itemName + 's'; this.sectionSelector = itemName + 's';
this.tableWrapper = document.getElementById(`${this.sectionSelector}__table-wrapper`); this.tableWrapper = document.getElementById(`${this.sectionSelector}__table-wrapper`);
this.tableHeaders = document.querySelectorAll(`#${this.sectionSelector} th[data-sortable]`); this.tableHeaderSortButtons = document.querySelectorAll(`#${this.sectionSelector} th[data-sortable] button`);
this.currentSortBy = 'id'; this.currentSortBy = 'id';
this.currentOrder = 'asc'; this.currentOrder = 'asc';
this.currentStatus = []; this.currentStatus = [];
@ -303,13 +303,18 @@ export class BaseTable {
* A helper that resets sortable table headers * A helper that resets sortable table headers
* *
*/ */
unsetHeader = (header) => { unsetHeader = (headerSortButton) => {
header.removeAttribute('aria-sort'); let header = headerSortButton.closest('th');
let headerName = header.innerText; if (header) {
const headerLabel = `${headerName}, sortable column, currently unsorted"`; header.removeAttribute('aria-sort');
const headerButtonLabel = `Click to sort by ascending order.`; let headerName = header.innerText;
header.setAttribute("aria-label", headerLabel); const headerLabel = `${headerName}, sortable column, currently unsorted"`;
header.querySelector('.usa-table__header__button').setAttribute("title", headerButtonLabel); const headerButtonLabel = `Click to sort by ascending order.`;
header.setAttribute("aria-label", headerLabel);
header.querySelector('.usa-table__header__button').setAttribute("title", headerButtonLabel);
} else {
console.warn('Issue with DOM');
}
}; };
/** /**
@ -505,24 +510,21 @@ export class BaseTable {
// Add event listeners to table headers for sorting // Add event listeners to table headers for sorting
initializeTableHeaders() { initializeTableHeaders() {
this.tableHeaders.forEach(header => { this.tableHeaderSortButtons.forEach(tableHeader => {
header.addEventListener('click', event => { tableHeader.addEventListener('click', event => {
let button = header.querySelector('.usa-table__header__button') let header = tableHeader.closest('th');
const sortBy = header.getAttribute('data-sortable'); if (header) {
let order = 'asc'; const sortBy = header.getAttribute('data-sortable');
// sort order will be ascending, unless the currently sorted column is ascending, and the user let order = 'asc';
// is selecting the same column to sort in descending order // sort order will be ascending, unless the currently sorted column is ascending, and the user
if (sortBy === this.currentSortBy) { // is selecting the same column to sort in descending order
order = this.currentOrder === 'asc' ? 'desc' : 'asc'; if (sortBy === this.currentSortBy) {
} order = this.currentOrder === 'asc' ? 'desc' : 'asc';
// load the results with the updated sort }
this.loadTable(1, sortBy, order); // load the results with the updated sort
// If the click occurs outside of the button, need to simulate a button click in order this.loadTable(1, sortBy, order);
// for USWDS listener on the button to execute. } else {
// Check first to see if click occurs outside of the button console.warn('Issue with DOM');
if (!button.contains(event.target)) {
// Simulate a button click
button.click();
} }
}); });
}); });
@ -587,9 +589,9 @@ export class BaseTable {
// Reset UI and accessibility // Reset UI and accessibility
resetHeaders() { resetHeaders() {
this.tableHeaders.forEach(header => { this.tableHeaderSortButtons.forEach(headerSortButton => {
// Unset sort UI in headers // Unset sort UI in headers
this.unsetHeader(header); this.unsetHeader(headerSortButton);
}); });
// Reset the announcement region // Reset the announcement region
this.tableAnnouncementRegion.innerHTML = ''; this.tableAnnouncementRegion.innerHTML = '';