Add conditional "confirm" logic

This commit is contained in:
zandercymatics 2024-02-08 11:43:56 -07:00
parent 612f967c6f
commit df70a179e8
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
3 changed files with 25 additions and 19 deletions

View file

@ -45,26 +45,23 @@ function openInNewTab(el, removeAttribute = false){
domainSubmitButton.addEventListener("mouseout", () => openInNewTab(domainFormElement, false)); domainSubmitButton.addEventListener("mouseout", () => openInNewTab(domainFormElement, false));
} }
let extendExpirationDateButton = document.getElementById("extend_expiration_date_button") let extendExpirationDateButton = document.getElementById("extend-expiration-button")
if (extendExpirationDateButton){ let confirmationButtons = document.querySelector(".admin-confirmation-buttons")
extendExpirationDateButton.addEventListener("click", () => { let cancelExpirationButton = document.getElementById("cancel-extend-button")
form = document.getElementById("domain_form") if (extendExpirationDateButton && confirmationButtons && cancelExpirationButton){
/*
For some reason, Django admin has the propensity to ignore nested
inputs and delete nested form objects.
The workaround is to manually create an element as so, after the DOM
has been generated.
Its not the most beautiful thing every, but it works. // Tie logic to the extend button to show confirmation options
*/ extendExpirationDateButton.addEventListener("click", () => {
var input = document.createElement("input"); extendExpirationDateButton.hidden = true
input.type = "hidden"; console.log("these are the buttons: ")
input.name = "_extend_expiration_date"; console.log(confirmationButtons)
// The value doesn't matter, just needs to be present confirmationButtons.hidden = false
input.value = "1"; })
// Add the hidden input to the form
form.appendChild(input); // Tie logic to the cancel button to hide the confirmation options
form.submit(); cancelExpirationButton.addEventListener("click", () => {
confirmationButtons.hidden = true
extendExpirationDateButton.hidden = false
}) })
} }
} }

View file

@ -283,6 +283,11 @@ h1, h2, h3,
} }
} }
.usa-button{
font-size: 14px;
font-weight: normal;
}
// Button groups in /admin incorrectly have bullets. // Button groups in /admin incorrectly have bullets.
// Remove that! // Remove that!
.usa-button-group .usa-button-group__item { .usa-button-group .usa-button-group__item {

View file

@ -11,7 +11,11 @@
</div> </div>
<div class="desktop:flex-align-self-end"> <div class="desktop:flex-align-self-end">
{% if original.state != original.State.DELETED %} {% if original.state != original.State.DELETED %}
<input type="submit" value="Extend expiration date" name="_extend_expiration_date" class="custom-link-button"> <span class="admin-confirmation-buttons" hidden>
<button type="submit" class="usa-button" name="_extend_expiration_date">Confirm extension</button>
<button type="button" id="cancel-extend-button" class="usa-button usa-button--secondary">Cancel</button>
</span>
<input id="extend-expiration-button" type="button" value="Extend expiration date" class="custom-link-button">
{% endif %} {% endif %}
<span class="margin-left-05 margin-right-05 text-middle"> | </span> <span class="margin-left-05 margin-right-05 text-middle"> | </span>
{% if original.state == original.State.READY %} {% if original.state == original.State.READY %}