Merge pull request #2243 from cisagov/rjm/2177-pagination-ctd

Issue #2177: Extend pagination UI to handle infinite items - [bob]

src/registrar/assets/js/get-gov.js

@@ -879,6 +879,146 @@ 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
+    });
+  }
+}
+
+/**
+ * Generalized function to update pagination for a list.
+ * @param {string} itemName - The name displayed in the counter
+ * @param {string} paginationSelector - CSS selector for the pagination container.
+ * @param {string} counterSelector - CSS selector for the pagination counter.
+ * @param {string} headerAnchor - CSS selector for the header element to anchor the links to.
+ * @param {Function} loadPageFunction - Function to call when a page link is clicked.
+ * @param {number} currentPage - The current page number (starting with 1).
+ * @param {number} numPages - The total number of pages.
+ * @param {boolean} hasPrevious - Whether there is a page before the current page.
+ * @param {boolean} hasNext - Whether there is a page after the current page.
+ * @param {number} totalItems - The total number of items.
+ */
+function updatePagination(itemName, paginationSelector, counterSelector, headerAnchor, loadPageFunction, currentPage, numPages, hasPrevious, hasNext, totalItems) {
+  const paginationContainer = document.querySelector(paginationSelector);
+  const paginationCounter = document.querySelector(counterSelector);
+  const paginationButtons = document.querySelector(`${paginationSelector} .usa-pagination__list`);
+  paginationCounter.innerHTML = '';
+  paginationButtons.innerHTML = '';
+
+  // Buttons should only be displayed if there are more than one pages of results
+  paginationButtons.classList.toggle('display-none', numPages <= 1);
+
+  // Counter should only be displayed if there is more than 1 item
+  paginationContainer.classList.toggle('display-none', totalItems < 1);
+
+  paginationCounter.innerHTML = `${totalItems} ${itemName}${totalItems > 1 ? 's' : ''}`;
+
+  if (hasPrevious) {
+    const prevPageItem = document.createElement('li');
+    prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
+    prevPageItem.innerHTML = `
+      <a href="${headerAnchor}" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
+        <svg class="usa-icon" aria-hidden="true" role="img">
+          <use xlink:href="/public/img/sprite.svg#navigate_before"></use>
+        </svg>
+        <span class="usa-pagination__link-text">Previous</span>
+      </a>
+    `;
+    prevPageItem.querySelector('a').addEventListener('click', (event) => {
+      event.preventDefault();
+      loadPageFunction(currentPage - 1);
+    });
+    paginationButtons.appendChild(prevPageItem);
+  }
+
+  // Helper function to create a page item
+  function createPageItem(page) {
+    const pageItem = document.createElement('li');
+    pageItem.className = 'usa-pagination__item usa-pagination__page-no';
+    pageItem.innerHTML = `
+      <a href="${headerAnchor}" class="usa-pagination__button" aria-label="Page ${page}">${page}</a>
+    `;
+    if (page === currentPage) {
+      pageItem.querySelector('a').classList.add('usa-current');
+      pageItem.querySelector('a').setAttribute('aria-current', 'page');
+    }
+    pageItem.querySelector('a').addEventListener('click', (event) => {
+      event.preventDefault();
+      loadPageFunction(page);
+    });
+    return pageItem;
+  }
+
+  // Add first page and ellipsis if necessary
+  if (currentPage > 2) {
+    paginationButtons.appendChild(createPageItem(1));
+    if (currentPage > 3) {
+      const ellipsis = document.createElement('li');
+      ellipsis.className = 'usa-pagination__item usa-pagination__overflow';
+      ellipsis.setAttribute('aria-label', 'ellipsis indicating non-visible pages');
+      ellipsis.innerHTML = '<span>…</span>';
+      paginationButtons.appendChild(ellipsis);
+    }
+  }
+
+  // Add pages around the current page
+  for (let i = Math.max(1, currentPage - 1); i <= Math.min(numPages, currentPage + 1); i++) {
+    paginationButtons.appendChild(createPageItem(i));
+  }
+
+  // Add last page and ellipsis if necessary
+  if (currentPage < numPages - 1) {
+    if (currentPage < numPages - 2) {
+      const ellipsis = document.createElement('li');
+      ellipsis.className = 'usa-pagination__item usa-pagination__overflow';
+      ellipsis.setAttribute('aria-label', 'ellipsis indicating non-visible pages');
+      ellipsis.innerHTML = '<span>…</span>';
+      paginationButtons.appendChild(ellipsis);
+    }
+    paginationButtons.appendChild(createPageItem(numPages));
+  }
+
+  if (hasNext) {
+    const nextPageItem = document.createElement('li');
+    nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
+    nextPageItem.innerHTML = `
+      <a href="${headerAnchor}" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
+        <span class="usa-pagination__link-text">Next</span>
+        <svg class="usa-icon" aria-hidden="true" role="img">
+          <use xlink:href="/public/img/sprite.svg#navigate_next"></use>
+        </svg>
+      </a>
+    `;
+    nextPageItem.querySelector('a').addEventListener('click', (event) => {
+      event.preventDefault();
+      loadPageFunction(currentPage + 1);
+    });
+    paginationButtons.appendChild(nextPageItem);
+  }
+}
+
+
 /**
  * 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.
@@ -891,6 +1031,7 @@ document.addEventListener('DOMContentLoaded', function() {
     let currentSortBy = 'id';
     let currentOrder = 'asc';
     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
@@ -898,8 +1039,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 loadDomains(page, sortBy = currentSortBy, order = currentOrder) {
+    function loadDomains(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())
@@ -923,17 +1065,20 @@ document.addEventListener('DOMContentLoaded', function() {
           domainList.innerHTML = '';
 
           data.domains.forEach(domain => {
+            const options = { year: 'numeric', month: 'short', day: 'numeric' };
             const expirationDate = domain.expiration_date ? new Date(domain.expiration_date) : null;
+            const expirationDateFormatted = expirationDate ? expirationDate.toLocaleDateString('en-US', options) : null;
             const expirationDateSortValue = expirationDate ? expirationDate.getTime() : '';
             const actionUrl = domain.action_url;
 
+            
             const row = document.createElement('tr');
             row.innerHTML = `
               <th scope="row" role="rowheader" data-label="Domain name">
                 ${domain.name}
               </th>
               <td data-sort-value="${expirationDateSortValue}" data-label="Expires">
-                ${expirationDate ? expirationDate.toLocaleDateString() : ''}
+                ${expirationDateFormatted}
               </td>
               <td data-label="Status">
                 ${domain.state_display}
@@ -961,84 +1106,31 @@ 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
-          updateDomainsPagination(data.page, data.num_pages, data.has_previous, data.has_next, data.total);
+          updatePagination(
+            'domain',
+            '#domains-pagination',
+            '#domains-pagination .usa-pagination__counter',
+            '#domains-header',
+            loadDomains,
+            data.page,
+            data.num_pages,
+            data.has_previous,
+            data.has_next,
+            data.total
+          );
           currentSortBy = sortBy;
           currentOrder = order;
         })
         .catch(error => console.error('Error fetching domains:', error));
     }
 
-    /**
-     * Update the pagination below the domains list.
-     * @param {*} currentPage - the current page number (starting with 1)
-     * @param {*} numPages - the number of pages indicated by the domains list response
-     * @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 updateDomainsPagination(currentPage, numPages, hasPrevious, hasNext, totalItems) {
-      // identify the DOM element where the pagination will be inserted
-      const paginationContainer = document.querySelector('#domains-pagination');
-      const paginationCounter = document.querySelector('#domains-pagination .usa-pagination__counter');
-      const paginationButtons = document.querySelector('#domains-pagination .usa-pagination__list');
-      paginationCounter.innerHTML = '';
-      paginationButtons.innerHTML = '';
     
-      // Buttons should only be displayed if there are more than one pages of results
-      paginationButtons.classList.toggle('display-none', numPages <= 1);
-
-      // Counter should only be displayed if there is more than 1 item
-      paginationContainer.classList.toggle('display-none', totalItems < 1);
-
-      paginationCounter.innerHTML = `${totalItems} domain${totalItems > 1 ? 's' : ''}`;
-    
-      if (hasPrevious) {
-        const prevPageItem = document.createElement('li');
-        prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
-        prevPageItem.innerHTML = `
-          <a href="#domains-header" class="usa-pagination__link usa-pagination__previous-page" aria-label="Domains previous page">
-            <svg class="usa-icon" aria-hidden="true" role="img">
-              <use xlink:href="/public/img/sprite.svg#navigate_before"></use>
-            </svg>
-            <span class="usa-pagination__link-text">Previous</span>
-          </a>
-        `;
-        prevPageItem.querySelector('a').addEventListener('click', () => loadDomains(currentPage - 1));
-        paginationButtons.appendChild(prevPageItem);
-      }
-
-      for (let i = 1; i <= numPages; i++) {
-        const pageItem = document.createElement('li');
-        pageItem.className = 'usa-pagination__item usa-pagination__page-no';
-        pageItem.innerHTML = `
-          <a href="#domains-header" class="usa-pagination__button" aria-label="Domains page ${i}">${i}</a>
-        `;
-        if (i === currentPage) {
-          pageItem.querySelector('a').classList.add('usa-current');
-          pageItem.querySelector('a').setAttribute('aria-current', 'page');
-        }
-        pageItem.querySelector('a').addEventListener('click', () => loadDomains(i));
-        paginationButtons.appendChild(pageItem);
-      }
-
-      if (hasNext) {
-        const nextPageItem = document.createElement('li');
-        nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
-        nextPageItem.innerHTML = `
-          <a href="#domains-header" class="usa-pagination__link usa-pagination__next-page" aria-label="Domains next page">
-            <span class="usa-pagination__link-text">Next</span>
-            <svg class="usa-icon" aria-hidden="true" role="img">
-              <use xlink:href="/public/img/sprite.svg#navigate_next"></use>
-            </svg>
-          </a>
-        `;
-        nextPageItem.querySelector('a').addEventListener('click', () => loadDomains(currentPage + 1));
-        paginationButtons.appendChild(nextPageItem);
-      }
-    }
 
     // Add event listeners to table headers for sorting
     document.querySelectorAll('.dotgov-table__registered-domains th[data-sortable]').forEach(header => {
@@ -1060,6 +1152,17 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 });
 
+const utcDateString = (dateString) => {
+  const date = new Date(dateString);
+  const utcYear = date.getUTCFullYear();
+  const utcMonth = date.toLocaleString('en-US', { month: 'short', timeZone: 'UTC' });
+  const utcDay = date.getUTCDate().toString().padStart(2, '0');
+  const utcHours = date.getUTCHours().toString().padStart(2, '0');
+  const utcMinutes = date.getUTCMinutes().toString().padStart(2, '0');
+  
+  return `${utcMonth} ${utcDay}, ${utcYear}, ${utcHours}:${utcMinutes} UTC`;
+};
+
 /**
  * An IIFE that listens for DOM Content to be loaded, then executes.  This function
  * initializes the domain requests list and associated functionality on the home page of the app.
@@ -1072,6 +1175,7 @@ document.addEventListener('DOMContentLoaded', function() {
     let currentSortBy = 'id';
     let currentOrder = 'asc';
     let noDomainRequestsWrapper = document.querySelector('.no-domain-requests-wrapper');
+    let hasLoaded = false;
 
     /**
      * Loads rows in the domain requests list, as well as updates pagination around the domain requests list
@@ -1079,8 +1183,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 loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder) {
+    function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, loaded = hasLoaded) {
       //fetch json of page of domain requests, given page # and sort
       fetch(`/get-domain-requests-json/?page=${page}&sort_by=${sortBy}&order=${order}`)
         .then(response => response.json())
@@ -1107,10 +1212,10 @@ document.addEventListener('DOMContentLoaded', function() {
           // after the DOM content changes and there are new delete modal buttons added
           unloadModals();
           data.domain_requests.forEach(request => {
-            const domainName = request.requested_domain ? request.requested_domain : `New domain request <span class="text-base font-body-xs">(${new Date(request.created_at).toLocaleString()} UTC)</span>`;
+            const options = { year: 'numeric', month: 'short', day: 'numeric' };
+            const domainName = request.requested_domain ? request.requested_domain : `New domain request <br><span class="text-base font-body-xs">(${utcDateString(request.created_at)})</span>`;
             const actionUrl = request.action_url;
             const actionLabel = request.action_label;
-            const options = { year: 'numeric', month: 'short', day: 'numeric' };
             const submissionDate = request.submission_date ? new Date(request.submission_date).toLocaleDateString('en-US', options) : `<span class="text-base">Not submitted</span>`;
             const deleteButton = request.is_deletable ? `
               <a 
@@ -1151,85 +1256,30 @@ document.addEventListener('DOMContentLoaded', function() {
           });
           // initialize modals immediately after the DOM content is updated
           initializeModals();
+          if (loaded)
+            ScrollToElement('id', 'domain-requests-header');
 
           hasLoaded = true;
 
           // update the pagination after the domain requests list is updated
-          updateDomainRequestsPagination(data.page, data.num_pages, data.has_previous, data.has_next, data.total);
+          updatePagination(
+            'domain request',
+            '#domain-requests-pagination',
+            '#domain-requests-pagination .usa-pagination__counter',
+            '#domain-requests-header',
+            loadDomainRequests,
+            data.page,
+            data.num_pages,
+            data.has_previous,
+            data.has_next,
+            data.total
+          );
           currentSortBy = sortBy;
           currentOrder = order;
         })
         .catch(error => console.error('Error fetching domain requests:', error));
     }
 
-    /**
-     * Update the pagination below the domain requests list.
-     * @param {*} currentPage - the current page number (starting with 1)
-     * @param {*} numPages - the number of pages indicated by the domain request list response
-     * @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 updateDomainRequestsPagination(currentPage, numPages, hasPrevious, hasNext, totalItems) {
-      // identify the DOM element where pagination is contained
-      const paginationContainer = document.querySelector('#domain-requests-pagination');
-      const paginationCounter = document.querySelector('#domain-requests-pagination .usa-pagination__counter');
-      const paginationButtons = document.querySelector('#domain-requests-pagination .usa-pagination__list');
-      paginationCounter.innerHTML = '';
-      paginationButtons.innerHTML = '';
-
-      // Buttons should only be displayed if there are more than one pages of results
-      paginationButtons.classList.toggle('display-none', numPages <= 1);
-
-      // Counter should only be displayed if there is more than 1 item
-      paginationContainer.classList.toggle('display-none', totalItems < 1);
-
-      paginationCounter.innerHTML = `${totalItems} domain request${totalItems > 1 ? 's' : ''}`;
-
-      if (hasPrevious) {
-        const prevPageItem = document.createElement('li');
-        prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
-        prevPageItem.innerHTML = `
-          <a href="#domain-requests-header" class="usa-pagination__link usa-pagination__previous-page" aria-label="Domain requests previous page">
-            <svg class="usa-icon" aria-hidden="true" role="img">
-              <use xlink:href="/public/img/sprite.svg#navigate_before"></use>
-            </svg>
-            <span class="usa-pagination__link-text">Previous</span>
-          </a>
-        `;
-        prevPageItem.querySelector('a').addEventListener('click', () => loadDomainRequests(currentPage - 1));
-        paginationButtons.appendChild(prevPageItem);
-      }
-
-      for (let i = 1; i <= numPages; i++) {
-        const pageItem = document.createElement('li');
-        pageItem.className = 'usa-pagination__item usa-pagination__page-no';
-        pageItem.innerHTML = `
-          <a href="#domain-requests-header" class="usa-pagination__button" aria-label="Domain requests page ${i}">${i}</a>
-        `;
-        if (i === currentPage) {
-          pageItem.querySelector('a').classList.add('usa-current');
-          pageItem.querySelector('a').setAttribute('aria-current', 'page');
-        }
-        pageItem.querySelector('a').addEventListener('click', () => loadDomainRequests(i));
-        paginationButtons.appendChild(pageItem);
-      }
-
-      if (hasNext) {
-        const nextPageItem = document.createElement('li');
-        nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
-        nextPageItem.innerHTML = `
-          <a href="#domain-requests-header" class="usa-pagination__link usa-pagination__next-page" aria-label="Domain requests next page">
-            <span class="usa-pagination__link-text">Next</span>
-            <svg class="usa-icon" aria-hidden="true" role="img">
-              <use xlink:href="/public/img/sprite.svg#navigate_next"></use>
-            </svg>
-          </a>
-        `;
-        nextPageItem.querySelector('a').addEventListener('click', () => loadDomainRequests(currentPage + 1));
-        paginationButtons.appendChild(nextPageItem);
-      }
-    }
-
     // Add event listeners to table headers for sorting
     document.querySelectorAll('.dotgov-table__domain-requests th[data-sortable]').forEach(header => {
       header.addEventListener('click', function() {

src/registrar/assets/sass/_theme/_pagination.scss

@@ -0,0 +1,14 @@
+@use "uswds-core" as *;
+
+.usa-pagination {
+    flex-wrap: wrap;
+    .usa-current {
+        background-color: color('base-dark');
+    }
+}
+
+@include at-media(desktop) {
+    .usa-pagination {
+        flex-wrap: nowrap;
+    }
+}

src/registrar/assets/sass/_theme/styles.scss

@@ -13,6 +13,7 @@
 @forward "links";
 @forward "lists";
 @forward "buttons";
+@forward "pagination";
 @forward "forms";
 @forward "tooltips";
 @forward "fieldsets";

src/registrar/templates/home.html

@@ -63,7 +63,7 @@
     </div>
   </section>
   <nav aria-label="Pagination" class="usa-pagination flex-justify" id="domains-pagination">
-    <span class="usa-pagination__counter text-base-dark padding-left-2">
+    <span class="usa-pagination__counter text-base-dark padding-left-2 margin-bottom-1">
       <!-- Count will be dynamically populated by JS -->
     </span>
     <ul class="usa-pagination__list">
@@ -134,7 +134,7 @@
   </div>  
   </section>
   <nav aria-label="Pagination" class="usa-pagination flex-justify" id="domain-requests-pagination">
-    <span class="usa-pagination__counter text-base-dark padding-left-2">
+    <span class="usa-pagination__counter text-base-dark padding-left-2 margin-bottom-1">
       <!-- Count will be dynamically populated by JS -->
     </span>
     <ul class="usa-pagination__list">