fix: pagination

config/tests/mixins.py

@@ -22,16 +22,7 @@ class TestUserAuthenticationMixin:
         self.setup_user_permissions()
 
     def login(self):
-        response = self.client.post(
+        self.client.force_login(self.user)
-            "/api/v1/auth/login/",
-            {
-                "username": self.user.username,
-                "password": self.password,
-            },
-        )
-
-        jwt_token = response.data.get("access")
-        self.client.credentials(HTTP_AUTHORIZATION=f"Bearer {jwt_token}")
 
     def setup_user_permissions(self):
         self.create_permission = Permission.objects.get(

web/templates/web/index.html

@@ -13,21 +13,12 @@
       hx-swap="innerHTML"
     >
       <div>
-        <ul id="products" class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4">
+        <section id="products">
-        </ul>
+
+        </section>
+
         <div class="w-full text-center">
-          <button type="button"
+
-                  class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
-                    hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
-                    focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
-                    dark:hover:text-white dark:focus:ring-gray-700"
-                  hx-get="{% url 'web:list_products' %}{% querystring request.GET %}{% querystring page=9 %}"
-                  hx-trigger="click"
-                  hx-target="#products"
-                  hx-swap="beforeend"
-          >
-            {% translate 'Mostrar mas' %}
-          </button>
         </div>
       </div>
     </section>

web/templates/web/list_products.html

@@ -1,7 +1,38 @@
 {% load i18n %}
 {% load static %}
-{% for product in products %}
+<ul class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4">
-  <li>
+  {% for product in page %}
-    {% include 'components/product_card.html' %}
+    <li>
-  </li>
+      {% include 'components/product_card.html' %}
-{% endfor %}
+    </li>
+  {% endfor %}
+</ul>
+
+{% if has_previous_page %}
+<button type="button"
+  class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
+    hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
+    focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
+    dark:hover:text-white dark:focus:ring-gray-700"
+  hx-get="{% url 'web:list_products' %}{% querystring page=page.previous_page_number %}"
+  hx-trigger="click"
+  hx-target="#products"
+  hx-swap="innerHTML"
+>
+  {% translate 'Anterior' %}
+</button>
+{% endif %}
+{% if has_next_page %}
+<button type="button"
+  class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
+    hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
+    focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
+    dark:hover:text-white dark:focus:ring-gray-700"
+  hx-get="{% url 'web:list_products' %}{% querystring page=page.next_page_number %}"
+  hx-trigger="click"
+  hx-target="#products"
+  hx-swap="innerHTML"
+>
+  {% translate 'Siguiente' %}
+</button>
+{% endif %}

web/views.py

@@ -22,10 +22,12 @@ class ListProducts(TemplateView, FilteredQuerysetMixin, PaginatedQuerysetMixin):
 
     def get_context_data(self, **kwargs):
         qs = self.get_queryset()
-        products = self.get_paginated_queryset(qs)
+        page = self.get_paginated_queryset(qs)
 
         return {
-            "products": products,
+            "page": page,
+            "has_next_page": page.has_next(),
+            "has_previous_page": page.has_previous(),
         }