checkbox listeners

src/registrar/assets/src/js/getgov/table-base.js

@@ -416,6 +416,11 @@ export class BaseTable {
    */
   initShowMoreButtons(){}
 
+  /**
+   * See function for more details
+   */
+  initCheckboxListeners(){}
+
   /**
    * Loads rows in the members list, as well as updates pagination around the members list
    * based on the supplied attributes.
@@ -462,6 +467,7 @@ export class BaseTable {
         });
 
         this.initShowMoreButtons();
+        this.initCheckboxListeners();
 
         this.loadModals(data.page, data.total, data.unfiltered_total);
 

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

@@ -46,12 +46,14 @@ export class EditMemberDomainsTable extends BaseTable {
     const row = document.createElement('tr');
     // console.log("initialDomainAssignments: " + this.initialDomainAssignments);
     // console.log("testing domain: " + domain.id);
+    // console.log(`this.addedDomains ${JSON.stringify(this.addedDomains)}`)
+    // console.log(`this.removedDomains ${JSON.stringify(this.removedDomains)}`)
     let checked = false;
     let disabled = false;
     if (
       (this.initialDomainAssignments.includes(domain.id) || 
-      this.addedDomains.map(obj => obj.id).includes(domain.id)) && 
+      this.addedDomains.map(obj => obj.id).includes(domain.id.toString())) && 
-      !this.removedDomains.map(obj => obj.id).includes(domain.id)
+      !this.removedDomains.map(obj => obj.id).includes(domain.id.toString())
     ) {
       console.log("checked domain: " + domain.id);
       checked = true;
@@ -106,6 +108,35 @@ export class EditMemberDomainsTable extends BaseTable {
     .catch(error => console.error('Error fetching domain assignments:', error));
   }
   
+    initCheckboxListeners() {
+        const checkboxes = this.tableWrapper.querySelectorAll('input[type="checkbox"]');
+        checkboxes.forEach(checkbox => {
+            checkbox.addEventListener('change', () => {
+                const domain = { id: checkbox.value, name: checkbox.name };
+
+                if (checkbox.checked) {
+                    this.updateDomainLists(domain, this.removedDomains, this.addedDomains);
+                } else {
+                    this.updateDomainLists(domain, this.addedDomains, this.removedDomains);
+                }
+
+                // console.log(`this.addedDomains ${JSON.stringify(this.addedDomains)}`)
+                // console.log(`this.removedDomains ${JSON.stringify(this.removedDomains)}`)
+            });
+        });
+    }
+
+    updateDomainLists(domain, fromList, toList) {
+        const index = fromList.findIndex(item => item.id === domain.id && item.name === domain.name);
+
+        if (index > -1) {
+            fromList.splice(index, 1); // Remove from the `fromList` if it exists
+        } else {
+            toList.push(domain); // Add to the `toList` if not already there
+        }
+    }
+
+
 }
 
 export function initEditMemberDomainsTable() {