SekiDesu01/Rendiciones-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit product from html to modal

Browse Source
This commit is contained in:
weko
2026-03-19 23:20:23 -03:00
parent 6624733756
commit a1bfb25abf
4 changed files with 125 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app.py
View File

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

69
templates/admin_productos.html
View File

@@ -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>
<form action="{{ url_for('delete_product', id=prod[0]) }}" method="POST" class="d-inline">
<button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('¿Eliminar este producto?');">Eliminar</button>
</form>
<button type="button"
class="btn btn-sm btn-outline-info"
data-bs-toggle="modal"
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 = '';

86
templates/edit_producto.html
View File

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

64
templates/macros/modals.html Normal file
View File

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