Fixes #7034: Update VLAN Scope parent selectors and run change handler on load

This commit is contained in:
thatmattlove 2021-08-26 00:11:58 -07:00
parent 2fb1d388e3
commit 0d61dcb1bc

View File

@ -1,4 +1,4 @@
import { getElements } from '../util'; import { getElements, toggleVisibility } from '../util';
type ShowHideMap = { type ShowHideMap = {
default: { hide: string[]; show: string[] }; default: { hide: string[]; show: string[] };
@ -62,10 +62,13 @@ const showHideMap: ShowHideMap = {
*/ */
function toggleParentVisibility(query: string, action: 'show' | 'hide') { function toggleParentVisibility(query: string, action: 'show' | 'hide') {
for (const element of getElements(query)) { for (const element of getElements(query)) {
if (action === 'show') { const parent = element.parentElement?.parentElement as Nullable<HTMLDivElement>;
element.parentElement?.classList.remove('d-none', 'invisible'); if (parent !== null) {
} else { if (action === 'show') {
element.parentElement?.classList.add('d-none', 'invisible'); toggleVisibility(parent, 'show');
} else {
toggleVisibility(parent, 'hide');
}
} }
} }
} }
@ -73,8 +76,7 @@ function toggleParentVisibility(query: string, action: 'show' | 'hide') {
/** /**
* Handle changes to the Scope Type field. * Handle changes to the Scope Type field.
*/ */
function handleScopeChange(event: Event) { function handleScopeChange(element: HTMLSelectElement) {
const element = event.currentTarget as HTMLSelectElement;
// Scope type's innerText looks something like `DCIM > region`. // Scope type's innerText looks something like `DCIM > region`.
const scopeType = element.options[element.selectedIndex].innerText.toLowerCase(); const scopeType = element.options[element.selectedIndex].innerText.toLowerCase();
@ -104,6 +106,7 @@ function handleScopeChange(event: Event) {
*/ */
export function initScopeSelector(): void { export function initScopeSelector(): void {
for (const element of getElements<HTMLSelectElement>('#id_scope_type')) { for (const element of getElements<HTMLSelectElement>('#id_scope_type')) {
element.addEventListener('change', handleScopeChange); handleScopeChange(element);
element.addEventListener('change', () => handleScopeChange(element));
} }
} }