diff --git a/src/registrar/assets/src/js/getgov/table-base.js b/src/registrar/assets/src/js/getgov/table-base.js index 7d008832e..c15678bd1 100644 --- a/src/registrar/assets/src/js/getgov/table-base.js +++ b/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); diff --git a/src/registrar/assets/src/js/getgov/table-edit-member-domains.js b/src/registrar/assets/src/js/getgov/table-edit-member-domains.js index e4d76b953..6811eff30 100644 --- a/src/registrar/assets/src/js/getgov/table-edit-member-domains.js +++ b/src/registrar/assets/src/js/getgov/table-edit-member-domains.js @@ -44,14 +44,16 @@ export class EditMemberDomainsTable extends BaseTable { addRow(dataObject, tbody, customTableOptions) { const domain = dataObject; const row = document.createElement('tr'); - //console.log("initialDomainAssignments: " + this.initialDomainAssignments); - //console.log("testing domain: " + domain.id); + // 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.removedDomains.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.toString()) ) { console.log("checked domain: " + domain.id); checked = true; @@ -105,6 +107,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 + } + } + }