Make object selector functional

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):

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

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<HTMLAnchorElement>('#selector_results a')) {
+    element.addEventListener('click', () => handleSelection(element));
+  }
+}

netbox/templates/htmx/object_selector.html

@@ -15,7 +15,7 @@
     </ul>
   </div>
   <div class="col-9">
-    <form hx-get="{% url 'htmx_object_selector' %}?model={{ model|meta:"label_lower" }}" hx-target="#results_list">
+    <form hx-get="{% url 'htmx_object_selector' %}?model={{ model|meta:"label_lower" }}" hx-target="#selector_results">
       <div class="tab-content p-1">
         {% for field in form.visible_fields %}
           <div class="collapse{% if forloop.first %} show{% endif %}" id="selector{{ forloop.counter }}">{% render_field field %}</div>
@@ -25,6 +25,6 @@
         <button type="submit" name="_search" value="true" class="btn btn-sm btn-primary">Submit</button>
       </div>
     </form>
-    <div id="results_list" class="mt-3"></div>
+    <div id="selector_results" class="mt-3" data-selector-target="{{ target_id }}"></div>
   </div>
 </div>

netbox/templates/htmx/object_selector_results.html

@@ -1,6 +1,6 @@
 <div class="list-group">
   {% for object in results %}
-    <a href="#" class="list-group-item list-group-item-action" data-label="{{ object }}" data-value="{{ object.pk }}">
+    <a href="#" class="list-group-item list-group-item-action" data-label="{{ object }}" data-value="{{ object.pk }}" data-bs-dismiss="modal">
       <h6 class="mb-1">
         {{ object }}
         {% if object.status %}{% badge object.get_status_display bg_color=object.get_status_color %}{% endif %}

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"
     >
       <i class="mdi mdi-database-search-outline"></i>