diff --git a/netbox/netbox/views/htmx.py b/netbox/netbox/views/htmx.py index 2c38402ff..4754c1b54 100644 --- a/netbox/netbox/views/htmx.py +++ b/netbox/netbox/views/htmx.py @@ -30,6 +30,7 @@ class ObjectSelectorView(View): return render(request, self.template_name, { 'form': form, 'model': model, + 'target_id': request.GET.get('target'), }) def _get_model(self, label): diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index f34ab134c..4b77d9123 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 5286b72bb..89ddc750c 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 5b2c65d80..09d423cbd 100644 --- a/netbox/project-static/src/htmx.ts +++ b/netbox/project-static/src/htmx.ts @@ -1,9 +1,10 @@ import { getElements, isTruthy } from './util'; import { initButtons } from './buttons'; import { initSelect } from './select'; +import { initObjectSelector } from './objectSelector'; function initDepedencies(): void { - for (const init of [initButtons, initSelect]) { + for (const init of [initButtons, initSelect, initObjectSelector]) { init(); } } diff --git a/netbox/project-static/src/objectSelector.ts b/netbox/project-static/src/objectSelector.ts new file mode 100644 index 000000000..1a6c2dc4b --- /dev/null +++ b/netbox/project-static/src/objectSelector.ts @@ -0,0 +1,32 @@ +import { getElements } from './util'; + +function handleSelection(link: HTMLAnchorElement): void { + const selector_results = document.getElementById('selector_results'); + if (selector_results == null) { + return + } + const target_id = selector_results.getAttribute('data-selector-target'); + if (target_id == null) { + return + } + const target = document.getElementById(target_id); + if (target == null) { + return + } + + const label = link.getAttribute('data-label'); + const value = link.getAttribute('data-value'); + + //@ts-ignore + target.slim.setData([ + {text: label, value: value} + ]); + +} + + +export function initObjectSelector(): void { + for (const element of getElements('#selector_results a')) { + element.addEventListener('click', () => handleSelection(element)); + } +} diff --git a/netbox/templates/htmx/object_selector.html b/netbox/templates/htmx/object_selector.html index ef9a788a7..6fc36a439 100644 --- a/netbox/templates/htmx/object_selector.html +++ b/netbox/templates/htmx/object_selector.html @@ -15,7 +15,7 @@
-
+
{% for field in form.visible_fields %}
{% render_field field %}
@@ -25,6 +25,6 @@
-
+
diff --git a/netbox/templates/htmx/object_selector_results.html b/netbox/templates/htmx/object_selector_results.html index a8608654c..67529967e 100644 --- a/netbox/templates/htmx/object_selector_results.html +++ b/netbox/templates/htmx/object_selector_results.html @@ -1,6 +1,6 @@
{% for object in results %} - +
{{ object }} {% if object.status %}{% badge object.get_status_display bg_color=object.get_status_color %}{% endif %} diff --git a/netbox/utilities/templates/widgets/apiselect.html b/netbox/utilities/templates/widgets/apiselect.html index d5aee2009..d41cf2b87 100644 --- a/netbox/utilities/templates/widgets/apiselect.html +++ b/netbox/utilities/templates/widgets/apiselect.html @@ -7,7 +7,7 @@ class="btn btn-sm btn-outline-dark border-input ms-1" data-bs-toggle="modal" data-bs-target="#htmx-modal" - hx-get="{% url 'htmx_object_selector' %}?model={{ widget.attrs.selector }}" + hx-get="{% url 'htmx_object_selector' %}?model={{ widget.attrs.selector }}&target={{ widget.attrs.id }}" hx-target="#htmx-modal-content" >