WIP: htmx search for maintenance components

Author: lunkwill42

python/nav/web/maintenance/urls.py

@@ -32,6 +32,7 @@
     re_path(r'^active/$', views.active, name='maintenance-active'),
     re_path(r'^planned/$', views.planned, name='maintenance-planned'),
     re_path(r'^historic/$', views.historic, name='maintenance-historic'),
+    re_path(r'^search/$', views.component_search, name='maintenance-component-search'),
     re_path(r'^new/$', views.edit, name='maintenance-new'),
     re_path(
         r'^new/(?P<start_time>\d{4}-\d{2}-\d{2})/$',

python/nav/web/maintenance/views.py

@@ -20,16 +20,17 @@
 from datetime import datetime
 
 from django.db import connection, transaction
-from django.db.models import Count, Q
+from django.db.models import Count, Model, Q
 from django.http import HttpResponseRedirect
 from django.shortcuts import get_object_or_404, redirect, render
 from django.urls import reverse
 from django.utils.safestring import mark_safe
 
 import nav.maintengine
 from nav.django.utils import get_account
-from nav.models.manage import Netbox
+from nav.models.manage import Location, Netbox, NetboxGroup, Room
 from nav.models.msgmaint import MaintenanceComponent, MaintenanceTask
+from nav.models.service import Service
 from nav.web.maintenance.forms import (
     MaintenanceAddSingleNetbox,
     MaintenanceCalendarForm,
@@ -349,6 +350,29 @@ def edit(request, task_id=None, start_time=None, **_):
     )
 
 
+def component_search(request):
+    """HTMX endpoint for component searches from maintenance task form"""
+    search = request.POST.get("search")
+    results = {}
+    searches: list[tuple[Model, Q]] = [
+        (Location, Q(id__icontains=search)),
+        (Room, Q(id__icontains=search)),
+        (Netbox, Q(sysname__icontains=search)),
+        (NetboxGroup, Q(id__icontains=search)),
+        (Service, Q(handler__icontains=search) | Q(netbox__sysname__icontains=search)),
+    ]
+
+    for component_type, query in searches:
+        component_result = component_type.objects.filter(query)
+        if component_result:
+            component_title = component_type._meta.verbose_name.title()
+            results[component_title] = component_result
+
+    return render(
+        request, 'maintenance/component-search-results-frag.html', {'results': results}
+    )
+
+
 def add_box_to_maintenance(request):
     """
     This view puts a Netbox on immediate, indefinite maintenance and

python/nav/web/templates/maintenance/component-search-results-frag.html

@@ -0,0 +1,14 @@
+{% if results %}
+    {% for component_type, values in results.items %}
+        {% if values %}
+            <h4>{{ component_type }}</h4>
+            <ul>
+                {% for value in values %}
+                    <li>{{ value }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    {% endfor %}
+{% else %}
+    <strong>No hits</strong>
+{% endif %}

python/nav/web/templates/maintenance/new_task.html

@@ -45,6 +45,20 @@ <h4>{{ heading }}</h4>
             <legend>Select components</legend>
             {{ quickselect }}
           </fieldset>
+
+            <h3>Search components
+            </h3>
+            <input class="form-control" type="search"
+                   name="search" placeholder="Begin Typing To Search for stuff..."
+                   hx-post="{% url 'maintenance-component-search' %}"
+                   hx-trigger="input changed delay:500ms, search"
+                   hx-target="#search-results"
+                   hx-indicator=".htmx-indicator">
+            <span class="htmx-indicator">
+                <img src="/static/images/select2/select2-spinner.gif"/> Searching...
+            </span>
+            <div id="search-results"></div>
+
         </div>
 
         <div class="large-4 columns">
@@ -81,6 +95,7 @@ <h4>{{ heading }}</h4>
                      value="Remove selected" disabled="disabled" class="button small secondary"/>
             {% endif %}
           </fieldset>
+
         </div> {# column #}
       </div> {# row #}