1ra Versión
This commit is contained in:
MarcosFlorSalcedo
@@ -0,0 +1,327 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const form = document.getElementById("form-proveedor");
|
||||
const tablaBody = document.querySelector("#tabla-proveedores tbody");
|
||||
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const nombre = document.querySelector(".nombre-proveedor").value;
|
||||
const telefono = document.querySelector(".telefono-proveedor").value;
|
||||
|
||||
const proveedor = {
|
||||
id: form.dataset.editando || null,
|
||||
nombre,
|
||||
telefono,
|
||||
};
|
||||
|
||||
const url = proveedor.id
|
||||
? "../php/Editar_Proveedor.php"
|
||||
: "../php/Guardar_Proveedor.php";
|
||||
|
||||
fetch(url, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(proveedor),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.success) {
|
||||
alert(data.message || "Proveedor guardado");
|
||||
form.reset();
|
||||
delete form.dataset.editando;
|
||||
cargarProveedores();
|
||||
} else {
|
||||
alert("Error: " + (data.error || "Error desconocido"));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
cargarProveedores();
|
||||
|
||||
// Delegación de eventos para la tabla
|
||||
document.addEventListener("click", (e) => {
|
||||
if (e.target.classList.contains("btn-cancelar")) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const fila = e.target.closest("tr");
|
||||
if (fila) {
|
||||
cargarProveedores();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function cargarProveedores() {
|
||||
fetch("../php/Obtener_Proveedores.php")
|
||||
.then((res) => res.json())
|
||||
.then((proveedores) => {
|
||||
const tablaBody = document.querySelector("#tabla-proveedores tbody");
|
||||
tablaBody.innerHTML = "";
|
||||
|
||||
proveedores.forEach((p) => {
|
||||
const fila = document.createElement("tr");
|
||||
fila.setAttribute("data-id", p.ID_Proveedor);
|
||||
fila.innerHTML = `
|
||||
<td>${p.ID_Proveedor}</td>
|
||||
<td>${p.Nombre}</td>
|
||||
<td>${p.Telefono}</td>
|
||||
<td>
|
||||
<button class="btn-ver-productos" data-id="${p.ID_Proveedor}">Productos</button>
|
||||
<button class="btn-editar-proveedor" data-id="${p.ID_Proveedor}">Editar</button>
|
||||
<button class="btn-eliminar-proveedor" data-id="${p.ID_Proveedor}">Eliminar</button>
|
||||
</td>
|
||||
`;
|
||||
tablaBody.appendChild(fila);
|
||||
});
|
||||
|
||||
document.querySelectorAll("#tabla-proveedores .btn-editar-proveedor").forEach((btn) => {
|
||||
btn.addEventListener("click", () => activarModoEdicion(btn));
|
||||
});
|
||||
|
||||
document.querySelectorAll("#tabla-proveedores .btn-eliminar-proveedor").forEach((btn) => {
|
||||
btn.addEventListener("click", () => eliminarProveedor(btn.dataset.id));
|
||||
});
|
||||
|
||||
document.querySelectorAll(".btn-ver-productos").forEach((btn) => {
|
||||
btn.addEventListener("click", () => cargarProductosDelProveedor(btn.dataset.id));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function editarProveedor(id) {
|
||||
fetch(`../php/Buscar_Proveedor_Editar.php?id=${id}`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
console.log("Respuesta del servidor:", data);
|
||||
if (!data || !data.ID_Proveedor) {
|
||||
alert("Proveedor no encontrado");
|
||||
return;
|
||||
}
|
||||
|
||||
const form = document.getElementById("form-proveedor");
|
||||
document.querySelector(".nombre-proveedor").value = data.Nombre;
|
||||
document.querySelector(".telefono-proveedor").value = data.Telefono;
|
||||
form.dataset.editando = data.ID_Proveedor;
|
||||
});
|
||||
}
|
||||
|
||||
function eliminarProveedor(id) {
|
||||
if (!confirm("¿Estás seguro que querés eliminar este proveedor?")) return;
|
||||
|
||||
fetch("../php/Eliminar_Proveedor.php", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id: parseInt(id, 10) }),
|
||||
})
|
||||
.then((res) => res.text())
|
||||
.then((text) => {
|
||||
if (!text) {
|
||||
throw new Error("Respuesta vacía del servidor.");
|
||||
}
|
||||
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(text);
|
||||
} catch (error) {
|
||||
console.warn("Respuesta de Eliminar_Proveedor no es JSON:", text);
|
||||
throw new Error("Respuesta inválida del servidor.");
|
||||
}
|
||||
|
||||
if (data.success) {
|
||||
alert(data.message || "Proveedor eliminado");
|
||||
cargarProveedores();
|
||||
} else {
|
||||
alert("Error: " + (data.error || data.message || "Error desconocido"));
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error al eliminar proveedor:", error);
|
||||
alert(error.message || "Error de conexión al eliminar proveedor.");
|
||||
});
|
||||
}
|
||||
|
||||
function cargarProductosDelProveedor(idProveedor) {
|
||||
fetch(`../php/Obtener_Productos_Proveedor.php?id=${idProveedor}`)
|
||||
.then((res) => res.json())
|
||||
.then((productos) => {
|
||||
const contenedor = document.getElementById("productos-proveedor");
|
||||
const cuerpo = document.getElementById("productos-proveedor-body");
|
||||
cuerpo.innerHTML = "";
|
||||
|
||||
productos.forEach((prod) => {
|
||||
const fila = document.createElement("tr");
|
||||
fila.setAttribute("data-id", idProveedor);
|
||||
fila.innerHTML = `
|
||||
<td>${prod.ID_Producto}</td>
|
||||
<td>${prod.Descripcion}</td>
|
||||
<td>
|
||||
<button class="btn-eliminar-producto" data-id-producto="${prod.ID_Producto}" data-id-proveedor="${idProveedor}">Eliminar</button>
|
||||
</td>
|
||||
`;
|
||||
cuerpo.appendChild(fila);
|
||||
});
|
||||
|
||||
contenedor.style.display = "block";
|
||||
|
||||
document.querySelectorAll(".btn-eliminar-producto").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const idProd = btn.dataset.idProducto;
|
||||
const idProv = btn.dataset.idProveedor;
|
||||
|
||||
fetch(
|
||||
`../php/Eliminar_Producto_Proveedor.php?id_proveedor=${idProv}&id_producto=${idProd}`
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.success) {
|
||||
cargarProductosDelProveedor(idProv);
|
||||
} else {
|
||||
alert("Error: " + data.error);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Agregar producto al proveedor
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const formAgregarProducto = document.getElementById("form-agregar-producto");
|
||||
|
||||
formAgregarProducto.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const idProveedor = document.getElementById("id-proveedor-producto").value;
|
||||
const idProducto = document.getElementById("nuevo-id-producto").value;
|
||||
|
||||
fetch("../php/Agregar_Producto_Proveedor.php", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
id_proveedor: parseInt(idProveedor),
|
||||
id_producto: parseInt(idProducto),
|
||||
}),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.success) {
|
||||
cargarProductosDelProveedor(idProveedor);
|
||||
document.getElementById("nuevo-id-producto").value = "";
|
||||
} else {
|
||||
alert("Error: " + data.error);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("click", function (e) {
|
||||
if (e.target.classList.contains("btn-ver-productos")) {
|
||||
const idProveedor = e.target.dataset.id;
|
||||
|
||||
document.getElementById("id-proveedor-producto").value = idProveedor;
|
||||
cargarProductosDelProveedor(idProveedor);
|
||||
|
||||
// Mostrar tabla productos
|
||||
document.getElementById("productos-proveedor").style.display = "block";
|
||||
document.getElementById("tabla-proveedores").style.display = "none";
|
||||
document.getElementById("titulo-proveedores").style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("cerrar-productos").addEventListener("click", () => {
|
||||
document.getElementById("productos-proveedor").style.display = "none";
|
||||
document.getElementById("tabla-proveedores").style.display = "table";
|
||||
document.getElementById("titulo-proveedores").style.display = "block";
|
||||
});
|
||||
|
||||
function activarModoEdicion(btnEditar) {
|
||||
const fila = btnEditar.closest("tr");
|
||||
const celdas = fila.querySelectorAll("td");
|
||||
|
||||
// Obtener ID desde el botón
|
||||
const idProveedor = btnEditar.getAttribute("data-id");
|
||||
|
||||
if (!idProveedor) {
|
||||
console.error("ID DE PROVEEDOR NO ENCONTRADO");
|
||||
alert("ID de proveedor no encontrado.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Obtener valores actuales ANTES de cambiar a inputs
|
||||
const nombreActual = celdas[1].textContent.trim();
|
||||
const telefonoActual = celdas[2].textContent.trim();
|
||||
|
||||
// Reemplazar con inputs
|
||||
celdas[1].innerHTML = `<input type="text" value="${nombreActual}" class="input-nombre">`;
|
||||
celdas[2].innerHTML = `<input type="text" value="${telefonoActual}" class="input-telefono">`;
|
||||
|
||||
// Botón Guardar
|
||||
const btnGuardar = document.createElement("button");
|
||||
btnGuardar.type = "button";
|
||||
btnGuardar.textContent = "Guardar";
|
||||
btnGuardar.className = "btn-guardar";
|
||||
btnGuardar.setAttribute("data-id", idProveedor);
|
||||
btnGuardar.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
guardarEdicion(fila, idProveedor);
|
||||
});
|
||||
|
||||
// Botón Cancelar
|
||||
const btnCancelar = document.createElement("button");
|
||||
btnCancelar.type = "button";
|
||||
btnCancelar.textContent = "Cancelar";
|
||||
btnCancelar.className = "btn-cancelar";
|
||||
btnCancelar.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// Simplemente recargar la tabla cancela todos los cambios
|
||||
cargarProveedores();
|
||||
});
|
||||
|
||||
// Reemplazar celda de botones
|
||||
const celdaBotones = celdas[3];
|
||||
celdaBotones.innerHTML = "";
|
||||
celdaBotones.appendChild(btnGuardar);
|
||||
celdaBotones.appendChild(btnCancelar);
|
||||
}
|
||||
|
||||
function guardarEdicion(fila, idProveedor) {
|
||||
const celdas = fila.querySelectorAll("td");
|
||||
const nuevoNombre = fila.querySelector(".input-nombre").value.trim();
|
||||
const nuevoTelefono = fila.querySelector(".input-telefono").value.trim();
|
||||
|
||||
if (nuevoNombre === "" || nuevoTelefono === "") {
|
||||
alert("Por favor, complete todos los campos.");
|
||||
return;
|
||||
}
|
||||
console.log("Datos enviados:", {
|
||||
id: idProveedor,
|
||||
nombre: nuevoNombre,
|
||||
telefono: nuevoTelefono,
|
||||
});
|
||||
|
||||
// Enviar los nuevos datos al servidor para actualizarlos en la base de datos
|
||||
fetch("../php/Editar_Proveedor.php", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
id: idProveedor,
|
||||
nombre: nuevoNombre,
|
||||
telefono: nuevoTelefono,
|
||||
}),
|
||||
headers: { "Content-Type": "application/json" },
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data.success) {
|
||||
alert("Proveedor actualizado correctamente");
|
||||
cargarProveedores();
|
||||
} else {
|
||||
alert("Error al actualizar el proveedor.");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error al actualizar el proveedor:", error);
|
||||
alert("Ocurrió un error al actualizar el proveedor.");
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user