feat: debounce name search added

.github/workflows/runtests.yml

@@ -19,6 +19,7 @@ jobs:
       - name: Run tests
         env:
           DJANGO_SETTINGS_MODULE: config.settings
+          DEBUG: True
         run: pytest --cov && coverage xml
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v4.0.1

config/settings/base.py

@@ -219,5 +219,3 @@ SIMPLE_JWT = {
 }
 
 TAILWIND_APP_NAME = "theme"
-
-ITEMS_PER_PAGE = 10

config/settings/environ.py

@@ -48,3 +48,5 @@ REDSYS_MERCHANT_CODE = env.str("REDSYS_MERCHANT_CODE", "999008881")
 REDSYS_TERMINAL = env.str("REDSYS_TERMINAL", "001")
 REDSYS_CURRENCY_CODE = env.str("REDSYS_CURRENCY_CODE", "978")
 REDSYS_TPV_DOMAIN = env.str("REDSYS_TPV_DOMAIN", "")
+
+ITEMS_PER_PAGE = env.int("ITEMS_PER_PAGE", 10)

requirements.txt

@@ -1,9 +1,9 @@
 boto3==1.34.105
 celery==5.4.0
-django==5.0.6
+django==5.1.3
 django-cors-headers==3.13.0
 django-cryptography==1.1
-django-debug-toolbar==3.7.0
+django-debug-toolbar==4.4.6
 django-extensions==3.2.0
 django-filter==23.1
 django-environ==0.10.0
@@ -13,13 +13,13 @@ django-storages==1.13.2
 django-tailwind==3.8.0
 django-unfold==0.12.0
 dj-database-url==1.0.0
-djangorestframework-simplejwt==5.3.0
+djangorestframework-simplejwt==5.3.1
 drf-spectacular==0.26.1
 ipython==8.16.1
 Pillow==10.0.1
 psycopg2-binary==2.9.9
 pyDes==2.0.1
 redis==4.5.4
-requests==2.31.0
+requests==2.32.3
 uvicorn==0.21.1
 xmltodict==0.13.0

shop/filters.py

@@ -5,6 +5,9 @@ from shop.models import Product
 
 
 class ProductFilter(django_filters.FilterSet):
+    name = django_filters.CharFilter(
+        field_name="name", lookup_expr="icontains", label=_("Nombre")
+    )
     tags = django_filters.BaseInFilter(field_name="tags", label=_("Etiquetas"))
 
     class Meta:

shop/templates/components/products/list_filters.html

@@ -0,0 +1,34 @@
+<section class="bg-gray-50 dark:bg-gray-900 flex items-center my-4">
+  <div class="max-w-screen-xl px-4 mx-auto lg:px-12 w-full">
+    <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
+      <div class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
+        <div class="w-full md:w-full">
+          <form class="flex items-center"
+                hx-get="{% url 'shop:list_products' %}"
+                hx-target="#products"
+                hx-trigger="keyup changed delay:500ms"
+                hx-swap="innerHTML"
+          >
+            <label for="simple-search" class="sr-only">Buscar</label>
+            <div class="relative w-full">
+              <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
+                     viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd"
+                        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                        clip-rule="evenodd"/>
+                </svg>
+              </div>
+              <input
+                type="text"
+                name="name"
+                class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                placeholder="Buscar"
+                autocomplete="off">
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

shop/templates/shop/index.html

@@ -3,7 +3,30 @@
 {% load static %}
 
 {% block main %}
-  <main class="bg-gray-50 dark:bg-gray-900" hx-get="{% url 'shop:list_products' %}" hx-trigger="load">
+  <div>
-
+    {% include 'components/products/list_filters.html' %}
-  </main>
+  <section
+    class="p-8"
+    hx-get="{% url 'shop:list_products' %}{% querystring request.GET %}"
+    hx-trigger="load"
+    hx-target="#products"
+    hx-swap="innerHTML"
+  >
+    <div>
+      <div id="products" class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4">
+      </div>
+      <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 'shop:list_products' %}{% querystring request.GET %}{% querystring page=9 %}"
+                hx-trigger="click"
+                hx-target="#products"
+                hx-swap="beforeend"
+        >
+          Mostrar mas
+        </button>
+      </div>
+    </div>
+  </section>
+  </div>
 {% endblock %}

shop/templates/shop/list_products.html

@@ -1,21 +1,5 @@
-{% extends 'theme/base.html' %}
+{% load i18n %}
-
 {% load static %}
-
+{% for product in products %}
-{% block main %}
-  <section class="py-8 antialiased md:py-12">
-    <section class="bg-gray-50 py-8 antialiased dark:bg-gray-900 md:py-12">
-      <div class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4">
-        {% for product in products %}
   {% include 'components/product_card.html' %}
-        {% endfor %}
+{% endfor %}
-        <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">
-            Show more
-          </button>
-        </div>
-      </div>
-    </section>
-  </section>
-{% endblock %}

theme/templates/theme/base.html

@@ -12,8 +12,8 @@
   {% block extra_js %}
   {% endblock %}
 </head>
-<body>
+<body class="bg-gray-50 dark:bg-gray-900">
-<main>
+<main class="py-8 antialiased md:py-12">
   {% block main %}
 
   {% endblock %}