feat: page clients and create client

gestaoRaul/balcao/templates/viewBalcao.html

@@ -18,7 +18,6 @@
   <div class="grid-container">
     <div style="text-align: center;">
       <h1>Venda Balcão</h1>
-      <input hidden  id="id-comanda-balcao" type="text" name="id-comanda-balcao" value="{{comanda.id}}">
       <div>
 
         <button id="pagarComanda" onclick="modal_payment_comanda()"
@@ -75,7 +74,7 @@
           <article 
             name="productBox" 
             id="productId-{{ product.id }}"
-            onclick="addProductClick({{product.id}})" 
+            onclick="addProductClick({{product.id}} , {{comanda.id}})" 
             style="background-color: #293552;">
             <p hidden id="{{forloop.counter0}}">{{product.id}}</p>
             <p hidden id="comanda{{forloop.counter0}}">{{comanda.id}}</p>
@@ -89,7 +88,7 @@
           <article 
             name="productBox" 
             id="productId-{{ product.id }}"
-            onclick="addProductClick({{product.id}} )" 
+            onclick="addProductClick({{product.id}} , {{comanda.id}})" 
             style="background-color: #293552;">
             {{product.name}} <br>
             R$ {{product.price}}

gestaoRaul/clients/migrations/0002_client_created_at_client_debt.py

@@ -0,0 +1,26 @@
+# Generated by Django 5.1.4 on 2025-01-15 23:06
+
+import django.utils.timezone
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('clients', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='client',
+            name='created_at',
+            field=models.DateTimeField(auto_now_add=True, default=django.utils.timezone.now),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name='client',
+            name='debt',
+            field=models.DecimalField(decimal_places=2, default=1, max_digits=10),
+            preserve_default=False,
+        ),
+    ]

gestaoRaul/clients/models.py

@@ -4,5 +4,10 @@ from django.db import models
 class Client(models.Model):
     id = models.AutoField(primary_key=True)
     name = models.CharField(max_length=255)
+    debt = models.DecimalField(max_digits=10, decimal_places=2)
+    created_at = models.DateTimeField(auto_now_add=True)
     active = models.BooleanField(default=True)
     contact = models.CharField(max_length=255, null=True, blank=True)
+
+    def __str__(self) -> str:
+        return self.name

gestaoRaul/clients/templates/clients.html

@@ -1,12 +1,104 @@
 {% extends "base.html" %}
+{% load static %}
 
 
 
 
 {% block 'title' %}
-Type Pay
+Clientes
 {% endblock %}
 
 {% block 'body' %}
-Body Type Pay
+
+
+<div class="grid-container">
+    <div class="grid-top">
+      <button style="
+      width: 30%; 
+      margin: 5px 10px 20px 10px;"
+       onclick="openModal()" id="openModal">Novo Cliente</button>
+    </div>
+
+    <table id="client-list">
+      <tr>
+        <th style="text-align: left;">Cliente</th>
+        <th style="text-align: left;width: 20%;">Débito</th>
+        <th class="hide-on-mobile" style="text-align: left;">Contato</th>
+        <th style="text-align: left;width: 20%;">Ações</th>
+      </tr>
+
+  {% for client in clients %}
+
+  <tr>
+    <td id="name-{{client.id}}" >{{client.name}}</td>
+    <td id="debt-{{client.id}}" >R$ {{client.debt}}</td>
+    <td class="hide-on-mobile" id="contact-{{client.id}}" >{{client.contact}}</td>
+    <td>
+      <div class="grid-buttons">
+      <img 
+      src="{% static 'midia/icons/edit.svg' %}" 
+      style=" width: 35px; height: 35px; cursor: pointer;" 
+      onclick="editclient({{client.id}})" >
+    </img>
+
+      <input type="hidden" id="name-{{client.id}}" value="{{ client.name }}">
+      <input type="hidden" id="contact-{{client.id}}" value="{{ client.contact }}">
+
+      <form hx-post="{% url 'payDebt' %}" hx-trigger="click"  hx-target="#client-list">
+        {% csrf_token %}
+        <input type="hidden"  name="id-client" id="id-{{client.id}}" value="{{ client.id }}">
+
+
+      <button style="background-color: rgba(255, 0, 0, 0); padding: 0px;">
+        <img 
+      src="{% static 'midia/icons/toggle-on.svg' %}" 
+      style=" width: 35px; height: 35px; cursor: pointer;" 
+       >
+    </img>
+      </button>
+
+
+
+    </form>
+  </div>
+    </td>
+  </tr>
+
+  {% endfor %} 
+
+</table>
+</div>
+
+
+
+<dialog  id='Modal-create-client'  >
+    <article >
+      <form action="{% url 'createClient' %}" id="clientForm" method="post" >
+
+        {% csrf_token %}
+          <h2>Cadastro Cliente</h2>
+          <input  type="text" id="clientId" name="clientId"  hidden >
+
+          <input  type="text" id="clientName" name="name" required placeholder="Nome">
+           <input type="number" step="0.01" id="clientDebt" name="debt" required placeholder="Débito">
+           <input type="checkbox" id="active" name="active" placeholder="Ativo">Ativo
+           
+          <input type="text" id="clientDescription" name="contact"  placeholder="Contato"></input>
+          <footer class="grid-buttons">
+            <button id="save" type="submit">Salvar</button>
+            <button onclick="closeModal()" type="button" id="edit" hx-post="{% url 'createClient'  %}" hx-trigger="click"  hx-target="#client-list" >Alterar</button>
+            <button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button>
+          </footer>
+      </form>
+
+    </article>
+  </dialog>
+
+
+
+
+<script src="{% static 'clients/js/clients.js' %}"></script>
+
+
+
 {% endblock %}

