From c04b9e235045d40bf1de0fc22c54ae9466fb2bce Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Tue, 28 May 2024 19:35:21 -0400 Subject: [PATCH] add total items, layout tweaks --- src/registrar/assets/js/get-gov.js | 72 +++++++++++++++++---- src/registrar/templates/home.html | 23 ++++--- src/registrar/views/domain_requests_json.py | 1 + src/registrar/views/domains_json.py | 1 + 4 files changed, 76 insertions(+), 21 deletions(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index b46596a49..3d40c132a 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -879,6 +879,33 @@ function unloadModals() { window.modal.off(); } +/** + * Helper function that scrolls to an element + * @param {string} attributeName - The string "class" or "id" + * @param {string} attributeValue - The class or id name + */ +function ScrollToElement(attributeName, attributeValue) { + let targetEl = null; + + if (attributeName === 'class') { + targetEl = document.getElementsByClassName(attributeValue)[0]; + } else if (attributeName === 'id') { + targetEl = document.getElementById(attributeValue); + } else { + console.log('Error: unknown attribute name provided.'); + return; // Exit the function if an invalid attributeName is provided + } + + if (targetEl) { + const rect = targetEl.getBoundingClientRect(); + const scrollTop = window.scrollY || document.documentElement.scrollTop; + window.scrollTo({ + top: rect.top + scrollTop, + behavior: 'smooth' // Optional: for smooth scrolling + }); + } +} + /** * 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. @@ -890,6 +917,7 @@ document.addEventListener('DOMContentLoaded', function() { let currentOrder = 'asc'; let domainsWrapper = document.querySelector('.domains-wrapper'); let noDomainsWrapper = document.querySelector('.no-domains-wrapper'); + let hasLoaded = false; /** * Loads rows in the domains list, as well as updates pagination around the domains list @@ -897,8 +925,9 @@ document.addEventListener('DOMContentLoaded', function() { * @param {*} page - the page number of the results (starts with 1) * @param {*} sortBy - the sort column option * @param {*} order - the sort order {asc, desc} + * @param {*} loaded - control for the scrollToElement functionality */ - function loadPage(page, sortBy = currentSortBy, order = currentOrder) { + function loadPage(page, sortBy = currentSortBy, order = currentOrder, loaded = hasLoaded) { //fetch json of page of domains, given page # and sort fetch(`/get-domains-json/?page=${page}&sort_by=${sortBy}&order=${order}`) .then(response => response.json()) @@ -959,9 +988,13 @@ document.addEventListener('DOMContentLoaded', function() { }); // initialize tool tips immediately after the associated DOM elements are added initializeTooltips(); + if (loaded) + ScrollToElement('id', 'domains-header'); + + hasLoaded = true; // update pagination - updatePagination(data.page, data.num_pages, data.has_previous, data.has_next); + updateDomainsPagination(data.page, data.num_pages, data.has_previous, data.has_next, data.total); currentPage = page; currentSortBy = sortBy; currentOrder = order; @@ -976,19 +1009,23 @@ document.addEventListener('DOMContentLoaded', function() { * @param {*} hasPrevious - if there is a page of results prior to the current page * @param {*} hasNext - if there is a page of results after the current page */ - function updatePagination(currentPage, numPages, hasPrevious, hasNext) { + function updateDomainsPagination(currentPage, numPages, hasPrevious, hasNext, totalItems) { // identify the DOM element where the pagination will be inserted + const counterContainer = document.querySelector('#domains-pagination .usa-pagination__counter'); const paginationContainer = document.querySelector('#domains-pagination .usa-pagination__list'); + counterContainer.innerHTML = ''; paginationContainer.innerHTML = ''; // pagination should only be displayed if there are more than one pages of results paginationContainer.classList.toggle('display-none', numPages <= 1); + counterContainer.innerHTML = `${totalItems} Domains`; + if (hasPrevious) { const prevPageItem = document.createElement('li'); prevPageItem.className = 'usa-pagination__item usa-pagination__arrow'; prevPageItem.innerHTML = ` - + @@ -1003,7 +1040,7 @@ document.addEventListener('DOMContentLoaded', function() { const pageItem = document.createElement('li'); pageItem.className = 'usa-pagination__item usa-pagination__page-no'; pageItem.innerHTML = ` - ${i} + ${i} `; if (i === currentPage) { pageItem.querySelector('a').classList.add('usa-current'); @@ -1017,7 +1054,7 @@ document.addEventListener('DOMContentLoaded', function() { const nextPageItem = document.createElement('li'); nextPageItem.className = 'usa-pagination__item usa-pagination__arrow'; nextPageItem.innerHTML = ` - + Next Next

Domains

+

Domains