diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index 8281aa50a..efb8c6f11 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -1899,7 +1899,7 @@ class MembersTable extends LoadTableBase {
// --------- FETCH DATA
- // fetch json of page of domais, given params
+ // fetch json of page of domains, given params
let baseUrl = document.getElementById("get_members_json_url");
if (!baseUrl) {
return;
@@ -2014,14 +2014,120 @@ class MembersTable extends LoadTableBase {
}
}
+class MemberDomainsTable extends LoadTableBase {
+
+ constructor() {
+ super('.member-domains__table', '.member-domains__table-wrapper', '#member-domains__search-field', '#member-domains__search-field-submit', '.member-domains__reset-search', '.member-domains__reset-filters', '.member-domains__no-data', '.member-domains__no-search-results');
+ }
+ /**
+ * Loads rows in the members list, as well as updates pagination around the members 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
+ * @param {*} portfolio - the portfolio id
+ */
+ loadTable(page, sortBy = 'name', order = this.currentOrder, scroll = this.scrollToTable, searchTerm =this.currentSearchTerm, portfolio = this.portfolioValue) {
+
+ // --------- SEARCH
+ let searchParams = new URLSearchParams(
+ {
+ "page": page,
+ "sort_by": sortBy,
+ "order": order,
+ "search_term": searchTerm,
+ }
+ );
+
+ let emailValue = this.portfolioElement ? this.portfolioElement.getAttribute('data-email') : null;
+ let memberIdValue = this.portfolioElement ? this.portfolioElement.getAttribute('data-member-id') : null;
+ let memberOnly = this.portfolioElement ? this.portfolioElement.getAttribute('data-member-only') : null;
+
+ if (portfolio)
+ searchParams.append("portfolio", portfolio)
+ if (emailValue)
+ searchParams.append("email", emailValue)
+ if (memberIdValue)
+ searchParams.append("member_id", memberIdValue)
+ if (memberOnly)
+ searchParams.append("member_only", memberOnly)
+
+
+ // --------- FETCH DATA
+ // fetch json of page of domais, given params
+ let baseUrl = document.getElementById("get_member_domains_json_url");
+ if (!baseUrl) {
+ return;
+ }
+
+ let baseUrlValue = baseUrl.innerHTML;
+ if (!baseUrlValue) {
+ return;
+ }
+
+ let url = `${baseUrlValue}?${searchParams.toString()}` //TODO: uncomment for search function
+ 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 members 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 list will be inserted into the DOM
+ const memberDomainsList = document.querySelector('.member-domains__table tbody');
+ memberDomainsList.innerHTML = '';
+
+
+ data.domains.forEach(domain => {
+ const row = document.createElement('tr');
+
+ row.innerHTML = `
+ |
+ ${domain.name}
+ |
+ `;
+ memberDomainsList.appendChild(row);
+ });
+
+ // Do not scroll on first page load
+ if (scroll)
+ ScrollToElement('class', 'member-domains');
+ this.scrollToTable = true;
+
+ // update pagination
+ this.updatePagination(
+ 'member domain',
+ '#member-domains-pagination',
+ '#member-domains-pagination .usa-pagination__counter',
+ '#member-domains',
+ 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 domains:', 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.
+ * initializes the domains list and associated functionality.
*
*/
document.addEventListener('DOMContentLoaded', function() {
- const isDomainsPage = document.querySelector("#domains")
+ const isDomainsPage = document.getElementById("domains")
if (isDomainsPage){
const domainsTable = new DomainsTable();
if (domainsTable.tableWrapper) {
@@ -2033,11 +2139,11 @@ document.addEventListener('DOMContentLoaded', function() {
/**
* 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.
+ * initializes the domain requests list and associated functionality.
*
*/
document.addEventListener('DOMContentLoaded', function() {
- const domainRequestsSectionWrapper = document.querySelector('.domain-requests');
+ const domainRequestsSectionWrapper = document.getElementById('domain-requests');
if (domainRequestsSectionWrapper) {
const domainRequestsTable = new DomainRequestsTable();
if (domainRequestsTable.tableWrapper) {
@@ -2090,11 +2196,11 @@ const utcDateString = (dateString) => {
/**
* 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.
+ * initializes the members list and associated functionality.
*
*/
document.addEventListener('DOMContentLoaded', function() {
- const isMembersPage = document.querySelector("#members")
+ const isMembersPage = document.getElementById("members")
if (isMembersPage){
const membersTable = new MembersTable();
if (membersTable.tableWrapper) {
@@ -2104,6 +2210,22 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
+/**
+ * An IIFE that listens for DOM Content to be loaded, then executes. This function
+ * initializes the member domains list and associated functionality.
+ *
+ */
+document.addEventListener('DOMContentLoaded', function() {
+ const isMemberDomainsPage = document.getElementById("member-domains")
+ if (isMemberDomainsPage){
+ const memberDomainsTable = new MemberDomainsTable();
+ if (memberDomainsTable.tableWrapper) {
+ // Initial load
+ memberDomainsTable.loadTable(1);
+ }
+ }
+});
+
/**
* An IIFE that displays confirmation modal on the user profile page
*/
diff --git a/src/registrar/templates/includes/member_domains_table.html b/src/registrar/templates/includes/member_domains_table.html
index 7d9a37308..29ce042d6 100644
--- a/src/registrar/templates/includes/member_domains_table.html
+++ b/src/registrar/templates/includes/member_domains_table.html
@@ -1,8 +1,37 @@
{% load static %}
-
+{% if member %}
+
+{% else %}
+
+{% endif %}
+
+{% comment %} Stores the json endpoint in a url for easier access {% endcomment %}
+{% url 'get_member_domains_json' as url %}
+{{url}}
+
+
- Domains assigned to {{ email }}
+ Domains assigned to
+ {% if member %}
+ {{ member.email }}
+ {% else %}
+ {{ portfolio_invitation.email }}
+ {% endif %}