Skip to content

Commit

Permalink
feat: Add htmx/reactivity to search page
Browse files Browse the repository at this point in the history
  • Loading branch information
@adinhodovic
adinhodovic committed May 30, 2024
1 parent 0a852a5 commit 38af4ab
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 62 deletions.
15 changes: 2 additions & 13 deletions django_wtf/core/search_view.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
from watson.views import SearchView as OriginalSearchView

from django_wtf.core.models import Repository
from django_wtf.core.models.category_model import Category
from django_wtf.core.views.index_view import categories_ordered_by_total_repositories


class SearchView(OriginalSearchView):
Expand All @@ -29,18 +29,7 @@ def get_queryset(self):
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()
ctx["categories"] = categories_ordered_by_total_repositories()
return ctx
26 changes: 13 additions & 13 deletions django_wtf/core/views/index_view.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
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 (
Expand All @@ -11,6 +10,18 @@
)


def categories_ordered_by_total_repositories():
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)


class IndexView(MetadataMixin, TemplateView):
template_name = "core/index.html"
title = "Django.WTF: The Django package index"
Expand All @@ -36,7 +47,7 @@ class IndexView(MetadataMixin, TemplateView):

def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["categories"] = self.categories_ordered_by_total_repositories()
context["categories"] = categories_ordered_by_total_repositories()
context["trending_apps"] = trending_repositories(days_since=14)[0:5]
context["trending_developers"] = trending_profiles()[0:5]
context["social_news"] = SocialNews.objects.filter(
Expand All @@ -45,16 +56,5 @@ def get_context_data(self, **kwargs):
context["top_apps"] = Repository.valid.order_by("-stars")[0:5]
return context

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_meta_image(self, context=None):
return static("images/logo.png")
45 changes: 19 additions & 26 deletions django_wtf/templates/core/components/_navbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,45 +37,38 @@
<a class="w-32 lg:ml-6" href="/">
<img src="{% static 'images/logo.png' %}" alt="Django.wtf">
</a>
<div class="hidden ml-12 lg:flex form-control">
<form id="search-form" action="{% url 'core:search' %}">
<input type="text"
name="q"
value="{{ request.GET.q }}"
placeholder="Search"
class="input input-bordered">
</form>
<script>
const form = document.querySelector("#search-form");
const input = form.querySelector("input");
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
form.submit();
}
});
</script>
</div>
<div class="hidden ml-10 lg:flex">
<ul class="p-0 text-white uppercase menu menu-horizontal">
<div class="hidden lg:flex gap-6">
<div class="hidden ml-16 lg:flex form-control">
{% if request.path != "/search/" %}
<form id="search-form" action="{% url 'core:search' %}">
<input type="text"
name="q"
value="{{ request.GET.q }}"
placeholder="Search"
class="input input-bordered text-sm">
</form>
{% endif %}
</div>
<ul class="text-white uppercase menu menu-horizontal menu-xs gap-4">
{% flag "newsletter" %}
<li class="btn btn-outline btn-accent">
<a href="{% url 'core:subscriber-landing' %}">Newsletter</a>
<a class="text-sm" href="{% url 'core:subscriber-landing' %}">Newsletter</a>
</li>
{% endflag %}
<li>
<a href="{% url 'core:top-repositories' %}">Best apps</a>
<a class="text-sm" href="{% url 'core:top-repositories' %}">Best apps</a>
</li>
<li>
<a href="{% url 'core:trending-repositories' %}">Trending apps</a>
<a class="text-sm" href="{% url 'core:trending-repositories' %}">Trending apps</a>
</li>
<li>
<a href="{% url 'core:top-profiles' %}">Best profiles</a>
<a class="text-sm" href="{% url 'core:top-profiles' %}">Best profiles</a>
</li>
<li>
<a href="{% url 'core:trending-profiles' %}">Trending profiles</a>
<a class="text-sm" href="{% url 'core:trending-profiles' %}">Trending profiles</a>
</li>
<li>
<a href="{% url 'core:social-media-news' %}">Social media news</a>
<a class="text-sm" href="{% url 'core:social-media-news' %}">Social media news</a>
</li>
</ul>
</div>
Expand Down
25 changes: 15 additions & 10 deletions django_wtf/templates/core/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@
<input type="text"
name="q"
value="{{ request.GET.q }}"
class="input input-bordered input-sm min-w-64"
hx-include="[name='category']"
hx-get="{% url 'core:search' %}"
hx-push-url="true"
hx-target="#search_table"
hx-trigger="keyup changed delay:1s"
hx-push-url="true" />
class="input input-bordered input-sm min-w-64" />
</label>
<div class="flex gap-4">
<label class="form-control">
Expand All @@ -22,18 +23,22 @@
</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 %}
hx-include="[name='q']"
hx-get="{% url 'core:search' %}"
hx-push-url="true"
hx-target="#search_table">
<option>All</option>
{% for category in categories %}
<option value="{{ category.name }}"
{% if category.name == request.GET.category %}selected{% endif %}>
{{ category.name }}
</option>
{% endfor %}
</select>
</label>
</div>
</form>
<table id="search_table" class="table table-sm mt-7">
{% include "core/search_table.html" %}
</table>
<div id="search_table" class="table table-sm mt-7">{% include "core/search_table.html" %}</div>
</div>
{% endblock content %}
25 changes: 25 additions & 0 deletions django_wtf/templates/core/search_table.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{% load admin_urls static %}

{% if object_list %}
{% for object in object_list %}
<div class="my-4 rounded">
<div class="shadow-xl card bg-base-200">
<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>
</div>
{% endfor %}
{% endif %}

0 comments on commit 38af4ab

Please sign in to comment.