From e3a3e09cb23f0d02a98afc5839872cb56b8fdc11 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Tue, 10 Sep 2024 09:14:09 -0600
Subject: [PATCH 01/13] Use searchParams

---
 src/registrar/assets/js/get-gov.js | 38 ++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index 7c523a12a..fda709585 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -33,6 +33,26 @@ const showElement = (element) => {
   element.classList.remove('display-none');
 };
 
+/**
+ * Helper function that returns commonly used search params for tables
+ * @param {*} page - Used for the paginator to determine which page we reside on
+ * @param {*} sortBy - which value to sort on. Passed to sort_by in django
+ * @param {*} order - which value to order on. Passed to order_by in django
+ * @param {*} status - Represents the status filter button
+ * @param {*} searchTerm - Represents the value of the search bar
+ */
+function getGenericTableSearchParams(page, sortBy, order, status, searchTerm) {
+  return new URLSearchParams(
+    {
+      "page": page,
+      "sort_by": sortBy,
+      "order": order,
+      "status": status,
+      "search_term": searchTerm
+    }
+  );
+}
+
 /**
  * Helper function that scrolls to an element
  * @param {string} attributeName - The string "class" or "id"
@@ -1179,6 +1199,7 @@ document.addEventListener('DOMContentLoaded', function() {
      * @param {*} sortBy - the sort column option
      * @param {*} order - the sort order {asc, desc}
      * @param {*} scroll - control for the scrollToElement functionality
+     * @param {*} status - control for the status filter
      * @param {*} searchTerm - the search term
      * @param {*} portfolio - the portfolio id
      */
