mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-20 17:56:11 +02:00
fix e-mail sent logic, fix text size in nested text area input
This commit is contained in:
CocoByte
parent
b0b7c5bd0d
commit
ee73893a20
3 changed files with 73 additions and 50 deletions
|
|
@ -509,32 +509,41 @@ function initializeWidgetOnList(list, parentId) {
|
|||
(function () {
|
||||
// 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");
|
||||
|
||||
// Placeholder text (for certain "action needed" reasons that do not involve e=mails)
|
||||
var placeholderText = document.querySelector("#action-needed-reason-email-placeholder-text")
|
||||
var actionNeededEmailReadonly = document.querySelector("#action-needed-reason-email-readonly");
|
||||
|
||||
// E-mail divs and textarea components
|
||||
var actionNeededEmail = document.querySelector("#id_action_needed_reason_email")
|
||||
var actionNeededEmailReadonly = document.querySelector("#action-needed-reason-email-readonly")
|
||||
var actionNeededEmailReadonlyTextarea = document.querySelector("#action-needed-reason-email-readonly-textarea")
|
||||
|
||||
// Edit e-mail button (appears only in readonly view for e-mail text)
|
||||
var editEmailButton = document.querySelector("#action-needed-reason-email-edit-button")
|
||||
|
||||
// Edit e-mail modal (and its confirmation button)
|
||||
var actionNeededEmailAlreadySentModal = document.querySelector("#email-already-sent-modal")
|
||||
var confirmEditEmailButton = document.querySelector("#email-already-sent-modal_continue-editing-button")
|
||||
|
||||
// Headers and footers (which change depending on if the e-mail was sent or not)
|
||||
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 lastSentEmailText = document.getElementById("action-needed-email-last-sent-text");
|
||||
|
||||
// Get the list of e-mails associated with each action-needed dropdown value
|
||||
let emailData = document.getElementById('action-needed-emails-data');
|
||||
if (!emailData) {
|
||||
return;
|
||||
}
|
||||
|
||||
let actionNeededEmailData = emailData.textContent;
|
||||
if(!actionNeededEmailData) {
|
||||
return;
|
||||
}
|
||||
|
||||
let actionNeededEmailsJson = JSON.parse(actionNeededEmailData);
|
||||
|
||||
const domainRequestId = actionNeededReasonDropdown ? document.querySelector("#domain_request_id").value : null
|
||||
const emailSentSessionVariableName = `actionNeededEmailSent-${domainRequestId}`;
|
||||
const oldDropdownValue = actionNeededReasonDropdown ? actionNeededReasonDropdown.value : null;
|
||||
|
|
@ -544,7 +553,6 @@ function initializeWidgetOnList(list, parentId) {
|
|||
// Add a change listener to dom load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let reason = actionNeededReasonDropdown.value;
|
||||
let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null;
|
||||
|
||||
// Handle the session boolean (to enable/disable editing)
|
||||
if (emailWasSent && emailWasSent.value === "True") {
|
||||
|
|
@ -553,13 +561,11 @@ function initializeWidgetOnList(list, parentId) {
|
|||
}
|
||||
|
||||
// Show an editable email field or a readonly one
|
||||
updateActionNeededEmailDisplay(reason, emailBody)
|
||||
updateActionNeededEmailDisplay(reason)
|
||||
});
|
||||
|
||||
editEmailButton.addEventListener("click", function() {
|
||||
let emailHasBeenSentBefore = sessionStorage.getItem(emailSentSessionVariableName) !== null;
|
||||
|
||||
if (emailHasBeenSentBefore) {
|
||||
if (checkEmailAlreadySent()) {
|
||||
// Show warning Modal
|
||||
setModalVisibility(actionNeededEmailAlreadySentModal, true)
|
||||
}
|
||||
|
|
@ -590,25 +596,41 @@ function initializeWidgetOnList(list, parentId) {
|
|||
if (reason && emailBody) {
|
||||
// Reset the session object on change since change refreshes the email content.
|
||||
if (oldDropdownValue !== actionNeededReasonDropdown.value || oldEmailValue !== actionNeededEmail.value) {
|
||||
let emailSent = sessionStorage.getItem(emailSentSessionVariableName)
|
||||
if (emailSent !== null){
|
||||
addOrRemoveSessionBoolean(emailSentSessionVariableName, add=false)
|
||||
}
|
||||
// Replace the email content
|
||||
actionNeededEmail.value = emailBody;
|
||||
actionNeededEmailReadonlyTextarea.value = emailBody;
|
||||
hideEmailAlreadySentView();
|
||||
}
|
||||
}
|
||||
|
||||
// Show either a preview of the email or some text describing no email will be sent
|
||||
updateActionNeededEmailDisplay(reason, emailBody)
|
||||
});
|
||||
|
||||
const saveButton = document.querySelector('input[name=_save]');
|
||||
// The button does not exist if no fields are editable.
|
||||
if (saveButton) {
|
||||
saveButton.addEventListener('click', function(event) {
|
||||
// Show readonly view with messaging to indicate email was sent
|
||||
showEmailAlreadySentView()
|
||||
updateActionNeededEmailDisplay(reason)
|
||||
});
|
||||
}
|
||||
|
||||
function checkEmailAlreadySent()
|
||||
{
|
||||
lastEmailSent = lastSentEmailText.value.replace(/\s+/g, '')
|
||||
currentEmailInTextArea = actionNeededEmail.value.replace(/\s+/g, '')
|
||||
console.log("old email value = " + lastEmailSent)
|
||||
console.log("current email value = " + currentEmailInTextArea)
|
||||
return lastEmailSent === currentEmailInTextArea
|
||||
}
|
||||
|
||||
// Shows a readonly preview of the email with updated messaging to indicate this email was sent
|
||||
function showEmailAlreadySentView()
|
||||
{
|
||||
hideElement(actionNeededEmailHeader)
|
||||
showElement(actionNeededEmailHeaderOnSave)
|
||||
actionNeededEmailFooter.innerHTML = "This email has been sent to the creator of this request";
|
||||
}
|
||||
|
||||
// Shows a readonly preview of the email with updated messaging to indicate this email was sent
|
||||
function hideEmailAlreadySentView()
|
||||
{
|
||||
showElement(actionNeededEmailHeader)
|
||||
hideElement(actionNeededEmailHeaderOnSave)
|
||||
actionNeededEmailFooter.innerHTML = "This email will be sent to the creator of this request after saving";
|
||||
}
|
||||
|
||||
function setModalVisibility(modalToToggle, isVisible) {
|
||||
|
|
@ -623,15 +645,7 @@ function initializeWidgetOnList(list, parentId) {
|
|||
|
||||
// Shows either a preview of the email or some text describing no email will be sent.
|
||||
// If the email doesn't exist or if we're of reason "other", display that no email was sent.
|
||||
function updateActionNeededEmailDisplay(reason, emailBody) {
|
||||
|
||||
if (reason && emailBody) {
|
||||
// Replace the email content
|
||||
actionNeededEmail.value = emailBody;
|
||||
actionNeededEmailReadonlyTextarea.value = emailBody;
|
||||
}
|
||||
|
||||
actionNeededEmailFooter.innerHTML = "This email will be sent to the creator of this request after saving";
|
||||
function updateActionNeededEmailDisplay(reason) {
|
||||
hideElement(actionNeededEmail.parentElement)
|
||||
|
||||
if (reason) {
|
||||
|
|
@ -642,6 +656,10 @@ function initializeWidgetOnList(list, parentId) {
|
|||
else {
|
||||
// Always show readonly view of email to start
|
||||
showEmail(canEdit=false)
|
||||
if(checkEmailAlreadySent())
|
||||
{
|
||||
showEmailAlreadySentView();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Hide email preview and show this text instead
|
||||
|
|
@ -649,15 +667,6 @@ function initializeWidgetOnList(list, parentId) {
|
|||
}
|
||||
}
|
||||
|
||||
// Shows a readonly preview of the email with updated messaging to indicate this email was sent
|
||||
function showEmailAlreadySentView()
|
||||
{
|
||||
showEmail(canEdit=false)
|
||||
hideElement(actionNeededEmailHeader)
|
||||
showElement(actionNeededEmailHeaderOnSave)
|
||||
actionNeededEmailFooter.innerHTML = "This email has been sent to the creator of this request";
|
||||
}
|
||||
|
||||
// Shows either a readonly view (canEdit=false) or editable view (canEdit=true) of the action needed email
|
||||
function showEmail(canEdit)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -66,6 +66,9 @@ html[data-theme="light"] {
|
|||
// --object-tools-fg: var(--button-fg);
|
||||
// --object-tools-bg: var(--close-button-bg);
|
||||
// --object-tools-hover-bg: var(--close-button-hover-bg);
|
||||
|
||||
--summary-box-bg: #f1f1f1;
|
||||
--summary-box-border: #d1d2d2;
|
||||
}
|
||||
|
||||
// Fold dark theme settings into our main CSS
|
||||
|
|
@ -104,6 +107,9 @@ html[data-theme="light"] {
|
|||
|
||||
--close-button-bg: #333333;
|
||||
--close-button-hover-bg: #666666;
|
||||
|
||||
--summary-box-bg: #121212;
|
||||
--summary-box-border: #666666;
|
||||
}
|
||||
|
||||
// Dark mode django (bug due to scss cascade) and USWDS tables
|
||||
|
|
@ -857,10 +863,12 @@ div.dja__model-description{
|
|||
}
|
||||
|
||||
.usa-summary-box_admin {
|
||||
border-color: #d1d2d2;
|
||||
background-color: #f1f1f1;
|
||||
max-width: fit-content !important;
|
||||
color: var(--body-fg);
|
||||
border-color: var(--summary-box-border);
|
||||
background-color: var(--summary-box-bg);
|
||||
min-width: fit-content;
|
||||
padding: .5rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.text-faded {
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
|
|||
-
|
||||
</div>
|
||||
<div>
|
||||
<div id="action-needed-reason-email-readonly" class="display-none usa-summary-box usa-summary-box_admin padding-top-0 margin-top-0">
|
||||
<div id="action-needed-reason-email-readonly" class="display-none usa-summary-box_admin padding-top-0 margin-top-0">
|
||||
<div
|
||||
class="usa-modal"
|
||||
id="email-already-sent-modal"
|
||||
|
|
@ -216,8 +216,8 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
|
|||
|
||||
<div class="flex-container">
|
||||
<div class="margin-top-05">
|
||||
<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">
|
||||
<p class="{% if action_needed_email_sent %}display-none{% endif %}" id="action-needed-email-header"><b>Auto-generated email that will be sent to the creator</b></p>
|
||||
<p class="{% if not action_needed_email_sent %}display-none{% endif %}" 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>
|
||||
|
|
@ -231,16 +231,22 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
|
|||
<span>Edit email</span>
|
||||
</button>
|
||||
</div>
|
||||
<textarea cols="40" rows="10" class="vLargeTextField dja-readonly-textarea-container" id="action-needed-reason-email-readonly-textarea" readonly>
|
||||
{{ field.field.value|linebreaks }}
|
||||
<textarea cols="40" rows="10" class="vLargeTextField" id="action-needed-reason-email-readonly-textarea" readonly>{{ field.field.value|striptags }}
|
||||
</textarea>
|
||||
</div>
|
||||
<div>
|
||||
{{ field.field }}
|
||||
<input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">
|
||||
<input id="action-needed-email-last-sent-text" class="display-none" value="{{original_object.action_needed_reason_email}}">
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-needed-email-footer" class="help margin-left-0">This email will be sent to the creator of this request after saving</div>
|
||||
<span id="action-needed-email-footer" class="help">
|
||||
{% if not action_needed_email_sent %}
|
||||
This email will be sent to the creator of this request after saving
|
||||
{% else %}
|
||||
This email has been sent to the creator of this request
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% else %}
|
||||
{{ field.field }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue