zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-25 12:08:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

Refactor JS addKebob and addModal

Browse source
This commit is contained in:
Rachid Mrad 2024-10-30 15:32:42 -04:00
parent 24d55f41bf
commit 0f6ab2b6e6
No known key found for this signature in database
7 changed files with 82 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

247
src/registrar/assets/js/get-gov.js
View file

@ -87,49 +87,24 @@ function makeVisible(el) {
} }
// TODO: Write caption here // TODO: Write caption here
function addModal(member_email, member_id, num_domains, submit_delete_url, wrapper_element) { function addModal(action, id, ariaLabelledby, ariaDescribedby, modalHeading, modalDescription, modalSubmit, wrapper_element, forceAction) {
let modalHeading = '';
let modalDescription = '';
if (num_domains == 0){
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.`;
} else if (num_domains == 1) {
modalHeading = `Are you sure you want to delete ${member_email}?`;
modalDescription = `<b>${member_email}</b> currently manages ${num_domains} domain 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.`;
} else if (num_domains >= 1) {
modalHeading = `Are you sure you want to delete ${member_email}?`;
modalDescription = `<b>${member_email}</b> currently manages ${num_domains} 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.`;
}
const modalSubmit = `
<button type="button"
class="usa-button usa-button--secondary usa-modal__submit"
data-pk = ${submit_delete_url}
name="delete-member">Yes, remove from organizaion</button>
`
const modal = document.createElement('div'); const modal = document.createElement('div');
modal.setAttribute('class', 'usa-modal'); modal.setAttribute('class', 'usa-modal');
modal.setAttribute('id', `toggle-remove-member-${member_id}`); modal.setAttribute('id', `${action}-${id}`);
modal.setAttribute('aria-labelledby', 'Are you sure you want to continue?'); modal.setAttribute('aria-labelledby', ariaLabelledby);
modal.setAttribute('aria-describedby', 'Member will be removed'); modal.setAttribute('aria-describedby', ariaDescribedby);
modal.setAttribute('data-force-action', ''); if (forceAction)
modal.setAttribute('data-force-action', '');
modal.innerHTML = ` modal.innerHTML = `
<div class="usa-modal__content"> <div class="usa-modal__content">
<div class="usa-modal__main"> <div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading"> <h2 class="usa-modal__heading">
${modalHeading} ${modalHeading}
</h2> </h2>
<div class="usa-prose"> <div class="usa-prose">
<p id="modal-1-description"> <p>
${modalDescription} ${modalDescription}
</p> </p>
</div> </div>
@ -169,29 +144,35 @@ function addModal(member_email, member_id, num_domains, submit_delete_url, wrapp
} }
} }
// TODO: Write caption here /**
function generateKebabHTML(unique_id, member_name, member_type) { * Helper function that creates a dynamic accordion navigation
let cancelInvitationButton = member_type === "invitedmember" ? "Cancel invitation" : "Remove member"; * @param {string} action
* @param {string} unique_id - An ID that when combined with action makes a unique identifier
* @param {string} modal_button_text - The action button's text
* @param {string} screen_reader_text - A screen reader helper
*/
function generateKebabHTML(action, unique_id, modal_button_text, screen_reader_text) {
// The first block displays regiular buttons on mobile. The class visible-mobile-flex controls this.
// The second block build a kebob triggered accordion on larger screens, controlled by hidden-mobile-flex.
const kebab = ` const kebab = `
<a <a
role="button" role="button"
id="button-trigger-remove-member-${unique_id}" id="button-trigger-${action}-${unique_id}"
href="#toggle-remove-member-${unique_id}" href="#toggle-${action}-${unique_id}"
class="usa-button usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 line-height-sans-5 text-secondary visible-mobile-flex" class="usa-button usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 line-height-sans-5 text-secondary visible-mobile-flex"
aria-controls="toggle-remove-member-${unique_id}" aria-controls="toggle-${action}-${unique_id}"
data-open-modal data-open-modal
> >
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#delete"></use> <use xlink:href="/public/img/sprite.svg#delete"></use>
</svg>${cancelInvitationButton} <span class="usa-sr-only">${member_name}</span> </svg>${modal_button_text}
<span class="usa-sr-only">${screen_reader_text}</span>
</a> </a>
<div class="usa-accordion usa-accordion--more-actions margin-right-2 hidden-mobile-flex"> <div class="usa-accordion usa-accordion--more-actions margin-right-2 hidden-mobile-flex">
<div class="usa-accordion__heading"> <div class="usa-accordion__heading">
<button <button
type="button" type="button"
id="button-toggle-more-actions-${unique_id}"
class="usa-button usa-button--unstyled usa-button--with-icon usa-accordion__button usa-button--more-actions" class="usa-button usa-button--unstyled usa-button--with-icon usa-accordion__button usa-button--more-actions"
aria-expanded="false" aria-expanded="false"
aria-controls="more-actions-${unique_id}" aria-controls="more-actions-${unique_id}"
@ -205,14 +186,14 @@ function generateKebabHTML(unique_id, member_name, member_type) {
<h2>More options</h2> <h2>More options</h2>
<a <a
role="button" role="button"
id="button-trigger-remove-member-${unique_id}" id="button-trigger-${action}-${unique_id}"
href="#toggle-remove-member-${unique_id}" href="#toggle-${action}-${unique_id}"
class="usa-button usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 line-height-sans-5 text-secondary" class="usa-button usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 line-height-sans-5 text-secondary"
aria-controls="toggle-remove-member-${unique_id}" aria-controls="toggle-${action}-${unique_id}"
data-open-modal data-open-modal
> >
${cancelInvitationButton} ${modal_button_text}
<span class="usa-sr-only">for ${member_name}</span> <span class="usa-sr-only">${screen_reader_text}</span>
</a> </a>
</div> </div>
</div> </div>
@ -1122,9 +1103,7 @@ function initializeTooltips() {
* *
*/ */
function initializeModals() { function initializeModals() {
console.log("We are going to initializeModals")
window.modal.on(); window.modal.on();
console.log("Finish initializeModals")
} }
@ -1136,9 +1115,7 @@ function initializeModals() {
* *
*/ */
function unloadModals() { function unloadModals() {
console.log("We are going to unloadModals")
window.modal.off(); window.modal.off();
console.log("Finish unloadModals")
} }
class LoadTableBase { class LoadTableBase {
@ -1782,13 +1759,14 @@ class DomainRequestsTable extends LoadTableBase {
} }
} }
// 1st option: Just a modal trigger in any screen size for non-org users
modalTrigger = ` modalTrigger = `
<a <a
role="button" role="button"
id="button-toggle-delete-domain-alert-${request.id}" id="button-toggle-delete-domain-${request.id}"
href="#toggle-delete-domain-alert-${request.id}" href="#toggle-delete-domain-${request.id}"
class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger line-height-sans-5" class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger line-height-sans-5"
aria-controls="toggle-delete-domain-alert-${request.id}" aria-controls="toggle-delete-domain-${request.id}"
data-open-modal data-open-modal
> >
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
@ -1803,102 +1781,14 @@ class DomainRequestsTable extends LoadTableBase {
name="delete-domain-request">Yes, delete request</button> name="delete-domain-request">Yes, delete request</button>
` `
const modal = document.createElement('div'); addModal('toggle-delete-domain', request.id, 'Are you sure you want to continue?', 'Domain will be removed', modalHeading, modalDescription, modalSubmit, tbody, true);
modal.setAttribute('class', 'usa-modal');
modal.setAttribute('id', `toggle-delete-domain-alert-${request.id}`);
modal.setAttribute('aria-labelledby', 'Are you sure you want to continue?');
modal.setAttribute('aria-describedby', 'Domain will be removed');
modal.setAttribute('data-force-action', '');
modal.innerHTML = `
<div class="usa-modal__content">
<div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading">
${modalHeading}
</h2>
<div class="usa-prose">
<p id="modal-1-description">
${modalDescription}
</p>
</div>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
${modalSubmit}
</li>
<li class="usa-button-group__item">
<button
type="button"
class="usa-button usa-button--unstyled padding-105 text-center"
data-close-modal
>
Cancel
</button>
</li>
</ul>
</div>
</div>
<button
type="button"
class="usa-button usa-modal__close"
aria-label="Close this window"
data-close-modal
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#close"></use>
</svg>
</button>
</div>
`
this.tableWrapper.appendChild(modal);
// Request is deletable, modal and modalTrigger are built. Now check if we are on the portfolio requests page (by seeing if there is a portfolio value) and enhance the modalTrigger accordingly // Request is deletable, modal and modalTrigger are built. Now check if we are on the portfolio requests page (by seeing if there is a portfolio value) and enhance the modalTrigger accordingly
if (this.portfolioValue) { if (this.portfolioValue) {
modalTrigger = `
<a
role="button"
id="button-toggle-delete-domain-alert-${request.id}"
href="#toggle-delete-domain-alert-${request.id}"
class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 visible-mobile-flex line-height-sans-5"
aria-controls="toggle-delete-domain-alert-${request.id}"
data-open-modal
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#delete"></use>
</svg> Delete <span class="usa-sr-only">${domainName}</span>
</a>
<div class="usa-accordion usa-accordion--more-actions margin-right-2 hidden-mobile-flex"> // 2nd option: Just a modal trigger on mobile for org users
<div class="usa-accordion__heading"> // 3rd option: kebab + accordion with nested modal trigger on desktop for org users
<button modalTrigger = generateKebabHTML('delete-domain', request.id, 'Delete', domainName);
type="button"
class="usa-button usa-button--unstyled usa-button--with-icon usa-accordion__button usa-button--more-actions"
aria-expanded="false"
aria-controls="more-actions-${request.id}"
>
<svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#more_vert"></use>
</svg>
</button>
</div>
<div id="more-actions-${request.id}" class="usa-accordion__content usa-prose shadow-1 left-auto right-0" hidden>
<h2>More options</h2>
<a
role="button"
id="button-toggle-delete-domain-alert-${request.id}"
href="#toggle-delete-domain-alert-${request.id}"
class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 line-height-sans-5"
aria-controls="toggle-delete-domain-alert-${request.id}"
data-open-modal
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#delete"></use>
</svg> Delete <span class="usa-sr-only">${domainName}</span>
</a>
</div>
</div>
`
} }
} }
@ -2275,6 +2165,36 @@ class MembersTable extends LoadTableBase {
return permissionsHTML; return permissionsHTML;
} }
static addMemberModal(num_domains, member_email, submit_delete_url, id, wrapper_element) {
let modalHeading = '';
let modalDescription = '';
if (num_domains == 0){
modalHeading = `Are you sure you want to delete ${member_email}?`;
modalDescription = `They will no longer be able to access this organization.
This action cannot be undone.`;
} else if (num_domains == 1) {
modalHeading = `Are you sure you want to delete ${member_email}?`;
modalDescription = `<b>${member_email}</b> currently manages ${num_domains} domain in the organization.
Removing them from the organization will remove all of their domains. They will no longer be able to
access this organization. This action cannot be undone.`;
} else if (num_domains >= 1) {
modalHeading = `Are you sure you want to delete ${member_email}?`;
modalDescription = `<b>${member_email}</b> currently manages ${num_domains} domains in the organization.
Removing them from the organization will remove all of their domains. They will no longer be able to
access this organization. This action cannot be undone.`;
}
const modalSubmit = `
<button type="button"
class="usa-button usa-button--secondary usa-modal__submit"
data-pk = ${submit_delete_url}
name="delete-member">Yes, remove from organization</button>
`
addModal('toggle-remove-member', id, 'Are you sure you want to continue?', 'Member will be removed', modalHeading, modalDescription, modalSubmit, wrapper_element, true);
}
/** /**
* Loads rows in the members list, as well as updates pagination around the members list * Loads rows in the members list, as well as updates pagination around the members list
* based on the supplied attributes. * based on the supplied attributes.
@ -2358,7 +2278,8 @@ class MembersTable extends LoadTableBase {
const member_delete_url = member.action_url + "/delete"; const member_delete_url = member.action_url + "/delete";
const num_domains = member.domain_urls.length; const num_domains = member.domain_urls.length;
const last_active = this.handleLastActive(member.last_active); const last_active = this.handleLastActive(member.last_active);
const kebabHTML = hasEditPermission ? generateKebabHTML(unique_id, member.name, member.type): ''; let cancelInvitationButton = member.type === "invitedmember" ? "Cancel invitation" : "Remove member";
const kebabHTML = hasEditPermission ? generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `for ${member.name}`): '';
const row = document.createElement('tr'); const row = document.createElement('tr');
@ -2417,7 +2338,7 @@ class MembersTable extends LoadTableBase {
} }
// 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
if (hasEditPermission) addModal(member.email || "Samwise Gamgee", unique_id, num_domains, member_delete_url, row); if (hasEditPermission) MembersTable.addMemberModal(num_domains, member.email || "Samwise Gamgee", member_delete_url, unique_id, row);
}); });
this.initShowMoreButtons(); this.initShowMoreButtons();
@ -2998,34 +2919,12 @@ document.addEventListener("DOMContentLoaded", () => {
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}`;
wrapperDeleteAction.innerHTML = generateKebabHTML(unique_id, member_name, member_type); let cancelInvitationButton = member_type === "invitedmember" ? "Cancel invitation" : "Remove member";
wrapperDeleteAction.innerHTML = generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `for ${member_name}`);
// Select the button and the menu we just inserted
const kebabButton = wrapperDeleteAction.querySelector(`#button-toggle-more-actions-${unique_id}`);
const kebabMenu = wrapperDeleteAction.querySelector(`#more-actions-${unique_id}`);
kebabButton.addEventListener('click', () => {
const isExpanded = kebabButton.getAttribute('aria-expanded') === 'true';
kebabButton.setAttribute('aria-expanded', !isExpanded);
kebabMenu.style.display = isExpanded ? 'none' : 'block';
});
// Handles clicks outside the kebab menu
document.addEventListener('click', (event) => {
const isClickInsideButton = kebabButton.contains(event.target);
const isClickInsideMenu = kebabMenu.contains(event.target);
if (!isClickInsideButton && !isClickInsideMenu) {
kebabButton.setAttribute('aria-expanded', 'false');
kebabMenu.style.display = 'none';
console.log("Menu is hidden");
}
});
console.log("AFTER LISTENER")
// 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
addModal(member_email || "Samwise Gamgee", unique_id, num_domains, member_delete_url, wrapperDeleteAction); MembersTable.addMemberModal(num_domains, member_email || "Samwise Gamgee", member_delete_url, unique_id, wrapperDeleteAction);
initializeModals(); initializeModals();

1
src/registrar/models/user.py
View file

@ -478,7 +478,6 @@ class User(AbstractUser):
# Get the portfolio from the session using the existing method # Get the portfolio from the session using the existing method
portfolio = request.session.get("portfolio") portfolio = request.session.get("portfolio")
print(f"Portfolio from session: {portfolio}")
if not portfolio: if not portfolio:
return 0 # No portfolio found return 0 # No portfolio found

6
src/registrar/templates/django/admin/domain_change_form.html
View file

@ -64,7 +64,7 @@
> >
<div class="usa-modal__content"> <div class="usa-modal__content">
<div class="usa-modal__main"> <div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading"> <h2 class="usa-modal__heading">
Are you sure you want to extend the expiration date? Are you sure you want to extend the expiration date?
</h2> </h2>
<div class="usa-prose"> <div class="usa-prose">
@ -128,7 +128,7 @@
> >
<div class="usa-modal__content"> <div class="usa-modal__content">
<div class="usa-modal__main"> <div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading"> <h2 class="usa-modal__heading">
Are you sure you want to place this domain on hold? Are you sure you want to place this domain on hold?
</h2> </h2>
<div class="usa-prose"> <div class="usa-prose">
@ -195,7 +195,7 @@
> >
<div class="usa-modal__content"> <div class="usa-modal__content">
<div class="usa-modal__main"> <div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading"> <h2 class="usa-modal__heading">
Are you sure you want to remove this domain from the registry? Are you sure you want to remove this domain from the registry?
</h2> </h2>
<div class="usa-prose"> <div class="usa-prose">

2
src/registrar/templates/django/admin/domain_request_change_form.html
View file

@ -50,7 +50,7 @@
> >
<div class="usa-modal__content"> <div class="usa-modal__content">
<div class="usa-modal__main"> <div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading"> <h2 class="usa-modal__heading">
Are you sure you want to select ineligible status? Are you sure you want to select ineligible status?
</h2> </h2>
<div class="usa-prose"> <div class="usa-prose">

4
src/registrar/templates/includes/modal.html
View file

@ -2,7 +2,7 @@
<div class="usa-modal__content"> <div class="usa-modal__content">
<div class="usa-modal__main"> <div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading"> <h2 class="usa-modal__heading">
{{ modal_heading }} {{ modal_heading }}
{%if domain_name_modal is not None %} {%if domain_name_modal is not None %}
<span class="domain-name-wrap"> <span class="domain-name-wrap">
@ -16,7 +16,7 @@
{% endif %} {% endif %}
</h2> </h2>
<div class="usa-prose"> <div class="usa-prose">
<p id="modal-1-description"> <p>
{{ modal_description }} {{ modal_description }}
</p> </p>
</div> </div>

2
src/registrar/templates/portfolio_members.html
View file

@ -12,7 +12,7 @@
<div id="main-content"> <div id="main-content">
<div id="toggleable-alert" class="usa-alert usa-alert--slim margin-bottom-2 display-none"> <div id="toggleable-alert" class="usa-alert usa-alert--slim margin-bottom-2 display-none">
<div class="usa-alert__body"> <div class="usa-alert__body usa-alert__body--widescreen">
<p class="usa-alert__text "> <p class="usa-alert__text ">
<!-- alert message will be conditionally populated by javascript --> <!-- alert message will be conditionally populated by javascript -->
</p> </p>

4
src/registrar/templates/profile.html
View file

@ -51,11 +51,11 @@ Edit your User Profile |
> >
<div class="usa-modal__content"> <div class="usa-modal__content">
<div class="usa-modal__main"> <div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading"> <h2 class="usa-modal__heading">
Add contact information Add contact information
</h2> </h2>
<div class="usa-prose"> <div class="usa-prose">
<p id="modal-1-description"> <p>
.Gov domain registrants must maintain accurate contact information in the .gov registrar. .Gov domain registrants must maintain accurate contact information in the .gov registrar.
Before you can manage your domain, we need you to add your contact information. Before you can manage your domain, we need you to add your contact information.
</p> </p>