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.
@@ -19,9 +25,9 @@
     {# Create a modal for when a domain is marked as ineligible #}
     <div
     class="usa-modal"
-id="toggle-remove-from-registry"
+    id="toggle-set-ineligible"
     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">
@@ -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