fix filtering; don't duplicate form; progress bar

liiweb/views/legislation.py

@@ -22,7 +22,7 @@ class LegislationListView(FilteredDocumentListView):
     latest_expression_only = True
     extra_context = {"doc_table_citations": True, "legislation_list_sort": "title"}
 
-    def filter_queryset(self, qs):
+    def filter_queryset(self, qs, filter_q=False):
         if self.variant == "all":
             pass
         elif self.variant == "repealed":
@@ -43,7 +43,7 @@ def filter_queryset(self, qs):
                     datetime.date.today() - timedelta(days=365)
                 ).isoformat()
             )
-        qs = super().filter_queryset(qs)
+        qs = super().filter_queryset(qs, filter_q=filter_q)
 
         return qs
 

peachjam/forms.py

@@ -85,6 +85,7 @@ class BaseDocumentFilterForm(forms.Form):
     registries = forms.CharField(required=False)
     attorneys = forms.CharField(required=False)
     outcomes = forms.CharField(required=False)
+    q = forms.CharField(required=False)
 
     sort = forms.ChoiceField(
         required=False,
@@ -102,7 +103,7 @@ def __init__(self, data, *args, **kwargs):
 
         super().__init__(self.params, *args, **kwargs)
 
-    def filter_queryset(self, queryset, exclude=None):
+    def filter_queryset(self, queryset, exclude=None, filter_q=False):
         years = self.params.getlist("years")
         alphabet = self.cleaned_data.get("alphabet")
         authors = self.params.getlist("authors")
@@ -151,7 +152,7 @@ def filter_queryset(self, queryset, exclude=None):
         if outcomes and exclude != "outcomes":
             queryset = queryset.filter(outcomes__name__in=outcomes).distinct()
 
-        if q and exclude != "q":
+        if filter_q and q and exclude != "q":
             queryset = queryset.filter(title__icontains=q[0])
 
         return queryset

peachjam/static/stylesheets/components/_loaders.scss

@@ -19,3 +19,12 @@
   100% {
     transform: rotate(360deg); }
 }
+
+.htmx-progress {
+  opacity: 0;
+  height: 0.3rem;
+}
+
+.htmx-progress.htmx-request {
+  opacity: 1;
+}

peachjam/templates/peachjam/_document_table.html

@@ -45,7 +45,10 @@
       {% endif %}
     {% endfor %}
   </table>
-  {% if not hide_pagination %}
+  {% if not documents %}
+    <p>{% trans 'No documents found.' %}</p>
+  {% endif %}
+  {% if documents and not hide_pagination %}
     {% include 'peachjam/_pagination.html' %}
   {% endif %}
 </div>

peachjam/templates/peachjam/_document_table_form.html

@@ -1,6 +1,11 @@
 {% load i18n %}
-<form method="get" id="filter-form" hx-include="#filter-form">
-  <div class="row" id="faceted-table">
+<form method="get"
+      id="filter-form"
+      hx-include="#filter-form"
+      hx-indicator=".htmx-progress"
+      hx-target="#filter-form"
+      hx-swap="outerHTML">
+  <div class="row">
     <div class="col-lg-3 d-none d-lg-block">
       <div>
         {% block desktop-taxonomy-list %}{% endblock %}
@@ -18,7 +23,6 @@
                   <div class="d-flex align-items-center">
                     <a href="{{ request.path }}"
                        hx-get="{{ request.path }}"
-                       hx-target="#faceted-table"
                        hx-push-url="true">Clear</a>
                   </div>
                 </div>
@@ -31,7 +35,6 @@
                                  name="{{ facet_name }}"
                                  type="{{ facet.type }}"
                                  hx-get="{{ request.path }}"
-                                 hx-target="#faceted-table"
                                  hx-push-url="true"
                                  {% if option == facet.values %}checked{% endif %}
                                  hx-include="#filter-form"
