gawa/blog/templates/blog/browse.html

@@ -19,7 +19,7 @@
             <div class="col col-xxl mb-5" id="headline">
                 <a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
                    href="{% url "blog:browse" %}"
-                   style="display: inline-block;">
+                   style="display: inline-block">
                     <h1 class="display-1 w-0">Browse</h1>
                 </a>
                 {# center headline on small screens #}
@@ -40,25 +40,49 @@
                                    aria-label="Search"
                                    placeholder="{% trans "Search" %}"
                                    required=""
+                                   {% if filters.search %}value="{{ filters.search }}"{% endif %}
                                    id="id_search">
                         </div>
                         <div class="py-2">
                             <select class="form-select py-2"
                                     aria-label="Large select example"
                                     name="category">
-                                <option value="" selected>{% trans "select category" %}</option>
+                                <option value="">{% trans "select category" %}</option>
-                                {% for category in categories %}<option value="{{ category.slug }}">{{ category.name }}</option>{% endfor %}
+                                {% for category in categories %}
+                                    <option {% if filters.category.slug == category.slug %}selected{% endif %}
+                                            value="{{ category.slug }}">{{ category.name }}</option>
+                                {% endfor %}
                             </select>
                         </div>
                         <div class="py-2">
-                            <input class="tagify" name="keywords" placeholder="{% trans "Keywords" %}">
+                            <input class="tagify"
+                                   name="keywords"
+                                   placeholder="{% trans "Keywords" %}"
+                                   {% if filters.keywords %} value="{% for keyword in filters.keywords %}{{ keyword }} {% endfor %}
+                                   "
+                                   {% endif %}>
+                        </div>
+                        <div class="row">
+                            <div class="col">
+                                <div class="py-2">
+                                    <input id="clear-button"
+                                           type="reset"
+                                           class="btn bg-primary fw-bold py-2 float-end w-100">
+                                </div>
+                            </div>
+                            <div class="col">
+                                <div class="py-2">
+                                    <button id="filter-button"
+                                            class="btn bg-primary fw-bold py-2 float-end w-100"
+                                            type="submit">{% trans "Filter" %}</button>
+                                </div>
+                            </div>
                         </div>
-                        <button class="btn bg-primary fw-bold py-2" type="submit">{% trans "Filter" %}</button>
                         <script>
-                    // The DOM element you wish to replace with Tagify
                             var input = document.querySelector('input[class=tagify]');
-                    // initialize Tagify on the above input node reference
+                            new Tagify(input, {
-                    new Tagify(input)
+                                originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
+                            })
                         </script>
                     </form>
                 </div>
@@ -70,7 +94,7 @@
                     {# TODO: display some info if the queryset is empty #}
                     {# TODO: pagination #}
                     {% for post in posts %}
-                        <div class="card col mx-auto my-2" style="min-width: 200px;">
+                        <div class="card col mx-auto my-2 py-2" style="min-width: 400px;">
                             <a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
                                href=" {% url 'blog:post' post.category.slug post.slug %}">
                                 <img src="{{ post.thumbnail.url }}"

gawa/blog/views.py

@@ -2,13 +2,15 @@ from django.shortcuts import Http404, HttpResponse, get_object_or_404, render
 from django.utils.translation import get_language
 from django.views.generic import TemplateView, DetailView, ListView, View
 from django.db.models import Q
-from .models import BlogPost, Category
+from .models import BlogPost, Category, Keyword
 
 from start.views import SearchableView
 
 import logging
 logger = logging.getLogger(__name__)
 
+import ast
+import json
 
 class Index(TemplateView, SearchableView):
     """
@@ -80,10 +82,44 @@ class Browse(ListView):
                 # Q(body_de__icontains=search) |
                 Q(slug__icontains=search)
             )
+
+        if "keywords" in self.request.GET and len(
+                self.request.GET["keywords"].strip()) > 0:
+            raw_keywords = self.request.GET["keywords"]
+            raw_keywords = raw_keywords.split('+')
+            keywords: list[Keyword] = []
+            for raw_keyword in raw_keywords:
+                try:
+                    keywords.append(Keyword.objects.get(slug=raw_keyword))
+                except Keyword.DoesNotExist:
+                    pass
+            logger.debug(f"found kws: {keywords}")
+            objects = objects.filter(keywords__in=keywords)
         return objects
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['featured_posts'] = BlogPost.objects.filter(featured=True)
         context['categories'] = Category.objects.all()
+
+        context["filters"] = {}
+        if "category" in self.request.GET and len(
+                self.request.GET["category"].strip()) > 0:
+            category = self.request.GET["category"]
+            try:
+                category = Category.objects.get(slug=category)
+                context["filters"]["category"] = category
+            except Category.DoesNotExist:
+                context["filters"]["category"] = None
+
+        if "search" in self.request.GET and len(
+                self.request.GET["search"].strip()) > 0:
+            search = self.request.GET["search"]
+            context["filters"]["search"] = search
+
+        if "keywords" in self.request.GET and len(
+                self.request.GET["keywords"].strip()) > 0:
+            keywords = self.request.GET["keywords"]
+            keywords = keywords.split('+')
+            context["filters"]["keywords"] = keywords
         return context