trocando pesquisa reativo de htmx para ajax

This commit is contained in:
2024-12-27 15:19:51 -03:00
parent e7212ab688
commit a1866c842c
9 changed files with 70 additions and 29 deletions

View File

@@ -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
def listProductBalcao(request, comanda_id):
product = request.GET.get("search-product")
@csrf_exempt
def listProductBalcao(request, comanda_id, 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,})
return render(request, "htmx_components/htmx_list_products_balcao.html", {"products": products,'comanda_id':comanda_id})
# 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):

View File

@@ -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 >

View File

@@ -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'),

Binary file not shown.

View File

@@ -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 %}
@@ -18,7 +17,7 @@
<div>
<!-- aqui o menu -->
<nav >
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
@@ -32,11 +31,12 @@
<!-- <div class="content">
<h1>Bem-vindo ao meu site!</h1>
</div> -->
</div>
<body>
{% block 'body' %}
{% endblock %}
<script src="{% static 'htmx_base.js' %}"></script>
</body>
</html>

View File

@@ -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 >

View File

@@ -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();
@@ -151,4 +148,42 @@ qtd.addEventListener('input', () => {
console.log(chave, valor);
});
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"