From e7a6eb30e034babd4f29924c2a07395cba4dfa4e Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Mon, 21 Oct 2024 18:06:57 -0400 Subject: [PATCH] restart with extra spicy --- src/registrar/assets/js/get-gov.js | 161 +++++++++++++++++- .../templates/includes/members_table.html | 2 +- 2 files changed, 161 insertions(+), 2 deletions(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index ee7d3eb05..d0da73f2c 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -1898,7 +1898,6 @@ class MembersTable extends LoadTableBase { if (portfolio) searchParams.append("portfolio", portfolio) - // --------- FETCH DATA // fetch json of page of domais, given params let baseUrl = document.getElementById("get_members_json_url"); @@ -1910,6 +1909,12 @@ class MembersTable extends LoadTableBase { if (!baseUrlValue) { return; } + + // Get whether the logged in user has edit members permission + const hasEditPermission = this.portfolioElement ? this.portfolioElement.getAttribute('data-has-edit-permission')==='True' : null; + + console.log(this.portfolioElement.getAttribute('data-has-edit-permission')) + console.log(hasEditPermission) let url = `${baseUrlValue}?${searchParams.toString()}` //TODO: uncomment for search function fetch(url) @@ -1929,6 +1934,20 @@ class MembersTable extends LoadTableBase { const invited = 'Invited'; + + let existingExtraActionsHeader = document.querySelector('.extra-actions-header'); + + if (hasEditPermission && !existingExtraActionsHeader) { + const extraActionsHeader = document.createElement('th'); + extraActionsHeader.setAttribute('id', 'extra-actions'); + extraActionsHeader.setAttribute('role', 'columnheader'); + extraActionsHeader.setAttribute('class', 'extra-actions-header'); + extraActionsHeader.innerHTML = ` + Cancel invitation`; + let tableHeaderRow = document.querySelector('#members thead tr'); + tableHeaderRow.appendChild(extraActionsHeader); + } + data.members.forEach(member => { const member_name = member.name; const member_display = member.member_display; @@ -1938,6 +1957,119 @@ class MembersTable extends LoadTableBase { let last_active = member.last_active; let last_active_formatted = ''; let last_active_sort_value = ''; + let kebob = ''; + + if (hasEditPermission) { + const member_id = member.id; + let isMemberInvited = !last_active || last_active === 'Invited'; + let cancelInvitationButton = isMemberInvited ? "Cancel invitation" : "Remove member"; + + let modalHeading = 'asdasdasd'; + let modalDescription = 'asdasdasdasdasd'; + + 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} + + +
+
+ +
+ +
+ ` + } + + // Handle 'Invited' or null/empty values differently from valid dates if (last_active && last_active !== invited) { @@ -1986,10 +2118,37 @@ class MembersTable extends LoadTableBase { ${action_label} ${member_name} + ${hasEditPermission ? ''+kebob+'' : ''} `; memberList.appendChild(row); }); + // initialize modals immediately after the DOM content is updated + initializeModals(); + + // Now the DOM and modals are ready, add listeners to the submit buttons + const modals = document.querySelectorAll('.usa-modal__content'); + + modals.forEach(modal => { + const submitButton = modal.querySelector('.usa-modal__submit'); + const closeButton = modal.querySelector('.usa-modal__close'); + submitButton.addEventListener('click', () => { + let pk = submitButton.getAttribute('data-pk'); + // Close the modal to remove the USWDS UI local classes + closeButton.click(); + // If we're deleting the last item on a page that is not page 1, we'll need to refresh the display to the previous page + let pageToDisplay = data.page; + if (data.total == 1 && data.unfiltered_total > 1) { + pageToDisplay--; + } + + // Use the PK + // and call a separate function that triggers a new backend AJAX call to remove or delete + alert('modal submit') + + }); + }); + // Do not scroll on first page load if (scroll) ScrollToElement('class', 'members'); diff --git a/src/registrar/templates/includes/members_table.html b/src/registrar/templates/includes/members_table.html index 529d2629d..f007c0a46 100644 --- a/src/registrar/templates/includes/members_table.html +++ b/src/registrar/templates/includes/members_table.html @@ -1,7 +1,7 @@ {% load static %} - + {% comment %} Stores the json endpoint in a url for easier access {% endcomment %} {% url 'get_portfolio_members_json' as url %}