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

refactor frontend

Browse source
This commit is contained in:
Rachid Mrad 2024-09-03 20:55:09 -04:00
parent 7265df1229
commit 94b5c0642c
No known key found for this signature in database
3 changed files with 93 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -507,70 +507,98 @@ function initializeWidgetOnList(list, parentId) {
* This shows the auto generated email on action needed reason. * This shows the auto generated email on action needed reason.
*/ */
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
let actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason"); const dropdown = document.getElementById("id_action_needed_reason");
let textAreaActionNeededEmail = document.getElementById("id_action_needed_reason_email") const textarea = document.getElementById("id_action_needed_reason_email")
const domainRequestId = actionNeededReasonDropdown ? document.querySelector("#domain_request_id").value : null const domainRequestId = dropdown ? document.getElementById("domain_request_id").value : null
// Check we are on the right page and we have the right DOM elements if(dropdown && textarea && domainRequestId) {
if(actionNeededReasonDropdown && textAreaActionNeededEmail && domainRequestId) {
var pleaseMakeASelection = document.getElementById("please-make-selection") const texareaPlaceholder = document.querySelector(".field-action_needed_reason_email__placeholder");
var noEmailWillBeSent = document.getElementById("no-email-will-be-sent") const directEditButton = document.querySelector('.field-action_needed_reason_email__edit');
var editEmailButton = document.getElementById('email-already-sent-modal_continue-editing-button'); const modalTrigger = document.querySelector('.field-action_needed_reason_email__modal-trigger');
// Headers and footers (which change depending on if the email was sent or not) const modalConfirm = document.getElementById('confirm-edit-email');
// var actionNeededEmailHeader = document.querySelector("#action-needed-email-header") const formLabel = document.querySelector('label[for="id_action_needed_reason_email"]');
// var actionNeededEmailHeaderOnSave = document.querySelector("#action-needed-email-header-email-sent") const greenCheckMark = `<svg class="usa-icon text-green" aria-hidden="true" focusable="false" role="img">
let lastEmailSentInputStorer = document.getElementById("action-needed-email-sent"); <use xlink:href="/public/img/sprite.svg#check_circle"></use>
if (!lastEmailSentInputStorer) { </svg>`;
return; let lastSentEmailContent = document.getElementById("last-sent-email-content");
}
let anEmailWasSent = lastEmailSentInputStorer.value == 'True'; const helpText = document.querySelector('.field-action_needed_reason_email .help');
let lastEmailSentContent = document.getElementById("action-needed-email-sent-last-content");
// Get the list of emails associated with each action-needed dropdown value // Get the list of emails associated with each action-needed dropdown value
let emailData = document.getElementById('action-needed-emails-data'); const emailData = document.getElementById('action-needed-emails-data');
if (!emailData) { const actionNeededEmailData = emailData.textContent;
return; const actionNeededEmailsJson = JSON.parse(actionNeededEmailData);
} // Get initial dropdown and email
let actionNeededEmailData = emailData.textContent; const initialDropdownValue = dropdown ? dropdown.value : null;
if(!actionNeededEmailData) {
return;
}
let actionNeededEmailsJson = JSON.parse(actionNeededEmailData);
const emailSentSessionVariableName = `actionNeededEmailSent-${domainRequestId}`;
const initialDropdownValue = actionNeededReasonDropdown ? actionNeededReasonDropdown.value : null;
const initialEmailValue = actionNeededEmailData ? actionNeededEmailData.value : null; const initialEmailValue = actionNeededEmailData ? actionNeededEmailData.value : null;
if(
!formLabel ||
!modalConfirm ||
!actionNeededEmailData) {
return;
}
function updateUserInterface(reason) { function updateUserInterface(reason) {
if (!reason) { if (!reason) {
showElement(pleaseMakeASelection); // No reason selected, we will set the label to "Email", show the "Make a selection" placeholder, hide the trigger, textarea, hide the help text
hideElement(noEmailWillBeSent); formLabel.innerHTML = "Email:";
hideElement(textAreaActionNeededEmail); showElement(texareaPlaceholder);
texareaPlaceholder.innerHTML = "Select an action needed reason to see email";
hideElement(directEditButton);
hideElement(modalTrigger);
hideElement(textarea);
hideElement(helpText);
} else if (reason == 'other') { } else if (reason == 'other') {
hideElement(pleaseMakeASelection); // 'Other' selected, we will set the label to "Email", show the "No email will be sent" placeholder, hide the trigger, textarea, hide the help text
showElement(noEmailWillBeSent); formLabel.innerHTML = "Email:";
hideElement(textAreaActionNeededEmail); showElement(helpText);
showElement(texareaPlaceholder);
texareaPlaceholder.innerHTML = "No email will be sent";
hideElement(directEditButton);
hideElement(modalTrigger);
hideElement(textarea);
hideElement(helpText);
} else { } else {
hideElement(pleaseMakeASelection); // A triggering selection is selected, all hands on board:
hideElement(noEmailWillBeSent); hideElement(texareaPlaceholder);
showElement(textAreaActionNeededEmail); showElement(textarea);
textarea.setAttribute('readonly', true);
showElement(helpText);
if (checkEmailAlreadySent()) {
hideElement(directEditButton);
showElement(modalTrigger);
formLabel.innerHTML = greenCheckMark + "Email sent to the creator:"
helpText.innerHTML = "This email has been sent to the creator of this request"
} else {
showElement(directEditButton);
hideElement(modalTrigger);
formLabel.innerHTML = "Auto-generated email that will be sent to the creator";
helpText.innerHTML = "This email will be sent to the creator of this request after saving";
} }
} }
}
function checkEmailAlreadySent() {
lastEmailSent = lastSentEmailContent.value.replace(/\s+/g, '')
currentEmailInTextArea = textarea.value.replace(/\s+/g, '')
return lastEmailSent === currentEmailInTextArea
}
// Init the UI // Init the UI
updateUserInterface(actionNeededReasonDropdown.value); updateUserInterface(dropdown.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() { dropdown.addEventListener("change", function() {
let reason = actionNeededReasonDropdown.value; let reason = dropdown.value;
let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null; let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null;
if (reason && emailBody) { if (reason && emailBody) {
// If it's not the initial value // If it's not the initial value
if (initialDropdownValue !== actionNeededReasonDropdown.value || initialEmailValue !== textAreaActionNeededEmail.value) { if (initialDropdownValue !== dropdown.value || initialEmailValue !== textarea.value) {
// Replace the email content // Replace the email content
textAreaActionNeededEmail.value = emailBody; textarea.value = emailBody;
} }
} }
@ -578,22 +606,14 @@ document.addEventListener('DOMContentLoaded', function() {
updateUserInterface(reason); updateUserInterface(reason);
}); });
// Handle the session boolean (to enable/disable editing) modalConfirm.addEventListener("click", function() {
// An email was sent out - store that information in a session variable textarea.removeAttribute('readonly');
if (anEmailWasSent) });
addOrRemoveSessionBoolean(emailSentSessionVariableName, add=true);
// editEmailButton.addEventListener("click", function() { directEditButton.addEventListener("click", function() {
// if (!checkEmailAlreadySent()) { textarea.removeAttribute('readonly');
// } });
// }
} }
// function checkEmailAlreadySent() {
// lastEmailSent = lastEmailSentContent.value.replace(/\s+/g, '')
// currentEmailInTextArea = textAreaActionNeededEmail.value.replace(/\s+/g, '')
// return lastEmailSent === currentEmailInTextArea
// }
}); });

17
src/registrar/assets/sass/_theme/_admin.scss
View file

@ -854,23 +854,6 @@ div.dja__model-description{
} }
} }
.vertical-separator {
min-height: 20px;
height: 100%;
width: 1px;
background-color: #d1d2d2;
vertical-align: middle
}
.usa-summary-box_admin {
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 { .text-faded {
color: #{$dhs-gray-60}; color: #{$dhs-gray-60};
} }

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

@ -128,19 +128,26 @@ 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 id="please-make-selection" class="margin-top-05 text-faded display-none"> <div class="margin-top-05 text-faded field-action_needed_reason_email__placeholder">
Select an action needed reason to see email Select an action needed reason to see email
</div> </div>
<div id="no-email-will-be-sent" class="margin-top-05 text-faded display-none"> <div id="no-email-will-be-sent" class="margin-top-05 text-faded display-none">
No email will be sent No email will be sent
</div> </div>
{{ field.field }}
<a
href="#id_action_needed_reason_email"
class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text margin-left-1 text-no-underline field-action_needed_reason_email__edit"
><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</a
>
<a <a
href="#email-already-sent-modal" 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" class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1 field-action_needed_reason_email__modal-trigger"
aria-controls="email-already-sent-modal" aria-controls="email-already-sent-modal"
data-open-modal data-open-modal
>Edit email</a ><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</a
> >
<div <div
class="usa-modal" class="usa-modal"
@ -150,7 +157,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
> >
<div class="usa-modal__content"> <div class="usa-modal__content">
<div class="usa-modal__main"> <div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading"> <h2 class="usa-modal__heading">
Are you sure you want to edit this email? Are you sure you want to edit this email?
</h2> </h2>
<div class="usa-prose"> <div class="usa-prose">
@ -173,7 +180,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
<button <button
type="submit" type="submit"
class="usa-button" class="usa-button"
id="email-already-sent-modal_continue-editing-button" id="confirm-edit-email"
data-close-modal data-close-modal
> >
Yes, continue editing Yes, continue editing
@ -205,10 +212,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
</div> </div>
</div> </div>
{{ field.field }} <input id="last-sent-email-content" class="display-none" value="{{original_object.action_needed_reason_email}}">
<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 %} {% else %}
{{ field.field }} {{ field.field }}
@ -218,11 +222,8 @@ 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 %} <div class="help">
This email will be sent to the creator of this request after saving </div>
{% 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.