zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-25 10:33:50 +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

51
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,17 +169,18 @@ export class NameserverForm {
} }
handleAddFormClick(event) { handleAddFormClick(event) {
if (this.addNameserversForm) {
this.callback = () => { this.callback = () => {
// Check if any other edit row is currently visible and hide it // Check if any other edit row is currently visible and hide it
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.classList.contains('display-none')) {
this.resetNameserversForm(); this.resetAddNameserversForm();
} }
// show nameservers form // show nameservers form
showElement(this.nameserversForm); showElement(this.addNameserversForm);
}; };
if (this.formChanged) { if (this.formChanged) {
//------- Show the confirmation modal //------- Show the confirmation modal
@ -190,6 +191,10 @@ export class NameserverForm {
} else { } else {
this.executeCallback(); this.executeCallback();
} }
} else {
// this indicates there are already 13 nameservers and we need to display an error message
console.warn("There are 13 nameservers");
}
} }
handleEditClick(event) { handleEditClick(event) {
@ -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
// reset the values set in nameserversForm this.removeErrorsFromElement(this.addNameserversForm);
this.resetInputValuesInElement(this.nameserversForm);
// remove errors from the nameserversForm
this.removeErrorsFromElement(this.nameserversForm);
// remove errors from the entire form // remove errors from the entire form
this.removeFormErrors(); this.removeFormErrors();
// reset formChanged // reset formChanged
this.resetFormChanged(); this.resetFormChanged();
// hide the nameserversForm // hide the addNameserversForm
hideElement(this.nameserversForm); hideElement(this.addNameserversForm);
}
} }
resetInputValuesInElement(domElement) { resetInputValuesInElement(domElement) {

16
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 %} {% if forloop.last and forloop.counter < 13 %}
<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,10 +75,6 @@
</div> </div>
</div> </div>
</div> </div>
{% endif %}
{% endfor %}
<div class="margin-top-2"> <div class="margin-top-2">
<button <button
type="button" type="button"
@ -94,6 +90,8 @@
</button> </button>
</div> </div>
</section> </section>
{% endif %}
{% endfor %}
<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>