zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-12 12:39:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
Rachid Mrad 2024-08-30 14:48:05 -04:00
parent ec56f176de
commit 7265df1229
No known key found for this signature in database
2 changed files with 152 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

213
src/registrar/assets/js/get-gov-admin.js
View file

@ -506,72 +506,60 @@ function initializeWidgetOnList(list, parentId) {
/** An IIFE that hooks to the show/hide button underneath action needed reason. /** An IIFE that hooks to the show/hide button underneath action needed reason.
* This shows the auto generated email on action needed reason. * This shows the auto generated email on action needed reason.
*/ */
(function () { document.addEventListener('DOMContentLoaded', function() {
// Since this is an iife, these vars will be removed from memory afterwards let actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason");
var actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason"); let textAreaActionNeededEmail = document.getElementById("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")
// 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);
const domainRequestId = actionNeededReasonDropdown ? document.querySelector("#domain_request_id").value : null 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) { // Check we are on the right page and we have the right DOM elements
// Add a change listener to dom load if(actionNeededReasonDropdown && textAreaActionNeededEmail && domainRequestId) {
document.addEventListener('DOMContentLoaded', function() {
let reason = actionNeededReasonDropdown.value;
// Handle the session boolean (to enable/disable editing) var pleaseMakeASelection = document.getElementById("please-make-selection")
if (emailWasSent && emailWasSent.value === "True") { var noEmailWillBeSent = document.getElementById("no-email-will-be-sent")
// An email was sent out - store that information in a session variable var editEmailButton = document.getElementById('email-already-sent-modal_continue-editing-button');
addOrRemoveSessionBoolean(emailSentSessionVariableName, add=true); // 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 // Add a change listener to the action needed reason dropdown
actionNeededReasonDropdown.addEventListener("change", function() { actionNeededReasonDropdown.addEventListener("change", function() {
@ -579,95 +567,34 @@ function initializeWidgetOnList(list, parentId) {
let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null; let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null;
if (reason && emailBody) { if (reason && emailBody) {
// Reset the session object on change since change refreshes the email content. // If it's not the initial value
if (oldDropdownValue !== actionNeededReasonDropdown.value || oldEmailValue !== actionNeededEmail.value) { if (initialDropdownValue !== actionNeededReasonDropdown.value || initialEmailValue !== textAreaActionNeededEmail.value) {
// Replace the email content // Replace the email content
actionNeededEmail.value = emailBody; textAreaActionNeededEmail.value = emailBody;
actionNeededEmailReadonlyTextarea.value = emailBody;
hideEmailAlreadySentView();
} }
} }
// Show either a preview of the email or some text describing no email will be sent // Update the UI
updateActionNeededEmailDisplay(reason) 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() // function checkEmailAlreadySent() {
{ // lastEmailSent = lastEmailSentContent.value.replace(/\s+/g, '')
lastEmailSent = lastSentEmailText.value.replace(/\s+/g, '') // currentEmailInTextArea = textAreaActionNeededEmail.value.replace(/\s+/g, '')
currentEmailInTextArea = actionNeededEmail.value.replace(/\s+/g, '') // return lastEmailSent === 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";
}
// 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)
}
})();
/** An IIFE for copy summary button (appears in DomainRegistry models) /** An IIFE for copy summary button (appears in DomainRegistry models)

197
src/registrar/templates/django/admin/includes/detail_table_fieldset.html
View file

@ -66,24 +66,6 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
No changelog to display. No changelog to display.
</div> </div>
{% endif %} {% 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" %} {% elif field.field.name == "other_contacts" %}
{% if all_contacts.count > 2 %} {% if all_contacts.count > 2 %}
<div class="readonly"> <div class="readonly">
@ -145,111 +127,89 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
{% block field_other %} {% block field_other %}
{% if field.field.name == "action_needed_reason_email" %} {% 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> <div id="no-email-will-be-sent" class="margin-top-05 text-faded display-none">
<div id="action-needed-reason-email-readonly" class="display-none usa-summary-box_admin padding-top-0 margin-top-0"> No email will be sent
<div class="flex-container"> </div>
<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> <a
<p class="{% if not action_needed_email_sent %}display-none{% endif %}" id="action-needed-email-header-email-sent"> href="#email-already-sent-modal"
<svg class="usa-icon text-green" aria-hidden="true" focusable="false" role="img"> class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1"
<use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use> aria-controls="email-already-sent-modal"
</svg> data-open-modal
<b>Email sent to the creator</b> >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> </p>
</div> </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"> <div class="usa-modal__footer">
<ul class="usa-button-group"> <ul class="usa-button-group">
<li class="usa-button-group__item"> <li class="usa-button-group__item">
<button <button
type="submit" type="submit"
class="usa-button" class="usa-button"
id="email-already-sent-modal_continue-editing-button" id="email-already-sent-modal_continue-editing-button"
data-close-modal data-close-modal
> >
Yes, continue editing Yes, continue editing
</button> </button>
</li> </li>
<li class="usa-button-group__item"> <li class="usa-button-group__item">
<button <button
type="button" type="button"
class="usa-button usa-button--unstyled padding-105 text-center" class="usa-button usa-button--unstyled padding-105 text-center"
name="_cancel_edit_email" name="_cancel_edit_email"
data-close-modal data-close-modal
> >
Cancel Cancel
</button> </button>
</li> </li>
</ul> </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> </div>
<label class="sr-only" for="action-needed-reason-email-readonly-textarea">Email:</label> <button
<textarea cols="40" rows="10" class="vLargeTextField" id="action-needed-reason-email-readonly-textarea" readonly>{{ field.field.value|striptags }} type="button"
</textarea> class="usa-button usa-modal__close"
</div> aria-label="Close this window"
<div> data-close-modal
{{ field.field }} >
<input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}"> <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<input id="action-needed-email-last-sent-text" class="display-none" value="{{original_object.action_needed_reason_email}}"> <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
</button>
</div> </div>
</div> </div>
<span id="action-needed-email-footer" class="help">
{% if not action_needed_email_sent %} {{ field.field }}
This email will be sent to the creator of this request after saving
{% else %} <input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">
This email has been sent to the creator of this request <input id="action-needed-email-sent-last-content" class="display-none" value="{{original_object.action_needed_reason_email}}">
{% endif %}
</span>
</div>
{% else %} {% else %}
{{ field.field }} {{ field.field }}
{% endif %} {% endif %}
@ -257,6 +217,13 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
{% block after_help_text %} {% block after_help_text %}
{% if field.field.name == "action_needed_reason_email" %} {% 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 %} {% comment %}
Store the action needed reason emails in a json-based dictionary. 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. This allows us to change the action_needed_reason_email field dynamically, depending on value.