gestaoRaul/clients/urls.py

@@ -4,6 +4,8 @@ from . import views
 
 urlpatterns = [
     path('', views.clients, name='clients'),
+    path('createClient', views.createClient, name='createClient'),
+    path('payDebt', views.payDebt, name='payDebt'),
 
 
 

gestaoRaul/clients/views.py

@@ -1,8 +1,31 @@
-from django.shortcuts import render
+from django.shortcuts import render, redirect
 from django.contrib.auth.models import User
 
 from gestaoRaul.decorators import group_required
+from clients.models import Client
 
 
+
+@group_required(groupName='Gerente')
 def clients(request):
-    return render(request, 'clients.html')
+    clients = Client.objects.all()
+    return render(request, 'clients.html', {'clients': clients})
+
+
+@group_required(groupName='Gerente')
+def createClient(request):
+    name = request.POST.get('name')
+    contact = request.POST.get('contact')
+    active = True if request.POST.get('active') else False
+    # debt = request.POST.get('debt')
+    client = Client(name=name, contact=contact,debt=0, active=active)
+    client.save()
+    return redirect('/clients')
+
+def payDebt(request):
+    # id = request.POST.get('id-client')
+    # client_id = int(id)
+    # client = Client.objects.get(id=client_id)
+    # client.debt = client.debt - 1
+    # client.save()
+    return redirect('/clients')

gestaoRaul/comandas/templates/viewcomanda.html

@@ -65,7 +65,7 @@ Detalhes {{comanda.name}}
      <div>
       <input hidden type="text" id="h-mesaId" value="{{comanda.mesa.id}}">
        <span id="name-comanda">Nome: {{comanda.name}} | </span>
-       <span id="mesa-comanda">Mesa: {{comanda.mesa}}</span>
+       <span id="mesa-comanda">Local: {{comanda.mesa}}</span>
 
        <img
         onclick="openModalAlter()"

gestaoRaul/templates/static/clients/css/clients.css

@@ -0,0 +1,110 @@
+
+button {
+    background-color: #007BFF;
+    color: white;
+    padding: 10px 10px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+.modal {
+    display: none; 
+    position: fixed; 
+    padding: 20px;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4); 
+    transform: translate(-50%, -50%);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    border-radius: 10px;
+    width: 90%; 
+    max-width: 500px;
+}
+
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px; 
+}
+
+input, textarea {
+    width: 95%;
+    max-width: 95%;
+    padding: 8px;
+    margin-top: 5px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+* dialog {
+    transform: scale(1);
+    /* display: flexbox;
+    max-width: 200;
+    max-height: 400; */
+}
+
+
+
+.grid-buttons {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    max-width: 500px; /* Define a largura máxima do grid */
+    /* margin: 0 auto;  */
+  }
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 20px;
+    max-width: 1300px; 
+    margin: 0 auto; 
+  }
+
+.grid-top {
+    display: flex;
+    width: 100%; 
+  }
+
+.card {
+    width: 100%;
+    height: 120px;
+    background-color: #f2f2f2;
+    border-radius: 15px;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    line-height: 120px; /* Centraliza o texto verticalmente */
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    transition: transform 0.2s;
+  }
+
+.card:hover {
+    transform: scale(1.05);
+    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
+  }
+
+
+  
+
+  @media (max-width: 768px) {
+    .hide-on-mobile {
+      display: none;
+    }
+  }

gestaoRaul/templates/static/clients/js/clients.js

@@ -0,0 +1,53 @@
+function openModal() {
+    document.getElementById('Modal-create-client').style.display = 'block';
+    var clientId = document.getElementById('clientId');
+    var clientName = document.getElementById('clientName');
+    var clientDebt = document.getElementById('clientDebt');
+    var clientContact = document.getElementById('clientContact');
+    var clientActive = document.getElementById('active');
+
+    var buttonEdit = document.getElementById('edit');
+    var buttonSave = document.getElementById('save');
+    buttonEdit.style.display = 'none';
+    buttonSave.style.display = 'block';
+
+    clientId.value = '';
+    clientName.value = '';
+    clientDebt.value = '';
+    clientContact.value ='';
+    clientActive.checked = false
+}
+
+function closeModal() {
+    document.getElementById('Modal-create-client').style.display = 'none';
+}
+
+function editclient(id) {
+
+    openModal();
+    var buttonSave = document.getElementById('save');
+    var buttonEdit = document.getElementById('edit');
+    buttonSave.style.display = 'none';
+    buttonEdit.style.display = 'block';
+    var clientId = document.getElementById('clientId');
+    var clientName = document.getElementById('clientName');
+    var clientDebt = document.getElementById('clientDebt');
+    var clientContact = document.getElementById('clientContact');
+    var clientqtd = document.getElementById('clientqtd');
+    var clientActive = document.getElementById('active');
+    var categorie = document.getElementById('select-categorie');
+
+    clientId.value = id;
+    clientName.value = document.getElementById('name-'+id).innerHTML;
+    var preco = document.getElementById('debt-'+id).innerHTML;
+    preco = preco.replace('R$ ', '');
+    preco = preco.replace(',', '.');
+    clientDebt.value = preco;
+    clientContact.value = document.getElementById('contact-'+id).value;
+    clientqtd.value = document.getElementById('quantity-'+id).innerHTML;
+    clientActive.checked = document.getElementById('Active-'+id).value == 'True' ? true : false;
+    categorie.value = document.getElementById('h-category-'+id).value;
+
+
+}
+