@@ -51,7 +54,6 @@
                                  name="{{ facet_name }}"
                                  type="{{ facet.type }}"
                                  hx-get="{{ request.path }}"
-                                 hx-target="#faceted-table"
                                  hx-push-url="true"
                                  {% if option in facet.values %}checked{% endif %}
                                  hx-include="#filter-form"
@@ -72,37 +74,37 @@
     <div class="col-lg-9">
       <div class="position-relative">
         {% block content %}
-          {% if documents %}
-            {% block filter-documents %}
-              <div class="mb-2 d-flex" hx-target="#doc-table" hx-push-url="true">
-                <div class="flex-grow-1 me-3">
-                  <input id="filter-input"
-                         hx-get="{{ request.path }}"
-                         hx-trigger="keyup changed delay:300ms"
-                         aria-label="{% trans "Filter documents" %}"
-                         placeholder="{% trans "Filter documents" %}"
-                         class="form-control"
-                         type="text"
-                         name="q"/>
-                </div>
-                <div class="me-2 d-flex align-items-center">
-                  <div class="d-none d-md-block me-2 text-nowrap">{% trans "Sort by" %}:</div>
-                  <select class="form-control" hx-get="{{ request.path }}" name="sort">
-                    {% for opt in form.sort %}{{ opt }}{% endfor %}
-                  </select>
-                </div>
-                <div>
-                  <button class="btn btn-primary"
-                          hx-get="{{ request.path }}"
-                          type="submit"
-                          value="Filter">Filter</button>
-                </div>
+          {% block filter-documents %}
+            <div class="mb-2 d-flex" hx-target="#doc-table" hx-push-url="true">
+              <div class="flex-grow-1 me-3">
+                <input id="filter-input"
+                       hx-get="{{ request.path }}"
+                       hx-trigger="keyup changed delay:300ms"
+                       aria-label="{% trans "Filter documents" %}"
+                       placeholder="{% trans "Filter documents" %}"
+                       class="form-control"
+                       type="text"
+                       value="{{ form.q.value|default_if_none:'' }}"
+                       name="q"/>
+              </div>
+              <div class="me-2 d-flex align-items-center">
+                <div class="d-none d-md-block me-2 text-nowrap">{% trans "Sort by" %}:</div>
+                <select class="form-control" hx-get="{{ request.path }}" name="sort">
+                  {% for opt in form.sort %}{{ opt }}{% endfor %}
+                </select>
+              </div>
+              <div>
+                <button class="btn btn-primary"
+                        hx-get="{{ request.path }}"
+                        type="submit"
+                        value="Filter">Filter</button>
               </div>
-            {% endblock %}
-            {% include 'peachjam/_document_table.html' %}
-          {% else %}
-            <p>{% trans 'No documents found.' %}</p>
-          {% endif %}
+            </div>
+          {% endblock %}
+          <div class="htmx-progress progress mb-2">
+            <div class="progress-bar progress-bar-striped progress-bar-animated w-100"></div>
+          </div>
+          {% include 'peachjam/_document_table.html' %}
         {% endblock %}
       </div>
     </div>

peachjam/views/generic_views.py

@@ -102,7 +102,8 @@ def get(self, request, *args, **kwargs):
 
     def get_queryset(self):
         qs = super().get_queryset()
-        filtered_qs = self.filter_queryset(qs)
+        # filter the queryset, including filtering on the form's query string
+        filtered_qs = self.filter_queryset(qs, filter_q=True)
 
         if self.latest_expression_only:
             # Getting only the latest expression requires ordering on the work, which breaks the actual ordering
@@ -118,8 +119,8 @@ def get_queryset(self):
 
         return filtered_qs
 
-    def filter_queryset(self, qs):
-        return self.form.filter_queryset(qs)
+    def filter_queryset(self, qs, filter_q=False):
+        return self.form.filter_queryset(qs, filter_q=filter_q)
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(form=self.form, **kwargs)