Initial logic

Generalize our javascript handler for the hide rejection reason field
This commit is contained in:
zandercymatics 2024-05-31 15:19:28 -06:00
parent daeabaf833
commit c772c71707
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
2 changed files with 68 additions and 26 deletions

View file

@ -1584,6 +1584,8 @@ class DomainRequestAdmin(ListHeaderAdmin, ImportExportModelAdmin):
# The opposite of this condition is acceptable (rejected -> other status and rejection_reason)
# because we clean up the rejection reason in the transition in the model.
error_message = FSMDomainRequestError.get_error_message(FSMErrorCodes.NO_REJECTION_REASON)
elif obj.status == models.DomainRequest.DomainRequestStatus.ACTION_NEEDED and not obj.action_needed_reason:
error_message = FSMDomainRequestError.get_error_message(FSMErrorCodes.NO_ACTION_NEEDED_REASON)
else:
# This is an fsm in model which will throw an error if the
# transition condition is violated, so we roll back the

View file

@ -296,46 +296,86 @@ function initializeWidgetOnList(list, parentId) {
}
/** An IIFE for admin in DjangoAdmin to listen to changes on the domain request
* status select and to show/hide the rejection reason
* status select and to show/hide fields like rejection reason or action needed reason
*/
(function (){
let rejectionReasonFormGroup = document.querySelector('.field-rejection_reason')
if (rejectionReasonFormGroup) {
// Hides or shows a given field based off of the current value of the given status selector,
// and stores its state in the session.
function showHideFieldsOnStatusChange(elementToHide, statusToShowOn, sessionObjectName) {
if (elementToHide) {
let statusSelect = document.getElementById('id_status')
// Initial handling of rejectionReasonFormGroup display
if (statusSelect.value != 'rejected')
rejectionReasonFormGroup.style.display = 'none';
let shouldHide = statusSelect.value != statusToShowOn
// Initial handling of parentFormGroup display
hideOrShowDomObject(elementToHide, hideObject=shouldHide)
// Listen to change events and handle rejectionReasonFormGroup display, then save status to session storage
statusSelect.addEventListener('change', function() {
if (statusSelect.value == 'rejected') {
rejectionReasonFormGroup.style.display = 'block';
sessionStorage.removeItem('hideRejectionReason');
// Hide the object only if we're in an invalid state
shouldHide = statusSelect.value != statusToShowOn
// Hide the action needed field if we're on a different status type
hideOrShowDomObject(elementToHide, hideObject=shouldHide)
// 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 {
rejectionReasonFormGroup.style.display = 'none';
sessionStorage.setItem('hideRejectionReason', 'true');
sessionStorage.setItem(sessionObjectName, 'true');
}
});
}
}
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
// 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
// accurately for this edge case, we use cache and test for the back/forward navigation.
function handleBackButtonObserver(fieldsToObserve) {
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.type === "back_forward") {
if (sessionStorage.getItem('hideRejectionReason'))
document.querySelector('.field-rejection_reason').style.display = 'none';
else
document.querySelector('.field-rejection_reason').style.display = 'block';
fieldsToObserve.forEach((fieldName) => {
fieldClass = `.field-${fieldName}`
field = document.querySelector(fieldClass)
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" });
}
function handleStatusChanges() {
// Show/hide the rejection reason
let rejectionReasonFormGroup = document.querySelector('.field-rejection_reason')
showHideFieldsOnStatusChange(rejectionReasonFormGroup, "rejected", "hide_rejection_reason");
// Show/hude the action needed reason
let actionNeededReasonFormGroup = document.querySelector('.field-action_needed_reason');
showHideFieldsOnStatusChange(actionNeededReasonFormGroup, "action_needed", "hide_action_needed_reason");
}
handleStatusChanges();
fieldsToObserve = ["rejection_reason", "action_needed_reason"]
handleBackButtonObserver(fieldsToObserve);
})();
/** An IIFE for toggling the submit bar on domain request forms