mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-25 03:58:39 +02:00
modal logic
This commit is contained in:
CocoByte
parent
aea8539d66
commit
5000cb7939
2 changed files with 124 additions and 18 deletions
|
|
@ -510,11 +510,18 @@ function initializeWidgetOnList(list, parentId) {
|
|||
// Since this is an iife, these vars will be removed from memory afterwards
|
||||
var actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason");
|
||||
var actionNeededEmail = document.querySelector("#id_action_needed_reason_email");
|
||||
var helptext = document.querySelector("#action-needed-reason-email-placeholder-text")
|
||||
var placeholderText = document.querySelector("#action-needed-reason-email-placeholder-text")
|
||||
var actionNeededEmailReadonly = document.querySelector("#action-needed-reason-email-readonly");
|
||||
var actionNeededEmailReadonlyTextarea = document.querySelector("#action-needed-reason-email-readonly-textarea")
|
||||
var editEmailButton = document.querySelector("#action-needed-reason-email-edit-button")
|
||||
|
||||
var actionNeededEmailAlreadySentModal = document.querySelector("#email-already-sent-modal")
|
||||
var confirmEditEmailButton = document.querySelector("#email-already-sent-modal_continue-editing-button")
|
||||
|
||||
var actionNeededEmailHeader = document.querySelector("#action-needed-email-header")
|
||||
var actionNeededEmailHeaderOnSave = document.querySelector("#action-needed-email-header-email-sent")
|
||||
var actionNeededEmailFooter = document.querySelector("#action-needed-email-footer")
|
||||
|
||||
let emailWasSent = document.getElementById("action-needed-email-sent");
|
||||
let actionNeededEmailData = document.getElementById('action-needed-emails-data').textContent;
|
||||
let actionNeededEmailsJson = JSON.parse(actionNeededEmailData);
|
||||
|
|
@ -542,15 +549,30 @@ function initializeWidgetOnList(list, parentId) {
|
|||
editEmailButton.addEventListener("click", function() {
|
||||
let emailHasBeenSentBefore = sessionStorage.getItem(emailSentSessionVariableName) !== null;
|
||||
|
||||
if (emailHasBeenSentBefore) {
|
||||
if (true) { //emailHasBeenSentBefore
|
||||
// Show warning Modal
|
||||
|
||||
setModalVisibility(actionNeededEmailAlreadySentModal, true)
|
||||
}
|
||||
else {
|
||||
// Show editable view
|
||||
showElement(actionNeededEmail.parentElement)
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
hideElement(helptext)
|
||||
hideElement(placeholderText)
|
||||
}
|
||||
});
|
||||
|
||||
confirmEditEmailButton.addEventListener("click", function() {
|
||||
// Show editable view
|
||||
showElement(actionNeededEmail.parentElement)
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
hideElement(placeholderText)
|
||||
});
|
||||
|
||||
// Event delegation for data-close-modal buttons
|
||||
// (since manually opening the modal interferes with how this normally works)
|
||||
document.addEventListener('click', function(event) {
|
||||
if (event.target.matches('[data-close-modal]')) {
|
||||
setModalVisibility(actionNeededEmailAlreadySentModal, false)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -575,6 +597,27 @@ function initializeWidgetOnList(list, parentId) {
|
|||
// Show an editable email field or a readonly one
|
||||
updateActionNeededEmailDisplay(reason)
|
||||
});
|
||||
|
||||
const saveButton = document.querySelector('input[name=_save]');
|
||||
// The button does not exist if no fields are editable.
|
||||
if (saveButton) {
|
||||
saveButton.addEventListener('click', function(event) {
|
||||
// Update appearance of action needed e-mail header
|
||||
hideElement(actionNeededEmailHeader)
|
||||
showElement(actionNeededEmailHeaderOnSave)
|
||||
actionNeededEmailFooter.innerHTML = "This email has been sent to the creator of this request";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setModalVisibility(modalToToggle, isVisible) {
|
||||
if (!isVisible) {
|
||||
modalToToggle.classList.remove('is-visible');
|
||||
modalToToggle.setAttribute('aria-hidden', 'true');
|
||||
} else {
|
||||
modalToToggle.classList.add('is-visible');
|
||||
modalToToggle.setAttribute('aria-hidden', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
// Shows an editable email field or a readonly one.
|
||||
|
|
@ -584,27 +627,30 @@ function initializeWidgetOnList(list, parentId) {
|
|||
|
||||
console.info("REASON: "+reason)
|
||||
|
||||
// showElement(actionNeededEmailHeader)
|
||||
// hideElement(actionNeededEmailHeaderOnSave)
|
||||
actionNeededEmailFooter.innerHTML = "This email will be sent to the creator of this request after saving";
|
||||
hideElement(actionNeededEmail.parentElement)
|
||||
|
||||
if (reason) {
|
||||
if (reason === "other") {
|
||||
helptext.innerHTML = "No email will be sent.";
|
||||
hideElement(actionNeededEmail.parentElement)
|
||||
placeholderText.innerHTML = "No email will be sent.";
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
showElement(helptext)
|
||||
showElement(placeholderText)
|
||||
}
|
||||
else {
|
||||
// Always show readonly view to start
|
||||
hideElement(actionNeededEmail.parentElement)
|
||||
showElement(actionNeededEmailReadonly)
|
||||
hideElement(helptext)
|
||||
hideElement(placeholderText)
|
||||
}
|
||||
} else {
|
||||
helptext.innerHTML = "Select an action needed reason to see email";
|
||||
hideElement(actionNeededEmail.parentElement)
|
||||
placeholderText.innerHTML = "Select an action needed reason to see email";
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
showElement(helptext)
|
||||
showElement(placeholderText)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})();
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -151,16 +151,75 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
|
|||
<div id="action-needed-reason-email-readonly" class="display-none">
|
||||
|
||||
<div
|
||||
class="usa-modal"
|
||||
id="toggle-email-already-sent-alert"
|
||||
aria-labelledby="Are you sure you want to edit this email?"
|
||||
aria-describedby="The creator of this request already received an email"
|
||||
class="usa-modal"
|
||||
id="email-already-sent-modal"
|
||||
aria-labelledby="Are you sure you want to edit this email?"
|
||||
aria-describedby="The creator of this request already received an email"
|
||||
>
|
||||
{% include 'includes/modal.html' with modal_heading="Are you sure you want to edit this email?" modal_button=modal_button|safe %}
|
||||
<div class="usa-modal__content">
|
||||
<div class="usa-modal__main">
|
||||
<h2 class="usa-modal__heading" id="modal-1-heading">
|
||||
Are you sure you want to edit this email?
|
||||
</h2>
|
||||
<div class="usa-prose">
|
||||
<p>
|
||||
The creator of this request already received an email for this status/reason:
|
||||
</p>
|
||||
<ul>
|
||||
<li class="font-body-sm">Status: <b>Action needed</b></li>
|
||||
<li class="font-body-sm">Reason: <b>{{ field.field.value|linebreaks }}</b></li>
|
||||
</ul>
|
||||
<p>
|
||||
If you edit this email's text, <b>the system will send another email</b> to
|
||||
the creator after you "save" your changes. If you do not want to send another email, click "cancel" below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="usa-modal__footer">
|
||||
<ul class="usa-button-group">
|
||||
<li class="usa-button-group__item">
|
||||
<button
|
||||
type="submit"
|
||||
class="usa-button"
|
||||
id="email-already-sent-modal_continue-editing-button"
|
||||
data-close-modal
|
||||
>
|
||||
Yes, continue editing
|
||||
</button>
|
||||
</li>
|
||||
<li class="usa-button-group__item">
|
||||
<button
|
||||
type="button"
|
||||
class="usa-button usa-button--unstyled padding-105 text-center"
|
||||
name="_cancel_edit_email"
|
||||
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="{%static 'img/sprite.svg'%}#close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-container">
|
||||
<label><b>Auto-generated email that will be sent to the creator</b></label> |
|
||||
<p id="action-needed-email-header"><b>Auto-generated email that will be sent to the creator</b></p>
|
||||
<p class="display-none" id="action-needed-email-header-email-sent">
|
||||
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
|
||||
<use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use>
|
||||
</svg>
|
||||
<b>Email sent to the creator</b></p>
|
||||
<button id="action-needed-reason-email-edit-button"
|
||||
type="button"
|
||||
class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-top-2 margin-bottom-1 margin-left-1">
|
||||
|
|
@ -171,6 +230,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
|
|||
</div>
|
||||
<div>
|
||||
{{ field.field }}
|
||||
<div id="action-needed-email-footer">This email will be sent to the creator of this request after saving</div>
|
||||
<input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">
|
||||
</div>
|
||||
{% else %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue