trocando pesquisa reativo de htmx para ajax

gestaoRaul/balcao/htmx_views.py

@@ -1,16 +1,24 @@
 from django.shortcuts import render, redirect
+from django.views.decorators.csrf import csrf_exempt
+
 
 from comandas.models import Comanda, ProductComanda
 from products.models import Product
 from payments.models import Payments
 from typePay.models import TypePay
 
-
+@csrf_exempt
-def listProductBalcao(request, comanda_id):
+def listProductBalcao(request, comanda_id, search_product):
-    product = request.GET.get("search-product")
+    print('chegouuuuuuuuuuuuuuuuuuuuuuuuuuu')
+    product = search_product
     products = Product.objects.filter(name__icontains=product)
-    print(products)
+    return render(request, "htmx_components/htmx_list_products_balcao.html", {"products": products,'comanda_id':comanda_id})
-    return render(request, "htmx_components/htmx_list_products_balcao.html", {"products": products,})
+
+
+# def listProductBalcao(request, comanda_id):
+#     product = request.GET.get("search-product")
+#     products = Product.objects.filter(name__icontains=product)
+#     return render(request, "htmx_components/htmx_list_products_balcao.html", {"products": products,'comanda_id':comanda_id})
 
 def addProductBalcao(request, product_id, comanda_id, qtd):
     for i in range(qtd):

gestaoRaul/balcao/templates/viewBalcao.html

@@ -72,15 +72,13 @@
             <h2 style="text-align: center;">Buscar Produto </h2>
             <div class="grid-container">
               <input 
-              onwaiting="salvarValor()"
+              onkeypress="searchProduct()"
               type="text" 
               id="search-product" 
               name="search-product" 
               autofocus 
               placeholder="Buscar Produto" 
-              hx-get="{% url 'listProductBalcao' comanda.id %}" 
+              
-              hx-trigger="keyup" 
-              hx-target="#product-list"
               >
             <input type="number" id="qtd-product" name="qtd-product" value="1" required min="1"><br>
           </div>
@@ -94,7 +92,7 @@
                 id="productId-{{ product.id }}" 
               
                 style="background-color: #293552;" 
-                hx-get="{% url 'addProductBalcaoTeclado' product.id comanda.id 1 %}" hx-trigger="click" hx-target="#list-products-balcao" 
+                
                 >
                 <p hidden id="{{forloop.counter0}}" >{{product.id}}</p>
                 <p hidden id="comanda{{forloop.counter0}}" >{{comanda.id}}</p>
@@ -108,9 +106,9 @@
                 name="productBox"
                 id="productId-{{ product.id }}" 
                 style="background-color: #293552;" 
-                hx-get="{% url 'addProductBalcaoTeclado' product.id comanda.id 1 %} " hx-trigger="click" hx-target="#list-products-balcao" 
+                
-                ><data value="{{product.id}}"></data>
+                >
-                  {{ forloop.counter0 }} {{product.name}} <br>
+                  {{product.name}} <br>
                   R$ {{product.price}}
                 </article >
 

gestaoRaul/balcao/urls.py

