mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-23 03:06:01 +02:00
Update portfolio-member-page.js
This commit is contained in:
zandercymatics
parent
08082fb0aa
commit
6965607f61
1 changed files with 152 additions and 152 deletions
|
|
@ -6,169 +6,169 @@ import { hookupRadioTogglerListener } from './radios.js';
|
||||||
|
|
||||||
// This is specifically for the Member Profile (Manage Member) Page member/invitation removal
|
// This is specifically for the Member Profile (Manage Member) Page member/invitation removal
|
||||||
export function initPortfolioNewMemberPageToggle() {
|
export function initPortfolioNewMemberPageToggle() {
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const wrapperDeleteAction = document.getElementById("wrapper-delete-action")
|
const wrapperDeleteAction = document.getElementById("wrapper-delete-action")
|
||||||
if (wrapperDeleteAction) {
|
if (wrapperDeleteAction) {
|
||||||
const member_type = wrapperDeleteAction.getAttribute("data-member-type");
|
const member_type = wrapperDeleteAction.getAttribute("data-member-type");
|
||||||
const member_id = wrapperDeleteAction.getAttribute("data-member-id");
|
const member_id = wrapperDeleteAction.getAttribute("data-member-id");
|
||||||
const num_domains = wrapperDeleteAction.getAttribute("data-num-domains");
|
const num_domains = wrapperDeleteAction.getAttribute("data-num-domains");
|
||||||
const member_name = wrapperDeleteAction.getAttribute("data-member-name");
|
const member_name = wrapperDeleteAction.getAttribute("data-member-name");
|
||||||
const member_email = wrapperDeleteAction.getAttribute("data-member-email");
|
const member_email = wrapperDeleteAction.getAttribute("data-member-email");
|
||||||
const member_delete_url = `${member_type}-${member_id}/delete`;
|
const member_delete_url = `${member_type}-${member_id}/delete`;
|
||||||
const unique_id = `${member_type}-${member_id}`;
|
const unique_id = `${member_type}-${member_id}`;
|
||||||
|
|
||||||
let cancelInvitationButton = member_type === "invitedmember" ? "Cancel invitation" : "Remove member";
|
let cancelInvitationButton = member_type === "invitedmember" ? "Cancel invitation" : "Remove member";
|
||||||
wrapperDeleteAction.innerHTML = generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `for ${member_name}`);
|
wrapperDeleteAction.innerHTML = generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `for ${member_name}`);
|
||||||
|
|
||||||
// This easter egg is only for fixtures that dont have names as we are displaying their emails
|
// This easter egg is only for fixtures that dont have names as we are displaying their emails
|
||||||
// All prod users will have emails linked to their account
|
// All prod users will have emails linked to their account
|
||||||
MembersTable.addMemberModal(num_domains, member_email || "Samwise Gamgee", member_delete_url, unique_id, wrapperDeleteAction);
|
MembersTable.addMemberModal(num_domains, member_email || "Samwise Gamgee", member_delete_url, unique_id, wrapperDeleteAction);
|
||||||
|
|
||||||
uswdsInitializeModals();
|
uswdsInitializeModals();
|
||||||
|
|
||||||
// Now the DOM and modals are ready, add listeners to the submit buttons
|
// Now the DOM and modals are ready, add listeners to the submit buttons
|
||||||
const modals = document.querySelectorAll('.usa-modal__content');
|
const modals = document.querySelectorAll('.usa-modal__content');
|
||||||
|
|
||||||
modals.forEach(modal => {
|
modals.forEach(modal => {
|
||||||
const submitButton = modal.querySelector('.usa-modal__submit');
|
const submitButton = modal.querySelector('.usa-modal__submit');
|
||||||
const closeButton = modal.querySelector('.usa-modal__close');
|
const closeButton = modal.querySelector('.usa-modal__close');
|
||||||
submitButton.addEventListener('click', () => {
|
submitButton.addEventListener('click', () => {
|
||||||
closeButton.click();
|
closeButton.click();
|
||||||
let delete_member_form = document.getElementById("member-delete-form");
|
let delete_member_form = document.getElementById("member-delete-form");
|
||||||
if (delete_member_form) {
|
if (delete_member_form) {
|
||||||
delete_member_form.submit();
|
delete_member_form.submit();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Hooks up specialized listeners for handling form validation and modals
|
* Hooks up specialized listeners for handling form validation and modals
|
||||||
* on the Add New Member page.
|
* on the Add New Member page.
|
||||||
*/
|
*/
|
||||||
export function initAddNewMemberPageListeners() {
|
export function initAddNewMemberPageListeners() {
|
||||||
let add_member_form = document.getElementById("add_member_form");
|
let add_member_form = document.getElementById("add_member_form");
|
||||||
if (!add_member_form){
|
if (!add_member_form){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
document.getElementById("confirm_new_member_submit").addEventListener("click", function() {
|
document.getElementById("confirm_new_member_submit").addEventListener("click", function() {
|
||||||
// Upon confirmation, submit the form
|
// Upon confirmation, submit the form
|
||||||
document.getElementById("add_member_form").submit();
|
document.getElementById("add_member_form").submit();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("add_member_form").addEventListener("submit", function(event) {
|
document.getElementById("add_member_form").addEventListener("submit", function(event) {
|
||||||
event.preventDefault(); // Prevents the form from submitting
|
event.preventDefault(); // Prevents the form from submitting
|
||||||
const form = document.getElementById("add_member_form")
|
const form = document.getElementById("add_member_form")
|
||||||
const formData = new FormData(form);
|
const formData = new FormData(form);
|
||||||
|
|
||||||
// Check if the form is valid
|
// Check if the form is valid
|
||||||
// If the form is valid, open the confirmation modal
|
// If the form is valid, open the confirmation modal
|
||||||
// If the form is invalid, submit it to trigger error
|
// If the form is invalid, submit it to trigger error
|
||||||
fetch(form.action, {
|
fetch(form.action, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: formData,
|
body: formData,
|
||||||
headers: {
|
headers: {
|
||||||
"X-Requested-With": "XMLHttpRequest",
|
"X-Requested-With": "XMLHttpRequest",
|
||||||
"X-CSRFToken": getCsrfToken()
|
"X-CSRFToken": getCsrfToken()
|
||||||
}
|
|
||||||
})
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data.is_valid) {
|
|
||||||
// If the form is valid, show the confirmation modal before submitting
|
|
||||||
openAddMemberConfirmationModal();
|
|
||||||
} else {
|
|
||||||
// If the form is not valid, trigger error messages by firing a submit event
|
|
||||||
form.submit();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
Helper function to capitalize the first letter in a string (for display purposes)
|
|
||||||
*/
|
|
||||||
function capitalizeFirstLetter(text) {
|
|
||||||
if (!text) return ''; // Return empty string if input is falsy
|
|
||||||
return text.charAt(0).toUpperCase() + text.slice(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Populates contents of the "Add Member" confirmation modal
|
|
||||||
*/
|
|
||||||
function populatePermissionDetails(permission_details_div_id) {
|
|
||||||
const permissionDetailsContainer = document.getElementById("permission_details");
|
|
||||||
permissionDetailsContainer.innerHTML = ""; // Clear previous content
|
|
||||||
|
|
||||||
// Get all permission sections (divs with h3 and radio inputs)
|
|
||||||
const permissionSections = document.querySelectorAll(`#${permission_details_div_id} > h3`);
|
|
||||||
|
|
||||||
permissionSections.forEach(section => {
|
|
||||||
// Find the <h3> element text
|
|
||||||
const sectionTitle = section.textContent;
|
|
||||||
|
|
||||||
// Find the associated radio buttons container (next fieldset)
|
|
||||||
const fieldset = section.nextElementSibling;
|
|
||||||
|
|
||||||
if (fieldset && fieldset.tagName.toLowerCase() === 'fieldset') {
|
|
||||||
// Get the selected radio button within this fieldset
|
|
||||||
const selectedRadio = fieldset.querySelector('input[type="radio"]:checked');
|
|
||||||
|
|
||||||
// If a radio button is selected, get its label text
|
|
||||||
let selectedPermission = "No permission selected";
|
|
||||||
if (selectedRadio) {
|
|
||||||
const label = fieldset.querySelector(`label[for="${selectedRadio.id}"]`);
|
|
||||||
selectedPermission = label ? label.textContent : "No permission selected";
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.is_valid) {
|
||||||
|
// If the form is valid, show the confirmation modal before submitting
|
||||||
|
openAddMemberConfirmationModal();
|
||||||
|
} else {
|
||||||
|
// If the form is not valid, trigger error messages by firing a submit event
|
||||||
|
form.submit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Create new elements for the modal content
|
/*
|
||||||
const titleElement = document.createElement("h4");
|
Helper function to capitalize the first letter in a string (for display purposes)
|
||||||
titleElement.textContent = sectionTitle;
|
*/
|
||||||
titleElement.classList.add("text-primary");
|
function capitalizeFirstLetter(text) {
|
||||||
titleElement.classList.add("margin-bottom-0");
|
if (!text) return ''; // Return empty string if input is falsy
|
||||||
|
return text.charAt(0).toUpperCase() + text.slice(1);
|
||||||
const permissionElement = document.createElement("p");
|
|
||||||
permissionElement.textContent = selectedPermission;
|
|
||||||
permissionElement.classList.add("margin-top-0");
|
|
||||||
|
|
||||||
// Append to the modal content container
|
|
||||||
permissionDetailsContainer.appendChild(titleElement);
|
|
||||||
permissionDetailsContainer.appendChild(permissionElement);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Updates and opens the "Add Member" confirmation modal.
|
|
||||||
*/
|
|
||||||
function openAddMemberConfirmationModal() {
|
|
||||||
//------- Populate modal details
|
|
||||||
// Get email value
|
|
||||||
let emailValue = document.getElementById('id_email').value;
|
|
||||||
document.getElementById('modalEmail').textContent = emailValue;
|
|
||||||
|
|
||||||
// Get selected radio button for access level
|
|
||||||
let selectedAccess = document.querySelector('input[name="member_access_level"]:checked');
|
|
||||||
// Set the selected permission text to 'Basic' or 'Admin' (the value of the selected radio button)
|
|
||||||
// This value does not have the first letter capitalized so let's capitalize it
|
|
||||||
let accessText = selectedAccess ? capitalizeFirstLetter(selectedAccess.value) : "No access level selected";
|
|
||||||
document.getElementById('modalAccessLevel').textContent = accessText;
|
|
||||||
|
|
||||||
// Populate permission details based on access level
|
|
||||||
if (selectedAccess && selectedAccess.value === 'admin') {
|
|
||||||
populatePermissionDetails('new-member-admin-permissions');
|
|
||||||
} else {
|
|
||||||
populatePermissionDetails('new-member-basic-permissions');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//------- Show the modal
|
/*
|
||||||
let modalTrigger = document.querySelector("#invite_member_trigger");
|
Populates contents of the "Add Member" confirmation modal
|
||||||
if (modalTrigger) {
|
*/
|
||||||
modalTrigger.click();
|
function populatePermissionDetails(permission_details_div_id) {
|
||||||
}
|
const permissionDetailsContainer = document.getElementById("permission_details");
|
||||||
}
|
permissionDetailsContainer.innerHTML = ""; // Clear previous content
|
||||||
|
|
||||||
|
// Get all permission sections (divs with h3 and radio inputs)
|
||||||
|
const permissionSections = document.querySelectorAll(`#${permission_details_div_id} > h3`);
|
||||||
|
|
||||||
|
permissionSections.forEach(section => {
|
||||||
|
// Find the <h3> element text
|
||||||
|
const sectionTitle = section.textContent;
|
||||||
|
|
||||||
|
// Find the associated radio buttons container (next fieldset)
|
||||||
|
const fieldset = section.nextElementSibling;
|
||||||
|
|
||||||
|
if (fieldset && fieldset.tagName.toLowerCase() === 'fieldset') {
|
||||||
|
// Get the selected radio button within this fieldset
|
||||||
|
const selectedRadio = fieldset.querySelector('input[type="radio"]:checked');
|
||||||
|
|
||||||
|
// If a radio button is selected, get its label text
|
||||||
|
let selectedPermission = "No permission selected";
|
||||||
|
if (selectedRadio) {
|
||||||
|
const label = fieldset.querySelector(`label[for="${selectedRadio.id}"]`);
|
||||||
|
selectedPermission = label ? label.textContent : "No permission selected";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new elements for the modal content
|
||||||
|
const titleElement = document.createElement("h4");
|
||||||
|
titleElement.textContent = sectionTitle;
|
||||||
|
titleElement.classList.add("text-primary");
|
||||||
|
titleElement.classList.add("margin-bottom-0");
|
||||||
|
|
||||||
|
const permissionElement = document.createElement("p");
|
||||||
|
permissionElement.textContent = selectedPermission;
|
||||||
|
permissionElement.classList.add("margin-top-0");
|
||||||
|
|
||||||
|
// Append to the modal content container
|
||||||
|
permissionDetailsContainer.appendChild(titleElement);
|
||||||
|
permissionDetailsContainer.appendChild(permissionElement);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Updates and opens the "Add Member" confirmation modal.
|
||||||
|
*/
|
||||||
|
function openAddMemberConfirmationModal() {
|
||||||
|
//------- Populate modal details
|
||||||
|
// Get email value
|
||||||
|
let emailValue = document.getElementById('id_email').value;
|
||||||
|
document.getElementById('modalEmail').textContent = emailValue;
|
||||||
|
|
||||||
|
// Get selected radio button for access level
|
||||||
|
let selectedAccess = document.querySelector('input[name="member_access_level"]:checked');
|
||||||
|
// Set the selected permission text to 'Basic' or 'Admin' (the value of the selected radio button)
|
||||||
|
// This value does not have the first letter capitalized so let's capitalize it
|
||||||
|
let accessText = selectedAccess ? capitalizeFirstLetter(selectedAccess.value) : "No access level selected";
|
||||||
|
document.getElementById('modalAccessLevel').textContent = accessText;
|
||||||
|
|
||||||
|
// Populate permission details based on access level
|
||||||
|
if (selectedAccess && selectedAccess.value === 'admin') {
|
||||||
|
populatePermissionDetails('new-member-admin-permissions');
|
||||||
|
} else {
|
||||||
|
populatePermissionDetails('new-member-basic-permissions');
|
||||||
|
}
|
||||||
|
|
||||||
|
//------- Show the modal
|
||||||
|
let modalTrigger = document.querySelector("#invite_member_trigger");
|
||||||
|
if (modalTrigger) {
|
||||||
|
modalTrigger.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue