add product in comanda

gestaoRaul/comandas/htmx_views.py

@@ -0,0 +1,15 @@
+from django.shortcuts import render, redirect
+
+from comandas.models import Comanda, ProductComanda
+from products.models import Product
+
+
+def listProduct(request):
+    product = request.GET.get("search-product")
+    products = Product.objects.filter(name__icontains=product)
+    return render(request, "htmx_components/htmx_list_products.html", {"products": products})
+
+def addProduct(request, product_id, comanda_id):
+    product_comanda = ProductComanda(comanda_id=comanda_id, product_id=product_id)
+    product_comanda.save()
+    return render(request, "htmx_components/htmx_add_product.html",)

gestaoRaul/comandas/templates/viewcomanda.html

@@ -58,8 +58,15 @@ Detalhes {{comanda.name}}
     <div class="modal-content">
         <form id="productForm" >
             <h2>Adicionar Produto <button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button></h2>
-            <input type="text" id="search-product" name="search-product" required placeholder="Buscar Produto"><br>
+            <input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'listProduct' %}" hx-trigger="keyup" hx-target="#product-list"><br>
+              <div id="product-list" class="grid-list-products">
+                {% for product in products %}
 
+                 <div class="card" hx-get="{% url 'addProduct' product.id comanda.id %} " hx-trigger="click" hx-target="#product-list">
+                  {{product.name}}
+                 </div>
+                {% endfor %}
+              </div>
 
              <!-- <input type="number" step="1" id="product-qtd" name="qtd" required placeholder="Quantidade"><br> -->
             <!-- <button type="submit">Salvar</button> -->

gestaoRaul/comandas/urls.py

@@ -1,5 +1,7 @@
 
 from django.urls import path
+
+from comandas import htmx_views
 from . import views
 
 urlpatterns = [
@@ -10,3 +12,13 @@ urlpatterns = [
 
 
 ]
+
+
+htmx_urlpatterns = [
+    path('listProduct/', htmx_views.listProduct, name='listProduct'),
+    path('addProduct<int:product_id>/<int:comanda_id>/', htmx_views.addProduct, name='addProduct'),
+    # path('removeProduct/', views.removeProduct, name='removeProduct'),
+
+]
+
+urlpatterns += htmx_urlpatterns

gestaoRaul/comandas/views.py

@@ -1,9 +1,9 @@
 from django.shortcuts import render, redirect
 
 from comandas.models import Comanda, ProductComanda
+from products.models import Product
 from mesas.models import Mesa
 
-# Create your views here.
 
 def comandas(request):
     comandas = Comanda.objects.all()
@@ -12,26 +12,19 @@ def comandas(request):
 
 
 
-
 def viewComanda(request):
     id = request.GET.get('parametro')
     comanda_id = int(id)
     comanda = Comanda.objects.get(id=comanda_id)
     consumo = ProductComanda.objects.filter(comanda=comanda_id)
+    products = Product.objects.all()
     total = 0
     for produto in consumo:
         total += produto.product.price
   
-    return render(request, 'viewcomanda.html', {'comanda': comanda, 'consumo': consumo, 'total': total})
+    return render(request, 'viewcomanda.html', {'comanda': comanda, 'consumo': consumo, 'total': total, 'products': products})
 
 
-def addProduct(request):
-    pass
-    # id = request.GET.get('parametro')
-    # comanda_id = int(id)
-    # comanda = Comanda.objects.get(id=comanda_id)
-    # return render(request, 'addproduct.html', {'comanda': comanda})
-
 
 def createComanda(request):
     name = request.POST.get('name-comanda')

gestaoRaul/templates/base.html

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

gestaoRaul/templates/htmx_components/htmx_list_products.html

@@ -0,0 +1,13 @@
+
+
+{% for product in products %}
+
+    <div class="card">
+        {{product.name}}
+       </div>
+
+{% endfor %}
+
+
+
+

gestaoRaul/templates/static/comandas/css/viewcomanda.css

@@ -6,6 +6,14 @@
     margin: 0 auto; /* Centraliza o grid na página */
   }
 
+  .grid-list-products {
+    display: grid;
+    grid-template-columns: repeat(3, 2fr);
+    gap: 10px;
+    max-width: 800px; /* Define a largura máxima do grid */
+    margin: 0 auto; /* Centraliza o grid na página */
+  }
+
 .card {
     width: 120px;
     height: 120px;