modal logic

This commit is contained in:
CocoByte 2024-08-15 10:19:53 -06:00
parent aea8539d66
commit 5000cb7939
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
2 changed files with 124 additions and 18 deletions

View file

@ -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)
}
}
})();

View file

@ -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 %}