@@ -14,7 +14,7 @@ urlpatterns = [
 
 htmx_urlpatterns = [
     # path('listProduct/', htmx_views.listProduct, name='listProduct'),
-    path('listProductBalcao/<int:comanda_id>/', htmx_views.listProductBalcao, name='listProductBalcao'),
+    path('listProductBalcao/<int:comanda_id>/<str:search_product>/', htmx_views.listProductBalcao, name='listProductBalcao'),
     path('addProductBalcao<int:product_id>/<int:comanda_id>/<int:qtd>/', htmx_views.addProductBalcao, name='addProductBalcao'),
     path('addProductBalcaoTeclado<int:product_id>/<int:comanda_id>/<int:qtd>/', htmx_views.addProductBalcaoTeclado, name='addProductBalcaoTeclado'),
     path('removeProductBalcao<int:productComanda_id>/', htmx_views.removeProductBalcao, name='removeProductBalcao'),

gestaoRaul/templates/base.html

@@ -9,7 +9,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
     <link rel="stylesheet" href="{% static 'pico.css' %}">
-    <script src="{% static 'htmx_base.js' %}"></script>
     {% block 'head' %}
     
     {% endblock  %}
@@ -38,5 +37,6 @@
 <body>
     {% block 'body' %}
     {% endblock  %}
+    <script src="{% static 'htmx_base.js' %}"></script>
 </body>
 </html>

gestaoRaul/templates/htmx_components/htmx_list_products_balcao.html

@@ -8,10 +8,10 @@
                 name="productBox"
                 id="productId-{{ product.id }}" 
                 style="background-color: #293552;" 
-                hx-get="{% url 'addProductBalcaoTeclado' product.id comanda.id 1 %} " hx-trigger="click" hx-target="#list-products-balcao" 
+                
                 >
                 <p hidden id="{{forloop.counter0}}" >{{product.id}}</p>
-                <p hidden id="comanda{{forloop.counter0}}" >{{comanda.id}}</p>
+                <p hidden id="comanda{{forloop.counter0}}" >{{comanda_id}}</p>
                 {{product.name}} <br> <p id="{{product.id}}"></p>
                 R$ {{product.price}}
                 </article >
@@ -22,9 +22,9 @@
                 name="productBox"
                 id="productId-{{ product.id }}" 
                 style="background-color: #293552;" 
-                hx-get="{% url 'addProductBalcaoTeclado' product.id comanda.id 1 %} " hx-trigger="click" hx-target="#list-products-balcao" 
+                
-                ><data value="{{product.id}}"></data>
+                >
-                {{ forloop.counter0 }} {{product.name}} <br>
+                {{product.name}} <br>
                 R$ {{product.price}}
                 </article >
 

gestaoRaul/templates/static/comandas/js/viewbalcao.js

@@ -103,10 +103,10 @@ document.onkeydown = teclado
 
 function teclado(event){
   if (event.keyCode == 13){
-    // const productId = document.getElementById('0').value;
-    // const comandaId = document.getElementById('comanda0').value;
     addProductBalcao()
     reloadPage()
+  }else{
+    console.log(event.keyCode)
   }
 
 }
@@ -132,9 +132,6 @@ function addProductBalcao() {
   reloadPage()
 }
 
-// document.getElementById('openModal').addEventListener('click', openModal);
-
-
 
 document.getElementById('productForm').addEventListener('submit', function(event) {
     event.preventDefault(); 
@@ -152,3 +149,41 @@ qtd.addEventListener('input', () => {
 });
 
 
+
+
+function searchProduct() {
+  var search_product = document.getElementById('search-product').value
+  var productListElement = document.getElementById("product-list");
+  if(search_product.length >= 1){
+  fetch(`/balcao/listProductBalcao/13/${search_product}`, {
+    method: 'GET',
+  }
+  ).then(function(response) {
+    return response.text();
+  }).then(function(text) {
+    productListElement.innerHTML = text;
+    
+  })}
+  
+}
+
+function addProductClick(productId, comandaId) {
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", "{% url 'addProductBalcaoTeclado' product.id comanda.id 1 %}", true);
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4 && xhr.status === 200) {
+      var response = JSON.parse(xhr.responseText);
+      var listProductsBalcaoElement = document.getElementById("list-products-balcao");
+      listProductsBalcaoElement.innerHTML = response.html;
+    }
+  };
+  xhr.send();
+}
+
+
+
+// hx-get="{% url 'listProductBalcao' comanda.id %}" 
+//               hx-trigger="keyup" 
+//               hx-target="#product-list"
+
+// hx-get="{% url 'addProductBalcaoTeclado' product.id comanda.id 1 %}" hx-trigger="click" hx-target="#list-products-balcao"