feat: Add htmx

adinhodovic · adinhodovic · commit 0a852a5bfc8e · 2024-05-30T15:27:40.000+02:00
diff --git a/.env b/.env
@@ -1,6 +1,6 @@
 DJANGO_SETTINGS_MODULE=config.settings.local
 PYTHONBREAKPOINT=pudb.set_trace
-DATABASE_URL=psql://postgres:postgres@localhost:5432/django-wtf
+DATABASE_URL=psql://postgres:postgres@localhost:5432/django_wtf
 REDIS_URL=redis://localhost:6379/
 CELERY_BROKER_URL=$REDIS_URL
 DJANGO_SETTINGS_MODULE=config.settings.local
diff --git a/config/settings/base.py b/config/settings/base.py
@@ -91,6 +91,7 @@
     "django_json_ld",
     "django_custom_error_views",
     "django_admin_shellx",
+    "django_htmx",
     "health_check",
     "meta",
     "modelcluster",
@@ -181,6 +182,7 @@
     "django_user_agents.middleware.UserAgentMiddleware",
     "django.middleware.common.BrokenLinkEmailsMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
+    "django_htmx.middleware.HtmxMiddleware",
     # TODO: What does this do?
     "watson.middleware.SearchContextMiddleware",
     "wagtail.contrib.redirects.middleware.RedirectMiddleware",
diff --git a/django_wtf/core/search_view.py b/django_wtf/core/search_view.py
@@ -2,17 +2,45 @@
 from watson.views import SearchView as OriginalSearchView
 
 from django_wtf.core.models import Repository
+from django_wtf.core.models.category_model import Category
 
 
 class SearchView(OriginalSearchView):
-    template_name = "core/search.html"
     paginate_by = 20
     models = (Repository,)
 
+    def get_template_names(self):  # pyright: ignore [reportIncompatibleMethodOverride]
+        if self.request.htmx:
+            template_name = "core/search_table.html"
+        else:
+            template_name = "core/search.html"
+
+        return [template_name]
+
     def get_queryset(self):
         repositories = Repository.valid.all()
-        return watson.filter(repositories, self.query)
+
+        category = self.request.GET.get("category", None)
+        if category and category != "All":
+            repositories = repositories.filter(categories__name=category)
+
+        search = self.request.GET.get("q", None)
+        if search:
+            repositories = watson.filter(repositories, search)
+        return repositories
+
+    def categories_ordered_by_total_repositories(self):
+        categories = []
+        for c in Category.objects.all():
+            count_matching_repositories = Repository.objects.filter(
+                categories__in=[c]
+            ).count()
+            if count_matching_repositories:
+                setattr(c, "total_repositories", count_matching_repositories)
+                categories.append(c)
+        return sorted(categories, key=lambda c: c.total_repositories, reverse=True)
 
     def get_context_data(self, **kwargs):
         ctx = super().get_context_data(**kwargs)
+        ctx["categories"] = self.categories_ordered_by_total_repositories()
         return ctx
diff --git a/django_wtf/core/views/index_view.py b/django_wtf/core/views/index_view.py
@@ -1,6 +1,7 @@
 from django.templatetags.static import static
 from django.views.generic.base import TemplateView
 from meta.views import MetadataMixin
+from watson import search as watson
 
 from django_wtf.core.models import Category, Repository, SocialNews
 from django_wtf.core.queries import (
diff --git a/django_wtf/templates/core/base.html b/django_wtf/templates/core/base.html
@@ -1,4 +1,4 @@
-{% load tailwind_tags %}
+{% load tailwind_tags django_htmx %}
 <!DOCTYPE html>
 <html lang="en-US">
     <head>
@@ -40,5 +40,7 @@
             <script defer
                     src="https://s.depode.com/ingress/7ca0f5ff-8ef2-45fb-9718-37d34cddfe79/script.js"></script>
         {% endif %}
+        <script src="https://unpkg.com/htmx.org@1.9.11"></script>
+        {% django_htmx_script %}
     </body>
 </html>
diff --git a/django_wtf/templates/core/search.html b/django_wtf/templates/core/search.html
@@ -1,26 +1,39 @@
 {% extends "core/base.html" %}
 {% block content %}
-    <div class="mb-3">
-        {% for object in object_list %}
-            <div class="mb-1 rounded">
-                <div class="shadow-xl card bg-base-100">
-                    <div class="pb-2 card-body">
-                        <a target="_blank" href="{{ object.github_url }}">
-                            <h2 class="flex justify-between card-title">
-                                <span>{{ object.full_name }}</span>
-                                <span class="text-sm">⭐ {{ object.stars }}</span>
-                            </h2>
-                        </a>
-                        <p>
-                            {% for topic in object.topics|slice:"0:5" %}
-                                <a class="p-3 mr-1 text-xs badge badge-outline hover:brightness-125"
-                                   href="{% url 'core:search' %}?q={{ topic }}">{{ topic|truncatechars:30 }}</a>
-                            {% endfor %}
-                        </p>
-                        <p class="mt-2">{{ object.description }}</p>
-                    </div>
+    <div class="mb-5 w-full flex-col content-center self-center lg:mt-5 lg:flex lg:w-7/12">
+        <form class="form flex justify-between">
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Search</span>
                 </div>
+                <input type="text"
+                       name="q"
+                       value="{{ request.GET.q }}"
+                       class="input input-bordered input-sm min-w-64"
+                       hx-get="{% url 'core:search' %}"
+                       hx-target="#search_table"
+                       hx-trigger="keyup changed delay:1s"
+                       hx-push-url="true" />
+            </label>
+            <div class="flex gap-4">
+                <label class="form-control">
+                    <div class="label">
+                        <span class="label-text">Category</span>
+                    </div>
+                    <select name="category"
+                            class="select select-bordered"
+                            hx-get="{% url 'core:search' %}"
+                            hx-target="#search_table"
+                            hx-trigger="change"
+                            hx-push-url="true">
+                        <option selected>All</option>
+                        {% for category in categories %}<option value="{{ category.name }}">{{ category.name }}</option>{% endfor %}
+                    </select>
+                </label>
             </div>
-        {% endfor %}
+        </form>
+        <table id="search_table" class="table table-sm mt-7">
+            {% include "core/search_table.html" %}
+        </table>
     </div>
 {% endblock content %}
diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -54,6 +54,7 @@ django-waffle = "^4.1.0"
 django-admin-site-search = "^0.4.0"
 django-admin-shellx = "0.2.6"
 channels-redis = "^4.2.0"
+django-htmx = "^1.17.3"
 
 [tool.poetry.group.dev.dependencies]
 pudb = "^2022.1.3"
