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

fix bug with add/delete js related to number of forms update

Browse source
This commit is contained in:
Rachid Mrad 2023-10-04 17:18:45 -04:00
parent 41ce73ff4b
commit 99ce0c3e86
No known key found for this signature in database
GPG key ID: EF38E4CEC4A8F3CF
1 changed files with 61 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/registrar/assets/js/get-gov.js
View file

@ -237,48 +237,56 @@ function handleValidationClick(e) {
* it everywhere. * it everywhere.
*/ */
(function prepareNameserverForms() { (function prepareNameserverForms() {
let serverForm = document.querySelectorAll(".server-form") let serverForm = document.querySelectorAll(".server-form");
let container = document.querySelector("#form-container") let container = document.querySelector("#form-container");
let addButton = document.querySelector("#add-nameserver-form") let addButton = document.querySelector("#add-nameserver-form");
let totalForms = document.querySelector("#id_form-TOTAL_FORMS") let totalForms = document.querySelector("#id_form-TOTAL_FORMS");
let formNum = serverForm.length-1 let formNum = serverForm.length-1;
if (addButton) if (addButton)
addButton.addEventListener('click', addForm) addButton.addEventListener('click', addForm);
function addForm(e){ function addForm(e){
let newForm = serverForm[2].cloneNode(true) let newForm = serverForm[2].cloneNode(true);
let formNumberRegex = RegExp(`form-(\\d){1}-`,'g') let formNumberRegex = RegExp(`form-(\\d){1}-`,'g');
let formLabelRegex = RegExp(`Name server (\\d){1}`, 'g') let formLabelRegex = RegExp(`Name server (\\d){1}`, 'g');
let formExampleRegex = RegExp(`ns(\\d){1}`, 'g') let formExampleRegex = RegExp(`ns(\\d){1}`, 'g');
formNum++ formNum++;
newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `form-${formNum}-`) newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `form-${formNum}-`);
newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `Name server ${formNum+1}`) newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `Name server ${formNum+1}`);
newForm.innerHTML = newForm.innerHTML.replace(formExampleRegex, `ns${formNum+1}`) newForm.innerHTML = newForm.innerHTML.replace(formExampleRegex, `ns${formNum+1}`);
container.insertBefore(newForm, addButton) container.insertBefore(newForm, addButton);
newForm.querySelector("input").value = "" newForm.querySelector("input").value = "";
totalForms.setAttribute('value', `${formNum+1}`) totalForms.setAttribute('value', `${formNum+1}`);
} }
})(); })();
function prepareDeleteButtons() { function prepareDeleteButtons() {
let serverForm2 = document.querySelectorAll(".ds-record") let deleteButtons = document.querySelectorAll(".delete-record");
let deleteButtons = document.querySelectorAll(".delete-record") let totalForms = document.querySelector("#id_form-TOTAL_FORMS");
let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
let formNum = serverForm2.length-1
// Loop through each delete button and attach the click event listener // Loop through each delete button and attach the click event listener
deleteButtons.forEach((deleteButton) => { deleteButtons.forEach((deleteButton) => {
deleteButton.addEventListener('click', removeForm); deleteButton.addEventListener('click', removeForm);
}); });
function removeForm(e){ function removeForm(e){
let formToRemove = e.target.closest(".ds-record") let formToRemove = e.target.closest(".ds-record");
formToRemove.remove() formToRemove.remove();
formNum-- let forms = document.querySelectorAll(".ds-record");
totalForms.setAttribute('value', `${formNum+1}`) let formNum2 = forms.length;
totalForms.setAttribute('value', `${formNum2}`);
// We need to fix the indicies of every existing form otherwise
// the frontend and backend will not match and will error on submit
// let formNumberRegex = RegExp(`form-(\\d){1}-`,'g');
// let formLabelRegex = RegExp(`DS Data record (\\d){1}`, 'g');
// forms.forEach((form, index) => {
// form.innerHTML = form.innerHTML.replace(formNumberRegex, `form-${index}-`);
// form.innerHTML = form.innerHTML.replace(formLabelRegex, `DS Data Record ${index+1}`);
// });
} }
} }
@ -287,27 +295,29 @@ function prepareDeleteButtons() {
* *
*/ */
(function prepareDNSSECForms() { (function prepareDNSSECForms() {
let serverForm = document.querySelectorAll(".ds-record") let serverForm = document.querySelectorAll(".ds-record");
let container = document.querySelector("#form-container") let container = document.querySelector("#form-container");
let addButton = document.querySelector("#add-ds-form") let addButton = document.querySelector("#add-ds-form");
let totalForms = document.querySelector("#id_form-TOTAL_FORMS") let totalForms = document.querySelector("#id_form-TOTAL_FORMS");
prepareDeleteButtons() // Attach click event listener on the delete buttons of the existing forms
prepareDeleteButtons();
let formNum = serverForm.length-1
if (addButton) { if (addButton) {
addButton.addEventListener('click', addForm) addButton.addEventListener('click', addForm);
} }
function addForm(e){ function addForm(e){
let newForm = serverForm[0].cloneNode(true) let forms = document.querySelectorAll(".ds-record");
let formNumberRegex = RegExp(`form-(\\d){1}-`,'g') let formNum = forms.length;
let formLabelRegex = RegExp(`DS Data record (\\d){1}`, 'g') let newForm = serverForm[0].cloneNode(true);
let formNumberRegex = RegExp(`form-(\\d){1}-`,'g');
let formLabelRegex = RegExp(`DS Data record (\\d){1}`, 'g');
formNum++ formNum++;
newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `form-${formNum}-`) newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `form-${formNum-1}-`);
newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `DS Data Record ${formNum+1}`) newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `DS Data Record ${formNum}`);
container.insertBefore(newForm, addButton) container.insertBefore(newForm, addButton);
let inputs = newForm.querySelectorAll("input"); let inputs = newForm.querySelectorAll("input");
// Reset the values of each input to blank // Reset the values of each input to blank
@ -321,6 +331,7 @@ function prepareDeleteButtons() {
} }
}); });
// Reset any existing validation classes
let selects = newForm.querySelectorAll("select"); let selects = newForm.querySelectorAll("select");
selects.forEach((select) => { selects.forEach((select) => {
select.classList.remove("usa-input--error"); select.classList.remove("usa-input--error");
@ -337,6 +348,7 @@ function prepareDeleteButtons() {
usaFormGroup.classList.remove("usa-form-group--error"); usaFormGroup.classList.remove("usa-form-group--error");
}); });
// Remove any existing error messages
let usaErrorMessages = newForm.querySelectorAll(".usa-error-message"); let usaErrorMessages = newForm.querySelectorAll(".usa-error-message");
usaErrorMessages.forEach((usaErrorMessage) => { usaErrorMessages.forEach((usaErrorMessage) => {
let parentDiv = usaErrorMessage.closest('div'); let parentDiv = usaErrorMessage.closest('div');
@ -345,9 +357,17 @@ function prepareDeleteButtons() {
} }
}); });
totalForms.setAttribute('value', `${formNum+1}`) totalForms.setAttribute('value', `${formNum}`);
prepareDeleteButtons() // Attach click event listener on the delete buttons of the new form
prepareDeleteButtons();
// We need to fix the indicies of every existing form otherwise
// the frontend and backend will not match and will error on submit
// forms.forEach((form, index) => {
// form.innerHTML = form.innerHTML.replace(formNumberRegex, `form-${index}-`);
// form.innerHTML = form.innerHTML.replace(formLabelRegex, `DS Data Record ${index+1}`);
// });
} }
})(); })();