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

Simplify js

Browse source
This commit is contained in:
zandercymatics 2024-06-11 10:44:06 -06:00
parent c2b32aadc0
commit 4d3578a80c
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
1 changed files with 47 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -296,130 +296,70 @@ function initializeWidgetOnList(list, parentId) {
} }
/** An IIFE for admin in DjangoAdmin to listen to changes on the domain request /** An IIFE for admin in DjangoAdmin to listen to changes on the domain request
* status select and to show/hide fields like rejection reason or action needed reason * status select and to show/hide the rejection reason
*/ */
(function (){ (function (){
// Hides or shows a given field based off of the current value of the given status selector, let rejectionReasonFormGroup = document.querySelector('.field-rejection_reason')
// and stores its state in the session. let actionNeededReasonFormGroup = document.querySelector('.field-action_needed_reason');
function showHideFieldsOnStatusChange(elementToHide, statusToShowOn, sessionObjectName) {
if (elementToHide) {
let statusSelect = document.getElementById('id_status')
let shouldHide = statusSelect.value != statusToShowOn if (rejectionReasonFormGroup && actionNeededReasonFormGroup) {
// Initial handling of parentFormGroup display let statusSelect = document.getElementById('id_status')
hideOrShowDomObject(elementToHide, hideObject=shouldHide) let isRejected = statusSelect.value == "rejected"
let isActionNeeded = statusSelect.value == "action needed"
// Initial handling of rejectionReasonFormGroup display
showOrHideObject(rejectionReasonFormGroup, show=isRejected)
showOrHideObject(actionNeededReasonFormGroup, show=isActionNeeded)
// Listen to change events and handle rejectionReasonFormGroup display, then save status to session storage // Listen to change events and handle rejectionReasonFormGroup display, then save status to session storage
statusSelect.addEventListener('change', function() { statusSelect.addEventListener('change', function() {
// Hide the object only if we're in an invalid state // Show the rejection reason field if the status is rejected.
shouldHide = statusSelect.value != statusToShowOn // Then track if its shown or hidden in our session cache.
isRejected = statusSelect.value == "rejected"
showOrHideObject(rejectionReasonFormGroup, show=isRejected)
addOrRemoveSessionBoolean("showRejectionReason", add=isRejected)
// Hide the action needed field if we're on a different status type isActionNeeded = statusSelect.value == "action needed"
hideOrShowDomObject(elementToHide, hideObject=shouldHide) showOrHideObject(actionNeededReasonFormGroup, show=isActionNeeded)
addOrRemoveSessionBoolean("showActionNeededReason", add=isActionNeeded)
// Add a key to our session storage to track if we should hide the object automatically
// (to catch the edge case where you click the back button)
if (!shouldHide){
sessionStorage.removeItem(sessionObjectName);
}else {
sessionStorage.setItem(sessionObjectName, 'true');
}
}); });
}
}
// Adds or removes the display-none class to object depending on the value of boolean hideObject
function hideOrShowDomObject(object, hideObject){
if (object){
if (hideObject){
object.classList.add("display-none");
}else {
object.classList.remove("display-none");
}
}
}
// Listen to Back/Forward button navigation and handle rejectionReasonFormGroup display based on session storage // Listen to Back/Forward button navigation and handle rejectionReasonFormGroup display based on session storage
// When you navigate using forward/back after changing status but not saving, when you land back on the DA page the // When you navigate using forward/back after changing status but not saving, when you land back on the DA page the
// status select will say (for example) Rejected but the selected option can be something else. To manage the show/hide // status select will say (for example) Rejected but the selected option can be something else. To manage the show/hide
// accurately for this edge case, we use cache and test for the back/forward navigation. // accurately for this edge case, we use cache and test for the back/forward navigation.
function handleBackButtonObserver(fieldsToObserve) {
const observer = new PerformanceObserver((list) => { const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => { list.getEntries().forEach((entry) => {
// This currently only handles the navigation buttons
if (entry.type === "back_forward") { if (entry.type === "back_forward") {
// For each field we specify... let showRejectionReason = sessionStorage.getItem("showRejectionReason") !== null
fieldsToObserve.forEach((fieldName) => { showOrHideObject(rejectionReasonFormGroup, show=showRejectionReason)
fieldClass = `.field-${fieldName}`
field = document.querySelector(fieldClass) let hideActionNeededReason = sessionStorage.getItem("showActionNeededReason") !== null
// ...Grab its related session object to determine if it should be visible or not showOrHideObject(actionNeededReasonFormGroup, show=hideActionNeededReason)
if (field) {
shouldHideField = sessionStorage.getItem(`hide_${fieldName}`)
hideOrShowDomObject(field, hideObject=shouldHideField)
}else {
console.error(`Could not find field with class ${fieldClass}`)
}
});
} }
}); });
}); });
observer.observe({ type: "navigation" }); observer.observe({ type: "navigation" });
} }
// Links the given field we want to show/hide with a given value of the status selector, // Adds or removes the display-none class to object depending on the value of boolean show
// and maintains this state with a given session object. function showOrHideObject(object, show){
// For now, we assume that the session object follows this pattern: `hide_${field_name}` if (show){
function handleStatusChanges() { object.classList.remove("display-none");
// Show/hide the rejection reason }else {
let rejectionReasonFormGroup = document.querySelector('.field-rejection_reason') object.classList.add("display-none");
// element to hide, statusToShowOn, sessionObjectName
showHideFieldsOnStatusChange(rejectionReasonFormGroup, "rejected", "hide_rejection_reason");
// Show/hide the action needed reason
let actionNeededReasonFormGroup = document.querySelector('.field-action_needed_reason');
// element to hide, statusToShowOn, sessionObjectName
showHideFieldsOnStatusChange(actionNeededReasonFormGroup, "action needed", "hide_action_needed_reason");
// Move the status changelog to below the action needed reason
if(actionNeededReasonFormGroup){
document.addEventListener('DOMContentLoaded', function() {
let statusSelect = document.getElementById('id_status');
function moveStatusChangelog(actionNeededReasonFormGroup, statusSelect) {
let flexContainer = actionNeededReasonFormGroup.querySelector('.flex-container');
let statusChangelog = document.getElementById('dja-status-changelog');
if (statusSelect.value === "action needed") {
flexContainer.parentNode.insertBefore(statusChangelog, flexContainer.nextSibling);
} else {
// Move the changelog back to its original location
let statusFlexContainer = statusSelect.closest('.flex-container');
statusFlexContainer.parentNode.insertBefore(statusChangelog, statusFlexContainer.nextSibling);
} }
} }
// Call the function on page load // Adds or removes a boolean from our session
moveStatusChangelog(actionNeededReasonFormGroup, statusSelect); function addOrRemoveSessionBoolean(name, add){
if (add) {
// Add event listener to handle changes to the selector itself sessionStorage.setItem(name, "true");
statusSelect.addEventListener('change', function() { }else {
moveStatusChangelog(actionNeededReasonFormGroup, statusSelect); sessionStorage.removeItem(name);
})
});
} }
} }
// Hookup the fields that we want to programatically show/hide depending on the current value of the status field.
// Add your field name to this function if you are adding another dynamic field.
handleStatusChanges();
// Add an observer to each field to track when the back button is pressed. This is so
// our current state doesn't get wiped by browser events.
// Add a field name to this array if you are adding another dynamic field.
let fieldsToObserve = ["rejection_reason", "action_needed_reason"]
handleBackButtonObserver(fieldsToObserve);
})(); })();
/** An IIFE for toggling the submit bar on domain request forms /** An IIFE for toggling the submit bar on domain request forms