JS changes

src/registrar/assets/js/get-gov-admin.js

@@ -35,14 +35,20 @@ function openInNewTab(el, removeAttribute = false){
 
             let input = document.createElement("input");
             input.type = "submit";
+
+            if(button.name){
                 input.name = button.name;
+            }
+
+            if(button.value){
                 input.value = button.value;
+            }
+
             input.style.display = "none"
 
             // Add the hidden input to the form
             form.appendChild(input);
             button.addEventListener("click", () => {
-                console.log("clicking")
                 input.click();
             })
         })
@@ -50,6 +56,60 @@ function openInNewTab(el, removeAttribute = false){
 
     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.
  * Currently only appends target="_blank" to the domain_form object,
  * but this can be expanded.

src/registrar/templates/django/admin/domain_application_change_form.html

@@ -1,6 +1,12 @@
 {% extends 'admin/change_form.html' %}
 {% 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 %}
     {% comment %}
     Modals behave very weirdly in django admin.
@@ -16,13 +22,13 @@
     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.
     {% 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__main">
                 <h2 class="usa-modal__heading" id="modal-1-heading">
@@ -38,6 +44,7 @@ aria-describedby="This domain will be removed."
                         <li>They cannot initiate a new domain request.</li>
                     </ul>
                     <p>
+                        The restrictions will not take effect until you “save” the changes for this domain request. 
                         This action can be reversed, if needed.
                     </p>
                     <p>
@@ -53,16 +60,18 @@ aria-describedby="This domain will be removed."
                         <li class="usa-button-group__item">
                             <button
                             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
+                                Yes, select ineligible status
                             </button>
                         </li>
                         <li class="usa-button-group__item">
                             <button
                             type="button"
                             class="usa-button usa-button--unstyled padding-105 text-center"
+                            name="_cancel_application_ineligible"
                             data-close-modal
                             >
                                 Cancel