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

enabling support for refactoring 13 nameservers handling

Browse source
This commit is contained in:
David Kennedy 2025-02-26 13:41:02 -05:00
parent 4db7fe03e3
commit 3f84587a16
No known key found for this signature in database
GPG key ID: 6528A5386E66B96B
2 changed files with 67 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/registrar/assets/src/js/getgov/form-nameservers.js
View file

@ -3,7 +3,7 @@ import { showElement, hideElement } from './helpers';
export class NameserverForm { export class NameserverForm {
constructor() { constructor() {
this.addNameserverButton = document.getElementById('nameserver-add-form'); this.addNameserverButton = document.getElementById('nameserver-add-form');
this.nameserversForm = document.querySelector('.nameservers-form'); this.addNameserversForm = document.querySelector('.add-nameservers-form');
this.domain = ''; this.domain = '';
this.formChanged = false; this.formChanged = false;
this.callback = null; this.callback = null;
@ -36,13 +36,13 @@ export class NameserverForm {
// Check if there are error messages in the form (indicated by elements with class 'usa-alert--error') // Check if there are error messages in the form (indicated by elements with class 'usa-alert--error')
const errorMessages = document.querySelectorAll('.usa-alert--error'); const errorMessages = document.querySelectorAll('.usa-alert--error');
if (secondNameserver && !thirdNameserver && errorMessages.length > 0) { if (this.addNameserversForm && secondNameserver && !thirdNameserver && errorMessages.length > 0) {
showElement(this.nameserversForm); showElement(this.addNameserversForm);
this.formChanged = true; this.formChanged = true;
} }
if (this.nameserversForm.querySelector('.usa-input--error')) { if (this.addNameserversForm && this.addNameserversForm.querySelector('.usa-input--error')) {
showElement(this.nameserversForm); showElement(this.addNameserversForm);
this.formChanged = true; this.formChanged = true;
} }
@ -169,26 +169,31 @@ export class NameserverForm {
} }
handleAddFormClick(event) { handleAddFormClick(event) {
this.callback = () => { if (this.addNameserversForm) {
// Check if any other edit row is currently visible and hide it this.callback = () => {
document.querySelectorAll('tr.edit-row:not(.display-none)').forEach(openEditRow => { // Check if any other edit row is currently visible and hide it
this.resetEditRowAndFormAndCollapseEditRow(openEditRow); document.querySelectorAll('tr.edit-row:not(.display-none)').forEach(openEditRow => {
}); this.resetEditRowAndFormAndCollapseEditRow(openEditRow);
// Check if this.nameserversForm is visible (i.e., does not have 'display-none') });
if (!this.nameserversForm.classList.contains('display-none')) { // Check if this.addNameserversForm is visible (i.e., does not have 'display-none')
this.resetNameserversForm(); if (!this.addNameserversForm.classList.contains('display-none')) {
} this.resetAddNameserversForm();
// show nameservers form }
showElement(this.nameserversForm); // show nameservers form
}; showElement(this.addNameserversForm);
if (this.formChanged) { };
//------- Show the confirmation modal if (this.formChanged) {
let modalTrigger = document.querySelector("#unsaved_changes_trigger"); //------- Show the confirmation modal
if (modalTrigger) { let modalTrigger = document.querySelector("#unsaved_changes_trigger");
modalTrigger.click(); if (modalTrigger) {
modalTrigger.click();
}
} else {
this.executeCallback();
} }
} else { } else {
this.executeCallback(); // this indicates there are already 13 nameservers and we need to display an error message
console.warn("There are 13 nameservers");
} }
} }
@ -205,9 +210,9 @@ export class NameserverForm {
document.querySelectorAll('tr.edit-row:not(.display-none)').forEach(openEditRow => { document.querySelectorAll('tr.edit-row:not(.display-none)').forEach(openEditRow => {
this.resetEditRowAndFormAndCollapseEditRow(openEditRow); this.resetEditRowAndFormAndCollapseEditRow(openEditRow);
}); });
// Check if this.nameserversForm is visible (i.e., does not have 'display-none') // Check if this.addNameserversForm is visible (i.e., does not have 'display-none')
if (!this.nameserversForm.classList.contains('display-none')) { if (this.addNameserversForm && !this.addNameserversForm.classList.contains('display-none')) {
this.resetNameserversForm(); this.resetAddNameserversForm();
} }
// hide and show rows as appropriate // hide and show rows as appropriate
hideElement(readOnlyRow); hideElement(readOnlyRow);
@ -262,7 +267,7 @@ export class NameserverForm {
handleCancelAddFormClick(event) { handleCancelAddFormClick(event) {
this.resetNameserversForm(); this.resetAddNameserversForm();
} }
/** /**
@ -306,21 +311,19 @@ export class NameserverForm {
showElement(readOnlyRow); showElement(readOnlyRow);
} }
resetNameserversForm() { resetAddNameserversForm() {
if (!this.nameserversForm) { if (this.addNameserversForm) {
console.warn("Expected DOM element but did not find it"); // reset the values set in addNameserversForm
return; this.resetInputValuesInElement(this.addNameserversForm);
// remove errors from the addNameserversForm
this.removeErrorsFromElement(this.addNameserversForm);
// remove errors from the entire form
this.removeFormErrors();
// reset formChanged
this.resetFormChanged();
// hide the addNameserversForm
hideElement(this.addNameserversForm);
} }
// reset the values set in nameserversForm
this.resetInputValuesInElement(this.nameserversForm);
// remove errors from the nameserversForm
this.removeErrorsFromElement(this.nameserversForm);
// remove errors from the entire form
this.removeFormErrors();
// reset formChanged
this.resetFormChanged();
// hide the nameserversForm
hideElement(this.nameserversForm);
} }
resetInputValuesInElement(domElement) { resetInputValuesInElement(domElement) {

48
src/registrar/templates/domain_nameservers.html
View file

@ -38,7 +38,7 @@
</div> </div>
<div class="tablet:grid-col-6 text-right--tablet"> <div class="tablet:grid-col-6 text-right--tablet">
<button type="button" class="usa-button tablet:float-right" id="nameserver-add-form"> <button type="button" class="usa-button tablet:float-right" id="nameserver-add-button">
Add name servers Add name servers
</button> </button>
</div> </div>
@ -54,9 +54,9 @@
{% csrf_token %} {% csrf_token %}
{{ formset.management_form }} {{ formset.management_form }}
<section class="nameservers-form display-none section-outlined"> {% for form in formset %}
{% for form in formset %} {% if forloop.last and forloop.counter < 13 %}
{% if forloop.last %} <section class="add-nameservers-form display-none section-outlined">
{{ form.domain }} {{ form.domain }}
<h2>Add a name server</h2> <h2>Add a name server</h2>
<div class="repeatable-form"> <div class="repeatable-form">
@ -75,25 +75,23 @@
</div> </div>
</div> </div>
</div> </div>
<div class="margin-top-2">
{% endif %} <button
{% endfor %} type="button"
class="usa-button usa-button--outline nameserver-cancel-add-form"
<div class="margin-top-2"> name="btn-cancel-click"
<button aria-label="Reset the data in the name server form to the registry state (undo changes)"
type="button" >Cancel
class="usa-button usa-button--outline nameserver-cancel-add-form" </button>
name="btn-cancel-click" <button
aria-label="Reset the data in the name server form to the registry state (undo changes)" type="submit"
>Cancel class="usa-button"
</button> >Save
<button </button>
type="submit" </div>
class="usa-button" </section>
>Save {% endif %}
</button> {% endfor %}
</div>
</section>
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
@ -107,7 +105,7 @@
</thead> </thead>
<tbody> <tbody>
{% for form in formset %} {% for form in formset %}
{% if not forloop.last %} {% if forloop.counter == 13 or not forloop.last %}
{{ form.domain }} {{ form.domain }}
<!-- Readonly row --> <!-- Readonly row -->
<tr> <tr>
@ -213,7 +211,7 @@
{% endcomment %} {% endcomment %}
<section class="nameservers-form display-none section-outlined"> <section class="add-nameservers-form display-none section-outlined">
{% include "includes/required_fields.html" %} {% include "includes/required_fields.html" %}
<form class="usa-form usa-form--extra-large" method="post" novalidate> <form class="usa-form usa-form--extra-large" method="post" novalidate>
<h2>Add name servers</h2> <h2>Add name servers</h2>