@@ -1195,10 +1216,11 @@ document.addEventListener('DOMContentLoaded', function() {
       }
 
       // fetch json of page of domains, given params
-      let url = `${baseUrlValue}?page=${page}&sort_by=${sortBy}&order=${order}&status=${status}&search_term=${searchTerm}`
+      let searchParams = getGenericTableSearchParams(page, sort_by, order, status, search_term);
       if (portfolio)
-        url += `&portfolio=${portfolio}`
+        searchParams.append("portfolio", portfolio)
 
+      let url = `${baseUrlValue}?${searchParams.toString()}`
       fetch(url)
         .then(response => response.json())
         .then(data => {
@@ -1485,6 +1507,8 @@ document.addEventListener('DOMContentLoaded', function() {
     const tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]');
     const tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region');
     const resetSearchButton = document.querySelector('.domain-requests__reset-search');
+    const portfolioElement = document.getElementById('portfolio-js-value');
+    const portfolioValue = portfolioElement ? portfolioElement.getAttribute('data-portfolio') : null;
 
     /**
      * 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.
@@ -1524,6 +1548,7 @@ document.addEventListener('DOMContentLoaded', function() {
       return document.querySelector('input[name="csrfmiddlewaretoken"]').value;
     }
 
+    let currentStatus = []
     /**
      * Loads rows in the domain requests list, as well as updates pagination around the domain requests list
      * based on the supplied attributes.
@@ -1533,7 +1558,7 @@ document.addEventListener('DOMContentLoaded', function() {
      * @param {*} scroll - control for the scrollToElement functionality
      * @param {*} searchTerm - the search term
      */
-    function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, searchTerm = currentSearchTerm) {
+    function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, status = currentStatus, searchTerm = currentSearchTerm, portfolio = portfolioValue) {
       // fetch json of page of domain requests, given params
       let baseUrl = document.getElementById("get_domain_requests_json_url");
       if (!baseUrl) {
@@ -1545,7 +1570,12 @@ document.addEventListener('DOMContentLoaded', function() {
         return;
       }
 
-      fetch(`${baseUrlValue}?page=${page}&sort_by=${sortBy}&order=${order}&search_term=${searchTerm}`)
+      let searchParams = getGenericTableSearchParams(page, sort_by, order, status, search_term);
+      if (portfolio)
+        searchParams.append("portfolio", portfolio)
+
+      let url = `${baseUrlValue}?${searchParams.toString()}`
+      fetch(url)
         .then(response => response.json())
         .then(data => {
           if (data.error) {

From fb36ec1a54c7c7720e3821f8f0fd79014abc42df Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Tue, 10 Sep 2024 09:21:28 -0600
Subject: [PATCH 02/13] Remove unneeded function

---
 src/registrar/assets/js/get-gov.js | 40 ++++++++++++++----------------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index fda709585..2cb3eb23c 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -33,26 +33,6 @@ const showElement = (element) => {
   element.classList.remove('display-none');
 };
 
-/**
- * Helper function that returns commonly used search params for tables
- * @param {*} page - Used for the paginator to determine which page we reside on
- * @param {*} sortBy - which value to sort on. Passed to sort_by in django
- * @param {*} order - which value to order on. Passed to order_by in django
- * @param {*} status - Represents the status filter button
- * @param {*} searchTerm - Represents the value of the search bar
- */
-function getGenericTableSearchParams(page, sortBy, order, status, searchTerm) {
-  return new URLSearchParams(
-    {
-      "page": page,
-      "sort_by": sortBy,
-      "order": order,
-      "status": status,
-      "search_term": searchTerm
-    }
-  );
-}
-
 /**
  * Helper function that scrolls to an element
  * @param {string} attributeName - The string "class" or "id"
@@ -1216,7 +1196,15 @@ document.addEventListener('DOMContentLoaded', function() {
       }
 
       // fetch json of page of domains, given params
-      let searchParams = getGenericTableSearchParams(page, sort_by, order, status, search_term);
+      let searchParams = new URLSearchParams(
+        {
+          "page": page,
+          "sort_by": sortBy,
+          "order": order,
+          "status": status,
+          "search_term": searchTerm
+        }
+      );
       if (portfolio)
         searchParams.append("portfolio", portfolio)
 
@@ -1570,7 +1558,15 @@ document.addEventListener('DOMContentLoaded', function() {
         return;
       }
 
-      let searchParams = getGenericTableSearchParams(page, sort_by, order, status, search_term);
+      let searchParams = new URLSearchParams(
+        {
+          "page": page,
+          "sort_by": sortBy,
+          "order": order,
+          "status": status,
+          "search_term": searchTerm
+        }
+      );
       if (portfolio)
         searchParams.append("portfolio", portfolio)
 

From c11a282f270c80dfc926994b04fdb248feee0a15 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Tue, 10 Sep 2024 10:01:30 -0600
Subject: [PATCH 03/13] Update get-gov.js

---
 src/registrar/assets/js/get-gov.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index b5f028bb5..b12c7d001 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -1559,6 +1559,7 @@ document.addEventListener('DOMContentLoaded', function() {
         return;
       }
 
+      // add searchParams
       let searchParams = new URLSearchParams(
         {
           "page": page,

From b036b701122ebef9ea48d51c70585dc51e813913 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Tue, 10 Sep 2024 13:16:41 -0400
Subject: [PATCH 04/13] functionality done

---
 src/registrar/assets/js/get-gov.js            | 141 ++++++++++++++----
 .../includes/domain_requests_table.html       | 121 ++++++++++++++-
 .../templates/includes/domains_table.html     |   2 +-
 src/registrar/views/domain_requests_json.py   |  22 ++-
 4 files changed, 258 insertions(+), 28 deletions(-)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index b12c7d001..d1adece6e 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -1166,7 +1166,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const resetSearchButton = document.querySelector('.domains__reset-search');
     const resetFiltersButton = document.querySelector('.domains__reset-filters');
     const statusCheckboxes = document.querySelectorAll('input[name="filter-status"]');
-    const statusIndicator = document.querySelector('.domain__filter-indicator');
+    const statusIndicator = document.querySelector('.filter-indicator');
     const statusToggle = document.querySelector('.usa-button--filter');
     const portfolioElement = document.getElementById('portfolio-js-value');
     const portfolioValue = portfolioElement ? portfolioElement.getAttribute('data-portfolio') : null;
@@ -1419,10 +1419,10 @@ document.addEventListener('DOMContentLoaded', function() {
     function updateStatusIndicator() {
       statusIndicator.innerHTML = '';
       // Even if the element is empty, it'll mess up the flex layout unless we set display none
-      statusIndicator.hideElement();
+      hideElement(statusIndicator);
       if (currentStatus.length)
         statusIndicator.innerHTML = '(' + currentStatus.length + ')';
-        statusIndicator.showElement();
+        showElement(statusIndicator);
     }
 
     function closeFilters() {
@@ -1436,9 +1436,9 @@ document.addEventListener('DOMContentLoaded', function() {
     // NOTE: We may need to evolve this as we add more filters.
     document.addEventListener('focusin', function(event) {
       const accordion = document.querySelector('.usa-accordion--select');
-      const accordionIsOpen = document.querySelector('.usa-button--filter[aria-expanded="true"]');
+      const openFilterAccordion = document.querySelector('.usa-button--filter[aria-expanded="true"]');
       
-      if (accordionIsOpen && !accordion.contains(event.target)) {
+      if (openFilterAccordion && !accordion.contains(event.target)) {
         closeFilters();
       }
     });
@@ -1447,9 +1447,9 @@ document.addEventListener('DOMContentLoaded', function() {
     // NOTE: We may need to evolve this as we add more filters.
     document.addEventListener('click', function(event) {
       const accordion = document.querySelector('.usa-accordion--select');
-      const accordionIsOpen = document.querySelector('.usa-button--filter[aria-expanded="true"]');
+      const openFilterAccordion = document.querySelector('.usa-button--filter[aria-expanded="true"]');
     
-      if (accordionIsOpen && !accordion.contains(event.target)) {
+      if (openFilterAccordion && !accordion.contains(event.target)) {
         closeFilters();
       }
     });
@@ -1488,14 +1488,17 @@ document.addEventListener('DOMContentLoaded', function() {
     const noDomainRequestsWrapper = document.querySelector('.domain-requests__no-data');
     const noSearchResultsWrapper = document.querySelector('.domain-requests__no-search-results');
     let scrollToTable = false;
+    let currentStatus = [];
     let currentSearchTerm = '';
     const domainRequestsSearchInput = document.getElementById('domain-requests__search-field');
     const domainRequestsSearchSubmit = document.getElementById('domain-requests__search-field-submit');
     const tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]');
     const tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region');
     const resetSearchButton = document.querySelector('.domain-requests__reset-search');
-    const portfolioElement = document.getElementById('portfolio-js-value');
-    const portfolioValue = portfolioElement ? portfolioElement.getAttribute('data-portfolio') : null;
+    const resetFiltersButton = document.querySelector('.domains__reset-filters');
+    const statusCheckboxes = document.querySelectorAll('input[name="filter-status"]');
+    const statusIndicator = document.querySelector('.filter-indicator');
+    const statusToggle = document.querySelector('.usa-button--filter');
     const portfolioElement = document.getElementById('portfolio-js-value');
     const portfolioValue = portfolioElement ? portfolioElement.getAttribute('data-portfolio') : null;
 
@@ -1537,7 +1540,6 @@ document.addEventListener('DOMContentLoaded', function() {
       return document.querySelector('input[name="csrfmiddlewaretoken"]').value;
     }
 
-    let currentStatus = []
     /**
      * Loads rows in the domain requests list, as well as updates pagination around the domain requests list
      * based on the supplied attributes.
@@ -1547,7 +1549,7 @@ document.addEventListener('DOMContentLoaded', function() {
      * @param {*} scroll - control for the scrollToElement functionality
      * @param {*} searchTerm - the search term
      */
-    function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, searchTerm = currentSearchTerm, status = currentStatus, portfolio = portfolioValue, portfolio = portfolioValue) {
+    function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, searchTerm = currentSearchTerm, status = currentStatus, portfolio = portfolioValue) {
       // fetch json of page of domain requests, given params
       let baseUrl = document.getElementById("get_domain_requests_json_url");
       if (!baseUrl) {
@@ -1882,6 +1884,44 @@ document.addEventListener('DOMContentLoaded', function() {
       resetHeaders();
     });
 
+    if (statusToggle) {
+      statusToggle.addEventListener('click', function() {
+        toggleCaret(statusToggle);
+      });
+    }
+
+    // Add event listeners to status filter checkboxes
+    statusCheckboxes.forEach(checkbox => {
+      checkbox.addEventListener('change', function() {
+        const checkboxValue = this.value;
+        
+        // Update currentStatus array based on checkbox state
+        if (this.checked) {
+          currentStatus.push(checkboxValue);
+        } else {
+          const index = currentStatus.indexOf(checkboxValue);
+          if (index > -1) {
+            currentStatus.splice(index, 1);
+          }
+        }
+
+        // Manage visibility of reset filters button
+        if (currentStatus.length == 0) {
+          hideElement(resetFiltersButton);
+        } else {
+          showElement(resetFiltersButton);
+        }
+
+        // Disable the auto scroll
+        scrollToTable = false;
+
+        // Call loadDomains with updated status
+        loadDomainRequests(1, 'id', 'asc');
+        resetHeaders();
+        updateStatusIndicator();
+      });
+    });
+
     // Reset UI and accessibility
     function resetHeaders() {
       tableHeaders.forEach(header => {
@@ -1906,34 +1946,85 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     }
 
-    function closeMoreActionMenu(accordionIsOpen) {
-      if (accordionIsOpen.getAttribute("aria-expanded") === "true") {
-        accordionIsOpen.click();
+    function closeMoreActionMenu(openFilterAccordion) {
+      if (openFilterAccordion.getAttribute("aria-expanded") === "true") {
+        openFilterAccordion.click();
+      }
+    }
+
+    function resetFilters() {
+      currentStatus = [];
+      statusCheckboxes.forEach(checkbox => {
+        checkbox.checked = false; 
+      });
+      hideElement(resetFiltersButton);
+
+      // Disable the auto scroll
+      scrollToTable = false;
+
+      loadDomainRequests(1, 'id', 'asc');
+      resetHeaders();
+      updateStatusIndicator();
+      // No need to toggle close the filters. The focus shift will trigger that for us.
+    }
+
+    if (resetFiltersButton) {
+      resetFiltersButton.addEventListener('click', function() {
+        resetFilters();
+      });
+    }
+
+    function updateStatusIndicator() {
+      statusIndicator.innerHTML = '';
+      // Even if the element is empty, it'll mess up the flex layout unless we set display none
+      hideElement(statusIndicator);
+      if (currentStatus.length)
+        statusIndicator.innerHTML = '(' + currentStatus.length + ')';
+        showElement(statusIndicator);
+    }
+
+    function closeFilters() {
+      if (statusToggle.getAttribute("aria-expanded") === "true") {
+        statusToggle.click();
       }
     }
 
     document.addEventListener('focusin', function(event) {
-      const accordions = document.querySelectorAll('.usa-accordion--more-actions');
-      const openAccordions = document.querySelectorAll('.usa-button--more-actions[aria-expanded="true"]');
+      const openMoreActionsAccordions = document.querySelectorAll('.usa-button--more-actions[aria-expanded="true"]');
       
-      openAccordions.forEach((openAccordionButton) => {
-        const accordion = openAccordionButton.closest('.usa-accordion--more-actions'); // Find the corresponding accordion
-        if (accordion && !accordion.contains(event.target)) {
-          closeMoreActionMenu(openAccordionButton); // Close the accordion if the focus is outside
+      openMoreActionsAccordions.forEach((openMoreActionsAccordionButton) => {
+        const moreActionsAccordion = openMoreActionsAccordionButton.closest('.usa-accordion--more-actions'); // Find the corresponding accordion
+        if (moreActionsAccordion && !moreActionsAccordion.contains(event.target)) {
+          closeMoreActionMenu(openMoreActionsAccordionButton); // Close the accordion if the focus is outside
         }
       });
+
+      const openFilterAccordion = document.querySelector('.usa-button--filter[aria-expanded="true"]');
+      const moreFilterAccordion = openFilterAccordion ? openFilterAccordion.closest('.usa-accordion--select') : undefined;
+
+      if (openFilterAccordion) {
+        if (!moreFilterAccordion.contains(event.target)) {
+          closeFilters();
+        }
+      }
     });
     
     document.addEventListener('click', function(event) {
-      const accordions = document.querySelectorAll('.usa-accordion--more-actions');
-      const openAccordions = document.querySelectorAll('.usa-button--more-actions[aria-expanded="true"]');
+      const openMoreActionsAccordions = document.querySelectorAll('.usa-button--more-actions[aria-expanded="true"]');
     
-      openAccordions.forEach((openAccordionButton) => {
-        const accordion = openAccordionButton.closest('.usa-accordion--more-actions'); // Find the corresponding accordion
+      openMoreActionsAccordions.forEach((openMoreActionsAccordionButton) => {
+        const accordion = openMoreActionsAccordionButton.closest('.usa-accordion--more-actions'); // Find the corresponding accordion
         if (accordion && !accordion.contains(event.target)) {
-          closeMoreActionMenu(openAccordionButton); // Close the accordion if the click is outside
+          closeMoreActionMenu(openMoreActionsAccordionButton); // Close the accordion if the click is outside
         }
       });
+
+      const openFilterAccordion = document.querySelector('.usa-button--filter[aria-expanded="true"]');
+      const moreFilterAccordion = openFilterAccordion ? openFilterAccordion.closest('.usa-accordion--select') : undefined;
+
+      if (openFilterAccordion && moreFilterAccordion && !moreFilterAccordion.contains(event.target)) {
+        closeFilters();
+      }
     });
 
     // Initial load
diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
index 0c123948e..e4a61a095 100644
--- a/src/registrar/templates/includes/domain_requests_table.html
+++ b/src/registrar/templates/includes/domain_requests_table.html
@@ -23,7 +23,7 @@
               </svg>
               Reset
             </button>
-            <label class="usa-sr-only" for="domain-requests__search-field">Search by domain name</label>
+            <label class="usa-sr-only" for="domain-requests__search-field">Search by domain name or creator</label>
             <input
               class="usa-input"
               id="domain-requests__search-field"
@@ -42,6 +42,125 @@
         </section>
       </div>
     </div>
+    {% if portfolio %}
+    <div class="display-flex flex-align-center"> 
+      <span class="margin-right-2 margin-top-neg-1 usa-prose text-base-darker">Filter by</span>
+      <div class="usa-accordion usa-accordion--select margin-right-2">
+        <div class="usa-accordion__heading">
+          <button
+            type="button"
+            class="usa-button usa-button--small padding--8-8-9 usa-button--outline usa-button--filter usa-accordion__button"
+            aria-expanded="false"
+            aria-controls="filter-status"
+          >
+            <span class="filter-indicator text-bold display-none"></span> Status
+            <svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
+              <use xlink:href="/public/img/sprite.svg#expand_more"></use>
+            </svg>
+          </button>
+        </div>
+        <div id="filter-status" class="usa-accordion__content usa-prose shadow-1">
+          <h2>Status</h2>
+          <fieldset class="usa-fieldset margin-top-0">
+            <legend class="usa-legend">Select to apply <span class="sr-only">status</span> filter</legend>
+            <div class="usa-checkbox">
+              <input
+                class="usa-checkbox__input"
+                id="filter-status-started"
+                type="checkbox"
+                name="filter-status"
+                value="started"
+              />
+              <label class="usa-checkbox__label" for="filter-status-started"
+                >Started</label
+              >
+            </div>
+            <div class="usa-checkbox">
+              <input
+                class="usa-checkbox__input"
+                id="filter-status-submitted"
+                type="checkbox"
+                name="filter-status"
+                value="submitted"
+              />
+              <label class="usa-checkbox__label" for="filter-status-submitted"
+                >Submitted</label
+              >
+            </div>
+            <div class="usa-checkbox">
+              <input
+                class="usa-checkbox__input"
+                id="filter-status-in-review"
+                type="checkbox"
+                name="filter-status"
+                value="in review"
+              />
+              <label class="usa-checkbox__label" for="filter-status-in-review"
+                >In review</label
+              >
+            </div>
+            <div class="usa-checkbox">
+              <input
+                class="usa-checkbox__input"
+                id="filter-status-action-needed"
+                type="checkbox"
+                name="filter-status"
+                value="action needed"
+              />
+              <label class="usa-checkbox__label" for="filter-status-action-needed"
+                >Action needed</label
+              >
+            </div>
+            <div class="usa-checkbox">
+              <input
+                class="usa-checkbox__input"
+                id="filter-status-rejected"
+                type="checkbox"
+                name="filter-status"
+                value="rejected"
+              />
+              <label class="usa-checkbox__label" for="filter-status-rejected"
+                >Rejected</label
+              >
+            </div>
+            <div class="usa-checkbox">
+              <input
+                class="usa-checkbox__input"
+                id="filter-status-withdrawn"
+                type="checkbox"
+                name="filter-status"
+                value="withdrawn"
+              />
+              <label class="usa-checkbox__label" for="filter-status-withdrawn"
+                >Withdrawn</label
+              >
+            </div>
+            <div class="usa-checkbox">
+              <input
+                class="usa-checkbox__input"
+                id="filter-status-ineligible"
+                type="checkbox"
+                name="filter-status"
+                value="ineligible"
+              />
+              <label class="usa-checkbox__label" for="filter-status-ineligible"
+                >Ineligible</label
+              >
+            </div>
+          </fieldset>
+        </div>
+      </div>
+      <button
+        type="button"
+        class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter domains__reset-filters display-none"
+      >
+        Clear filters
+        <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">
+          <use xlink:href="/public/img/sprite.svg#close"></use>
+        </svg>
+      </button>
+    </div>
+    {% endif %}
     <div class="domain-requests__table-wrapper display-none usa-table-container--scrollable margin-top-0" tabindex="0">
       <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked domain-requests__table">
         <caption class="sr-only">Your domain requests</caption>
diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html
index 414325e89..76ead3a2c 100644
--- a/src/registrar/templates/includes/domains_table.html
+++ b/src/registrar/templates/includes/domains_table.html
@@ -64,7 +64,7 @@
             aria-expanded="false"
             aria-controls="filter-status"
           >
-            <span class="domain__filter-indicator text-bold display-none"></span> Status
+            <span class="filter-indicator text-bold display-none"></span> Status
             <svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
               <use xlink:href="/public/img/sprite.svg#expand_more"></use>
             </svg>
diff --git a/src/registrar/views/domain_requests_json.py b/src/registrar/views/domain_requests_json.py
index fe86e7a7f..76fa94662 100644
--- a/src/registrar/views/domain_requests_json.py
+++ b/src/registrar/views/domain_requests_json.py
@@ -18,6 +18,7 @@ def get_domain_requests_json(request):
     unfiltered_total = objects.count()
 
     objects = apply_search(objects, request)
+    objects = apply_status_filter(objects, request)
     objects = apply_sorting(objects, request)
 
     paginator = Paginator(objects, 10)
@@ -62,6 +63,7 @@ def get_domain_request_ids_from_request(request):
 
 def apply_search(queryset, request):
     search_term = request.GET.get("search_term")
+    is_portfolio = request.GET.get("portfolio")
 
     if search_term:
         search_term_lower = search_term.lower()
@@ -73,12 +75,30 @@ def apply_search(queryset, request):
         if search_term_lower in new_domain_request_text:
             queryset = queryset.filter(
                 Q(requested_domain__name__icontains=search_term) | Q(requested_domain__isnull=True)
-            )
+            ) 
+        elif is_portfolio:
+            queryset = queryset.filter(Q(requested_domain__name__icontains=search_term) | Q(creator__first_name__icontains=search_term) | Q(creator__last_name__icontains=search_term) | Q(creator__email__icontains=search_term))
+        # For non org users
         else:
             queryset = queryset.filter(Q(requested_domain__name__icontains=search_term))
     return queryset
 
 
+def apply_status_filter(queryset, request):
+    status_param = request.GET.get("status")
+    if status_param:
+        status_list = status_param.split(",")
+        statuses = [status for status in status_list if status in DomainRequest.DomainRequestStatus.values]
+        # Construct Q objects for statuses that can be queried through ORM
+        status_query = Q()
+        if statuses:
+            status_query |= Q(status__in=statuses)
+        # Apply the combined query
+        queryset = queryset.filter(status_query)
+
+    return queryset
+
+
 def apply_sorting(queryset, request):
     sort_by = request.GET.get("sort_by", "id")  # Default to 'id'
     order = request.GET.get("order", "asc")  # Default to 'asc'

From 78a762a2eac91e880adbbcb8c08e907fa2752880 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Tue, 10 Sep 2024 12:54:06 -0600
Subject: [PATCH 05/13] Unit tests

---
 .../tests/test_views_requests_json.py         | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/src/registrar/tests/test_views_requests_json.py b/src/registrar/tests/test_views_requests_json.py
index cef608567..d9e154421 100644
--- a/src/registrar/tests/test_views_requests_json.py
+++ b/src/registrar/tests/test_views_requests_json.py
@@ -458,3 +458,85 @@ class GetRequestsJsonTest(TestWithUser, WebTest):
         # Ensure no approved requests are included
         for domain_request in data["domain_requests"]:
             self.assertNotEqual(domain_request["status"], DomainRequest.DomainRequestStatus.APPROVED)
+
+
+    def test_search(self):
+        """Tests our search functionality. We expect that search filters on creator only when we are in portfolio mode"""
+        # Test search for domain name
+        response = self.app.get(reverse("get_domain_requests_json"), {"search_term": "lamb"})
+        self.assertEqual(response.status_code, 200)
+        data = response.json
+        self.assertEqual(len(data["domain_requests"]), 1)
+
+        requested_domain = data["domain_requests"][0]["requested_domain"]
+        print(f"requested domain is: {requested_domain}")
+        self.assertEqual(requested_domain, "lamb-chops.gov")
+
+        # Test search for 'New domain request'
+        response = self.app.get(reverse("get_domain_requests_json"), {"search_term": "new domain"})
+        self.assertEqual(response.status_code, 200)
+        data = response.json
+        self.assertTrue(any(req["requested_domain"] is None for req in data["domain_requests"]))
+
+        # Test search with portfolio (including creator search)
+        self.client.force_login(self.user)
+        with override_flag("organization_feature", active=True), override_flag("organization_requests", active=True):
+            user_perm, _ = UserPortfolioPermission.objects.get_or_create(
+                user=self.user,
+                portfolio=self.portfolio,
+                roles=[UserPortfolioRoleChoices.ORGANIZATION_ADMIN],
+            )
+            response = self.app.get(reverse("get_domain_requests_json"), {
+                "search_term": "info",
+                "portfolio": self.portfolio.id
+            })
+            self.assertEqual(response.status_code, 200)
+            data = response.json
+            self.assertTrue(any(req["creator"].startswith("info") for req in data["domain_requests"]))
+
+        # Test search without portfolio (should not search on creator)
+        with override_flag("organization_feature", active=False), override_flag("organization_requests", active=False):
+            user_perm.delete()
+            response = self.app.get(reverse("get_domain_requests_json"), {"search_term": "info"})
+            self.assertEqual(response.status_code, 200)
+            data = response.json
+            self.assertEqual(len(data["domain_requests"]), 0)
+
+    @override_flag("organization_feature", active=True)
+    @override_flag("organization_requests", active=True)
+    def test_status_filter(self):
+        """Test that status filtering works properly"""
+        # Test a single status
+        response = self.app.get(reverse("get_domain_requests_json"), {"status": "started"})
+        self.assertEqual(response.status_code, 200)
+        data = response.json
+        self.assertTrue(all(req["status"] == "Started" for req in data["domain_requests"]))
+
+        # Test an invalid status
+        response = self.app.get(reverse("get_domain_requests_json"), {"status": "approved"})
+        self.assertEqual(response.status_code, 200)
+        data = response.json
+        self.assertEqual(len(data["domain_requests"]), 0)
+
+    @override_flag("organization_feature", active=True)
+    @override_flag("organization_requests", active=True)
+    def test_combined_filtering_and_sorting(self):
+        """Test that combining filters and sorting works properly"""
+        user_perm, _ = UserPortfolioPermission.objects.get_or_create(
+            user=self.user,
+            portfolio=self.portfolio,
+            roles=[UserPortfolioRoleChoices.ORGANIZATION_ADMIN],
+        )
+        self.client.force_login(self.user)
+        response = self.app.get(reverse("get_domain_requests_json"), {
+            "search_term": "beef",
+            "status": "started",
+            "portfolio": self.portfolio.id
+        })
+        self.assertEqual(response.status_code, 200)
+        data = response.json
+        self.assertTrue(all("beef" in req["requested_domain"] for req in data["domain_requests"]))
+        self.assertTrue(all(req["status"] == "Started" for req in data["domain_requests"]))
+        created_at_dates = [req["created_at"] for req in data["domain_requests"]]
+        self.assertEqual(created_at_dates, sorted(created_at_dates, reverse=True))
+        user_perm.delete()

From f9a39fcca800da8365671b093a888279d8b63c6f Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Tue, 10 Sep 2024 13:13:18 -0600
Subject: [PATCH 06/13] linting

---
 .../tests/test_views_requests_json.py          | 18 +++++++-----------
 src/registrar/views/domain_requests_json.py    |  9 +++++++--
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/registrar/tests/test_views_requests_json.py b/src/registrar/tests/test_views_requests_json.py
index d9e154421..12b2a898e 100644
--- a/src/registrar/tests/test_views_requests_json.py
+++ b/src/registrar/tests/test_views_requests_json.py
@@ -459,7 +459,6 @@ class GetRequestsJsonTest(TestWithUser, WebTest):
         for domain_request in data["domain_requests"]:
             self.assertNotEqual(domain_request["status"], DomainRequest.DomainRequestStatus.APPROVED)
 
-
     def test_search(self):
         """Tests our search functionality. We expect that search filters on creator only when we are in portfolio mode"""
         # Test search for domain name
@@ -469,7 +468,6 @@ class GetRequestsJsonTest(TestWithUser, WebTest):
         self.assertEqual(len(data["domain_requests"]), 1)
 
         requested_domain = data["domain_requests"][0]["requested_domain"]
-        print(f"requested domain is: {requested_domain}")
         self.assertEqual(requested_domain, "lamb-chops.gov")
 
         # Test search for 'New domain request'
@@ -486,10 +484,9 @@ class GetRequestsJsonTest(TestWithUser, WebTest):
                 portfolio=self.portfolio,
                 roles=[UserPortfolioRoleChoices.ORGANIZATION_ADMIN],
             )
-            response = self.app.get(reverse("get_domain_requests_json"), {
-                "search_term": "info",
-                "portfolio": self.portfolio.id
-            })
+            response = self.app.get(
+                reverse("get_domain_requests_json"), {"search_term": "info", "portfolio": self.portfolio.id}
+            )
             self.assertEqual(response.status_code, 200)
             data = response.json
             self.assertTrue(any(req["creator"].startswith("info") for req in data["domain_requests"]))
@@ -528,11 +525,10 @@ class GetRequestsJsonTest(TestWithUser, WebTest):
             roles=[UserPortfolioRoleChoices.ORGANIZATION_ADMIN],
         )
         self.client.force_login(self.user)
-        response = self.app.get(reverse("get_domain_requests_json"), {
-            "search_term": "beef",
-            "status": "started",
-            "portfolio": self.portfolio.id
-        })
+        response = self.app.get(
+            reverse("get_domain_requests_json"),
+            {"search_term": "beef", "status": "started", "portfolio": self.portfolio.id},
+        )
         self.assertEqual(response.status_code, 200)
         data = response.json
         self.assertTrue(all("beef" in req["requested_domain"] for req in data["domain_requests"]))
diff --git a/src/registrar/views/domain_requests_json.py b/src/registrar/views/domain_requests_json.py
index 76fa94662..f8eb52f57 100644
--- a/src/registrar/views/domain_requests_json.py
+++ b/src/registrar/views/domain_requests_json.py
@@ -75,9 +75,14 @@ def apply_search(queryset, request):
         if search_term_lower in new_domain_request_text:
             queryset = queryset.filter(
                 Q(requested_domain__name__icontains=search_term) | Q(requested_domain__isnull=True)
-            ) 
+            )
         elif is_portfolio:
-            queryset = queryset.filter(Q(requested_domain__name__icontains=search_term) | Q(creator__first_name__icontains=search_term) | Q(creator__last_name__icontains=search_term) | Q(creator__email__icontains=search_term))
+            queryset = queryset.filter(
+                Q(requested_domain__name__icontains=search_term)
+                | Q(creator__first_name__icontains=search_term)
+                | Q(creator__last_name__icontains=search_term)
+                | Q(creator__email__icontains=search_term)
+            )
         # For non org users
         else:
             queryset = queryset.filter(Q(requested_domain__name__icontains=search_term))

From 8e2cddfe5d4bd56acc77aa1cb8c09d5c192ddb89 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Tue, 10 Sep 2024 13:29:13 -0600
Subject: [PATCH 07/13] Update test_views_requests_json.py

---
 src/registrar/tests/test_views_requests_json.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/tests/test_views_requests_json.py b/src/registrar/tests/test_views_requests_json.py
index 12b2a898e..c6eb8a1dc 100644
--- a/src/registrar/tests/test_views_requests_json.py
+++ b/src/registrar/tests/test_views_requests_json.py
@@ -460,7 +460,7 @@ class GetRequestsJsonTest(TestWithUser, WebTest):
             self.assertNotEqual(domain_request["status"], DomainRequest.DomainRequestStatus.APPROVED)
 
     def test_search(self):
-        """Tests our search functionality. We expect that search filters on creator only when we are in portfolio mode"""
+        """Tests our search functionality. We expect that search filters on creator only when we are in a portfolio"""
         # Test search for domain name
         response = self.app.get(reverse("get_domain_requests_json"), {"search_term": "lamb"})
         self.assertEqual(response.status_code, 200)

From 0073f3499f5dab8e8f718d3bfba6d09f79e126f3 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Thu, 12 Sep 2024 09:54:39 -0600
Subject: [PATCH 08/13] Fix merge conflict

---
 src/registrar/assets/js/get-gov.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index 8d0862207..f4dc75728 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -2007,6 +2007,15 @@ document.addEventListener('DOMContentLoaded', function() {
           closeMoreActionMenu(openAccordionButton);
         }
       });
+
+      // Close the filter accordion
+      const openFilterAccordion = document.querySelector('.usa-button--filter[aria-expanded="true"]');
+      const moreFilterAccordion = openFilterAccordion ? openFilterAccordion.closest('.usa-accordion--select') : undefined;
+      if (openFilterAccordion) {
+        if (!moreFilterAccordion.contains(event.target)) {
+          closeFilters();
+        }
+      }
     }
 
     // Initial load

From 46730b07cc331dbc84d95b3077e6d241f8ee89db Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Thu, 12 Sep 2024 10:02:12 -0600
Subject: [PATCH 09/13] Add logic to change placeholder text

---
 .../templates/includes/domain_requests_table.html         | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
index e4a61a095..1fa46225a 100644
--- a/src/registrar/templates/includes/domain_requests_table.html
+++ b/src/registrar/templates/includes/domain_requests_table.html
@@ -23,13 +23,21 @@
               </svg>
               Reset
             </button>
+            {% if portfolio %}
             <label class="usa-sr-only" for="domain-requests__search-field">Search by domain name or creator</label>
+            {% else %}
+            <label class="usa-sr-only" for="domain-requests__search-field">Search by domain name</label>
+            {% endif %}
             <input
               class="usa-input"
               id="domain-requests__search-field"
               type="search"
               name="search"
+              {% if portfolio %}
+              placeholder="Search by domain name or creator"
+              {% else %}
               placeholder="Search by domain name"
+              {% endif %}
             />
             <button class="usa-button" type="submit" id="domain-requests__search-field-submit">
               <img

From bfb942a43dab7e76f082b1697541b75027a2ce1f Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Thu, 12 Sep 2024 14:57:52 -0400
Subject: [PATCH 10/13] table ajax refactor

---
 src/registrar/assets/js/get-gov.js | 674 +++++++++++++++--------------
 1 file changed, 361 insertions(+), 313 deletions(-)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index f4dc75728..92ae303e6 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -994,184 +994,370 @@ function unloadModals() {
   window.modal.off();
 }
 
-/**
+class LoadTableBase {
+  constructor(tableSelector, tableWrapper, searchFieldId, searchSubmitId, resetSearchBtn, resetFiltersBtn, noDataDisplay, noSearchresultsDisplay) {
+    this.domainsWrapper = document.querySelector(tableWrapper);
+    this.tableHeaders = document.querySelectorAll(`${tableSelector} th[data-sortable]`);
+    this.currentSortBy = 'id';
+    this.currentOrder = 'asc';
+    this.currentStatus = [];
+    this.currentSearchTerm = '';
+    this.scrollToTable = false;
+    this.domainsSearchInput = document.querySelector(searchFieldId);
+    this.domainsSearchSubmit = document.querySelector(searchSubmitId);
+    this.tableAnnouncementRegion = document.querySelector(`${tableWrapper} .usa-table__announcement-region`);
+    this.resetSearchButton = document.querySelector(resetSearchBtn);
+    this.resetFiltersButton = document.querySelector(resetFiltersBtn);
+    // NOTE: these 3 can't be used if filters are active on a page with more than 1 table
+    this.statusCheckboxes = document.querySelectorAll('input[name="filter-status"]');
+    this.statusIndicator = document.querySelector('.filter-indicator');
+    this.statusToggle = document.querySelector('.usa-button--filter');
+    this.noDomainsWrapper = document.querySelector(noDataDisplay);
+    this.noSearchResultsWrapper = document.querySelector(noSearchresultsDisplay);
+    this.portfolioElement = document.getElementById('portfolio-js-value');
+    this.portfolioValue = this.portfolioElement ? this.portfolioElement.getAttribute('data-portfolio') : null;
+    this.initializetableHeaders();
+    this.initializeSearchHandler();
+    this.initializeStatusToggleHandler();
+    this.initializeFilterCheckboxes();
+    this.initializeResetSearchButton();
+    this.initializeResetFiltersButton();
+    this.initializeAccordionAccessibilityListeners();
+  }
+
+  /**
  * 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} linkAnchor - CSS selector for the header element to anchor the links to.
- * @param {Function} loadPageFunction - Function to call when a page link is clicked.
+ * @param {string} tableSelector - CSS selector for the header element to anchor the links to.
  * @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.
- * @param {string} searchTerm - The search term
- */
-function updatePagination(itemName, paginationSelector, counterSelector, linkAnchor, loadPageFunction, currentPage, numPages, hasPrevious, hasNext, totalItems, searchTerm) {
-  const paginationContainer = document.querySelector(paginationSelector);
-  const paginationCounter = document.querySelector(counterSelector);
-  const paginationButtons = document.querySelector(`${paginationSelector} .usa-pagination__list`);
-  paginationCounter.innerHTML = '';
-  paginationButtons.innerHTML = '';
+ * @param {number} total - The total number of items.
+ */  
+  updatePagination(
+    itemName,
+    paginationSelector,
+    counterSelector,
+    tableSelector,
+    currentPage,
+    numPages,
+    hasPrevious,
+    hasNext,
+    totalItems,
+  ) {
+    const paginationButtons = document.querySelector(`${paginationSelector} .usa-pagination__list`);
+    const counterSelectorEl = document.querySelector(counterSelector);
+    const paginationSelectorEl = document.querySelector(paginationSelector);
+    counterSelectorEl.innerHTML = '';
+    paginationButtons.innerHTML = '';
 
-  // Buttons should only be displayed if there are more than one pages of results
-  paginationButtons.classList.toggle('display-none', numPages <= 1);
+    // 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);
+    // Counter should only be displayed if there is more than 1 item
+    paginationSelectorEl.classList.toggle('display-none', totalItems < 1);
 
-  paginationCounter.innerHTML = `${totalItems} ${itemName}${totalItems > 1 ? 's' : ''}${searchTerm ? ' for ' + '"' + searchTerm + '"' : ''}`;
+    counterSelectorEl.innerHTML = `${totalItems} ${itemName}${totalItems > 1 ? 's' : ''}${this.currentSearchTerm ? ' for ' + '"' + this.currentSearchTerm + '"' : ''}`;
 
-  if (hasPrevious) {
-    const prevPageItem = document.createElement('li');
-    prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
-    prevPageItem.innerHTML = `
-      <a href="${linkAnchor}" 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="${linkAnchor}" 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');
+    if (hasPrevious) {
+      const prevPageItem = document.createElement('li');
+      prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
+      prevPageItem.innerHTML = `
+        <a href="${tableSelector}" 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();
+        this.loadTable(currentPage - 1);
+      });
+      paginationButtons.appendChild(prevPageItem);
     }
-    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);
+    // 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="${tableSelector}" 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();
+        this.loadTable(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="${tableSelector}" 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();
+        this.loadTable(currentPage + 1);
+      });
+      paginationButtons.appendChild(nextPageItem);
     }
   }
 
-  // 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);
+  /**
+   * A helper that toggles content/ no content/ no search results
+   *
+  */
+  updateDisplay = (data, dataWrapper, noDataWrapper, noSearchResultsWrapper) => {
+    const { unfiltered_total, total } = data;
+    if (unfiltered_total) {
+      if (total) {
+        showElement(dataWrapper);
+        hideElement(noSearchResultsWrapper);
+        hideElement(noDataWrapper);
+      } else {
+        hideElement(dataWrapper);
+        showElement(noSearchResultsWrapper);
+        hideElement(noDataWrapper);
+      }
+    } else {
+      hideElement(dataWrapper);
+      hideElement(noSearchResultsWrapper);
+      showElement(noDataWrapper);
     }
-    paginationButtons.appendChild(createPageItem(numPages));
+  };
+
+  /**
+   * A helper that resets sortable table headers
+   *
+  */
+  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);
+  };
+
+  // Abstract method (to be implemented in the child class)
+  loadTable(page, sortBy, order) {
+    throw new Error('loadData() must be implemented in a subclass');
   }
 
-  if (hasNext) {
-    const nextPageItem = document.createElement('li');
-    nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
-    nextPageItem.innerHTML = `
-      <a href="${linkAnchor}" 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);
+  // Add event listeners to table headers for sorting
+  initializetableHeaders() {
+    this.tableHeaders.forEach(header => {
+      header.addEventListener('click', () => {
+        const sortBy = header.getAttribute('data-sortable');
+        let order = 'asc';
+        // sort order will be ascending, unless the currently sorted column is ascending, and the user
+        // is selecting the same column to sort in descending order
+        if (sortBy === this.currentSortBy) {
+          order = this.currentOrder === 'asc' ? 'desc' : 'asc';
+        }
+        // load the results with the updated sort
+        this.loadTable(1, sortBy, order);
+      });
+    });
+  }
+
+  initializeSearchHandler() {
+    this.domainsSearchSubmit.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.currentSearchTerm = this.domainsSearchInput.value;
+      // If the search is blank, we match the resetSearch functionality
+      if (this.currentSearchTerm) {
+        showElement(this.resetSearchButton);
+      } else {
+        hideElement(this.resetSearchButton);
+      }
+      this.loadTable(1, 'id', 'asc');
+      this.resetHeaders();
+    });
+  }
+
+  initializeStatusToggleHandler() {
+    if (this.statusToggle) {
+      this.statusToggle.addEventListener('click', () => {
+        toggleCaret(this.statusToggle);
+      });
+    }
+  }
+
+  // Add event listeners to status filter checkboxes
+  initializeFilterCheckboxes() {
+    this.statusCheckboxes.forEach(checkbox => {
+      checkbox.addEventListener('change', () => {
+        const checkboxValue = checkbox.value;
+        
+        // Update currentStatus array based on checkbox state
+        if (checkbox.checked) {
+          this.currentStatus.push(checkboxValue);
+        } else {
+          const index = this.currentStatus.indexOf(checkboxValue);
+          if (index > -1) {
+            this.currentStatus.splice(index, 1);
+          }
+        }
+
+        // Manage visibility of reset filters button
+        if (this.currentStatus.length == 0) {
+          hideElement(this.resetFiltersButton);
+        } else {
+          showElement(this.resetFiltersButton);
+        }
+
+        // Disable the auto scroll
+        this.scrollToTable = false;
+
+        // Call loadTable with updated status
+        this.loadTable(1, 'id', 'asc');
+        this.resetHeaders();
+        this.updateStatusIndicator();
+      });
+    });
+  }
+
+  // Reset UI and accessibility
+  resetHeaders() {
+    this.tableHeaders.forEach(header => {
+      // Unset sort UI in headers
+      this.unsetHeader(header);
+    });
+    // Reset the announcement region
+    this.tableAnnouncementRegion.innerHTML = '';
+  }
+
+  resetSearch() {
+    this.domainsSearchInput.value = '';
+    this.currentSearchTerm = '';
+    hideElement(this.resetSearchButton);
+    this.loadTable(1, 'id', 'asc');
+    this.resetHeaders();
+  }
+
+  initializeResetSearchButton() {
+    if (this.resetSearchButton) {
+      this.resetSearchButton.addEventListener('click', () => {
+        this.resetSearch();
+      });
+    }
+  }
+
+  resetFilters() {
+    this.currentStatus = [];
+    this.statusCheckboxes.forEach(checkbox => {
+      checkbox.checked = false; 
+    });
+    hideElement(this.resetFiltersButton);
+
+    // Disable the auto scroll
+    this.scrollToTable = false;
+
+    this.loadTable(1, 'id', 'asc');
+    this.resetHeaders();
+    this.updateStatusIndicator();
+    // No need to toggle close the filters. The focus shift will trigger that for us.
+  }
+
+  initializeResetFiltersButton() {
+    if (this.resetFiltersButton) {
+      this.resetFiltersButton.addEventListener('click', () => {
+        this.resetFilters();
+      });
+    }
+  }
+
+  updateStatusIndicator() {
+    this.statusIndicator.innerHTML = '';
+    // Even if the element is empty, it'll mess up the flex layout unless we set display none
+    hideElement(this.statusIndicator);
+    if (this.currentStatus.length)
+      this.statusIndicator.innerHTML = '(' + this.currentStatus.length + ')';
+      showElement(this.statusIndicator);
+  }
+
+  closeFilters() {
+    if (this.statusToggle.getAttribute("aria-expanded") === "true") {
+      this.statusToggle.click();
+    }
+  }
+
+  initializeAccordionAccessibilityListeners() {
+    // Instead of managing the toggle/close on the filter buttons in all edge cases (user clicks on search, user clicks on ANOTHER filter,
+    // user clicks on main nav...) we add a listener and close the filters whenever the focus shifts out of the dropdown menu/filter button.
+    // NOTE: We may need to evolve this as we add more filters.
+    document.addEventListener('focusin', (event) => {
+      const accordion = document.querySelector('.usa-accordion--select');
+      const accordionThatIsOpen = document.querySelector('.usa-button--filter[aria-expanded="true"]');
+      
+      if (accordionThatIsOpen && !accordion.contains(event.target)) {
+        this.closeFilters();
+      }
+    });
+
+    // Close when user clicks outside
+    // NOTE: We may need to evolve this as we add more filters.
+    document.addEventListener('click', (event) => {
+      const accordion = document.querySelector('.usa-accordion--select');
+      const accordionThatIsOpen = document.querySelector('.usa-button--filter[aria-expanded="true"]');
+    
+      if (accordionThatIsOpen && !accordion.contains(event.target)) {
+        this.closeFilters();
+      }
     });
-    paginationButtons.appendChild(nextPageItem);
   }
 }
 
-/**
- * A helper that toggles content/ no content/ no search results
- *
-*/
-const updateDisplay = (data, dataWrapper, noDataWrapper, noSearchResultsWrapper) => {
-  const { unfiltered_total, total } = data;
-  if (unfiltered_total) {
-    if (total) {
-      showElement(dataWrapper);
-      hideElement(noSearchResultsWrapper);
-      hideElement(noDataWrapper);
-    } else {
-      hideElement(dataWrapper);
-      showElement(noSearchResultsWrapper);
-      hideElement(noDataWrapper);
-    }
-  } else {
-    hideElement(dataWrapper);
-    hideElement(noSearchResultsWrapper);
-    showElement(noDataWrapper);
+class DomainsTable extends LoadTableBase {
+
+  constructor() {
+    super('.domains__table', '.domains__table-wrapper', '#domains__search-field', '#domains__search-field-submit', '.domains__reset-search', '.domains__reset-filters', '.domains__no-data', '.domains__no-search-results');
   }
-};
-
-/**
- * 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.
- *
- */
-document.addEventListener('DOMContentLoaded', function() {
-  const domainsWrapper = document.querySelector('.domains__table-wrapper');
-
-  if (domainsWrapper) {
-    let currentSortBy = 'id';
-    let currentOrder = 'asc';
-    const noDomainsWrapper = document.querySelector('.domains__no-data');
-    const noSearchResultsWrapper = document.querySelector('.domains__no-search-results');
-    let scrollToTable = false;
-    let currentStatus = [];
-    let currentSearchTerm = '';
-    const domainsSearchInput = document.getElementById('domains__search-field');
-    const domainsSearchSubmit = document.getElementById('domains__search-field-submit');
-    const tableHeaders = document.querySelectorAll('.domains__table th[data-sortable]');
-    const tableAnnouncementRegion = document.querySelector('.domains__table-wrapper  .usa-table__announcement-region');
-    const resetSearchButton = document.querySelector('.domains__reset-search');
-    const resetFiltersButton = document.querySelector('.domains__reset-filters');
-    const statusCheckboxes = document.querySelectorAll('input[name="filter-status"]');
-    const statusIndicator = document.querySelector('.filter-indicator');
-    const statusToggle = document.querySelector('.usa-button--filter');
-    const portfolioElement = document.getElementById('portfolio-js-value');
-    const portfolioValue = portfolioElement ? portfolioElement.getAttribute('data-portfolio') : null;
-
-    /**
+  /**
      * Loads rows in the domains list, as well as updates pagination around the domains list
      * based on the supplied attributes.
      * @param {*} page - the page number of the results (starts with 1)
@@ -1182,7 +1368,8 @@ document.addEventListener('DOMContentLoaded', function() {
      * @param {*} searchTerm - the search term
      * @param {*} portfolio - the portfolio id
      */
-    function loadDomains(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, status = currentStatus, searchTerm = currentSearchTerm, portfolio = portfolioValue) {
+  loadTable(page, sortBy = this.currentSortBy, order = this.currentOrder, scroll = this.scrollToTable, status = this.currentStatus, searchTerm =this.currentSearchTerm, portfolio = this.portfolioValue) {
+
       // fetch json of page of domais, given params
       let baseUrl = document.getElementById("get_domains_json_url");
       if (!baseUrl) {
@@ -1217,7 +1404,7 @@ document.addEventListener('DOMContentLoaded', function() {
           }
 
           // handle the display of proper messaging in the event that no domains exist in the list or search returns no results
-          updateDisplay(data, domainsWrapper, noDomainsWrapper, noSearchResultsWrapper, currentSearchTerm);
+          this.updateDisplay(data, this.domainsWrapper, this.noDomainsWrapper, this.noSearchResultsWrapper, this.currentSearchTerm);
 
           // identify the DOM element where the domain list will be inserted into the DOM
           const domainList = document.querySelector('.domains__table tbody');
@@ -1235,7 +1422,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
             let markupForSuborganizationRow = '';
 
-            if (portfolioValue) {
+            if (this.portfolioValue) {
               markupForSuborganizationRow = `
                 <td>
                     <span class="text-wrap" aria-label="${domain.suborganization ? suborganization : 'No suborganization'}">${suborganization}</span>
@@ -1281,181 +1468,42 @@ document.addEventListener('DOMContentLoaded', function() {
           // Do not scroll on first page load
           if (scroll)
             ScrollToElement('class', 'domains');
-          scrollToTable = true;
+          this.scrollToTable = true;
 
           // update pagination
-          updatePagination(
+          this.updatePagination(
             'domain',
             '#domains-pagination',
             '#domains-pagination .usa-pagination__counter',
             '#domains',
-            loadDomains,
             data.page,
             data.num_pages,
             data.has_previous,
             data.has_next,
             data.total,
-            currentSearchTerm
           );
-          currentSortBy = sortBy;
-          currentOrder = order;
-          currentSearchTerm = searchTerm;
+          this.currentSortBy = sortBy;
+          this.currentOrder = order;
+          this.currentSearchTerm = searchTerm;
         })
         .catch(error => console.error('Error fetching domains:', error));
-    }
+  }
+}
 
-    // Add event listeners to table headers for sorting
-    tableHeaders.forEach(header => {
-      header.addEventListener('click', function() {
-        const sortBy = this.getAttribute('data-sortable');
-        let order = 'asc';
-        // sort order will be ascending, unless the currently sorted column is ascending, and the user
-        // is selecting the same column to sort in descending order
-        if (sortBy === currentSortBy) {
-          order = currentOrder === 'asc' ? 'desc' : 'asc';
-        }
-        // load the results with the updated sort
-        loadDomains(1, sortBy, order);
-      });
-    });
 
-    domainsSearchSubmit.addEventListener('click', function(e) {
-      e.preventDefault();
-      currentSearchTerm = domainsSearchInput.value;
-      // If the search is blank, we match the resetSearch functionality
-      if (currentSearchTerm) {
-        showElement(resetSearchButton);
-      } else {
-        hideElement(resetSearchButton);
-      }
-      loadDomains(1, 'id', 'asc');
-      resetHeaders();
-    });
+/**
+ * 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.
+ *
+ */
+document.addEventListener('DOMContentLoaded', function() {
+  const domainsTable = new DomainsTable();
 
-    if (statusToggle) {
-      statusToggle.addEventListener('click', function() {
-        toggleCaret(statusToggle);
-      });
-    }
-
-    // Add event listeners to status filter checkboxes
-    statusCheckboxes.forEach(checkbox => {
-      checkbox.addEventListener('change', function() {
-        const checkboxValue = this.value;
-        
-        // Update currentStatus array based on checkbox state
-        if (this.checked) {
-          currentStatus.push(checkboxValue);
-        } else {
-          const index = currentStatus.indexOf(checkboxValue);
-          if (index > -1) {
-            currentStatus.splice(index, 1);
-          }
-        }
-
-        // Manage visibility of reset filters button
-        if (currentStatus.length == 0) {
-          hideElement(resetFiltersButton);
-        } else {
-          showElement(resetFiltersButton);
-        }
-
-        // Disable the auto scroll
-        scrollToTable = false;
-
-        // Call loadDomains with updated status
-        loadDomains(1, 'id', 'asc');
-        resetHeaders();
-        updateStatusIndicator();
-      });
-    });
-
-    // Reset UI and accessibility
-    function resetHeaders() {
-      tableHeaders.forEach(header => {
-        // Unset sort UI in headers
-        unsetHeader(header);
-      });
-      // Reset the announcement region
-      tableAnnouncementRegion.innerHTML = '';
-    }
-
-    function resetSearch() {
-      domainsSearchInput.value = '';
-      currentSearchTerm = '';
-      hideElement(resetSearchButton);
-      loadDomains(1, 'id', 'asc');
-      resetHeaders();
-    }
-
-    if (resetSearchButton) {
-      resetSearchButton.addEventListener('click', function() {
-        resetSearch();
-      });
-    }
-
-    function resetFilters() {
-      currentStatus = [];
-      statusCheckboxes.forEach(checkbox => {
-        checkbox.checked = false; 
-      });
-      hideElement(resetFiltersButton);
-
-      // Disable the auto scroll
-      scrollToTable = false;
-
-      loadDomains(1, 'id', 'asc');
-      resetHeaders();
-      updateStatusIndicator();
-      // No need to toggle close the filters. The focus shift will trigger that for us.
-    }
-
-    if (resetFiltersButton) {
-      resetFiltersButton.addEventListener('click', function() {
-        resetFilters();
-      });
-    }
-
-    function updateStatusIndicator() {
-      statusIndicator.innerHTML = '';
-      // Even if the element is empty, it'll mess up the flex layout unless we set display none
-      hideElement(statusIndicator);
-      if (currentStatus.length)
-        statusIndicator.innerHTML = '(' + currentStatus.length + ')';
-        showElement(statusIndicator);
-    }
-
-    function closeFilters() {
-      if (statusToggle.getAttribute("aria-expanded") === "true") {
-        statusToggle.click();
-      }
-    }
-
-    // Instead of managing the toggle/close on the filter buttons in all edge cases (user clicks on search, user clicks on ANOTHER filter,
-    // user clicks on main nav...) we add a listener and close the filters whenever the focus shifts out of the dropdown menu/filter button.
-    // NOTE: We may need to evolve this as we add more filters.
-    document.addEventListener('focusin', function(event) {
-      const accordion = document.querySelector('.usa-accordion--select');
-      const accordionThatIsOpen = document.querySelector('.usa-button--filter[aria-expanded="true"]');
-      
-      if (accordionThatIsOpen && !accordion.contains(event.target)) {
-        closeFilters();
-      }
-    });
-
-    // Close when user clicks outside
-    // NOTE: We may need to evolve this as we add more filters.
-    document.addEventListener('click', function(event) {
-      const accordion = document.querySelector('.usa-accordion--select');
-      const accordionThatIsOpen = document.querySelector('.usa-button--filter[aria-expanded="true"]');
-    
-      if (accordionThatIsOpen && !accordion.contains(event.target)) {
-        closeFilters();
-      }
-    });
+ 
+  if (domainsTable.domainsWrapper) {
 
     // Initial load
-    loadDomains(1);
+    domainsTable.loadTable(1);
   }
 });
 
@@ -1915,7 +1963,7 @@ document.addEventListener('DOMContentLoaded', function() {
         // Disable the auto scroll
         scrollToTable = false;
 
-        // Call loadDomains with updated status
+        // Call loadTable with updated status
         loadDomainRequests(1, 'id', 'asc');
         resetHeaders();
         updateStatusIndicator();

From 0126d6e81f0c734011b00c7b11315f75f810f173 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:09:33 -0600
Subject: [PATCH 11/13] refactor domain requests

---
 src/registrar/assets/js/get-gov.js            | 990 ++++++++----------
 .../includes/domain_requests_table.html       |   2 +-
 2 files changed, 424 insertions(+), 568 deletions(-)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index 92ae303e6..0a4d28577 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -33,6 +33,14 @@ const showElement = (element) => {
   element.classList.remove('display-none');
 };
 
+/**
+ * Helper function to get the CSRF token from the cookie
+ *
+*/
+function getCsrfToken() {
+  return document.querySelector('input[name="csrfmiddlewaretoken"]').value;
+}
+
 /**
  * Helper function that scrolls to an element
  * @param {string} attributeName - The string "class" or "id"
@@ -995,28 +1003,28 @@ function unloadModals() {
 }
 
 class LoadTableBase {
-  constructor(tableSelector, tableWrapper, searchFieldId, searchSubmitId, resetSearchBtn, resetFiltersBtn, noDataDisplay, noSearchresultsDisplay) {
-    this.domainsWrapper = document.querySelector(tableWrapper);
+  constructor(tableSelector, tableWrapperSelector, searchFieldId, searchSubmitId, resetSearchBtn, resetFiltersBtn, noDataDisplay, noSearchresultsDisplay) {
+    this.tableWrapper = document.querySelector(tableWrapperSelector);
     this.tableHeaders = document.querySelectorAll(`${tableSelector} th[data-sortable]`);
     this.currentSortBy = 'id';
     this.currentOrder = 'asc';
     this.currentStatus = [];
     this.currentSearchTerm = '';
     this.scrollToTable = false;
-    this.domainsSearchInput = document.querySelector(searchFieldId);
-    this.domainsSearchSubmit = document.querySelector(searchSubmitId);
-    this.tableAnnouncementRegion = document.querySelector(`${tableWrapper} .usa-table__announcement-region`);
+    this.searchInput = document.querySelector(searchFieldId);
+    this.searchSubmit = document.querySelector(searchSubmitId);
+    this.tableAnnouncementRegion = document.querySelector(`${tableWrapperSelector} .usa-table__announcement-region`);
     this.resetSearchButton = document.querySelector(resetSearchBtn);
     this.resetFiltersButton = document.querySelector(resetFiltersBtn);
     // NOTE: these 3 can't be used if filters are active on a page with more than 1 table
     this.statusCheckboxes = document.querySelectorAll('input[name="filter-status"]');
     this.statusIndicator = document.querySelector('.filter-indicator');
     this.statusToggle = document.querySelector('.usa-button--filter');
-    this.noDomainsWrapper = document.querySelector(noDataDisplay);
+    this.noTableWrapper = document.querySelector(noDataDisplay);
     this.noSearchResultsWrapper = document.querySelector(noSearchresultsDisplay);
     this.portfolioElement = document.getElementById('portfolio-js-value');
     this.portfolioValue = this.portfolioElement ? this.portfolioElement.getAttribute('data-portfolio') : null;
-    this.initializetableHeaders();
+    this.initializeTableHeaders();
     this.initializeSearchHandler();
     this.initializeStatusToggleHandler();
     this.initializeFilterCheckboxes();
@@ -1188,7 +1196,7 @@ class LoadTableBase {
   }
 
   // Add event listeners to table headers for sorting
-  initializetableHeaders() {
+  initializeTableHeaders() {
     this.tableHeaders.forEach(header => {
       header.addEventListener('click', () => {
         const sortBy = header.getAttribute('data-sortable');
@@ -1205,9 +1213,9 @@ class LoadTableBase {
   }
 
   initializeSearchHandler() {
-    this.domainsSearchSubmit.addEventListener('click', (e) => {
+    this.searchSubmit.addEventListener('click', (e) => {
       e.preventDefault();
-      this.currentSearchTerm = this.domainsSearchInput.value;
+      this.currentSearchTerm = this.searchInput.value;
       // If the search is blank, we match the resetSearch functionality
       if (this.currentSearchTerm) {
         showElement(this.resetSearchButton);
@@ -1272,7 +1280,7 @@ class LoadTableBase {
   }
 
   resetSearch() {
-    this.domainsSearchInput.value = '';
+    this.searchInput.value = '';
     this.currentSearchTerm = '';
     hideElement(this.resetSearchButton);
     this.loadTable(1, 'id', 'asc');
@@ -1404,7 +1412,7 @@ class DomainsTable extends LoadTableBase {
           }
 
           // handle the display of proper messaging in the event that no domains exist in the list or search returns no results
-          this.updateDisplay(data, this.domainsWrapper, this.noDomainsWrapper, this.noSearchResultsWrapper, this.currentSearchTerm);
+          this.updateDisplay(data, this.tableWrapper, this.noTableWrapper, this.noSearchResultsWrapper, this.currentSearchTerm);
 
           // identify the DOM element where the domain list will be inserted into the DOM
           const domainList = document.querySelector('.domains__table tbody');
@@ -1491,19 +1499,417 @@ class DomainsTable extends LoadTableBase {
 }
 
 
+class DomainRequestsTable extends LoadTableBase {
+
+  constructor() {
+    super('.domain-requests__table', '.domain-requests__table-wrapper', '#domain-requests__search-field', '#domain-requests__search-field-submit', '.domain-requests__reset-search', '.domain-requests__reset-filters', '.domain-requests__no-data', '.domain-requests__no-search-results');
+    this.domainRequestPk = 1
+
+  }
+  /**
+     * Loads rows in the domains list, as well as updates pagination around the domains list
+     * based on the supplied attributes.
+     * @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 {*} scroll - control for the scrollToElement functionality
+     * @param {*} status - control for the status filter
+     * @param {*} searchTerm - the search term
+     * @param {*} portfolio - the portfolio id
+     */
+  loadTable(page, sortBy = this.currentSortBy, order = this.currentOrder, scroll = this.scrollToTable, status = this.currentStatus, searchTerm = this.currentSearchTerm, portfolio = this.portfolioValue) {
+    let baseUrl = document.getElementById("get_domain_requests_json_url");
+    if (!baseUrl) {
+      return;
+    }
+
+    let baseUrlValue = baseUrl.innerHTML;
+    if (!baseUrlValue) {
+      return;
+    }
+
+    // add searchParams
+    let searchParams = new URLSearchParams(
+      {
+        "page": page,
+        "sort_by": sortBy,
+        "order": order,
+        "status": status,
+        "search_term": searchTerm
+      }
+    );
+    if (portfolio)
+      searchParams.append("portfolio", portfolio)
+
+    let url = `${baseUrlValue}?${searchParams.toString()}`
+    fetch(url)
+      .then(response => response.json())
+      .then(data => {
+        if (data.error) {
+          console.error('Error in AJAX call: ' + data.error);
+          return;
+        }
+
+        // handle the display of proper messaging in the event that no requests exist in the list or search returns no results
+        this.updateDisplay(data, this.tableWrapper, this.noTableWrapper, this.noSearchResultsWrapper, this.currentSearchTerm);
+
+        // identify the DOM element where the domain request list will be inserted into the DOM
+        const tbody = document.querySelector('.domain-requests__table tbody');
+        tbody.innerHTML = '';
+
+        // Unload modals will re-inject the DOM with the initial placeholders to allow for .on() in regular use cases
+        // We do NOT want that as it will cause multiple placeholders and therefore multiple inits on delete,
+        // which will cause bad delete requests to be sent.
+        const preExistingModalPlaceholders = document.querySelectorAll('[data-placeholder-for^="toggle-delete-domain-alert"]');
+        preExistingModalPlaceholders.forEach(element => {
+            element.remove();
+        });
+
+        // remove any existing modal elements from the DOM so they can be properly re-initialized
+        // after the DOM content changes and there are new delete modal buttons added
+        unloadModals();
+
+        let needsDeleteColumn = false;
+
+        needsDeleteColumn = data.domain_requests.some(request => request.is_deletable);
+
+        // Remove existing delete th and td if they exist
+        let existingDeleteTh =  document.querySelector('.delete-header');
+        if (!needsDeleteColumn) {
+          if (existingDeleteTh)
+            existingDeleteTh.remove();
+        } else {
+          if (!existingDeleteTh) {
+            const delheader = document.createElement('th');
+            delheader.setAttribute('scope', 'col');
+            delheader.setAttribute('role', 'columnheader');
+            delheader.setAttribute('class', 'delete-header');
+            delheader.innerHTML = `
+              <span class="usa-sr-only">Delete Action</span>`;
+            let tableHeaderRow = document.querySelector('.domain-requests__table thead tr');
+            tableHeaderRow.appendChild(delheader);
+          }
+        }
+
+        data.domain_requests.forEach(request => {
+          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 submissionDate = request.last_submitted_date ? new Date(request.last_submitted_date).toLocaleDateString('en-US', options) : `<span class="text-base">Not submitted</span>`;
+          
+          // The markup for the delete function either be a simple trigger or a 3 dots menu with a hidden trigger (in the case of portfolio requests page)
+          // Even if the request is not deletable, we may need these empty strings for the td if the deletable column is displayed
+          let modalTrigger = '';
+
+          let markupCreatorRow = '';
+
+          if (this.portfolioValue) {
+            markupCreatorRow = `
+              <td>
+                  <span class="text-wrap break-word">${request.creator ? request.creator : ''}</span>
+              </td>
+            `
+          }
+
+          // If the request is deletable, create modal body and insert it. This is true for both requests and portfolio requests pages
+          if (request.is_deletable) {
+            let modalHeading = '';
+            let modalDescription = '';
+
+            if (request.requested_domain) {
+              modalHeading = `Are you sure you want to delete ${request.requested_domain}?`;
+              modalDescription = 'This will remove the domain request from the .gov registrar. This action cannot be undone.';
+            } else {
+              if (request.created_at) {
+                modalHeading = 'Are you sure you want to delete this domain request?';
+                modalDescription = `This will remove the domain request (created ${utcDateString(request.created_at)}) from the .gov registrar. This action cannot be undone`;
+              } else {
+                modalHeading = 'Are you sure you want to delete New domain request?';
+                modalDescription = 'This will remove the domain request from the .gov registrar. This action cannot be undone.';
+              }
+            }
+
+            modalTrigger = `
+              <a 
+                role="button" 
+                id="button-toggle-delete-domain-alert-${request.id}"
+                href="#toggle-delete-domain-alert-${request.id}"
+                class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger line-height-sans-5"
+                aria-controls="toggle-delete-domain-alert-${request.id}"
+                data-open-modal
+              >
+                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
+                  <use xlink:href="/public/img/sprite.svg#delete"></use>
+                </svg> Delete <span class="usa-sr-only">${domainName}</span>
+              </a>`
+
+            const modalSubmit = `
+              <button type="button"
+              class="usa-button usa-button--secondary usa-modal__submit"
+              data-pk = ${request.id}
+              name="delete-domain-request">Yes, delete request</button>
+            `
+
+            const modal = document.createElement('div');
+            modal.setAttribute('class', 'usa-modal');
+            modal.setAttribute('id', `toggle-delete-domain-alert-${request.id}`);
+            modal.setAttribute('aria-labelledby', 'Are you sure you want to continue?');
+            modal.setAttribute('aria-describedby', 'Domain will be removed');
+            modal.setAttribute('data-force-action', '');
+
+            modal.innerHTML = `
+              <div class="usa-modal__content">
+                <div class="usa-modal__main">
+                  <h2 class="usa-modal__heading" id="modal-1-heading">
+                    ${modalHeading}
+                  </h2>
+                  <div class="usa-prose">
+                    <p id="modal-1-description">
+                      ${modalDescription}
+                    </p>
+                  </div>
+                  <div class="usa-modal__footer">
+                      <ul class="usa-button-group">
+                        <li class="usa-button-group__item">
+                          ${modalSubmit}
+                        </li>      
+                        <li class="usa-button-group__item">
+                            <button
+                                type="button"
+                                class="usa-button usa-button--unstyled padding-105 text-center"
+                                data-close-modal
+                            >
+                                Cancel
+                            </button>
+                        </li>
+                      </ul>
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  class="usa-button usa-modal__close"
+                  aria-label="Close this window"
+                  data-close-modal
+                >
+                  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+                    <use xlink:href="/public/img/sprite.svg#close"></use>
+                  </svg>
+                </button>
+              </div>
+              `
+
+            this.tableWrapper.appendChild(modal);
+
+            // Request is deletable, modal and modalTrigger are built. Now check if we are on the portfolio requests page (by seeing if there is a portfolio value) and enhance the modalTrigger accordingly
+            if (this.portfolioValue) {
+              modalTrigger = `
+              <a 
+                role="button" 
+                id="button-toggle-delete-domain-alert-${request.id}"
+                href="#toggle-delete-domain-alert-${request.id}"
+                class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 visible-mobile-flex line-height-sans-5"
+                aria-controls="toggle-delete-domain-alert-${request.id}"
+                data-open-modal
+              >
+                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
+                  <use xlink:href="/public/img/sprite.svg#delete"></use>
+                </svg> Delete <span class="usa-sr-only">${domainName}</span>
+              </a>
+
+              <div class="usa-accordion usa-accordion--more-actions margin-right-2 hidden-mobile-flex">
+                <div class="usa-accordion__heading">
+                  <button
+                    type="button"
+                    class="usa-button usa-button--unstyled usa-button--with-icon usa-accordion__button usa-button--more-actions"
+                    aria-expanded="false"
+                    aria-controls="more-actions-${request.id}"
+                  >
+                    <svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
+                      <use xlink:href="/public/img/sprite.svg#more_vert"></use>
+                    </svg>
+                  </button>
+                </div>
+                <div id="more-actions-${request.id}" class="usa-accordion__content usa-prose shadow-1 left-auto right-0" hidden>
+                  <h2>More options</h2>
+                  <a 
+                    role="button" 
+                    id="button-toggle-delete-domain-alert-${request.id}"
+                    href="#toggle-delete-domain-alert-${request.id}"
+                    class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 line-height-sans-5"
+                    aria-controls="toggle-delete-domain-alert-${request.id}"
+                    data-open-modal
+                  >
+                    <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
+                      <use xlink:href="/public/img/sprite.svg#delete"></use>
+                    </svg> Delete <span class="usa-sr-only">${domainName}</span>
+                  </a>
+                </div>
+              </div>
+              `
+            }
+          }
+
+
+          const row = document.createElement('tr');
+          row.innerHTML = `
+            <th scope="row" role="rowheader" data-label="Domain name">
+              ${domainName}
+            </th>
+            <td data-sort-value="${new Date(request.last_submitted_date).getTime()}" data-label="Date submitted">
+              ${submissionDate}
+            </td>
+            ${markupCreatorRow}
+            <td data-label="Status">
+              ${request.status}
+            </td>
+            <td>
+              <a href="${actionUrl}">
+                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
+                  <use xlink:href="/public/img/sprite.svg#${request.svg_icon}"></use>
+                </svg>
+                ${actionLabel} <span class="usa-sr-only">${request.requested_domain ? request.requested_domain : 'New domain request'}</span>
+              </a>
+            </td>
+            ${needsDeleteColumn ? '<td>'+modalTrigger+'</td>' : ''}
+          `;
+          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 => {
+          const submitButton = modal.querySelector('.usa-modal__submit');
+          const closeButton = modal.querySelector('.usa-modal__close');
+          submitButton.addEventListener('click', () => {
+            let pk = submitButton.getAttribute('data-pk');
+            // Close the modal to remove the USWDS UI local classes
+            closeButton.click();
+            // If we're deleting 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--;
+            }
+            this.deleteDomainRequest(pk, pageToDisplay);
+          });
+        });
+
+        // Do not scroll on first page load
+        if (scroll)
+          ScrollToElement('class', 'domain-requests');
+        this.scrollToTable = true;
+
+        // update the pagination after the domain requests list is updated
+        this.updatePagination(
+          'domain request',
+          '#domain-requests-pagination',
+          '#domain-requests-pagination .usa-pagination__counter',
+          '#domain-requests',
+          data.page,
+          data.num_pages,
+          data.has_previous,
+          data.has_next,
+          data.total,
+        );
+        this.currentSortBy = sortBy;
+        this.currentOrder = order;
+        this.currentSearchTerm = searchTerm;
+      })
+      .catch(error => console.error('Error fetching domain requests:', error));
+  }
+
+  /**
+   * 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
+  */
+  deleteDomainRequest(domainRequestPk, pageToDisplay) {
+    // Use to debug uswds modal issues
+    //console.log('deleteDomainRequest')
+    
+    // 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',
+        'X-CSRFToken': csrfToken,
+      },
+      body: formData
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      // Update data and UI
+      this.loadTable(pageToDisplay, this.currentSortBy, this.currentOrder, this.scrollToTable, this.currentSearchTerm);
+    })
+    .catch(error => console.error('Error fetching domain requests:', error));
+  }
+}
+
+
 /**
  * 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.
  *
  */
 document.addEventListener('DOMContentLoaded', function() {
-  const domainsTable = new DomainsTable();
+  const isDomainsPage = document.querySelector("#domains") 
+  if (isDomainsPage){
+    const domainsTable = new DomainsTable();
+    if (domainsTable.tableWrapper) {
+      // Initial load
+      domainsTable.loadTable(1);
+    }
+  }
+});
 
- 
-  if (domainsTable.domainsWrapper) {
+/**
+ * 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.
+ *
+ */
+document.addEventListener('DOMContentLoaded', function() {
+  const domainRequestsSectionWrapper = document.querySelector('.domain-requests');
+  if (domainRequestsSectionWrapper) {
+    const domainRequestsTable = new DomainRequestsTable();
+    if (domainRequestsTable.tableWrapper) {
+      domainRequestsTable.loadTable(1);
+    }
+  }
 
-    // Initial load
-    domainsTable.loadTable(1);
+  document.addEventListener('focusin', function(event) {
+    closeOpenAccordions(event);
+  });
+  
+  document.addEventListener('click', function(event) {
+    closeOpenAccordions(event);
+  });
+
+  function closeMoreActionMenu(accordionThatIsOpen) {
+    if (accordionThatIsOpen.getAttribute("aria-expanded") === "true") {
+      accordionThatIsOpen.click();
+    }
+  }
+
+  function closeOpenAccordions(event) {
+    const openAccordions = document.querySelectorAll('.usa-button--more-actions[aria-expanded="true"]');
+    openAccordions.forEach((openAccordionButton) => {
+      // Find the corresponding accordion
+      const accordion = openAccordionButton.closest('.usa-accordion--more-actions');
+      if (accordion && !accordion.contains(event.target)) {
+        // Close the accordion if the click is outside
+        closeMoreActionMenu(openAccordionButton);
+      }
+    });
   }
 });
 
@@ -1521,556 +1927,6 @@ const utcDateString = (dateString) => {
   return `${utcMonth} ${utcDay}, ${utcYear}, ${utcHours}:${utcMinutes} ${ampm} 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.
- *
- */
-document.addEventListener('DOMContentLoaded', function() {
-  const domainRequestsSectionWrapper = document.querySelector('.domain-requests');
-  const domainRequestsWrapper = document.querySelector('.domain-requests__table-wrapper');
-
-  if (domainRequestsWrapper) {
-    let currentSortBy = 'id';
-    let currentOrder = 'asc';
-    const noDomainRequestsWrapper = document.querySelector('.domain-requests__no-data');
-    const noSearchResultsWrapper = document.querySelector('.domain-requests__no-search-results');
-    let scrollToTable = false;
-    let currentStatus = [];
-    let currentSearchTerm = '';
-    const domainRequestsSearchInput = document.getElementById('domain-requests__search-field');
-    const domainRequestsSearchSubmit = document.getElementById('domain-requests__search-field-submit');
-    const tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]');
-    const tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region');
-    const resetSearchButton = document.querySelector('.domain-requests__reset-search');
-    const resetFiltersButton = document.querySelector('.domains__reset-filters');
-    const statusCheckboxes = document.querySelectorAll('input[name="filter-status"]');
-    const statusIndicator = document.querySelector('.filter-indicator');
-    const statusToggle = document.querySelector('.usa-button--filter');
-    const portfolioElement = document.getElementById('portfolio-js-value');
-    const portfolioValue = portfolioElement ? portfolioElement.getAttribute('data-portfolio') : null;
-
-    /**
-     * 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) {
-      
-      // Use to debug uswds modal issues
-      //console.log('deleteDomainRequest')
-      
-      // 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',
-          'X-CSRFToken': csrfToken,
-        },
-        body: formData
-      })
-      .then(response => {
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        // Update data and UI
-        loadDomainRequests(pageToDisplay, currentSortBy, currentOrder, scrollToTable, 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;
-    }
-
-    /**
-     * Loads rows in the domain requests list, as well as updates pagination around the domain requests list
-     * based on the supplied attributes.
-     * @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 {*} scroll - control for the scrollToElement functionality
-     * @param {*} searchTerm - the search term
-     */
-    function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, searchTerm = currentSearchTerm, status = currentStatus, portfolio = portfolioValue) {
-      // fetch json of page of domain requests, given params
-      let baseUrl = document.getElementById("get_domain_requests_json_url");
-      if (!baseUrl) {
-        return;
-      }
-
-      let baseUrlValue = baseUrl.innerHTML;
-      if (!baseUrlValue) {
-        return;
-      }
-
-      // add searchParams
-      let searchParams = new URLSearchParams(
-        {
-          "page": page,
-          "sort_by": sortBy,
-          "order": order,
-          "status": status,
-          "search_term": searchTerm
-        }
-      );
-      if (portfolio)
-        searchParams.append("portfolio", portfolio)
-
-      let url = `${baseUrlValue}?${searchParams.toString()}`
-      fetch(url)
-        .then(response => response.json())
-        .then(data => {
-          if (data.error) {
-            console.error('Error in AJAX call: ' + data.error);
-            return;
-          }
-
-          // handle the display of proper messaging in the event that no requests exist in the list or search returns no results
-          updateDisplay(data, domainRequestsWrapper, noDomainRequestsWrapper, noSearchResultsWrapper, currentSearchTerm);
-
-          // identify the DOM element where the domain request list will be inserted into the DOM
-          const tbody = document.querySelector('.domain-requests__table tbody');
-          tbody.innerHTML = '';
-
-          // Unload modals will re-inject the DOM with the initial placeholders to allow for .on() in regular use cases
-          // We do NOT want that as it will cause multiple placeholders and therefore multiple inits on delete,
-          // which will cause bad delete requests to be sent.
-          const preExistingModalPlaceholders = document.querySelectorAll('[data-placeholder-for^="toggle-delete-domain-alert"]');
-          preExistingModalPlaceholders.forEach(element => {
-              element.remove();
-          });
-
-          // remove any existing modal elements from the DOM so they can be properly re-initialized
-          // after the DOM content changes and there are new delete modal buttons added
-          unloadModals();
-
-          let needsDeleteColumn = false;
-
-          needsDeleteColumn = data.domain_requests.some(request => request.is_deletable);
-
-          // Remove existing delete th and td if they exist
-          let existingDeleteTh =  document.querySelector('.delete-header');
-          if (!needsDeleteColumn) {
-            if (existingDeleteTh)
-              existingDeleteTh.remove();
-          } else {
-            if (!existingDeleteTh) {
-              const delheader = document.createElement('th');
-              delheader.setAttribute('scope', 'col');
-              delheader.setAttribute('role', 'columnheader');
-              delheader.setAttribute('class', 'delete-header');
-              delheader.innerHTML = `
-                <span class="usa-sr-only">Delete Action</span>`;
-              let tableHeaderRow = document.querySelector('.domain-requests__table thead tr');
-              tableHeaderRow.appendChild(delheader);
-            }
-          }
-
-          data.domain_requests.forEach(request => {
-            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 submissionDate = request.last_submitted_date ? new Date(request.last_submitted_date).toLocaleDateString('en-US', options) : `<span class="text-base">Not submitted</span>`;
-            
-            // The markup for the delete function either be a simple trigger or a 3 dots menu with a hidden trigger (in the case of portfolio requests page)
-            // Even if the request is not deletable, we may need these empty strings for the td if the deletable column is displayed
-            let modalTrigger = '';
-
-            let markupCreatorRow = '';
-
-            if (portfolioValue) {
-              markupCreatorRow = `
-                <td>
-                    <span class="text-wrap break-word">${request.creator ? request.creator : ''}</span>
-                </td>
-              `
-            }
-
-            // If the request is deletable, create modal body and insert it. This is true for both requests and portfolio requests pages
-            if (request.is_deletable) {
-              let modalHeading = '';
-              let modalDescription = '';
-
-              if (request.requested_domain) {
-                modalHeading = `Are you sure you want to delete ${request.requested_domain}?`;
-                modalDescription = 'This will remove the domain request from the .gov registrar. This action cannot be undone.';
-              } else {
-                if (request.created_at) {
-                  modalHeading = 'Are you sure you want to delete this domain request?';
-                  modalDescription = `This will remove the domain request (created ${utcDateString(request.created_at)}) from the .gov registrar. This action cannot be undone`;
-                } else {
-                  modalHeading = 'Are you sure you want to delete New domain request?';
-                  modalDescription = 'This will remove the domain request from the .gov registrar. This action cannot be undone.';
-                }
-              }
-
-              modalTrigger = `
-                <a 
-                  role="button" 
-                  id="button-toggle-delete-domain-alert-${request.id}"
-                  href="#toggle-delete-domain-alert-${request.id}"
-                  class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger line-height-sans-5"
-                  aria-controls="toggle-delete-domain-alert-${request.id}"
-                  data-open-modal
-                >
-                  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
-                    <use xlink:href="/public/img/sprite.svg#delete"></use>
-                  </svg> Delete <span class="usa-sr-only">${domainName}</span>
-                </a>`
-
-              const modalSubmit = `
-                <button type="button"
-                class="usa-button usa-button--secondary usa-modal__submit"
-                data-pk = ${request.id}
-                name="delete-domain-request">Yes, delete request</button>
-              `
-
-              const modal = document.createElement('div');
-              modal.setAttribute('class', 'usa-modal');
-              modal.setAttribute('id', `toggle-delete-domain-alert-${request.id}`);
-              modal.setAttribute('aria-labelledby', 'Are you sure you want to continue?');
-              modal.setAttribute('aria-describedby', 'Domain will be removed');
-              modal.setAttribute('data-force-action', '');
-
-              modal.innerHTML = `
-                <div class="usa-modal__content">
-                  <div class="usa-modal__main">
-                    <h2 class="usa-modal__heading" id="modal-1-heading">
-                      ${modalHeading}
-                    </h2>
-                    <div class="usa-prose">
-                      <p id="modal-1-description">
-                        ${modalDescription}
-                      </p>
-                    </div>
-                    <div class="usa-modal__footer">
-                        <ul class="usa-button-group">
-                          <li class="usa-button-group__item">
-                            ${modalSubmit}
-                          </li>      
-                          <li class="usa-button-group__item">
-                              <button
-                                  type="button"
-                                  class="usa-button usa-button--unstyled padding-105 text-center"
-                                  data-close-modal
-                              >
-                                  Cancel
-                              </button>
-                          </li>
-                        </ul>
-                    </div>
-                  </div>
-                  <button
-                    type="button"
-                    class="usa-button usa-modal__close"
-                    aria-label="Close this window"
-                    data-close-modal
-                  >
-                    <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
-                      <use xlink:href="/public/img/sprite.svg#close"></use>
-                    </svg>
-                  </button>
-                </div>
-                `
-
-              domainRequestsSectionWrapper.appendChild(modal);
-
-              // Request is deletable, modal and modalTrigger are built. Now check if we are on the portfolio requests page (by seeing if there is a portfolio value) and enhance the modalTrigger accordingly
-              if (portfolioValue) {
-                modalTrigger = `
-                <a 
-                  role="button" 
-                  id="button-toggle-delete-domain-alert-${request.id}"
-                  href="#toggle-delete-domain-alert-${request.id}"
-                  class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 visible-mobile-flex line-height-sans-5"
-                  aria-controls="toggle-delete-domain-alert-${request.id}"
-                  data-open-modal
-                >
-                  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
-                    <use xlink:href="/public/img/sprite.svg#delete"></use>
-                  </svg> Delete <span class="usa-sr-only">${domainName}</span>
-                </a>
-
-                <div class="usa-accordion usa-accordion--more-actions margin-right-2 hidden-mobile-flex">
-                  <div class="usa-accordion__heading">
-                    <button
-                      type="button"
-                      class="usa-button usa-button--unstyled usa-button--with-icon usa-accordion__button usa-button--more-actions"
-                      aria-expanded="false"
-                      aria-controls="more-actions-${request.id}"
-                    >
-                      <svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
-                        <use xlink:href="/public/img/sprite.svg#more_vert"></use>
-                      </svg>
-                    </button>
-                  </div>
-                  <div id="more-actions-${request.id}" class="usa-accordion__content usa-prose shadow-1 left-auto right-0" hidden>
-                    <h2>More options</h2>
-                    <a 
-                      role="button" 
-                      id="button-toggle-delete-domain-alert-${request.id}"
-                      href="#toggle-delete-domain-alert-${request.id}"
-                      class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 line-height-sans-5"
-                      aria-controls="toggle-delete-domain-alert-${request.id}"
-                      data-open-modal
-                    >
-                      <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
-                        <use xlink:href="/public/img/sprite.svg#delete"></use>
-                      </svg> Delete <span class="usa-sr-only">${domainName}</span>
-                    </a>
-                  </div>
-                </div>
-                `
-              }
-            }
-
-
-            const row = document.createElement('tr');
-            row.innerHTML = `
-              <th scope="row" role="rowheader" data-label="Domain name">
-                ${domainName}
-              </th>
-              <td data-sort-value="${new Date(request.last_submitted_date).getTime()}" data-label="Date submitted">
-                ${submissionDate}
-              </td>
-              ${markupCreatorRow}
-              <td data-label="Status">
-                ${request.status}
-              </td>
-              <td>
-                <a href="${actionUrl}">
-                  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
-                    <use xlink:href="/public/img/sprite.svg#${request.svg_icon}"></use>
-                  </svg>
-                  ${actionLabel} <span class="usa-sr-only">${request.requested_domain ? request.requested_domain : 'New domain request'}</span>
-                </a>
-              </td>
-              ${needsDeleteColumn ? '<td>'+modalTrigger+'</td>' : ''}
-            `;
-            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 => {
-            const submitButton = modal.querySelector('.usa-modal__submit');
-            const closeButton = modal.querySelector('.usa-modal__close');
-            submitButton.addEventListener('click', function() {
-              pk = submitButton.getAttribute('data-pk');
-              // Close the modal to remove the USWDS UI local classes
-              closeButton.click();
-              // If we're deleting 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--;
-              }
-              deleteDomainRequest(pk, pageToDisplay);
-            });
-          });
-
-          // Do not scroll on first page load
-          if (scroll)
-            ScrollToElement('class', 'domain-requests');
-          scrollToTable = true;
-
-          // update the pagination after the domain requests list is updated
-          updatePagination(
-            'domain request',
-            '#domain-requests-pagination',
-            '#domain-requests-pagination .usa-pagination__counter',
-            '#domain-requests',
-            loadDomainRequests,
-            data.page,
-            data.num_pages,
-            data.has_previous,
-            data.has_next,
-            data.total,
-            currentSearchTerm
-          );
-          currentSortBy = sortBy;
-          currentOrder = order;
-          currentSearchTerm = searchTerm;
-        })
-        .catch(error => console.error('Error fetching domain requests:', error));
-    }
-
-    // Add event listeners to table headers for sorting
-    tableHeaders.forEach(header => {
-      header.addEventListener('click', function() {
-        const sortBy = this.getAttribute('data-sortable');
-        let order = 'asc';
-        // sort order will be ascending, unless the currently sorted column is ascending, and the user
-        // is selecting the same column to sort in descending order
-        if (sortBy === currentSortBy) {
-          order = currentOrder === 'asc' ? 'desc' : 'asc';
-        }
-        loadDomainRequests(1, sortBy, order);
-      });
-    });
-
-    domainRequestsSearchSubmit.addEventListener('click', function(e) {
-      e.preventDefault();
-      currentSearchTerm = domainRequestsSearchInput.value;
-      // If the search is blank, we match the resetSearch functionality
-      if (currentSearchTerm) {
-        showElement(resetSearchButton);
-      } else {
-        hideElement(resetSearchButton);
-      }
-      loadDomainRequests(1, 'id', 'asc');
-      resetHeaders();
-    });
-
-    if (statusToggle) {
-      statusToggle.addEventListener('click', function() {
-        toggleCaret(statusToggle);
-      });
-    }
-
-    // Add event listeners to status filter checkboxes
-    statusCheckboxes.forEach(checkbox => {
-      checkbox.addEventListener('change', function() {
-        const checkboxValue = this.value;
-        
-        // Update currentStatus array based on checkbox state
-        if (this.checked) {
-          currentStatus.push(checkboxValue);
-        } else {
-          const index = currentStatus.indexOf(checkboxValue);
-          if (index > -1) {
-            currentStatus.splice(index, 1);
-          }
-        }
-
-        // Manage visibility of reset filters button
-        if (currentStatus.length == 0) {
-          hideElement(resetFiltersButton);
-        } else {
-          showElement(resetFiltersButton);
-        }
-
-        // Disable the auto scroll
-        scrollToTable = false;
-
-        // Call loadTable with updated status
-        loadDomainRequests(1, 'id', 'asc');
-        resetHeaders();
-        updateStatusIndicator();
-      });
-    });
-
-    // Reset UI and accessibility
-    function resetHeaders() {
-      tableHeaders.forEach(header => {
-        // unset sort UI in headers
-        unsetHeader(header);
-      });
-      // Reset the announcement region
-      tableAnnouncementRegion.innerHTML = '';
-    }
-
-    function resetSearch() {
-      domainRequestsSearchInput.value = '';
-      currentSearchTerm = '';
-      hideElement(resetSearchButton);
-      loadDomainRequests(1, 'id', 'asc');
-      resetHeaders();
-    }
-
-    if (resetSearchButton) {
-      resetSearchButton.addEventListener('click', function() {
-        resetSearch();
-      });
-    }
-
-    function closeMoreActionMenu(accordionThatIsOpen) {
-      if (accordionThatIsOpen.getAttribute("aria-expanded") === "true") {
-        accordionThatIsOpen.click();
-      }
-    }
-
-    function resetFilters() {
-      currentStatus = [];
-      statusCheckboxes.forEach(checkbox => {
-        checkbox.checked = false; 
-      });
-      hideElement(resetFiltersButton);
-
-      // Disable the auto scroll
-      scrollToTable = false;
-
-      loadDomainRequests(1, 'id', 'asc');
-      resetHeaders();
-      updateStatusIndicator();
-      // No need to toggle close the filters. The focus shift will trigger that for us.
-    }
-
-    if (resetFiltersButton) {
-      resetFiltersButton.addEventListener('click', function() {
-        resetFilters();
-      });
-    }
-
-    function updateStatusIndicator() {
-      statusIndicator.innerHTML = '';
-      // Even if the element is empty, it'll mess up the flex layout unless we set display none
-      hideElement(statusIndicator);
-      if (currentStatus.length)
-        statusIndicator.innerHTML = '(' + currentStatus.length + ')';
-        showElement(statusIndicator);
-    }
-
-    function closeFilters() {
-      if (statusToggle.getAttribute("aria-expanded") === "true") {
-        statusToggle.click();
-      }
-    }
-
-    document.addEventListener('focusin', function(event) {
-      closeOpenAccordions(event);
-    });
-    
-    document.addEventListener('click', function(event) {
-      closeOpenAccordions(event);
-    });
-
-    function closeOpenAccordions(event) {
-      const openAccordions = document.querySelectorAll('.usa-button--more-actions[aria-expanded="true"]');
-      openAccordions.forEach((openAccordionButton) => {
-        // Find the corresponding accordion
-        const accordion = openAccordionButton.closest('.usa-accordion--more-actions');
-        if (accordion && !accordion.contains(event.target)) {
-          // Close the accordion if the click is outside
-          closeMoreActionMenu(openAccordionButton);
-        }
-      });
-
-      // Close the filter accordion
-      const openFilterAccordion = document.querySelector('.usa-button--filter[aria-expanded="true"]');
-      const moreFilterAccordion = openFilterAccordion ? openFilterAccordion.closest('.usa-accordion--select') : undefined;
-      if (openFilterAccordion) {
-        if (!moreFilterAccordion.contains(event.target)) {
-          closeFilters();
-        }
-      }
-    }
-
-    // Initial load
-    loadDomainRequests(1);
-  }
-});
-
 
 /**
  * An IIFE that displays confirmation modal on the user profile page
diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
index 1fa46225a..375e0229c 100644
--- a/src/registrar/templates/includes/domain_requests_table.html
+++ b/src/registrar/templates/includes/domain_requests_table.html
@@ -160,7 +160,7 @@
       </div>
       <button
         type="button"
-        class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter domains__reset-filters display-none"
+        class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter domain-requests__reset-filters display-none"
       >
         Clear filters
         <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">

From 0f1f3d088fb1314e1d18233a9318598e78494f85 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:17:14 -0600
Subject: [PATCH 12/13] fix createPageItem

---
 src/registrar/assets/js/get-gov.js | 48 +++++++++++++++---------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index 0a4d28577..c5ad54c32 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -1049,7 +1049,7 @@ class LoadTableBase {
     itemName,
     paginationSelector,
     counterSelector,
-    tableSelector,
+    parentTableSelector,
     currentPage,
     numPages,
     hasPrevious,
@@ -1074,7 +1074,7 @@ class LoadTableBase {
       const prevPageItem = document.createElement('li');
       prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
       prevPageItem.innerHTML = `
-        <a href="${tableSelector}" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
+        <a href="${parentTableSelector}" 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>
@@ -1088,27 +1088,9 @@ class LoadTableBase {
       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="${tableSelector}" 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();
-        this.loadTable(page);
-      });
-      return pageItem;
-    }
-
     // Add first page and ellipsis if necessary
     if (currentPage > 2) {
-      paginationButtons.appendChild(createPageItem(1));
+      paginationButtons.appendChild(this.createPageItem(1, parentTableSelector, currentPage));
       if (currentPage > 3) {
         const ellipsis = document.createElement('li');
         ellipsis.className = 'usa-pagination__item usa-pagination__overflow';
@@ -1120,7 +1102,7 @@ class LoadTableBase {
 
     // 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));
+      paginationButtons.appendChild(this.createPageItem(i, parentTableSelector, currentPage));
     }
 
     // Add last page and ellipsis if necessary
@@ -1132,14 +1114,14 @@ class LoadTableBase {
         ellipsis.innerHTML = '<span>…</span>';
         paginationButtons.appendChild(ellipsis);
       }
-      paginationButtons.appendChild(createPageItem(numPages));
+      paginationButtons.appendChild(this.createPageItem(numPages, parentTableSelector, currentPage));
     }
 
     if (hasNext) {
       const nextPageItem = document.createElement('li');
       nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
       nextPageItem.innerHTML = `
-        <a href="${tableSelector}" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
+        <a href="${parentTableSelector}" 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>
@@ -1177,6 +1159,24 @@ class LoadTableBase {
     }
   };
 
+  // Helper function to create a page item
+  createPageItem(page, parentTableSelector, currentPage) {
+    const pageItem = document.createElement('li');
+    pageItem.className = 'usa-pagination__item usa-pagination__page-no';
+    pageItem.innerHTML = `
+      <a href="${parentTableSelector}" 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();
+      this.loadTable(page);
+    });
+    return pageItem;
+  }
+
   /**
    * A helper that resets sortable table headers
    *

From 9d24d720edeb81fdac2c04154cf5d87e3fc03852 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:09:42 -0600
Subject: [PATCH 13/13] Remove unused value

---
 src/registrar/assets/js/get-gov.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index c5ad54c32..027ef4344 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -1503,8 +1503,6 @@ class DomainRequestsTable extends LoadTableBase {
 
   constructor() {
     super('.domain-requests__table', '.domain-requests__table-wrapper', '#domain-requests__search-field', '#domain-requests__search-field-submit', '.domain-requests__reset-search', '.domain-requests__reset-filters', '.domain-requests__no-data', '.domain-requests__no-search-results');
-    this.domainRequestPk = 1
-
   }
   /**
      * Loads rows in the domains list, as well as updates pagination around the domains list