1
0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00

migrate vlan group scope selector to typescript

This commit is contained in:
checktheroads
2021-04-19 21:30:50 -07:00
parent 7d07631f12
commit f83fb57d38
4 changed files with 112 additions and 78 deletions

View File

@ -1,5 +1,10 @@
import { getElements, scrollTo } from './util';
type ShowHideMap = {
default: { hide: string[]; show: string[] };
[k: string]: { hide: string[]; show: string[] };
};
/**
* Get form data from a form element and transform it into a body usable by fetch.
*
@ -156,8 +161,112 @@ function initMoveButtons() {
}
}
/**
* Mapping of scope names to arrays of object types whose fields should be hidden or shown when
* the scope type (key) is selected.
*
* 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 = {
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: [],
},
};
/**
* Toggle visibility of a given element's parent.
* @param query CSS Query.
* @param action Show or Hide the Parent.
*/
function toggleParentVisibility(query: string, action: 'show' | 'hide') {
for (const element of getElements(query)) {
if (action === 'show') {
element.parentElement?.classList.remove('d-none', 'invisible');
} else {
element.parentElement?.classList.add('d-none', 'invisible');
}
}
}
/**
* Handle changes to the Scope Type field.
*/
function handleScopeChange(event: Event) {
const element = event.currentTarget as 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)) {
// If the scope type ends with the specified scope, toggle its field visibility according to
// the show/hide values.
if (scopeType.endsWith(scope)) {
for (const field of fields.hide) {
toggleParentVisibility(`#${field}`, 'hide');
}
for (const field of fields.show) {
toggleParentVisibility(`#${field}`, 'show');
}
// Stop on first match.
break;
} else {
// Otherwise, hide all fields.
for (const field of showHideMap.default.hide) {
toggleParentVisibility(`#${field}`, 'hide');
}
}
}
}
/**
* Initialize scope type select event listeners.
*/
function initScopeSelector() {
for (const element of getElements<HTMLSelectElement>('#id_scope_type')) {
element.addEventListener('change', handleScopeChange);
}
}
export function initForms() {
for (const func of [initFormElements, initMoveButtons]) {
for (const func of [initFormElements, initMoveButtons, initScopeSelector]) {
func();
}
}