frontend updates. Code cleanup

This commit is contained in:
CocoByte 2024-11-18 14:18:20 -07:00
parent 6dc7d6f673
commit cc4a52c32a
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
2 changed files with 27 additions and 39 deletions

View file

@ -2826,35 +2826,12 @@ document.addEventListener('DOMContentLoaded', function() {
* An IIFE that handles the modal associated with adding a new member to a portfolio.
*/
(function handleNewMemberModal() {
// Validate the form
function validateForm() {
// Perform an AJAX POST request to validate form data
const form = document.getElementById("add_member_form");
if (!form) {
console.error("Form element not found");
return;
}
const formData = new FormData(form); // Use the form element for FormData
fetch("/members/new-member/validate", {
method: "POST",
body: formData,
headers: {
"X-Requested-With": "XMLHttpRequest"
}
})
.then(response => response.json())
.then(data => {
if (data.is_valid) {
// If validation passes, display the modal and set values
openAddMemberConfirmationModal();
} else {
// Handle validation errors
form.submit();
}
});
}
/*
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
@ -2881,11 +2858,14 @@ document.addEventListener('DOMContentLoaded', function() {
}
// Create new elements for the modal content
const titleElement = document.createElement("h3");
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);
@ -2894,9 +2874,11 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
// Open the modal
/*
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;
@ -2913,7 +2895,7 @@ document.addEventListener('DOMContentLoaded', function() {
populatePermissionDetails('new-member-basic-permissions')
}
// Show the modal
//------- Show the modal
let modalTrigger = document.querySelector("#invite_member_trigger");
if (modalTrigger) {
modalTrigger.click()

View file

@ -81,12 +81,17 @@
<h2>Admin access permissions</h2>
<p>Member permissions available for admin-level acccess.</p>
<h3 class="margin-bottom-0">Organization domain requests</h3>
<h3 class="summary-item__title
text-primary-dark
margin-bottom-0">Organization domain requests</h3>
{% with group_classes="usa-form-editable usa-form-editable--no-border padding-top-0" %}
{% input_with_errors form.admin_org_domain_request_permissions %}
{% endwith %}
<h3 class="margin-bottom-0 margin-top-3">Organization members</h3>
<h3 class="summary-item__title
text-primary-dark
margin-bottom-0
margin-top-3">Organization members</h3>
{% with group_classes="usa-form-editable usa-form-editable--no-border padding-top-0" %}
{% input_with_errors form.admin_org_members_permissions %}
{% endwith %}
@ -136,14 +141,15 @@
<h2 class="usa-modal__heading" id="invite-member-heading">
Invite this member to the organization?
</h2>
<h3>Member information and permissions</h3>
<h3 class="summary-item__title
text-primary-dark">Member information and permissions</h3>
<div class="usa-prose">
<!-- Display email as a header and access level -->
<h4>Email</h4>
<p id="modalEmail"></p>
<h4 class="text-primary">Email</h4>
<p class="margin-top-0" id="modalEmail"></p>
<h4>Member Access</h4>
<p id="modalAccessLevel"></p>
<h4 class="text-primary">Member Access</h4>
<p class="margin-top-0" id="modalAccessLevel"></p>
<!-- Dynamic Permissions Details -->
<div id="permission_details"></div>