diff --git a/netbox/project-static/src/forms/filterModifiers.ts b/netbox/project-static/src/forms/filterModifiers.ts index 8a7f455dd..8926a00b7 100644 --- a/netbox/project-static/src/forms/filterModifiers.ts +++ b/netbox/project-static/src/forms/filterModifiers.ts @@ -13,31 +13,23 @@ const MODIFIER_EMPTY_FALSE = 'empty_false'; */ export function initFilterModifiers(): void { for (const form of getElements('form')) { - // Only process forms with modifier selects const modifierSelects = form.querySelectorAll('.modifier-select'); if (modifierSelects.length === 0) continue; - // Initialize form state from URL parameters initializeFromURL(form); - // Add change listeners to modifier dropdowns to handle isnull modifierSelects.forEach(select => { select.addEventListener('change', () => handleModifierChange(select)); - // Trigger initial state handleModifierChange(select); }); - // Handle form submission - must use submit event for GET forms + // Must use submit event for GET forms form.addEventListener('submit', e => { e.preventDefault(); - // Build FormData to get all form values const formData = new FormData(form); - - // Transform field names handleFormDataTransform(form, formData); - // Build URL with transformed parameters const params = new URLSearchParams(); for (const [key, value] of formData.entries()) { if (value && String(value).trim()) { @@ -45,7 +37,6 @@ export function initFilterModifiers(): void { } } - // Navigate to new URL window.location.href = `${form.action}?${params.toString()}`; }); } @@ -69,11 +60,9 @@ function handleModifierChange(modifierSelect: HTMLSelectElement): void { const modifier = modifierSelect.value; - // Disable and add placeholder for empty modifiers if (modifier === MODIFIER_EMPTY_TRUE || modifier === MODIFIER_EMPTY_FALSE) { valueInput.disabled = true; valueInput.value = ''; - // Get translatable placeholder from modifier dropdown's data attribute const placeholder = modifierSelect.dataset.emptyPlaceholder || '(automatically set)'; valueInput.setAttribute('placeholder', placeholder); } else { @@ -90,7 +79,6 @@ function handleFormDataTransform(form: HTMLFormElement, formData: FormData): voi for (const group of modifierGroups) { const modifierSelect = group.querySelector('.modifier-select'); - // Find input in the wrapper div (more specific selector) const wrapper = group.querySelector('.filter-value-container'); if (!wrapper) continue; @@ -103,20 +91,17 @@ function handleFormDataTransform(form: HTMLFormElement, formData: FormData): voi const currentName = valueInput.name; const modifier = modifierSelect.value; - // Handle empty special case if (modifier === MODIFIER_EMPTY_TRUE || modifier === MODIFIER_EMPTY_FALSE) { formData.delete(currentName); const boolValue = modifier === MODIFIER_EMPTY_TRUE ? 'true' : 'false'; formData.set(`${currentName}__empty`, boolValue); } else { - // Get all values (handles multi-select) const values = formData.getAll(currentName); if (values.length > 0 && values.some(v => String(v).trim())) { formData.delete(currentName); const newName = modifier === 'exact' ? currentName : `${currentName}__${modifier}`; - // Set all values with the new name for (const value of values) { if (String(value).trim()) { formData.append(newName, value); @@ -142,12 +127,10 @@ function handleFormDataTransform(form: HTMLFormElement, formData: FormData): voi function initializeFromURL(form: HTMLFormElement): void { const urlParams = new URLSearchParams(window.location.search); - // Find all modifier groups const modifierGroups = form.querySelectorAll('.filter-modifier-group'); for (const group of modifierGroups) { const modifierSelect = group.querySelector('.modifier-select'); - // Find input in the wrapper div (more specific selector) const wrapper = group.querySelector('.filter-value-container'); if (!wrapper) continue; @@ -157,7 +140,7 @@ function initializeFromURL(form: HTMLFormElement): void { if (!modifierSelect || !valueInput) continue; - const baseFieldName = valueInput.name; // e.g., "serial" + const baseFieldName = valueInput.name; // Special handling for empty - check if field__empty exists in URL const emptyParam = `${baseFieldName}__empty`; @@ -168,7 +151,6 @@ function initializeFromURL(form: HTMLFormElement): void { continue; // Don't set value input for empty } - // Check each possible lookup in URL for (const option of modifierSelect.options) { const lookup = option.value; @@ -180,15 +162,12 @@ function initializeFromURL(form: HTMLFormElement): void { if (urlParams.has(paramName)) { modifierSelect.value = lookup; - // Handle multi-select vs single-value inputs if (valueInput instanceof HTMLSelectElement && valueInput.multiple) { - // For multi-select, set selected on matching options const values = urlParams.getAll(paramName); for (const option of valueInput.options) { option.selected = values.includes(option.value); } } else { - // For single-value inputs, set value directly valueInput.value = urlParams.get(paramName) || ''; } break;