Add sorting tab to snippet list. (#602)

Author: Antoliny0919

base/components/components.py

@@ -3,6 +3,7 @@
 from django_components import Component, register
 from pydantic import BaseModel
 
+from base.main import TAB_VAR, ObjectList
 from base.pagination import PAGE_VAR, Pagination
 from base.templatetags.base_templatetags import querystring
 
@@ -68,3 +69,38 @@ def get_template_data(self, args, kwargs, slots, context):
             "next_page_link": next_page_link,
             "page_elements": page_elements,
         }
+
+
+class TabItem(BaseModel):
+    text: str
+    is_current: bool
+    attrs: Optional[dict]
+
+
+@register("sorting_tabs")
+class SortingTabs(Component):
+    template_file = "sorting_tabs.html"
+
+    class Kwargs(BaseModel):
+        object_list: ObjectList
+        model_config = {"arbitrary_types_allowed": True}
+
+    def create_tab(self, object_list: ObjectList, tab: str) -> TabItem:
+        verbose_text = tab.replace("_", " ").title()
+        is_current = tab == object_list.current_tab
+        link = querystring(None, {**object_list.params, TAB_VAR: tab})
+        attrs = {"href": link}
+        if is_current:
+            attrs["aria-selected"] = "true"
+        return TabItem(text=verbose_text, is_current=is_current, attrs=attrs)
+
+    def create_all_tabs(self, object_list: ObjectList):
+        tabs = [self.create_tab(object_list, tab) for tab in object_list.sorting_tabs]
+        return tabs
+
+    def get_template_data(self, args, kwargs, slots, context):
+        object_list = kwargs.object_list
+        return {
+            "tabs": self.create_all_tabs(object_list),
+            "object_list": object_list,
+        }

base/components/sorting_tabs.html

@@ -0,0 +1,8 @@
+<nav aria-labelledby="sorting-tabs">
+    <h2 id="sorting-tabs" class="sr-only">Sorting Tabs</h2>
+    <ul class="m-0 nline-flex gap-2 p-2 border-2 border-base-green-400 rounded-lg font-common">
+        {% for tab in tabs %}
+        <li><a {% html_attrs tab.attrs %} class="inline-block px-4 py-2 rounded-md {% if tab.is_current %}bg-base-green-400 text-base-white-400 no-underline{% else %}underline duration-300 transition-colors hover:bg-base-green-400/30 hover:text-base-green-800{% endif %}">{{ tab.text }}</a></li>
+        {% endfor %}
+    </ul>
+</nav>

base/main.py

@@ -1,21 +1,42 @@
 from .pagination import PAGE_VAR, Pagination
 
+TAB_VAR = "tab"
+
 
 class ObjectList:
     pagination_class = Pagination
+    base_ordering = ()
+    sorting_tabs = {}
 
     def __init__(self, request, model, queryset, list_per_page):
         self.model = model
+        self.opts = model._meta
         self.queryset = queryset
         self.list_per_page = list_per_page
-        self.params = dict(request.GET.lists())
+        self.params = dict(request.GET.dict())
+        self.current_tab = self.params.get(TAB_VAR, None)
+        if self.opts.ordering:
+            self.base_ordering = self.opts.ordering
         if PAGE_VAR in self.params:
             del self.params[PAGE_VAR]
-        self.result_objects = self.get_objects(request)
+        self.result_objects = self.get_objects(request, queryset)
 
     def __iter__(self):
         return iter(self.result_objects)
 
