Add question search functionality with HTMX support for dynamic results
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
{# partial: list of questions for HTMX search results #}
|
||||
<div class="list-group">
|
||||
{% if questions %}
|
||||
{% for question in questions %}
|
||||
<a href="{{ question.get_absolute_url }}" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">{{ question.title|default:question.get_stem_stripped|truncatechars:80 }}</h6>
|
||||
<small class="text-muted">#{{ question.pk }}</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-1">
|
||||
{% if question.author.all %}
|
||||
<small class="text-muted me-2">By {{ question.author.all|join:", " }}</small>
|
||||
{% endif %}
|
||||
{% if question.category %}<span class="badge bg-secondary me-1">{{ question.category.category }}</span>{% endif %}
|
||||
{% if question.frcr_appropriate %}<span class="badge bg-info text-dark me-1">FRCR</span>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-1">
|
||||
{% for c in question.condition.all|slice:":3" %}
|
||||
<span class="badge bg-light text-dark me-1">{{ c.name }}</span>
|
||||
{% endfor %}
|
||||
{% for p in question.presentation.all|slice:":3" %}
|
||||
<span class="badge bg-light text-dark me-1">{{ p.name }}</span>
|
||||
{% endfor %}
|
||||
{% for s in question.subspecialty.all|slice:":3" %}
|
||||
<span class="badge bg-light text-dark me-1">{{ s.name }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<p class="mb-1 text-truncate">{{ question.stem|striptags|truncatechars:160 }}</p>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="list-group-item">No questions found</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,41 @@
|
||||
{% extends 'sbas/base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container my-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="mb-3">SBAs Question Search</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Search questions</h5>
|
||||
<div class="mb-2">
|
||||
<div class="input-group">
|
||||
<input class="form-control" id="sbas-question-search-input" name="q" type="search"
|
||||
placeholder="Search questions by stem, answers, category or tags"
|
||||
hx-get="{% url 'sbas:question_search_partial' %}"
|
||||
hx-trigger="input changed delay:400ms, keyup[key=='Enter']"
|
||||
hx-target="#sbas-question-search-results"
|
||||
hx-indicator="#sbas-question-search-indicator" />
|
||||
<span class="input-group-text" id="sbas-question-search-indicator" aria-hidden="true">
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
#sbas-question-search-indicator { display: none; }
|
||||
#sbas-question-search-indicator.htmx-request { display: inline-flex; align-items: center; }
|
||||
</style>
|
||||
<div id="sbas-question-search-results">
|
||||
{% include 'sbas/partials/_question_search_results.html' with questions=None %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -115,6 +115,8 @@ urlpatterns = [
|
||||
views.question_overview,
|
||||
name="question_overview",
|
||||
),
|
||||
path("search/", views.question_search_page, name="question_search_page"),
|
||||
path("search/questions/", views.question_search_partial, name="question_search_partial"),
|
||||
path("question/<int:pk>/toggle_frcr/", views.toggle_frcr_appropriate, name="toggle_frcr"),
|
||||
path("category/merge/", views.merge_category, name="merge_category"),
|
||||
#path(
|
||||
|
||||
@@ -120,6 +120,54 @@ def active_exams(request):
|
||||
return render(request, "sbas/available_exam_list.html", {"exams": active_exams})
|
||||
|
||||
|
||||
@login_required
|
||||
def question_search_page(request):
|
||||
"""Render the SBAs search page which contains the HTMX search input.
|
||||
|
||||
The actual results are returned by `question_search_partial` and swapped
|
||||
into the results container via HTMX.
|
||||
"""
|
||||
return render(request, "sbas/search.html", {})
|
||||
|
||||
|
||||
@login_required
|
||||
def question_search_partial(request):
|
||||
"""Return an HTMX partial listing questions matching `q`.
|
||||
|
||||
Searches several Question fields and related names. Uses `distinct()` to
|
||||
avoid duplicates from joins. The template expects `questions` in context.
|
||||
"""
|
||||
q = request.GET.get("q", "") or request.GET.get("sbas-question-search-input", "")
|
||||
q = q.strip()
|
||||
|
||||
qs = Question.objects.all()
|
||||
|
||||
if q:
|
||||
from django.db.models import Q
|
||||
|
||||
qs = qs.filter(
|
||||
Q(title__icontains=q)
|
||||
| Q(stem__icontains=q)
|
||||
| Q(a_answer__icontains=q)
|
||||
| Q(b_answer__icontains=q)
|
||||
| Q(c_answer__icontains=q)
|
||||
| Q(d_answer__icontains=q)
|
||||
| Q(e_answer__icontains=q)
|
||||
| Q(category__category__icontains=q)
|
||||
| Q(author__first_name__icontains=q)
|
||||
| Q(author__last_name__icontains=q)
|
||||
| Q(author__username__icontains=q)
|
||||
| Q(condition__name__icontains=q)
|
||||
| Q(presentation__name__icontains=q)
|
||||
| Q(subspecialty__name__icontains=q)
|
||||
).distinct()
|
||||
|
||||
# Prefetch related data used in the partial to avoid N+1 queries
|
||||
qs = qs.select_related("category").prefetch_related("author", "condition", "presentation", "subspecialty")[:50]
|
||||
|
||||
return render(request, "sbas/partials/_question_search_results.html", {"questions": qs})
|
||||
|
||||
|
||||
|
||||
def exam_start(request, pk):
|
||||
exam = get_object_or_404(Exam, pk=pk)
|
||||
|
||||
Reference in New Issue
Block a user