diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index b3769bdd0..98161e946 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 8988e2e49..9ddc10fd8 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/htmx.ts b/netbox/project-static/src/htmx.ts index 2410a5fd9..8d92b60c8 100644 --- a/netbox/project-static/src/htmx.ts +++ b/netbox/project-static/src/htmx.ts @@ -1,11 +1,11 @@ import { getElements, isTruthy } from './util'; import { initButtons } from './buttons'; -import { initSelect } from './select'; +import { initSelects } from './select'; import { initObjectSelector } from './objectSelector'; import { initBootstrap } from './bs'; function initDepedencies(): void { - for (const init of [initButtons, initSelect, initObjectSelector, initBootstrap]) { + for (const init of [initButtons, initSelects, initObjectSelector, initBootstrap]) { init(); } } diff --git a/netbox/project-static/src/netbox.ts b/netbox/project-static/src/netbox.ts index dc3d9e26b..8c274c64b 100644 --- a/netbox/project-static/src/netbox.ts +++ b/netbox/project-static/src/netbox.ts @@ -1,8 +1,7 @@ import { initForms } from './forms'; import { initBootstrap } from './bs'; import { initQuickSearch } from './search'; -// import { initSelect } from './select'; -import { initSelects } from './tomSelect'; +import { initSelects } from './select'; import { initButtons } from './buttons'; import { initColorMode } from './colorMode'; import { initMessages } from './messages'; @@ -23,7 +22,6 @@ function initDocument(): void { initMessages, initForms, initQuickSearch, - // initSelect, initSelects, initDateSelector, initButtons, diff --git a/netbox/project-static/src/tomSelect.ts b/netbox/project-static/src/select/classes/dynamicTomSelect.ts similarity index 57% rename from netbox/project-static/src/tomSelect.ts rename to netbox/project-static/src/select/classes/dynamicTomSelect.ts index 74039db24..370eba60d 100644 --- a/netbox/project-static/src/tomSelect.ts +++ b/netbox/project-static/src/select/classes/dynamicTomSelect.ts @@ -1,15 +1,15 @@ -import { getElements } from './util'; -import { RecursivePartial, TomInput, TomOption, TomSettings } from 'tom-select/src/types'; +import { RecursivePartial, TomInput, TomSettings } from 'tom-select/dist/types/types'; import { addClasses } from 'tom-select/src/vanilla' import queryString from 'query-string'; import TomSelect from 'tom-select'; import type { Stringifiable } from 'query-string'; // Transitional -import { QueryFilter } from './select/api/types' +import { QueryFilter } from '../../select_old/api/types' -class DynamicTomSelect extends TomSelect { +// Extends TomSelect to provide enhanced fetching of options via the REST API +export class DynamicTomSelect extends TomSelect { /* * Transitional code from APISelect @@ -24,6 +24,7 @@ class DynamicTomSelect extends TomSelect { constructor( input_arg: string|TomInput, user_settings: RecursivePartial ) { super(input_arg, user_settings); + // Glean the REST API endpoint URL from the elements with statically-defined options -function initStaticSelects(): void { - - for (const select of getElements('select:not(.api-select):not(.color-select)')) { - new TomSelect(select, { - plugins: ['clear_button'] - }); - } - -} - -// Initialize ', - preload: 'focus', - }); - } - -} - -// Initialize color selection fields -function initColorSelects(): void { - - for (const select of getElements('select.color-select')) { - new TomSelect(select, { - render: { - option: function(item: TomOption, escape: Function) { - return `
${escape(item.text)}
`; - } - } - }); - } - -} - -export function initSelects(): void { - initStaticSelects(); - initDynamicSelects(); - initColorSelects(); -} diff --git a/netbox/project-static/src/select/dynamic.ts b/netbox/project-static/src/select/dynamic.ts new file mode 100644 index 000000000..9f6e7dbf1 --- /dev/null +++ b/netbox/project-static/src/select/dynamic.ts @@ -0,0 +1,21 @@ +import { getElements } from '../util'; +import { DynamicTomSelect } from './classes/dynamicTomSelect' + + +// Initialize ', + preload: 'focus', + }); + } + +} diff --git a/netbox/project-static/src/select/index.ts b/netbox/project-static/src/select/index.ts index 356c8004f..a7d855f8a 100644 --- a/netbox/project-static/src/select/index.ts +++ b/netbox/project-static/src/select/index.ts @@ -1,9 +1,9 @@ -import { initApiSelect } from './api'; -import { initColorSelect } from './color'; -import { initStaticSelect } from './static'; +import { initColorSelects, initStaticSelects } from './static'; +import { initDynamicSelects } from './dynamic'; -export function initSelect(): void { - for (const func of [initApiSelect, initColorSelect, initStaticSelect]) { - func(); - } + +export function initSelects(): void { + initStaticSelects(); + initDynamicSelects(); + initColorSelects(); } diff --git a/netbox/project-static/src/select/static.ts b/netbox/project-static/src/select/static.ts index 19031bb7d..919e7c999 100644 --- a/netbox/project-static/src/select/static.ts +++ b/netbox/project-static/src/select/static.ts @@ -1,27 +1,30 @@ -import SlimSelect from 'slim-select'; import { getElements } from '../util'; +import { TomOption } from 'tom-select/src/types'; +import TomSelect from 'tom-select'; -export function initStaticSelect(): void { - for (const select of getElements('.netbox-static-select:not([data-ssid])')) { - if (select !== null) { - const label = document.querySelector(`label[for="${select.id}"]`) as HTMLLabelElement; - let placeholder; - if (label !== null) { - placeholder = `Select ${label.innerText.trim()}`; - } +// Initialize