edit product from html to modal

app.py

@@ -489,7 +489,7 @@ def manage_products():
     c.execute("SELECT id, name FROM zonas ORDER BY name")
     zonas = c.fetchall()
 
-    c.execute('''SELECT p.id, p.name, p.price, p.commission, z.name 
+    c.execute('''SELECT p.id, p.name, p.price, p.commission, z.name, p.zona_id 
                  FROM productos p
                  JOIN zonas z ON p.zona_id = z.id
                  ORDER BY z.name, p.name''')

templates/admin_productos.html

@@ -1,5 +1,5 @@
 {% extends "macros/base.html" %}
-
+{% from 'macros/modals.html' import confirm_modal, edit_product_modal %}
 
 {% block title %}Catálogo de Productos{% endblock %}
 
@@ -19,6 +19,8 @@
   {% endif %}
 {% endwith %}
 
+{{ edit_product_modal(zonas) }}
+
 <div class="card mb-4 shadow-sm">
     <div class="card-header bg-secondary text-white">Agregar Nuevo Producto</div>
     <div class="card-body">
@@ -79,10 +81,30 @@
                     <td class="align-middle">${{ "{:,.0f}".format(prod[2]).replace(',', '.') }}</td>
                     <td class="align-middle">${{ "{:,.0f}".format(prod[3]).replace(',', '.') }}</td>
                     <td class="text-end">
-                        <a href="{{ url_for('edit_product', id=prod[0]) }}" class="btn btn-sm btn-outline-info">Editar</a>
+                        <button type="button" 
-                        <form action="{{ url_for('delete_product', id=prod[0]) }}" method="POST" class="d-inline">
+                                class="btn btn-sm btn-outline-info" 
-                            <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('¿Eliminar este producto?');">Eliminar</button>
+                                data-bs-toggle="modal" 
-                        </form>
+                                data-bs-target="#editProductModal"
+                                data-id="{{ prod[0] }}"
+                                data-name="{{ prod[1] }}"
+                                data-price="{{ prod[2]|int }}"
+                                data-commission="{{ prod[3]|int }}"
+                                data-zona="{{ prod[5] }}">
+                            Editar
+                        </button>
+                        
+                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteProd{{ prod[0] }}">
+                            Eliminar
+                        </button>
+
+                        {{ confirm_modal(
+                            id='deleteProd' ~ prod[0],
+                            title='Eliminar Producto',
+                            message='¿Estás seguro de que deseas eliminar "' ~ prod[1] ~ '"?',
+                            action_url=url_for('delete_product', id=prod[0]),
+                            btn_class='btn-danger',
+                            btn_text='Eliminar permanentemente'
+                        ) }}
                     </td>
                 </tr>
                 {% else %}
@@ -94,16 +116,45 @@
         </table>
     </div>
 </div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    const editModal = document.getElementById('editProductModal');
+    if (editModal) {
+        editModal.addEventListener('show.bs.modal', function (event) {
+            const button = event.relatedTarget;
+            
+            // Atributos extraídos del botón
+            const id = button.getAttribute('data-id');
+            const name = button.getAttribute('data-name');
+            const price = button.getAttribute('data-price');
+            const commission = button.getAttribute('data-commission');
+            const zonaId = button.getAttribute('data-zona');
+
+            // Actualizamos el destino del formulario
+            const form = editModal.querySelector('#editProductForm');
+            form.action = `/admin/productos/edit/${id}`;
+
+            // Llenamos los inputs
+            editModal.querySelector('#edit_name').value = name;
+            editModal.querySelector('#edit_price').value = price;
+            editModal.querySelector('#edit_commission').value = commission;
+            editModal.querySelector('#edit_zona_id').value = zonaId;
+
+            // Forzamos el formato de miles (puntos) inmediatamente
+            editModal.querySelectorAll('.money-input').forEach(input => {
+                input.dispatchEvent(new Event('input'));
+            });
+        });
+    }
+</script>
 
 <script>
-    // Automatically format money inputs with standard Chilean dots
     document.querySelectorAll('.money-input').forEach(function(input) {
         input.addEventListener('input', function(e) {
-            // Strip everything that isn't a number
             let value = this.value.replace(/\D/g, '');
-            
             if (value !== '') {
-                // Parse and format back to a string with dots
                 this.value = parseInt(value, 10).toLocaleString('es-CL');
             } else {
                 this.value = '';

templates/edit_producto.html

@@ -1,86 +0,0 @@
-{% extends "macros/base.html" %}
-
-
-{% block title %}Editar Producto{% endblock %}
-
-{% block head %}
-<!-- HEAD -->
-{% endblock %}
-
-{% block content %}
-<div class="row justify-content-center">
-    <div class="col-md-8">
-        <h2 class="mb-4">Editar Producto</h2>
-
-        {% with messages = get_flashed_messages(with_categories=true) %}
-          {% if messages %}
-            {% for category, message in messages %}
-              <div class="alert alert-{{ category }}">{{ message|safe }}</div>
-            {% endfor %}
-          {% endif %}
-        {% endwith %}
-
-        <div class="card shadow-sm">
-            <div class="card-body">
-                <form method="POST">
-                    <div class="mb-3">
-                        <label class="form-label">Zona</label>
-                        <select class="form-select" name="zona_id" required>
-                            <option value="" disabled>Seleccionar Zona...</option>
-                            {% for zona in zonas %}
-                                <option value="{{ zona[0] }}" {% if zona[0] == producto[1] %}selected{% endif %}>
-                                    {{ zona[1] }}
-                                </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    <div class="mb-3">
-                        <label class="form-label">Nombre del Producto</label>
-                        <input type="text" class="form-control" name="name" value="{{ producto[2] }}" required>
-                    </div>
-                    <div class="row mb-4">
-                        <div class="col-md-6">
-                            <label class="form-label">Precio de Venta</label>
-                            <div class="input-group">
-                                <span class="input-group-text">$</span>
-                                <input type="text" class="form-control money-input" name="price" value="{{ producto[3]|int }}" required>
-                            </div>
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">Comisión</label>
-                            <div class="input-group">
-                                <span class="input-group-text">$</span>
-                                <input type="text" class="form-control money-input" name="commission" value="{{ producto[4]|int }}" required>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="d-flex justify-content-between">
-                        <a href="{{ url_for('manage_products') }}" class="btn btn-secondary">Cancelar</a>
-                        <button type="submit" class="btn btn-primary">Actualizar Producto</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-    document.querySelectorAll('.money-input').forEach(function(input) {
-        input.addEventListener('input', function(e) {
-            let value = this.value.replace(/\D/g, '');
-            if (value !== '') {
-                this.value = parseInt(value, 10).toLocaleString('es-CL');
-            } else {
-                this.value = '';
-            }
-        });
-    });
-
-    // Artificially trigger the input event on load to format the raw DB numbers
-    window.addEventListener('DOMContentLoaded', () => {
-        document.querySelectorAll('.money-input').forEach(input => {
-            input.dispatchEvent(new Event('input'));
-        });
-    });
-</script>
-{% endblock %}

templates/macros/modals.html

@@ -0,0 +1,64 @@
+{% macro confirm_modal(id, title, message, action_url, btn_class='btn-primary', btn_text='Confirmar') %}
+<div class="modal fade" id="{{ id }}" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">{{ title }}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                {{ message }}
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
+                <form action="{{ action_url }}" method="POST" class="d-inline">
+                    <button type="submit" class="btn {{ btn_class }}">{{ btn_text }}</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endmacro %}
+
+{% macro edit_product_modal(zonas) %}
+<div class="modal fade" id="editProductModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Editar Producto</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form id="editProductForm" method="POST" action="">
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label class="form-label">Zona</label>
+                        <select class="form-select" name="zona_id" id="edit_zona_id" required>
+                            {% for zona in zonas %}
+                                <option value="{{ zona[0] }}">{{ zona[1] }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Nombre del Producto</label>
+                        <input type="text" class="form-control" name="name" id="edit_name" required>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label class="form-label">Precio</label>
+                            <input type="text" class="form-control money-input" name="price" id="edit_price" required>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">Comisión</label>
+                            <input type="text" class="form-control money-input" name="commission" id="edit_commission" required>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
+                    <button type="submit" class="btn btn-primary">Guardar Cambios</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+{% endmacro %}