From c234e66eeac3a07d60d95de17d5f9392b6c7032e Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Wed, 5 Jun 2024 17:01:38 -0400 Subject: [PATCH] fix scroll, clean up uswds, comments --- src/registrar/assets/js/get-gov.js | 82 +++++++++++++-------- src/registrar/assets/js/uswds-edited.js | 6 -- src/registrar/templates/home.html | 4 +- src/registrar/views/domain_requests_json.py | 2 + 4 files changed, 57 insertions(+), 37 deletions(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 22e8913de..11e7474aa 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -1019,6 +1019,10 @@ function updatePagination(itemName, paginationSelector, counterSelector, headerA } } +/** + * A helper that toggles content/ no content/ no search results + * +*/ const updateDisplay = (data, dataWrapper, noDataWrapper, noSearchResultsWrapper) => { const { unfiltered_total, total } = data; @@ -1042,6 +1046,19 @@ const updateDisplay = (data, dataWrapper, noDataWrapper, noSearchResultsWrapper) } }; +/** + * A helper that resets sortable table headers + * +*/ +const unsetHeader = (header) => { + header.removeAttribute('aria-sort'); + let headerName = header.innerText; + const headerLabel = `${headerName}', sortable column, currently unsorted"`; + const headerButtonLabel = `Click to sort by ascending order.`; + header.setAttribute("aria-label", headerLabel); + header.querySelector('.usa-table__header__button').setAttribute("title", headerButtonLabel); +}; + /** * An IIFE that listens for DOM Content to be loaded, then executes. This function * initializes the domains list and associated functionality on the home page of the app. @@ -1130,9 +1147,10 @@ document.addEventListener('DOMContentLoaded', function() { }); // initialize tool tips immediately after the associated DOM elements are added initializeTooltips(); - if (hasLoaded) - ScrollToElement('id', 'domains-header'); + // Do not scroll on first page load + if (loaded) + ScrollToElement('id', 'domains-header'); hasLoaded = true; // update pagination @@ -1156,8 +1174,6 @@ document.addEventListener('DOMContentLoaded', function() { .catch(error => console.error('Error fetching domains:', error)); } - - // Add event listeners to table headers for sorting tableHeaders.forEach(header => { header.addEventListener('click', function() { @@ -1183,8 +1199,8 @@ document.addEventListener('DOMContentLoaded', function() { // Reset UI and accessibility function resetheaders() { tableHeaders.forEach(header => { - // unset sort UI in headers - window.table.unsetHeader(header); + // unset sort UI in headers + unsetHeader(header); }); // Reset the announcement region tableAnnouncementRegion.innerHTML = ''; @@ -1243,34 +1259,38 @@ document.addEventListener('DOMContentLoaded', function() { let tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]'); let tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region') + /** + * Delete is actually a POST API that requires a csrf token. The token will be waiting for us in the template as a hidden input. + * @param {*} domainRequestPk - the identifier for the request that we're deleting + * @param {*} pageToDisplay - If we're deleting the last item on a page that is not page 1, we'll need to display the previous page + */ function deleteDomainRequest(domainRequestPk,pageToDisplay) { + // Get csrf token const csrfToken = getCsrfToken(); - // Create FormData object and append the CSRF token const formData = `csrfmiddlewaretoken=${encodeURIComponent(csrfToken)}&delete-domain-request=`; - fetch(`/domain-request/${domainRequestPk}/delete`, { - method: 'POST', - headers: { - 'Content-Type': 'application/x-www-form-urlencoded', - }, - body: formData + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: formData }) .then(response => { - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - loadDomainRequests(pageToDisplay, currentSortBy, currentOrder, hasLoaded, currentSearchTerm); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + // Update data and UI + loadDomainRequests(pageToDisplay, currentSortBy, currentOrder, hasLoaded, currentSearchTerm); }) .catch(error => console.error('Error fetching domain requests:', error)); - } + } - // Helper function to get the CSRF token from the cookie - function getCsrfToken() { - return document.querySelector('input[name="csrfmiddlewaretoken"]').value; - } - + // Helper function to get the CSRF token from the cookie + function getCsrfToken() { + return document.querySelector('input[name="csrfmiddlewaretoken"]').value; + } /** * Loads rows in the domain requests list, as well as updates pagination around the domain requests list @@ -1334,11 +1354,11 @@ document.addEventListener('DOMContentLoaded', function() { const actionLabel = request.action_label; const submissionDate = request.submission_date ? new Date(request.submission_date).toLocaleDateString('en-US', options) : `Not submitted`; - + // Even if the request is not deletable, we may need this empty string for the td if the deletable column is displayed let modalTrigger = ''; + // If the request is deletable, create modal body and insert it if (request.is_deletable) { - let modalHeading = ''; let modalDescription = ''; @@ -1450,9 +1470,11 @@ document.addEventListener('DOMContentLoaded', function() { `; tbody.appendChild(row); }); + // initialize modals immediately after the DOM content is updated initializeModals(); + // Now the DOM and modals are ready, add listeners to the submit buttons const modals = document.querySelectorAll('.usa-modal__content'); modals.forEach(modal => { @@ -1460,7 +1482,9 @@ document.addEventListener('DOMContentLoaded', function() { const closeButton = modal.querySelector('.usa-modal__close'); submitButton.addEventListener('click', function() { pk = submitButton.getAttribute('data-pk'); + // Close the modal to remove the USWDS UI locl classes closeButton.click(); + // If we're deleteing the last item on a page that is not page 1, we'll need to refresh the display to the previous page let pageToDisplay = data.page; if (data.total == 1 && data.unfiltered_total > 1) { pageToDisplay--; @@ -1469,9 +1493,9 @@ document.addEventListener('DOMContentLoaded', function() { }); }); - if (hasLoaded) + // Do not scroll on first page load + if (loaded) ScrollToElement('id', 'domain-requests-header'); - hasLoaded = true; // update the pagination after the domain requests list is updated @@ -1519,8 +1543,8 @@ document.addEventListener('DOMContentLoaded', function() { // Reset UI and accessibility function resetheaders() { tableHeaders.forEach(header => { - // unset sort UI in headers - window.table.unsetHeader(header); + // unset sort UI in headers + unsetHeader(header); }); // Reset the announcement region tableAnnouncementRegion.innerHTML = ''; diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js index 556488554..19826e103 100644 --- a/src/registrar/assets/js/uswds-edited.js +++ b/src/registrar/assets/js/uswds-edited.js @@ -5710,14 +5710,8 @@ const table = behavior({ TABLE, SORTABLE_HEADER, SORT_BUTTON, - // DOTGOV: Export unsetSort - unsetHeader(header) { - unsetSort(header); - } }); module.exports = table; -// DOTGOV: modified uswds.js to add table module to window so that it is accessible to other js -window.table = table; },{"../../uswds-core/src/js/config":35,"../../uswds-core/src/js/events":36,"../../uswds-core/src/js/utils/behavior":45,"../../uswds-core/src/js/utils/sanitizer":50,"../../uswds-core/src/js/utils/select":53}],32:[function(require,module,exports){ "use strict"; diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html index 41eeb9608..1b7ed77e1 100644 --- a/src/registrar/templates/home.html +++ b/src/registrar/templates/home.html @@ -29,7 +29,7 @@
-

Domains

+

Domains

@@ -106,7 +106,7 @@
-

Domain requests

+

Domain requests

diff --git a/src/registrar/views/domain_requests_json.py b/src/registrar/views/domain_requests_json.py index b7494f060..f5ee318ac 100644 --- a/src/registrar/views/domain_requests_json.py +++ b/src/registrar/views/domain_requests_json.py @@ -27,6 +27,8 @@ def get_domain_requests_json(request): new_domain_request_text = "new domain request" # Check if the search term is a substring of 'New domain request' + # If yes, we should return domain requests that do not have a + # requested_domain (those display as New domain request in the UI) if search_term_lower in new_domain_request_text: domain_requests = domain_requests.filter( Q(requested_domain__name__icontains=search_term) |