diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index bd8aa2d31..73faf5ed8 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -2065,6 +2065,130 @@ class MembersTable extends LoadTableBase { return permissionsHTML; } + generateKebob(member, hasEditPermission, member_name, last_active) { + if (!hasEditPermission) return ''; + + const member_email = member.email; + + const member_id = member.id; + let isMemberInvited = !last_active || last_active === 'Invited'; + let cancelInvitationButton = isMemberInvited ? "Cancel invitation" : "Remove member"; + + // TODO: Create a function to fetch how many domains the member MANAGES + // Created get_user_domain_count figure out how to call here and maybe + // let modalHeading = ''; + // let modalDescription = ''; + // If member manages 1 or more domains: + let modalHeading = `Are you sure you want to delete ${member_email}?`; + let modalDescription = `${member_email} current manages COUNTHERE domains in the organization \n + Removing them from the organization will remove all of their domains. They will no longer be able to \n + access this organization. This action cannot be undone.`; + // If member manages no domains: + // modalHeading = `Are you sure you want to delete ${member_email}?`; + // modalDescription = `They will no longer be able to access this organization. \n + // This action cannot be undone.`; + + const modalSubmit = ` + + ` + + const modal = document.createElement('div'); + modal.setAttribute('class', 'usa-modal'); + modal.setAttribute('id', `toggle-remove-member-${member_id}`); + modal.setAttribute('aria-labelledby', 'Are you sure you want to continue?'); + modal.setAttribute('aria-describedby', 'Member will be removed'); + modal.setAttribute('data-force-action', ''); + + modal.innerHTML = ` +
+
+

+ ${modalHeading} +

+
+ +
+
+
    +
  • + ${modalSubmit} +
    • +
  • + +
    • +
+
+
+ +
+ ` + this.tableWrapper.appendChild(modal); + + return ` + + ${cancelInvitationButton} ${member_name} + + +
+
+ +
+ +
+ ` + } + /** * Loads rows in the members list, as well as updates pagination around the members list * based on the supplied attributes. @@ -2142,7 +2266,6 @@ class MembersTable extends LoadTableBase { data.members.forEach(member => { const member_id = member.source + member.id; const member_name = member.name; - const member_email = member.email; const member_display = member.member_display; const member_permissions = member.permissions; const domain_urls = member.domain_urls; @@ -2150,128 +2273,9 @@ class MembersTable extends LoadTableBase { const num_domains = domain_urls.length; const last_active = this.handleLastActive(member.last_active); - let kebob = ''; - - if (hasEditPermission) { - const member_id = member.id; - let isMemberInvited = !last_active || last_active === 'Invited'; - let cancelInvitationButton = isMemberInvited ? "Cancel invitation" : "Remove member"; - - // TODO: Create a function to fetch how many domains the member MANAGES - // Created get_user_domain_count figure out how to call here and maybe - // let modalHeading = ''; - // let modalDescription = ''; - // If member manages 1 or more domains: - let modalHeading = `Are you sure you want to delete ${member_email}?`; - let modalDescription = `${member_email} current manages COUNTHERE domains in the organization \n - Removing them from the organization will remove all of their domains. They will no longer be able to \n - access this organization. This action cannot be undone.`; - // If member manages no domains: - // modalHeading = `Are you sure you want to delete ${member_email}?`; - // modalDescription = `They will no longer be able to access this organization. \n - // This action cannot be undone.`; - - const modalSubmit = ` - - ` - - const modal = document.createElement('div'); - modal.setAttribute('class', 'usa-modal'); - modal.setAttribute('id', `toggle-remove-member-${member_id}`); - modal.setAttribute('aria-labelledby', 'Are you sure you want to continue?'); - modal.setAttribute('aria-describedby', 'Member will be removed'); - modal.setAttribute('data-force-action', ''); - - modal.innerHTML = ` -
-
-

- ${modalHeading} -

-
- -
-
-
    -
  • - ${modalSubmit} -
    • -
  • - -
    • -
-
-
- -
- ` - this.tableWrapper.appendChild(modal); - - kebob = ` - - ${cancelInvitationButton} ${member_name} - - -
-
- -
- -
- ` - } + const kebob = this.generateKebob(member, hasEditPermission, member_name, last_active); + // console.log("kebob", kebob) const action_url = member.action_url; const action_label = member.action_label;