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

edit, cancel and delete interactions

Browse source
This commit is contained in:
David Kennedy 2025-02-25 22:20:26 -05:00
parent a527bd736a
commit 9d22f9f64a
No known key found for this signature in database
GPG key ID: 6528A5386E66B96B
2 changed files with 80 additions and 28 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

@ -13,6 +13,7 @@ export class NameserverForm {
this.handleDeleteClick = this.handleDeleteClick.bind(this); this.handleDeleteClick = this.handleDeleteClick.bind(this);
this.handleDeleteKebabClick = this.handleDeleteKebabClick.bind(this); this.handleDeleteKebabClick = this.handleDeleteKebabClick.bind(this);
this.handleCancelClick = this.handleCancelClick.bind(this); this.handleCancelClick = this.handleCancelClick.bind(this);
this.handleCancelAddFormClick = this.handleCancelAddFormClick.bind(this);
} }
init() { init() {
@ -30,7 +31,12 @@ export class NameserverForm {
if (secondNameserver && !thirdNameserver && errorMessages.length > 0) { if (secondNameserver && !thirdNameserver && errorMessages.length > 0) {
showElement(this.nameserversForm); showElement(this.nameserversForm);
hideElement(this.addNameserverButton); this.formChanged = true;
}
if (this.nameserversForm.querySelector('.usa-input--error')) {
showElement(this.nameserversForm);
this.formChanged = true;
} }
// handle display of table view errors // handle display of table view errors
@ -62,6 +68,11 @@ export class NameserverForm {
cancelButton.addEventListener('click', this.handleCancelClick); cancelButton.addEventListener('click', this.handleCancelClick);
}); });
const cancelAddFormButtons = document.querySelectorAll('.nameserver-cancel-add-form');
cancelAddFormButtons.forEach(cancelAddFormButton => {
cancelAddFormButton.addEventListener('click', this.handleCancelAddFormClick);
});
const deleteButtons = document.querySelectorAll('.nameserver-delete'); const deleteButtons = document.querySelectorAll('.nameserver-delete');
deleteButtons.forEach(deleteButton => { deleteButtons.forEach(deleteButton => {
deleteButton.addEventListener('click', this.handleDeleteClick); deleteButton.addEventListener('click', this.handleDeleteClick);
@ -111,8 +122,27 @@ export class NameserverForm {
} }
handleAddFormClick(event) { handleAddFormClick(event) {
showElement(this.nameserversForm); this.callback = () => {
hideElement(this.addNameserverButton); // Check if any other edit row is currently visible and hide it
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')) {
this.resetNameserversForm();
}
// show nameservers form
showElement(this.nameserversForm);
};
if (this.formChanged) {
//------- Show the confirmation modal
let modalTrigger = document.querySelector("#unsaved_changes_trigger");
if (modalTrigger) {
modalTrigger.click();
}
} else {
this.executeCallback();
}
} }
handleEditClick(event) { handleEditClick(event) {
@ -128,6 +158,10 @@ 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')
if (!this.nameserversForm.classList.contains('display-none')) {
this.resetNameserversForm();
}
// hide and show rows as appropriate // hide and show rows as appropriate
hideElement(readOnlyRow); hideElement(readOnlyRow);
showElement(editRow); showElement(editRow);
@ -180,6 +214,10 @@ export class NameserverForm {
} }
handleCancelAddFormClick(event) {
this.resetNameserversForm();
}
/** /**
* Handles the click event for the cancel button within the table form. * Handles the click event for the cancel button within the table form.
* *
@ -207,11 +245,11 @@ export class NameserverForm {
return; return;
} }
// reset the values set in editRow // reset the values set in editRow
this.resetInputValuesInRow(editRow); this.resetInputValuesInElement(editRow);
// copy values from editRow to readOnlyRow // copy values from editRow to readOnlyRow
this.copyEditRowToReadonlyRow(editRow, readOnlyRow); this.copyEditRowToReadonlyRow(editRow, readOnlyRow);
// remove errors from the editRow // remove errors from the editRow
this.removeErrorsFromRow(editRow); this.removeErrorsFromElement(editRow);
// remove errors from the entire form // remove errors from the entire form
this.removeFormErrors(); this.removeFormErrors();
// reset formChanged // reset formChanged
@ -221,8 +259,25 @@ export class NameserverForm {
showElement(readOnlyRow); showElement(readOnlyRow);
} }
resetInputValuesInRow(editRow) { resetNameserversForm() {
let textInputs = editRow.querySelectorAll("input[type='text']"); if (!this.nameserversForm) {
console.warn("Expected DOM element but did not find it");
return;
}
// 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) {
let textInputs = domElement.querySelectorAll("input[type='text']");
textInputs.forEach(input => { textInputs.forEach(input => {
input.value = input.dataset.initialValue; input.value = input.dataset.initialValue;
}) })
@ -243,24 +298,24 @@ export class NameserverForm {
} }
} }
removeErrorsFromRow(editRow) { removeErrorsFromElement(domElement) {
// remove class 'usa-form-group--error' from divs in editRow // remove class 'usa-form-group--error' from divs in domElement
editRow.querySelectorAll("div.usa-form-group--error").forEach(div => { domElement.querySelectorAll("div.usa-form-group--error").forEach(div => {
div.classList.remove("usa-form-group--error"); div.classList.remove("usa-form-group--error");
}); });
// remove class 'usa-label--error' from labels in editRow // remove class 'usa-label--error' from labels in domElement
editRow.querySelectorAll("label.usa-label--error").forEach(label => { domElement.querySelectorAll("label.usa-label--error").forEach(label => {
label.classList.remove("usa-label--error"); label.classList.remove("usa-label--error");
}); });
// Remove divs whose id ends with '__error-message' (error message divs) // Remove divs whose id ends with '__error-message' (error message divs)
editRow.querySelectorAll("div[id$='__error-message']").forEach(errorDiv => { domElement.querySelectorAll("div[id$='__error-message']").forEach(errorDiv => {
errorDiv.remove(); errorDiv.remove();
}); });
// remove class 'usa-input--error' from inputs in editRow // remove class 'usa-input--error' from inputs in domElement
editRow.querySelectorAll("input.usa-input--error").forEach(input => { domElement.querySelectorAll("input.usa-input--error").forEach(input => {
input.classList.remove("usa-input--error"); input.classList.remove("usa-input--error");
}); });
} }

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

@ -80,11 +80,11 @@
<div class="margin-top-2"> <div class="margin-top-2">
<button <button
type="submit" type="button"
class="usa-button usa-button--outline" class="usa-button usa-button--outline nameserver-cancel-add-form"
name="btn-cancel-click" name="btn-cancel-click"
aria-label="Reset the data in the name server form to the registry state (undo changes)" aria-label="Reset the data in the name server form to the registry state (undo changes)"
>Cancel >Cancel
</button> </button>
<button <button
type="submit" type="submit"
@ -178,7 +178,6 @@
<td> <td>
<button class="usa-button usa-button--unstyled display-block margin-top-1" type="submit">Save</button> <button class="usa-button usa-button--unstyled display-block margin-top-1" type="submit">Save</button>
<!-- TODO: cancel buttons should trigger JS, submit cancel buttons should be nested in modal -->
<button <button
type="button" type="button"
class="usa-button usa-button--unstyled display-block nameserver-cancel" class="usa-button usa-button--unstyled display-block nameserver-cancel"
@ -244,16 +243,14 @@
</div> </div>
{% endfor %} {% endfor %}
<!-- TODO: cancel buttons should trigger JS, submit cancel buttons should be nested in modal -->
<div class="margin-top-2"> <div class="margin-top-2">
<button <button
type="submit" type="button"
class="usa-button usa-button--outline" class="usa-button usa-button--outline nameserver-cancel-add-form"
name="btn-cancel-click" name="btn-cancel-click"
aria-label="Reset the data in the name server form to the registry state (undo changes)" aria-label="Reset the data in the name server form to the registry state (undo changes)"
>Cancel >Cancel
</button> </button>
<button <button
type="submit" type="submit"
class="usa-button" class="usa-button"