zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-03 01:33:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

JS changes

Browse source
This commit is contained in:
zandercymatics 2024-02-29 10:15:21 -07:00
parent eeff5586d2
commit 7d65b2cf5c
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
2 changed files with 135 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/registrar/assets/js/get-gov-admin.js
View file

@ -35,14 +35,20 @@ function openInNewTab(el, removeAttribute = false){
let input = document.createElement("input"); let input = document.createElement("input");
input.type = "submit"; input.type = "submit";
input.name = button.name;
input.value = button.value; if(button.name){
input.name = button.name;
}
if(button.value){
input.value = button.value;
}
input.style.display = "none" input.style.display = "none"
// Add the hidden input to the form // Add the hidden input to the form
form.appendChild(input); form.appendChild(input);
button.addEventListener("click", () => { button.addEventListener("click", () => {
console.log("clicking")
input.click(); input.click();
}) })
}) })
@ -50,6 +56,60 @@ function openInNewTab(el, removeAttribute = false){
createPhantomModalFormButtons(); createPhantomModalFormButtons();
})(); })();
/** An IIFE for DomainApplication to hook a modal to a dropdown option.
* This intentionally does not interact with createPhantomModalFormButtons()
*/
(function (){
function displayModalOnDropdownClick(){
// Grab the invisible element that will hook to the modal.
// This doesn't technically need to be done with one, but this is simpler to manage.
let linkClickedDisplaysModal = document.getElementById("invisible-ineligible-modal-toggler")
let statusDropdown = document.getElementById("id_status")
// If these exist all at the same time, we're on the right page
if (linkClickedDisplaysModal && statusDropdown && statusDropdown.value){
// Store the previous value in the event the user cancels.
// We only need to do this if we're on the correct page.
let previousValue = statusDropdown.value;
// Because the modal button does not have the class "dja-form-placeholder",
// it will not be affected by the createPhantomModalFormButtons() function.
let cancelButton = document.querySelector('button[name="_cancel_application_ineligible"]');
if (cancelButton){
console.log(`This is the previous val: ${previousValue}`)
cancelButton.addEventListener('click', function() {
// Revert the dropdown to its previous value
statusDropdown.value = previousValue;
});
// Add a change event listener to the dropdown.
statusDropdown.addEventListener('change', function() {
// Check if "Ineligible" is selected
if (this.value && this.value.toLowerCase() === "ineligible") {
// Display the modal.
linkClickedDisplaysModal.click()
}
// Update previousValue if another option is selected and confirmed
previousValue = this.value;
console.log(`This is the previous val NOW: ${previousValue}`)
});
} else{
console.error("displayModalOnDropdownClick() -> No cancel button defined.")
}
}
}
// Adds event listeners on the confirm and cancel modal buttons
function handleModalButtons(){
}
displayModalOnDropdownClick();
})();
/** An IIFE for pages in DjangoAdmin which may need custom JS implementation. /** An IIFE for pages in DjangoAdmin which may need custom JS implementation.
* Currently only appends target="_blank" to the domain_form object, * Currently only appends target="_blank" to the domain_form object,
* but this can be expanded. * but this can be expanded.

135
src/registrar/templates/django/admin/domain_application_change_form.html
View file

@ -1,6 +1,12 @@
{% extends 'admin/change_form.html' %} {% extends 'admin/change_form.html' %}
{% load i18n static %} {% load i18n static %}
{% block field_sets %}
{# Create an invisible <a> tag so that we can use a click event to toggle the modal. #}
<a id="invisible-ineligible-modal-toggler" class="display-none" href="#toggle-set-ineligible" aria-controls="toggle-set-ineligible" data-open-modal></a>
{{ block.super }}
{% endblock %}
{% block submit_buttons_bottom %} {% block submit_buttons_bottom %}
{% comment %} {% comment %}
Modals behave very weirdly in django admin. Modals behave very weirdly in django admin.
@ -16,72 +22,75 @@
In addition, the modal element MUST be placed low in the DOM. The script loads slower on DJA than on other portions In addition, the modal element MUST be placed low in the DOM. The script loads slower on DJA than on other portions
of the application, so this means that it will briefly "populate", causing unintended visual effects. of the application, so this means that it will briefly "populate", causing unintended visual effects.
{% endcomment %} {% endcomment %}
{# Create a modal for when a domain is marked as ineligible #} {# Create a modal for when a domain is marked as ineligible #}
<div <div
class="usa-modal" class="usa-modal"
id="toggle-remove-from-registry" id="toggle-set-ineligible"
aria-labelledby="Are you sure you want to select ineligible status?" aria-labelledby="Are you sure you want to select ineligible status?"
aria-describedby="This domain will be removed." aria-describedby="This application will be marked as ineligible."
> >
<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" id="modal-1-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">
<p> <p>
When a domain request is in ineligible status, the registrant's permissions within the registrar are restricted as follows: When a domain request is in ineligible status, the registrant's permissions within the registrar are restricted as follows:
</p> </p>
<ul> <ul>
<li>They cannot edit the ineligible request or any other pending requests.</li> <li>They cannot edit the ineligible request or any other pending requests.</li>
<li>They cannot manage any of their approved domains.</li> <li>They cannot manage any of their approved domains.</li>
<li>They cannot initiate a new domain request.</li> <li>They cannot initiate a new domain request.</li>
</ul> </ul>
<p> <p>
This action can be reversed, if needed. The restrictions will not take effect until you “save” the changes for this domain request.
</p> This action can be reversed, if needed.
<p> </p>
{# Acts as a <br> #} <p>
<div class="display-inline"></div> {# Acts as a <br> #}
Domain: <b>{{ original.name }}</b> <div class="display-inline"></div>
New status: <b>{{ original.State }}</b> Domain: <b>{{ original.name }}</b>
</p> New status: <b>{{ original.State }}</b>
</div> </p>
</div>
<div class="usa-modal__footer"> <div class="usa-modal__footer">
<ul class="usa-button-group"> <ul class="usa-button-group">
<li class="usa-button-group__item"> <li class="usa-button-group__item">
<button <button
type="submit" type="submit"
class="usa-button dja-form-placeholder" class="usa-button"
name="_delete_domain" name="_set_application_ineligible"
> data-close-modal
Yes, remove from registry >
</button> Yes, select ineligible status
</li> </button>
<li class="usa-button-group__item"> </li>
<button <li class="usa-button-group__item">
type="button" <button
class="usa-button usa-button--unstyled padding-105 text-center" type="button"
data-close-modal class="usa-button usa-button--unstyled padding-105 text-center"
> name="_cancel_application_ineligible"
Cancel data-close-modal
</button> >
</li> Cancel
</ul> </button>
</li>
</ul>
</div>
</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="{%static 'img/sprite.svg'%}#close"></use>
</svg>
</button>
</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="{%static 'img/sprite.svg'%}#close"></use>
</svg>
</button>
</div>
</div> </div>
{{ block.super }} {{ block.super }}
{% endblock %} {% endblock %}