mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-04 17:01:56 +02:00
wip
This commit is contained in:
Rachid Mrad
parent
ec56f176de
commit
7265df1229
2 changed files with 152 additions and 258 deletions
|
|
@ -506,72 +506,60 @@ function initializeWidgetOnList(list, parentId) {
|
|||
/** An IIFE that hooks to the show/hide button underneath action needed reason.
|
||||
* This shows the auto generated email on action needed reason.
|
||||
*/
|
||||
(function () {
|
||||
// Since this is an iife, these vars will be removed from memory afterwards
|
||||
var actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason");
|
||||
|
||||
// Placeholder text (for certain "action needed" reasons that do not involve e=mails)
|
||||
var placeholderText = document.querySelector("#action-needed-reason-email-placeholder-text")
|
||||
|
||||
// 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 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);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason");
|
||||
let textAreaActionNeededEmail = document.getElementById("id_action_needed_reason_email")
|
||||
const domainRequestId = actionNeededReasonDropdown ? document.querySelector("#domain_request_id").value : null
|
||||
const emailSentSessionVariableName = `actionNeededEmailSent-${domainRequestId}`;
|
||||
const oldDropdownValue = actionNeededReasonDropdown ? actionNeededReasonDropdown.value : null;
|
||||
const oldEmailValue = actionNeededEmailData ? actionNeededEmailData.value : null;
|
||||
|
||||
if(actionNeededReasonDropdown && actionNeededEmail && domainRequestId) {
|
||||
// Add a change listener to dom load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let reason = actionNeededReasonDropdown.value;
|
||||
// Check we are on the right page and we have the right DOM elements
|
||||
if(actionNeededReasonDropdown && textAreaActionNeededEmail && domainRequestId) {
|
||||
|
||||
// Handle the session boolean (to enable/disable editing)
|
||||
if (emailWasSent && emailWasSent.value === "True") {
|
||||
// An email was sent out - store that information in a session variable
|
||||
addOrRemoveSessionBoolean(emailSentSessionVariableName, add=true);
|
||||
var pleaseMakeASelection = document.getElementById("please-make-selection")
|
||||
var noEmailWillBeSent = document.getElementById("no-email-will-be-sent")
|
||||
var editEmailButton = document.getElementById('email-already-sent-modal_continue-editing-button');
|
||||
// Headers and footers (which change depending on if the email was sent or not)
|
||||
// var actionNeededEmailHeader = document.querySelector("#action-needed-email-header")
|
||||
// var actionNeededEmailHeaderOnSave = document.querySelector("#action-needed-email-header-email-sent")
|
||||
let lastEmailSentInputStorer = document.getElementById("action-needed-email-sent");
|
||||
if (!lastEmailSentInputStorer) {
|
||||
return;
|
||||
}
|
||||
let anEmailWasSent = lastEmailSentInputStorer.value == 'True';
|
||||
let lastEmailSentContent = document.getElementById("action-needed-email-sent-last-content");
|
||||
|
||||
// Get the list of emails 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 emailSentSessionVariableName = `actionNeededEmailSent-${domainRequestId}`;
|
||||
const initialDropdownValue = actionNeededReasonDropdown ? actionNeededReasonDropdown.value : null;
|
||||
const initialEmailValue = actionNeededEmailData ? actionNeededEmailData.value : null;
|
||||
|
||||
function updateUserInterface(reason) {
|
||||
if (!reason) {
|
||||
showElement(pleaseMakeASelection);
|
||||
hideElement(noEmailWillBeSent);
|
||||
hideElement(textAreaActionNeededEmail);
|
||||
} else if (reason == 'other') {
|
||||
hideElement(pleaseMakeASelection);
|
||||
showElement(noEmailWillBeSent);
|
||||
hideElement(textAreaActionNeededEmail);
|
||||
} else {
|
||||
hideElement(pleaseMakeASelection);
|
||||
hideElement(noEmailWillBeSent);
|
||||
showElement(textAreaActionNeededEmail);
|
||||
}
|
||||
|
||||
// Show an editable email field or a readonly one
|
||||
updateActionNeededEmailDisplay(reason)
|
||||
});
|
||||
|
||||
editEmailButton.addEventListener("click", function() {
|
||||
if (!checkEmailAlreadySent()) {
|
||||
showEmail(canEdit=true)
|
||||
}
|
||||
});
|
||||
|
||||
confirmEditEmailButton.addEventListener("click", function() {
|
||||
// Show editable view
|
||||
showEmail(canEdit=true)
|
||||
});
|
||||
}
|
||||
|
||||
// Init the UI
|
||||
updateUserInterface(actionNeededReasonDropdown.value);
|
||||
|
||||
// Add a change listener to the action needed reason dropdown
|
||||
actionNeededReasonDropdown.addEventListener("change", function() {
|
||||
|
|
@ -579,95 +567,34 @@ function initializeWidgetOnList(list, parentId) {
|
|||
let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null;
|
||||
|
||||
if (reason && emailBody) {
|
||||
// Reset the session object on change since change refreshes the email content.
|
||||
if (oldDropdownValue !== actionNeededReasonDropdown.value || oldEmailValue !== actionNeededEmail.value) {
|
||||
// If it's not the initial value
|
||||
if (initialDropdownValue !== actionNeededReasonDropdown.value || initialEmailValue !== textAreaActionNeededEmail.value) {
|
||||
// Replace the email content
|
||||
actionNeededEmail.value = emailBody;
|
||||
actionNeededEmailReadonlyTextarea.value = emailBody;
|
||||
hideEmailAlreadySentView();
|
||||
textAreaActionNeededEmail.value = emailBody;
|
||||
}
|
||||
}
|
||||
|
||||
// Show either a preview of the email or some text describing no email will be sent
|
||||
updateActionNeededEmailDisplay(reason)
|
||||
// Update the UI
|
||||
updateUserInterface(reason);
|
||||
});
|
||||
|
||||
// Handle the session boolean (to enable/disable editing)
|
||||
// An email was sent out - store that information in a session variable
|
||||
if (anEmailWasSent)
|
||||
addOrRemoveSessionBoolean(emailSentSessionVariableName, add=true);
|
||||
|
||||
// editEmailButton.addEventListener("click", function() {
|
||||
// if (!checkEmailAlreadySent()) {
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
function checkEmailAlreadySent()
|
||||
{
|
||||
lastEmailSent = lastSentEmailText.value.replace(/\s+/g, '')
|
||||
currentEmailInTextArea = actionNeededEmail.value.replace(/\s+/g, '')
|
||||
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";
|
||||
}
|
||||
|
||||
// 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) {
|
||||
hideElement(actionNeededEmail.parentElement)
|
||||
|
||||
if (reason) {
|
||||
if (reason === "other") {
|
||||
// Hide email preview and show this text instead
|
||||
showPlaceholderText("No email will be sent");
|
||||
}
|
||||
else {
|
||||
// Always show readonly view of email to start
|
||||
showEmail(canEdit=false)
|
||||
if(checkEmailAlreadySent())
|
||||
{
|
||||
showEmailAlreadySentView();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Hide email preview and show this text instead
|
||||
showPlaceholderText("Select an action needed reason to see email");
|
||||
}
|
||||
}
|
||||
|
||||
// Shows either a readonly view (canEdit=false) or editable view (canEdit=true) of the action needed email
|
||||
function showEmail(canEdit)
|
||||
{
|
||||
if(!canEdit)
|
||||
{
|
||||
showElement(actionNeededEmailReadonly)
|
||||
hideElement(actionNeededEmail.parentElement)
|
||||
}
|
||||
else
|
||||
{
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
showElement(actionNeededEmail.parentElement)
|
||||
}
|
||||
showElement(actionNeededEmailFooter) // this is the same for both views, so it was separated out
|
||||
hideElement(placeholderText)
|
||||
}
|
||||
|
||||
// Hides preview of action needed email and instead displays the given text (innerHTML)
|
||||
function showPlaceholderText(innerHTML)
|
||||
{
|
||||
hideElement(actionNeededEmail.parentElement)
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
hideElement(actionNeededEmailFooter)
|
||||
|
||||
placeholderText.innerHTML = innerHTML;
|
||||
showElement(placeholderText)
|
||||
}
|
||||
})();
|
||||
// function checkEmailAlreadySent() {
|
||||
// lastEmailSent = lastEmailSentContent.value.replace(/\s+/g, '')
|
||||
// currentEmailInTextArea = textAreaActionNeededEmail.value.replace(/\s+/g, '')
|
||||
// return lastEmailSent === currentEmailInTextArea
|
||||
// }
|
||||
});
|
||||
|
||||
|
||||
/** An IIFE for copy summary button (appears in DomainRegistry models)
|
||||
|
|
|
|||
|
|
@ -66,24 +66,6 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
|
|||
No changelog to display.
|
||||
</div>
|
||||
{% endif %}
|
||||
{% elif field.field.name == "action_needed_reason_email" %}
|
||||
<div class="readonly textarea-wrapper">
|
||||
<div id="action_needed_reason_email_readonly" class="dja-readonly-textarea-container padding-1 margin-top-0 padding-top-0 margin-bottom-1 thin-border collapse--dgsimple collapsed">
|
||||
<label class="max-full" for="action_needed_reason_email_view_more">
|
||||
<strong>Sent to {% if has_profile_feature_flag %}creator{%else%}submitter{%endif%}</strong>
|
||||
</label>
|
||||
<textarea id="action_needed_reason_email_view_more" cols="40" rows="20" class="{% if not original_object.action_needed_reason %}display-none{% endif %}" readonly>
|
||||
{{ original_object.action_needed_reason_email }}
|
||||
</textarea>
|
||||
<p id="no-email-message" class="{% if original_object.action_needed_reason %}display-none{% endif %}">No email will be sent.</p>
|
||||
</div>
|
||||
<button type="button" class="collapse-toggle--dgsimple usa-button usa-button--unstyled margin-top-0 margin-bottom-1 margin-left-1">
|
||||
<span>Show details</span>
|
||||
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
|
||||
<use xlink:href="/public/img/sprite.svg#expand_more"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{% elif field.field.name == "other_contacts" %}
|
||||
{% if all_contacts.count > 2 %}
|
||||
<div class="readonly">
|
||||
|
|
@ -145,111 +127,89 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
|
|||
|
||||
{% block field_other %}
|
||||
{% if field.field.name == "action_needed_reason_email" %}
|
||||
<div>
|
||||
<div id="action-needed-reason-email-placeholder-text" class="margin-top-05 text-faded">
|
||||
-
|
||||
|
||||
<div id="please-make-selection" class="margin-top-05 text-faded display-none">
|
||||
Select an action needed reason to see email
|
||||
</div>
|
||||
<div>
|
||||
<div id="action-needed-reason-email-readonly" class="display-none usa-summary-box_admin padding-top-0 margin-top-0">
|
||||
<div class="flex-container">
|
||||
<div class="margin-top-05">
|
||||
<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 text-green" 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>
|
||||
<div id="no-email-will-be-sent" class="margin-top-05 text-faded display-none">
|
||||
No email will be sent
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="#email-already-sent-modal"
|
||||
class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1"
|
||||
aria-controls="email-already-sent-modal"
|
||||
data-open-modal
|
||||
>Edit email</a
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<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>{{ original_object.get_action_needed_reason_display }}</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="vertical-separator margin-top-1 margin-bottom-1"></div>
|
||||
<a
|
||||
href="#email-already-sent-modal"
|
||||
class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1"
|
||||
aria-controls="email-already-sent-modal"
|
||||
data-open-modal
|
||||
>Edit email</a
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<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>{{ original_object.get_action_needed_reason_display }}</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 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>
|
||||
<label class="sr-only" for="action-needed-reason-email-readonly-textarea">Email:</label>
|
||||
<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}}">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{{ field.field }}
|
||||
|
||||
<input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">
|
||||
<input id="action-needed-email-sent-last-content" class="display-none" value="{{original_object.action_needed_reason_email}}">
|
||||
|
||||
{% else %}
|
||||
{{ field.field }}
|
||||
{% endif %}
|
||||
|
|
@ -257,6 +217,13 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
|
|||
|
||||
{% block after_help_text %}
|
||||
{% if field.field.name == "action_needed_reason_email" %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% comment %}
|
||||
Store the action needed reason emails in a json-based dictionary.
|
||||
This allows us to change the action_needed_reason_email field dynamically, depending on value.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue