updated javascript

src/registrar/assets/src/js/getgov/table-edit-member-domains.js

@@ -6,6 +6,11 @@ export class EditMemberDomainsTable extends BaseTable {
   constructor() {
     super('edit-member-domain');
     this.currentSortBy = 'name';
+    this.initialDomainAssignments = [];
+    this.initialDomainAssignmentsOnlyMember = [];
+    this.addedDomains = [];
+    this.removedDomains = [];
+    this.initializeDomainAssignments();
   }
   getBaseUrl() {
     return document.getElementById("get_member_domains_edit_json_url");
@@ -13,9 +18,49 @@ export class EditMemberDomainsTable extends BaseTable {
   getDataObjects(data) {
     return data.domains;
   }
+  getDomainAssignmentSearchParams(portfolio) {
+    let searchParams = new URLSearchParams();
+    let emailValue = this.portfolioElement ? this.portfolioElement.getAttribute('data-email') : null;
+    let memberIdValue = this.portfolioElement ? this.portfolioElement.getAttribute('data-member-id') : null;
+    let memberOnly = true;
+    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);
+    return searchParams;
+  }
+  getSearchParams(page, sortBy, order, searchTerm, status, portfolio) {
+    let searchParams = super.getSearchParams(page, sortBy, order, searchTerm, status, portfolio);
+    if (this.addedDomains)
+      searchParams.append("addedDomainIds", this.addedDomains);
+    if (this.removedDomains)
+      searchParams.append("removedDomainIds", this.removedDomains);
+    return searchParams;
+  }
   addRow(dataObject, tbody, customTableOptions) {
     const domain = dataObject;
     const row = document.createElement('tr');
+    //console.log("initialDomainAssignments: " + this.initialDomainAssignments);
+    //console.log("testing domain: " + domain.id);
+    let checked = false;
+    let disabled = false;
+    if (
+      (this.initialDomainAssignments.includes(domain.id) || 
+      this.addedDomains.map(obj => obj.id).includes(domain.id)) && 
+      !this.removedDomains.map(obj => obj.id).includes(domain.id)
+    ) {
+      console.log("checked domain: " + domain.id);
+      checked = true;
+    }
+    if (this.initialDomainAssignmentsOnlyMember.includes(domain.id)) {
+      console.log("disabled domain: " + domain.id);
+      disabled = true;
+    }
+    
     row.innerHTML = `
         <td data-label="Selection" data-sort-value="0">
             <div class="usa-checkbox">
@@ -25,6 +70,8 @@ export class EditMemberDomainsTable extends BaseTable {
                     type="checkbox"
                     name="${domain.name}"
                     value="${domain.id}"
+                    ${checked ? 'checked' : ''}
+                    ${disabled ? 'disabled' : ''}
                 />
                 <label class="usa-checkbox__label" for="${domain.id}">
                     <span class="sr-only">${domain.id}</span>
@@ -37,13 +84,35 @@ export class EditMemberDomainsTable extends BaseTable {
     `;
     tbody.appendChild(row);
   }
+  initializeDomainAssignments() {
+    const baseUrlValue = this.getBaseUrl()?.innerHTML ?? null;
+    if (!baseUrlValue) return;
+    let searchParams = this.getDomainAssignmentSearchParams(this.portfolioValue);
+    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;
+      }
+
+      let dataObjects = this.getDataObjects(data);
+      console.log(dataObjects);
+      // Map the id attributes of dataObjects to this.initialDomainAssignments
+      this.initialDomainAssignments = dataObjects.map(obj => obj.id);
+      console.log(this.initialDomainAssignments);
+    })
+    .catch(error => console.error('Error fetching domain assignments:', error));
+  }
 
 }
-  
+
 export function initEditMemberDomainsTable() {
   document.addEventListener('DOMContentLoaded', function() {
       const isEditMemberDomainsPage = document.getElementById("edit-member-domains");
       if (isEditMemberDomainsPage){
+        console.log("isEditMemberDomainsPage");
         const editMemberDomainsTable = new EditMemberDomainsTable();
         if (editMemberDomainsTable.tableWrapper) {
           // Initial load

src/registrar/templates/includes/member_domains_edit_table.html

@@ -7,7 +7,7 @@
     data-portfolio="{{ portfolio.id }}"
     data-email=""
     data-member-id="{{ member.id }}"
-    data-member-only="true"
+    data-member-only="false"
   ></span>
 {% else %}
   <span 
@@ -16,7 +16,7 @@
       data-portfolio="{{ portfolio.id }}"
       data-email="{{ portfolio_invitation.email }}"
       data-member-id=""
-      data-member-only="true"
+      data-member-only="false"
     ></span>
 {% endif %}
 
@@ -61,7 +61,7 @@
                 </button>
                 <input
                 class="usa-input"
-                id="member-domains__search-field"
+                id="edit-member-domains__search-field"
                 type="search"
                 name="member-domains-search"
                 />