External/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-12-18 10:16:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes #8710: Show/hide form elements based on scope selection

Browse Source
This commit is contained in:
Stephan Blanke 2022-02-22 23:27:11 +01:00
parent 4913d7ee39
commit b1de85a44f
3 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
netbox/project-static/dist/netbox.js vendored
View File

File diff suppressed because one or more lines are too long

2
netbox/project-static/dist/netbox.js.map vendored
View File

File diff suppressed because one or more lines are too long

35
netbox/project-static/src/forms/scopeSelector.ts
View File

@ -6,7 +6,16 @@ type ShowHideMap = {
* *
* @example vlangroup_edit * @example vlangroup_edit
*/ */
[view: string]: { [view: string]: string;
};
type ShowHideLayout = {
/**
* Name of layout config
*
* @example vlangroup
*/
[config: string]: {
/** /**
* Default layout. * Default layout.
*/ */
@ -19,15 +28,15 @@ type ShowHideMap = {
}; };
/** /**
* Mapping of scope names to arrays of object types whose fields should be hidden or shown when * Mapping of layout names to arrays of object types whose fields should be hidden or shown when
* the scope type (key) is selected. * the scope type (key) is selected.
* *
* For example, if `region` is the scope type, the fields with IDs listed in * For example, if `region` is the scope type, the fields with IDs listed in
* showHideMap.region.hide should be hidden, and the fields with IDs listed in * showHideMap.region.hide should be hidden, and the fields with IDs listed in
* showHideMap.region.show should be shown. * showHideMap.region.show should be shown.
*/ */
const showHideMap: ShowHideMap = { const showHideLayout: ShowHideLayout = {
vlangroup_edit: { vlangroup: {
region: { region: {
hide: ['id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'], hide: ['id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'],
show: ['id_region'], show: ['id_region'],
@ -70,6 +79,19 @@ const showHideMap: ShowHideMap = {
}, },
}, },
}; };
/**
* Mapping of view names to layout configurations
*
* For example, if `region` is the scope type, the fields with IDs listed in
* showHideMap.region.hide should be hidden, and the fields with IDs listed in
* showHideMap.region.show should be shown.
*/
const showHideMap: ShowHideMap = {
vlangroup_add: 'vlangroup',
vlangroup_edit: 'vlangroup',
};
/** /**
* Toggle visibility of a given element's parent. * Toggle visibility of a given element's parent.
* @param query CSS Query. * @param query CSS Query.
@ -94,8 +116,9 @@ function toggleParentVisibility(query: string, action: 'show' | 'hide') {
function handleScopeChange<P extends keyof ShowHideMap>(view: P, element: HTMLSelectElement) { function handleScopeChange<P extends keyof ShowHideMap>(view: P, element: 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();
const layoutConfig = showHideMap[view];
for (const [scope, fields] of Object.entries(showHideMap[view])) { for (const [scope, fields] of Object.entries(showHideLayout[layoutConfig])) {
// If the scope type ends with the specified scope, toggle its field visibility according to // If the scope type ends with the specified scope, toggle its field visibility according to
// the show/hide values. // the show/hide values.
if (scopeType.endsWith(scope)) { if (scopeType.endsWith(scope)) {
@ -109,7 +132,7 @@ function handleScopeChange<P extends keyof ShowHideMap>(view: P, element: HTMLSe
break; break;
} else { } else {
// Otherwise, hide all fields. // Otherwise, hide all fields.
for (const field of showHideMap[view].default.hide) { for (const field of showHideLayout[layoutConfig].default.hide) {
toggleParentVisibility(`#${field}`, 'hide'); toggleParentVisibility(`#${field}`, 'hide');
} }
} }