edit product from html to modal

This commit is contained in:
2026-03-19 23:20:23 -03:00
parent 6624733756
commit a1bfb25abf
4 changed files with 125 additions and 96 deletions

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 = '';