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

simplify javascript

Browse source
This commit is contained in:
zandercymatics 2024-10-10 09:52:56 -06:00
parent dbfc54837a
commit 3e54bb1e59
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
2 changed files with 44 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -444,30 +444,23 @@ class CustomizableEmailBase {
* @param {Object} config - must contain the following:
* @property {HTMLElement} dropdown - The dropdown element.
* @property {HTMLElement} textarea - The textarea element.
* @property {HTMLElement} textareaPlaceholder - The placeholder for the textarea.
* @property {HTMLElement} directEditButton - The button to directly edit the email.
* @property {HTMLElement} modalTrigger - The trigger for the modal.
* @property {HTMLElement} modalConfirm - The confirm button in the modal.
* @property {HTMLElement} formLabel - The label for the form.
* @property {HTMLElement} lastSentEmailContent - The last sent email content element.
* @property {HTMLElement} textAreaFormGroup - The form group for the textarea.
* @property {HTMLElement} dropdownFormGroup - The form group for the dropdown.
* @property {HTMLElement} modalConfirm - The confirm button in the modal.
* @property {string} apiUrl - The API URL for fetching email content.
* @property {string} statusToCheck - The status to check against. Used for show/hide on textAreaFormGroup/dropdownFormGroup.
* @property {string} sessionVariableName - The session variable name. Used for show/hide on textAreaFormGroup/dropdownFormGroup.
* @property {string} apiErrorMessage - The error message that the ajax call returns.
*/
constructor(config) {
this.config = config;
this.dropdown = config.dropdown;
this.textarea = config.textarea;
this.textareaPlaceholder = config.textareaPlaceholder;
this.directEditButton = config.directEditButton;
this.modalTrigger = config.modalTrigger;
this.modalConfirm = config.modalConfirm;
this.formLabel = config.formLabel;
this.lastSentEmailContent = config.lastSentEmailContent;
this.apiUrl = config.apiUrl;
this.apiErrorMessage = config.apiErrorMessage;
this.modalConfirm = config.modalConfirm;
// These fields are hidden/shown on pageload depending on the current status
this.textAreaFormGroup = config.textAreaFormGroup;
@ -481,6 +474,14 @@ class CustomizableEmailBase {
this.initialDropdownValue = this.dropdown ? this.dropdown.value : null;
this.initialEmailValue = this.textarea ? this.textarea.value : null;
// Find other fields near the textarea
const parentDiv = this.textarea ? this.textarea.closest(".flex-container") : null;
this.directEditButton = parentDiv ? parentDiv.querySelector(".edit-email-button") : null;
this.modalTrigger = parentDiv ? parentDiv.querySelector(".edit-button-modal-trigger") : null;
this.textareaPlaceholder = parentDiv ? parentDiv.querySelector(".custom-email-placeholder") : null;
this.formLabel = this.textarea ? document.querySelector(`label[for="${this.textarea.id}"]`) : null;
this.isEmailAlreadySentConst;
if (this.lastSentEmailContent && this.textarea) {
this.isEmailAlreadySentConst = this.lastSentEmailContent.value.replace(/\s+/g, '') === this.textarea.value.replace(/\s+/g, '');
@ -642,12 +643,8 @@ class customActionNeededEmail extends CustomizableEmailBase {
const emailConfig = {
dropdown: document.getElementById("id_action_needed_reason"),
textarea: document.getElementById("id_action_needed_reason_email"),
textareaPlaceholder: document.querySelector(".field-action_needed_reason_email__placeholder"),
directEditButton: document.querySelector('.field-action_needed_reason_email__edit'),
modalTrigger: document.querySelector('.field-action_needed_reason_email__modal-trigger'),
modalConfirm: document.getElementById('confirm-edit-email'),
formLabel: document.querySelector('label[for="id_action_needed_reason_email"]'),
lastSentEmailContent: document.getElementById("last-sent-action-needed-email-content"),
modalConfirm: document.getElementById("action-needed-reason__confirm-edit-email"),
apiUrl: document.getElementById("get-action-needed-email-for-user-json")?.value || null,
textAreaFormGroup: document.querySelector('.field-action_needed_reason'),
dropdownFormGroup: document.querySelector('.field-action_needed_reason_email'),
@ -690,6 +687,13 @@ document.addEventListener('DOMContentLoaded', function() {
// Initialize UI
const customEmail = new customActionNeededEmail();
// Check that every variable was setup correctly
const nullItems = Object.entries(customEmail.config).filter(([key, value]) => value === null).map(([key]) => key);
if (nullItems.length > 0) {
console.error(`Failed to load customActionNeededEmail(). Some variables were null: ${nullItems.join(", ")}`)
return;
}
customEmail.loadActionNeededEmail()
});
@ -699,12 +703,8 @@ class customRejectedEmail extends CustomizableEmailBase {
const emailConfig = {
dropdown: document.getElementById("id_rejection_reason"),
textarea: document.getElementById("id_rejection_reason_email"),
textareaPlaceholder: document.querySelector(".field-rejection_reason_email__placeholder"),
directEditButton: document.querySelector('.field-rejection_reason_email__edit'),
modalTrigger: document.querySelector('.field-rejection_reason_email__modal-trigger'),
modalConfirm: document.getElementById('confirm-edit-email'),
formLabel: document.querySelector('label[for="id_rejection_reason_email"]'),
lastSentEmailContent: document.getElementById("last-sent-rejection-email-content"),
modalConfirm: document.getElementById("rejection-reason__confirm-edit-email"),
apiUrl: document.getElementById("get-rejection-email-for-user-json")?.value || null,
textAreaFormGroup: document.querySelector('.field-rejection_reason'),
dropdownFormGroup: document.querySelector('.field-rejection_reason_email'),
@ -749,6 +749,12 @@ document.addEventListener('DOMContentLoaded', function() {
// Initialize UI
const customEmail = new customRejectedEmail();
// Check that every variable was setup correctly
const nullItems = Object.entries(customEmail.config).filter(([key, value]) => value === null).map(([key]) => key);
if (nullItems.length > 0) {
console.error(`Failed to load customRejectedEmail(). Some variables were null: ${nullItems.join(", ")}`)
return;
}
customEmail.loadRejectedEmail()
});

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

@ -137,29 +137,28 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
{% block field_other %}
{% if field.field.name == "action_needed_reason_email" %}
{{ field.field }}
<div class="margin-top-05 text-faded field-action_needed_reason_email__placeholder">
<div class="margin-top-05 text-faded custom-email-placeholder">
&ndash;
</div>
{{ field.field }}
<button
aria-label="Edit email in textarea"
type="button"
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 flex-align-self-start"
class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text margin-left-1 text-no-underline flex-align-self-start edit-email-button"
><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</button
>
<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 field-action_needed_reason_email__modal-trigger flex-align-self-start"
aria-controls="email-already-sent-modal"
href="#action-needed-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 edit-button-modal-trigger flex-align-self-start"
aria-controls="action-needed-email-already-sent-modal"
data-open-modal
><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</a
>
<div
class="usa-modal"
id="email-already-sent-modal"
id="action-needed-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"
>
@ -187,8 +186,8 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
<li class="usa-button-group__item">
<button
type="submit"
id="action-needed-reason__confirm-edit-email"
class="usa-button"
id="confirm-edit-email"
data-close-modal
>
Yes, continue editing
@ -227,28 +226,28 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
{% endif %}
{% elif field.field.name == "rejection_reason_email" %}
<div class="margin-top-05 text-faded field-rejection_reason_email__placeholder">
{{ field.field }}
<div class="margin-top-05 text-faded custom-email-placeholder">
&ndash;
</div>
{{ field.field }}
<button
aria-label="Edit email in textarea"
type="button"
class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text margin-left-1 text-no-underline field-rejection_reason_email__edit flex-align-self-start"
class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text margin-left-1 text-no-underline flex-align-self-start edit-email-button"
><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</button
>
<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 field-rejection_reason_email__modal-trigger flex-align-self-start"
aria-controls="email-already-sent-modal"
href="#rejection-reason-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 edit-button-modal-trigger flex-align-self-start"
aria-controls="rejection-reason-email-already-sent-modal"
data-open-modal
><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</a
>
<div
class="usa-modal"
id="email-already-sent-modal"
id="rejection-reason-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"
>
@ -276,8 +275,8 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
<li class="usa-button-group__item">
<button
type="submit"
id="rejection-reason__confirm-edit-email"
class="usa-button"
id="confirm-edit-email"
data-close-modal
>
Yes, continue editing