migrate vlan group scope selector to typescript

netbox/project-static/src/forms.ts

@@ -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();
   }
 }

netbox/templates/ipam/vlangroup_edit.html

@@ -28,78 +28,3 @@
     {% endif %}
 {% endblock %}
 
-{% block javascript %}
-<script type="text/javascript">
-  // TODO: Employ form field attrs to clean up this mess
-  let scope_type = $('#id_scope_type');
-  scope_type.change(function() {
-    let label = this.options[this.selectedIndex].text;
-    if (label.endsWith('region')) {
-      $('#id_region').parents('.form-group').show();
-      $('#id_sitegroup').parents('.form-group').hide();
-      $('#id_site').parents('.form-group').hide();
-      $('#id_location').parents('.form-group').hide();
-      $('#id_rack').parents('.form-group').hide();
-      $('#id_clustergroup').parents('.form-group').hide();
-      $('#id_cluster').parents('.form-group').hide();
-    } else if (label.endsWith('site group')) {
-      $('#id_region').parents('.form-group').hide();
-      $('#id_sitegroup').parents('.form-group').show();
-      $('#id_site').parents('.form-group').hide();
-      $('#id_location').parents('.form-group').hide();
-      $('#id_rack').parents('.form-group').hide();
-      $('#id_clustergroup').parents('.form-group').hide();
-      $('#id_cluster').parents('.form-group').hide();
-    } else if (label.endsWith('site')) {
-      $('#id_region').parents('.form-group').show();
-      $('#id_sitegroup').parents('.form-group').show();
-      $('#id_site').parents('.form-group').show();
-      $('#id_location').parents('.form-group').hide();
-      $('#id_rack').parents('.form-group').hide();
-      $('#id_clustergroup').parents('.form-group').hide();
-      $('#id_cluster').parents('.form-group').hide();
-    } else if (label.endsWith('location')) {
-      $('#id_region').parents('.form-group').show();
-      $('#id_sitegroup').parents('.form-group').show();
-      $('#id_site').parents('.form-group').show();
-      $('#id_location').parents('.form-group').show();
-      $('#id_rack').parents('.form-group').hide();
-      $('#id_clustergroup').parents('.form-group').hide();
-      $('#id_cluster').parents('.form-group').hide();
-    } else if (label.endsWith('rack')) {
-      $('#id_region').parents('.form-group').show();
-      $('#id_sitegroup').parents('.form-group').show();
-      $('#id_site').parents('.form-group').show();
-      $('#id_location').parents('.form-group').show();
-      $('#id_rack').parents('.form-group').show();
-      $('#id_clustergroup').parents('.form-group').hide();
-      $('#id_cluster').parents('.form-group').hide();
-    } else if (label.endsWith('cluster group')) {
-      $('#id_region').parents('.form-group').hide();
-      $('#id_sitegroup').parents('.form-group').hide();
-      $('#id_site').parents('.form-group').hide();
-      $('#id_location').parents('.form-group').hide();
-      $('#id_rack').parents('.form-group').hide();
-      $('#id_clustergroup').parents('.form-group').show();
-      $('#id_cluster').parents('.form-group').hide();
-    } else if (label.endsWith('cluster')) {
-      $('#id_region').parents('.form-group').hide();
-      $('#id_sitegroup').parents('.form-group').hide();
-      $('#id_site').parents('.form-group').hide();
-      $('#id_location').parents('.form-group').hide();
-      $('#id_rack').parents('.form-group').hide();
-      $('#id_clustergroup').parents('.form-group').show();
-      $('#id_cluster').parents('.form-group').show();
-    } else {
-      $('#id_region').parents('.form-group').hide();
-      $('#id_sitegroup').parents('.form-group').hide();
-      $('#id_site').parents('.form-group').hide();
-      $('#id_location').parents('.form-group').hide();
-      $('#id_rack').parents('.form-group').hide();
-      $('#id_clustergroup').parents('.form-group').hide();
-      $('#id_cluster').parents('.form-group').hide();
-    }
-  });
-  scope_type.change();
-</script>
-{% endblock %}