diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index c64df2e26..ae313c9db 100644 Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index c9deea0b1..e8cf6139c 100644 Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ diff --git a/netbox/project-static/src/forms/scopeSelector.ts b/netbox/project-static/src/forms/scopeSelector.ts index 58163bb19..e1c7014bf 100644 --- a/netbox/project-static/src/forms/scopeSelector.ts +++ b/netbox/project-static/src/forms/scopeSelector.ts @@ -1,8 +1,21 @@ import { getElements, toggleVisibility } from '../util'; type ShowHideMap = { - default: { hide: string[]; show: string[] }; - [k: string]: { hide: string[]; show: string[] }; + /** + * Name of view to which this map should apply. + * + * @example vlangroup_edit + */ + [view: string]: { + /** + * Default layout. + */ + default: { hide: string[]; show: string[] }; + /** + * Field name to layout mapping. + */ + [fieldName: string]: { hide: string[]; show: string[] }; + }; }; /** @@ -14,45 +27,47 @@ type ShowHideMap = { * showHideMap.region.show should be shown. */ const showHideMap: ShowHideMap = { - region: { - hide: ['id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'], - show: ['id_region'], - }, - 'site group': { - hide: ['id_region', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'], - show: ['id_sitegroup'], - }, - site: { - hide: ['id_location', 'id_rack', 'id_clustergroup', 'id_cluster'], - show: ['id_region', 'id_sitegroup', 'id_site'], - }, - location: { - hide: ['id_rack', 'id_clustergroup', 'id_cluster'], - show: ['id_region', 'id_sitegroup', 'id_site', 'id_location'], - }, - rack: { - hide: ['id_clustergroup', 'id_cluster'], - show: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'], - }, - 'cluster group': { - hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_cluster'], - show: ['id_clustergroup'], - }, - cluster: { - hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'], - show: ['id_clustergroup', 'id_cluster'], - }, - default: { - hide: [ - 'id_region', - 'id_sitegroup', - 'id_site', - 'id_location', - 'id_rack', - 'id_clustergroup', - 'id_cluster', - ], - show: [], + vlangroup_edit: { + region: { + hide: ['id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'], + show: ['id_region'], + }, + 'site group': { + hide: ['id_region', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'], + show: ['id_sitegroup'], + }, + site: { + hide: ['id_location', 'id_rack', 'id_clustergroup', 'id_cluster'], + show: ['id_region', 'id_sitegroup', 'id_site'], + }, + location: { + hide: ['id_rack', 'id_clustergroup', 'id_cluster'], + show: ['id_region', 'id_sitegroup', 'id_site', 'id_location'], + }, + rack: { + hide: ['id_clustergroup', 'id_cluster'], + show: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'], + }, + 'cluster group': { + hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_cluster'], + show: ['id_clustergroup'], + }, + cluster: { + hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'], + show: ['id_clustergroup', 'id_cluster'], + }, + default: { + hide: [ + 'id_region', + 'id_sitegroup', + 'id_site', + 'id_location', + 'id_rack', + 'id_clustergroup', + 'id_cluster', + ], + show: [], + }, }, }; /** @@ -76,11 +91,11 @@ function toggleParentVisibility(query: string, action: 'show' | 'hide') { /** * Handle changes to the Scope Type field. */ -function handleScopeChange(element: HTMLSelectElement) { +function handleScopeChange

(view: P, element: HTMLSelectElement) { // Scope type's innerText looks something like `DCIM > region`. const scopeType = element.options[element.selectedIndex].innerText.toLowerCase(); - for (const [scope, fields] of Object.entries(showHideMap)) { + for (const [scope, fields] of Object.entries(showHideMap[view])) { // If the scope type ends with the specified scope, toggle its field visibility according to // the show/hide values. if (scopeType.endsWith(scope)) { @@ -94,7 +109,7 @@ function handleScopeChange(element: HTMLSelectElement) { break; } else { // Otherwise, hide all fields. - for (const field of showHideMap.default.hide) { + for (const field of showHideMap[view].default.hide) { toggleParentVisibility(`#${field}`, 'hide'); } } @@ -105,8 +120,12 @@ function handleScopeChange(element: HTMLSelectElement) { * Initialize scope type select event listeners. */ export function initScopeSelector(): void { - for (const element of getElements('#id_scope_type')) { - handleScopeChange(element); - element.addEventListener('change', () => handleScopeChange(element)); + for (const view of Object.keys(showHideMap)) { + for (const element of getElements( + `html[data-netbox-url-name="${view}"] #id_scope_type`, + )) { + handleScopeChange(view, element); + element.addEventListener('change', () => handleScopeChange(view, element)); + } } }