Implement case search functionality and enhance case addition UI in collection view

atlas/templates/atlas/add_case_to_collection.html

@@ -1,14 +1,9 @@
-<span id="add-case-form">
-    This form allows you to add an existing case to the collection. You may find it easier to do this from the individual case pages or the <a href="{% url 'atlas:case_view' %}">case overview view</a> which allows you to add multiple cases at once.
-<form hx-post="{% url 'atlas:add_case_to_collection' collection.id %}" hx-target="#full-question-list" hx-swap="beforeend">
-    {% csrf_token %}
-    <label for="case">Select Case to add:</label>
-    <select name="case" id="case">
-        {% for case in cases %}
-            <option value="{{ case.id }}">{{ case.title }}</option>
-        {% endfor %}
-    </select>
-    <button type="submit">Add</button>
-    <button _="on click remove #add-case-form">Cancel</button>
-</form>
-</span>
+<div id="add-case-form" class="p-2 border rounded">
+    <p class="mb-2">Add an existing case to this collection. You can also use the case overview view to add multiple cases at once: <a href="{% url 'atlas:case_view' %}">case overview</a>.</p>
+
+    {% include 'atlas/partials/case_search_widget.html' %}
+
+    <div class="mt-2">
+        <button class="btn btn-sm btn-secondary" _="on click remove #add-case-form">Close</button>
+    </div>
+</div>

atlas/templates/atlas/partials/case_search_results.html

@@ -0,0 +1,20 @@
+{% if cases and cases.exists %}
+  <div class="list-group">
+    {% for case in cases %}
+      <div class="list-group-item d-flex justify-content-between align-items-center">
+        <div class="flex-fill me-3">
+          <div class="fw-semibold">{{ case.title }}</div>
+          <div class="small text-muted">{% if case.description %}{{ case.description|truncatechars:100 }}{% endif %}</div>
+        </div>
+
+  <form class="m-0" hx-post="{% url 'atlas:add_case_to_collection' collection.pk %}" hx-target="#full-question-list" hx-swap="beforeend">
+          {% csrf_token %}
+          <input type="hidden" name="case" value="{{ case.pk }}">
+          <button type="submit" class="btn btn-sm btn-primary">Add</button>
+        </form>
+      </div>
+    {% endfor %}
+  </div>
+{% else %}
+  <div class="text-muted small">No cases found.</div>
+{% endif %}

atlas/templates/atlas/partials/case_search_widget.html

@@ -0,0 +1,11 @@
+<div class="case-search-widget">
+  <label for="case-search-input" class="form-label">Search cases</label>
+  <input id="case-search-input" name="q" class="form-control" type="search"
+    placeholder="Type to search cases..."
+    hx-get="{% url 'atlas:case_search' %}?collection={{ collection.pk }}"
+    hx-target="#case-search-results"
+    hx-trigger="keyup changed delay:400ms"
+    autocomplete="off">
+
+  <div id="case-search-results" class="mt-2"></div>
+</div>

atlas/urls.py

@@ -34,6 +34,7 @@ urlpatterns = [
     path("author/", views.author_list, name="author_list"),
     path("case/", views.CaseView.as_view(), name="case_view"),
     path("collection/<int:collection_id>/add_case", views.add_case_to_collection, name="add_case_to_collection"),
+    path("collection/case_search", views.case_search, name="case_search"),
     path("collection/", views.CollectionView.as_view(), name="collection_view"),
     path("collection/user", views.user_collections, name="user_collections"),
     path("uploads", views.user_uploads, name="user_uploads"),

atlas/views.py

@@ -1182,6 +1182,30 @@ def add_case_to_collection(request, collection_id):
     )
 
 
+@login_required
+def case_search(request):
+    # HTMX endpoint for searching cases available to the user
+    if not request.htmx:
+        return Http404
+
+    q = request.GET.get("q", "").strip()
+    collection_id = request.GET.get("collection")
+    collection = None
+    if collection_id:
+        try:
+            collection = CaseCollection.objects.get(pk=collection_id)
+        except CaseCollection.DoesNotExist:
+            collection = None
+
+    qs = get_cases_available_to_user(request.user, collection=collection)
+    if q:
+        qs = qs.filter(title__icontains=q)
+
+    cases = qs.order_by("title")[:30]
+
+    return render(request, "atlas/partials/case_search_results.html", {"cases": cases, "collection": collection})
+
+
 @login_required
 def user_uploads_series(request, series_instance_uid: str):
     # We don't restrict to teh uploading user here. Should we?