Annotate depth for recursive hierarchies

netbox/project-static/src/select/classes/dynamicTomSelect.ts

@@ -34,8 +34,8 @@ export class DynamicTomSelect extends TomSelect {
     // Set the null option (if any)
     const nullOption = this.input.getAttribute('data-null-option');
     if (nullOption) {
-      let valueField = user_settings.valueField || 'value';
-      let labelField = user_settings.labelField || 'text';
+      let valueField = this.settings.valueField;
+      let labelField = this.settings.labelField;
       this.nullOption = {}
       this.nullOption[valueField] = 'null';
       this.nullOption[labelField] = nullOption;

netbox/project-static/src/select/dynamic.ts

@@ -1,6 +1,19 @@
 import { getElements } from '../util';
 import { DynamicTomSelect } from './classes/dynamicTomSelect'
 
+const VALUE_FIELD = 'id';
+const LABEL_FIELD = 'display';
+
+
+// Render the HTML for a dropdown option
+function renderOption(data: any, escape: Function) {
+  // If the object has a `_depth` property, indent its display text
+  if (typeof data._depth === 'number' && data._depth > 0) {
+    return `<div>${'─'.repeat(data._depth)} ${escape(data[LABEL_FIELD])}</div>`;
+  }
+  return `<div>${escape(data[LABEL_FIELD])}</div>`;
+}
+
 
 // Initialize <select> elements which are populated via a REST API call
 export function initDynamicSelects(): void {
@@ -8,8 +21,8 @@ export function initDynamicSelects(): void {
   for (const select of getElements<HTMLSelectElement>('select.api-select')) {
     new DynamicTomSelect(select, {
       plugins: ['clear_button'],
-      valueField: 'id',
-      labelField: 'display',
+      valueField: VALUE_FIELD,
+      labelField: LABEL_FIELD,
       searchField: [],
       disabledField: select.getAttribute('disabled-indicator') || undefined,
       copyClassesToDropdown: false,
@@ -17,6 +30,9 @@ export function initDynamicSelects(): void {
       controlInput: '<input>',
       preload: 'focus',
       maxOptions: 100,
+      render: {
+        option: renderOption
+      }
 	});
   }