+    def tab_sort(self, queryset):
+        result_queryset = queryset
+        if self.current_tab:
+            sort_value = self.sorting_tabs[self.current_tab]
+            result_queryset = result_queryset.order_by(*sort_value, *self.base_ordering)
+        else:
+            for tab_name, tab_order in self.sorting_tabs.items():
+                if tab_order == self.base_ordering:
+                    self.current_tab = tab_name
+                    break
+
+        return result_queryset
+
     def paginate(self, request, queryset):
         pagination = self.pagination_class(
             request,
@@ -26,6 +47,7 @@ def paginate(self, request, queryset):
         self.pagination = pagination
         return pagination.get_objects()
 
-    def get_objects(self, request):
-        paginate_result = self.paginate(request, self.queryset)
+    def get_objects(self, request, queryset):
+        tab_result = self.tab_sort(queryset)
+        paginate_result = self.paginate(request, tab_result)
         return paginate_result

base/tests/test_components.py

@@ -0,0 +1,49 @@
+from django.test import RequestFactory, TestCase
+
+from base.components.components import SortingTabs
+from base.main import ObjectList
+
+from .models import Fish
+
+
+class FishList(ObjectList):
+    sorting_tabs = {
+        "newest": ("-id",),
+        "oldest": ("id",),
+        "high_price": ("-price",),
+        "low_price": ("price",),
+    }
+
+
+class SortingTabsComponentTests(TestCase):
+
+    @classmethod
+    def setUpTestData(cls):
+        fish_data = [Fish(name=f"fish-{i}", price=i * 100) for i in range(1, 21)]
+        cls.factory = RequestFactory()
+        fishs = Fish.objects.bulk_create(fish_data)
+        cls.queryset = Fish.objects.filter(pk__in=[f.pk for f in fishs])
+        cls.components = SortingTabs()
+
+    def test_create_tab_items(self):
+        request = self.factory.get("?tab=high_price")
+        object_list = FishList(request, Fish, self.queryset, 10)
+        tab = self.components.create_tab(object_list, "newest")
+        self.assertEqual(tab.text, "Newest")
+        self.assertFalse(tab.is_current)
+        self.assertEqual(tab.attrs, {"href": "?tab=newest"})
+
+        tab = self.components.create_tab(object_list, "high_price")
+        self.assertEqual(tab.text, "High Price")
+        self.assertTrue(tab.is_current)
+        self.assertEqual(tab.attrs, {"aria-selected": "true", "href": "?tab=high_price"})
+
+    def test_create_all_tab_items(self):
+        request = self.factory.get("")
+        object_list = FishList(request, Fish, self.queryset, 10)
+        tabs = self.components.create_all_tabs(object_list)
+        self.assertEqual(len(tabs), 4)
+        self.assertEqual(tabs[0].text, "Newest")
+        self.assertEqual(tabs[1].text, "Oldest")
+        self.assertEqual(tabs[2].text, "High Price")
+        self.assertEqual(tabs[3].text, "Low Price")

cab/main.py

@@ -0,0 +1,10 @@
+from base.main import ObjectList
+
+
+class SnippetList(ObjectList):
+    sorting_tabs = {
+        "newest": ("-pub_date",),
+        "latest_updated": ("-updated_date",),
+        "highest_rated": ("-rating_score",),
+        "most_bookmarked": ("-bookmark_count",),
+    }

cab/tests/tests.py

@@ -292,26 +292,6 @@ def test_popular_views(self):
         tag_names = [tag.name for tag in resp.context["object_list"]]
         self.assertEqual(tag_names, ["world", "goodbye", "haxor", "hello"])
 
-        top_bookmarked = reverse("cab_top_bookmarked")
-        self.assertEqual(top_bookmarked, "/popular/bookmarked/")
-
-        resp = self.client.get(top_bookmarked)
-        self.assertEqual(resp.status_code, 200)
-        s1, s3, s2 = resp.context["object_list"]
-        self.assertEqual(s1, self.snippet1)
-        self.assertEqual(s3, self.snippet3)
-        self.assertEqual(s2, self.snippet2)
-
-        top_rated = reverse("cab_top_rated")
-        self.assertEqual(top_rated, "/popular/rated/")
-
-        resp = self.client.get(top_rated)
-        self.assertEqual(resp.status_code, 200)
-        s1, s3, s2 = resp.context["object_list"]
-        self.assertEqual(s1, self.snippet1)
-        self.assertEqual(s3, self.snippet3)
-        self.assertEqual(s2, self.snippet2)
-
     def test_tag_detail(self):
         tag_detail = reverse("cab_snippet_matches_tag", args=["world"])
         self.assertEqual(tag_detail, "/tags/world/")

cab/urls/popular.py

@@ -4,6 +4,4 @@
 
 urlpatterns = [
     path("languages/", popular.top_languages, name="cab_top_languages"),
-    path("bookmarked/", popular.top_bookmarked, name="cab_top_bookmarked"),
-    path("rated/", popular.top_rated, name="cab_top_rated"),
 ]

cab/utils.py

@@ -7,9 +7,10 @@
 from django.utils.safestring import mark_safe
 from markdown import markdown as markdown_func
 
-from base.main import ObjectList
 from base.pagination import Pagination
 
+from .main import SnippetList
+
 
 def object_list(
     request,
@@ -45,7 +46,7 @@ def object_list(
     opts = model._meta
     if paginate_by:
         if queryset.model == Snippet:
-            object_list = ObjectList(request, queryset.model, queryset, 15)
+            object_list = SnippetList(request, queryset.model, queryset, 15)
             pagination = object_list.pagination
         else:
             pagination = Pagination(request, model, queryset, paginate_by)

djangosnippets/templates/base.html

@@ -8,7 +8,7 @@
   <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Libertinus+Sans:ital,wght@0,400;0,700;1,400&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
   <link rel="alternate" href="{% url 'cab_feed_latest' %}" type="application/atom+xml" title="Feed of latest snippets" />
   <link rel="stylesheet" href="{% static "css/main.css" %}" type="text/css" />
   {% block feeds %}{% endblock %}
@@ -45,8 +45,6 @@
         <li><a hx-get="{% url 'cab_top_authors' %}" hx-target="#base-container" hx-swap="innerHTML" hx-trigger="click" hx-push-url="true">By author</a></li>
         <li><a hx-get="{% url 'cab_language_list' %}" hx-target="#base-container" hx-swap="innerHTML" hx-trigger="click" hx-push-url="true">By language</a></li>
         <li><a hx-get="{% url 'cab_top_tags' %}" hx-target="#base-container" hx-swap="innerHTML" hx-trigger="click" hx-push-url="true">By tag</a></li>
-        <li><a hx-get="{% url 'cab_top_rated' %}" hx-target="#base-container" hx-swap="innerHTML" hx-trigger="click" hx-push-url="true">Highest rated</a></li>
-        <li><a hx-get="{% url 'cab_top_bookmarked' %}" hx-target="#base-container" hx-swap="innerHTML" hx-trigger="click" hx-push-url="true">Most bookmarked</a></li>
       </ul>
     </nav>
     {% endblock %}
@@ -62,6 +60,7 @@
 
   <div id="base-container">
   <h1>{% block content_header %}{% endblock %}</h1>
+  {% block new_content_header %}{% endblock %}
   {% with current_url_name=request.resolver_match.url_name %}
   <div id="content" class="{% if current_url_name == 'home' %}w-1/2{% else %}w-full{% endif %}">
       {% block content %}