Merge pull request #7050 from netbox-community/7034-vlangroup-scope-selectors

Fixes #7034: Update VLAN Scope parent selectors and run change handler on load
This commit is contained in:
Jeremy Stretch 2021-08-27 11:42:23 -04:00 committed by GitHub
commit 1a478150d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 8 deletions

View File

@ -14,6 +14,7 @@
* [#6982](https://github.com/netbox-community/netbox/issues/6982) - Fix styling of empty dropdown list under dark mode * [#6982](https://github.com/netbox-community/netbox/issues/6982) - Fix styling of empty dropdown list under dark mode
* [#6996](https://github.com/netbox-community/netbox/issues/6996) - Global search bar should be full width on mobile * [#6996](https://github.com/netbox-community/netbox/issues/6996) - Global search bar should be full width on mobile
* [#7001](https://github.com/netbox-community/netbox/issues/7001) - Fix page focus on load * [#7001](https://github.com/netbox-community/netbox/issues/7001) - Fix page focus on load
* [#7034](https://github.com/netbox-community/netbox/issues/7034) - Fix toggling of VLAN group scope selector fields
--- ---

Binary file not shown.

Binary file not shown.

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)) {
const parent = element.parentElement?.parentElement as Nullable<HTMLDivElement>;
if (parent !== null) {
if (action === 'show') { if (action === 'show') {
element.parentElement?.classList.remove('d-none', 'invisible'); toggleVisibility(parent, 'show');
} else { } else {
element.parentElement?.classList.add('d-none', 'invisible'); 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));
} }
} }