WIP

netbox/netbox/views/htmx.py

@@ -1,7 +1,9 @@
 from django.shortcuts import render
 from django.views.generic import View
 
+from dcim.filtersets import SiteFilterSet
 from dcim.forms import SiteFilterForm
+from dcim.models import Site
 
 
 class ObjectSelectorView(View):
@@ -11,10 +13,31 @@ class ObjectSelectorView(View):
         form_class = self._get_form_class()
         form = form_class(request.GET)
 
+        if '_search' in request.GET:
+            # Return only search results
+            model = self._get_model()
+            filterset = self._get_filterset_class()
+
+            queryset = model.objects.restrict(request.user)
+            if filterset:
+                queryset = filterset(request.GET, queryset, request=request).qs
+
+            return render(request, 'htmx/object_selector_results.html', {
+                'results': queryset,
+            })
+
         return render(request, self.template_name, {
             'form': form,
         })
 
+    def _get_model(self):
+        # TODO: Determine model from request parameters
+        return Site
+
     def _get_form_class(self):
-        # TODO: Determine form class from request parameters
+        # TODO: Determine form class from model
         return SiteFilterForm
+
+    def _get_filterset_class(self):
+        # TODO: Determine filterset class from model
+        return SiteFilterSet

netbox/templates/dcim/device_edit.html

@@ -119,5 +119,5 @@
 {% endblock %}
 
 {% block modals %}
-  {% include 'inc/htmx_modal.html' %}
+  {% include 'inc/htmx_modal.html' with size='lg' %}
 {% endblock %}

netbox/templates/htmx/object_selector.html

@@ -1,11 +1,30 @@
 {% load form_helpers %}
 
-<form>
-  <div class="modal-header">
-    <h5 class="modal-title">Object Selector</h5>
-    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+<div class="modal-header">
+  <h5 class="modal-title">Object Selector</h5>
+  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+</div>
+<div class="modal-body row">
+  <div class="col-3">
+    <ul class="nav nav-pills flex-column">
+      {% for field in form.visible_fields %}
+        <li class="nav-item">
+          <a class="nav-link" href="#" data-bs-toggle="tab" data-bs-target="#selector{{ forloop.counter }}">{{ field.label }}</a>
+        </li>
+      {% endfor %}
+    </ul>
   </div>
-  <div class="modal-body">
-    {% render_form form %}
+  <div class="col-9">
+    <form hx-get="{% url 'htmx_object_selector' %}" hx-target="#results_list">
+      <div class="tab-content p-1">
+        {% for field in form.visible_fields %}
+          <div class="tab-pane{% if forloop.first %} active{% endif %}" id="selector{{ forloop.counter }}" role="tabpanel">{% render_field field %}</div>
+        {% endfor %}
+      </div>
+      <div class="text-end">
+        <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>
-</form>
+</div>

netbox/templates/htmx/object_selector_results.html

@@ -0,0 +1,13 @@
+<div class="list-group">
+  {% for object in results %}
+    <a href="#" class="list-group-item list-group-item-action">
+      <h6 class="mb-1">
+        {{ object }}
+        {% if object.status %}{% badge object.get_status_display bg_color=object.get_status_color %}{% endif %}
+      </h6>
+      {% if object.description %}
+        <small>{{ object.description }}</small>
+      {% endif %}
+    </a>
+  {% endfor %}
+</div>

netbox/templates/inc/htmx_modal.html

@@ -1,5 +1,5 @@
 <div class="modal fade" id="htmx-modal" tabindex="-1" aria-hidden="true">
-  <div class="modal-dialog">
+  <div class="modal-dialog{% if size %} modal-{{ size }}{% endif %}">
     <div class="modal-content" id="htmx-modal-content">
       {# Dynamic content goes here #}
     </div>