organizar en carpetas

2026-09-03 16:29:29 -05:00
parent bb24734046
commit 07890d7308
12 changed files with 41 additions and 14 deletions
@@ -0,0 +1,195 @@
+// ============ ACCIONES: MENÚ ⋮ Y MODALES (compartido) ============
+// Requiere que la página tenga:
+//   - variable global NOMBRE_HOJA
+//   - función global cargarMovimientos()
+//   - elemento #opcionesTipo con <option>s para el select de tipo
+
+let registroEditando = null;
+let registroBorrando = null;
+
+// ============ MENÚ ⋮ ============
+function crearMenuOpciones(mov) {
+    const contenedor = document.createElement("div");
+    contenedor.className = "menu-opciones";
+    contenedor.innerHTML = `
+        <button class="btn-opciones" title="Opciones">⋮</button>
+        <div class="dropdown-opciones">
+            <button class="opcion-editar">✏️ Editar</button>
+            <button class="opcion-borrar">🗑️ Borrar</button>
+        </div>
+    `;
+
+    const btnOpciones = contenedor.querySelector(".btn-opciones");
+    const dropdown = contenedor.querySelector(".dropdown-opciones");
+
+    btnOpciones.addEventListener("click", (e) => {
+        e.stopPropagation();
+        // Cerrar otros dropdowns abiertos
+        document.querySelectorAll(".dropdown-opciones.abierto").forEach(d => {
+            if (d !== dropdown) d.classList.remove("abierto");
+        });
+        dropdown.classList.toggle("abierto");
+    });
+
+    contenedor.querySelector(".opcion-editar").addEventListener("click", () => {
+        dropdown.classList.remove("abierto");
+        abrirModalEditar(mov);
+    });
+
+    contenedor.querySelector(".opcion-borrar").addEventListener("click", () => {
+        dropdown.classList.remove("abierto");
+        abrirModalBorrar(mov);
+    });
+
+    return contenedor;
+}
+
+// Cerrar dropdowns al hacer clic fuera
+document.addEventListener("click", () => {
+    document.querySelectorAll(".dropdown-opciones.abierto").forEach(d => d.classList.remove("abierto"));
+});
+
+// ============ MODAL EDITAR ============
+function abrirModalEditar(mov) {
+    registroEditando = mov;
+    document.getElementById("editFecha").value = formatearFechaInput(mov.Fecha);
+
+    // Seleccionar la opción correcta en el select
+    const selectTipo = document.getElementById("editTipo");
+    selectTipo.value = mov.Tipo;
+
+    document.getElementById("editDescripcion").value = mov["Descripción"];
+    document.getElementById("editMonto").value = parseInt(mov.Monto) || 0;
+    document.getElementById("modalEditarFondo").classList.add("abierto");
+}
+
+function cerrarModalEditar() {
+    registroEditando = null;
+    document.getElementById("modalEditarFondo").classList.remove("abierto");
+}
+
+async function guardarEdicion() {
+    if (!registroEditando) return;
+
+    const datos = {
+        hoja: NOMBRE_HOJA,
+        id: registroEditando.id,
+        datos: {
+            "Fecha": document.getElementById("editFecha").value,
+            "Tipo": document.getElementById("editTipo").value,
+            "Descripción": document.getElementById("editDescripcion").value,
+            "Monto": document.getElementById("editMonto").value
+        }
+    };
+
+    try {
+        const respuesta = await fetch("/actualizar", {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(datos)
+        });
+        const resultado = await respuesta.json();
+        if (resultado.error) {
+            alert("Error: " + resultado.error);
+            return;
+        }
+        cerrarModalEditar();
+        cargarMovimientos();
+    } catch (error) {
+        console.error("Error al actualizar:", error);
+        alert("Error al actualizar el registro");
+    }
+}
+
+// ============ MODAL BORRAR ============
+function abrirModalBorrar(mov) {
+    registroBorrando = mov;
+    document.getElementById("borrarDescripcion").textContent =
+        `"${mov["Descripción"]}" — $${formatearMonto(mov.Monto)}`;
+    document.getElementById("modalBorrarFondo").classList.add("abierto");
+}
+
+function cerrarModalBorrar() {
+    registroBorrando = null;
+    document.getElementById("modalBorrarFondo").classList.remove("abierto");
+}
+
+async function confirmarBorrar() {
+    if (!registroBorrando) return;
+
+    try {
+        const respuesta = await fetch("/borrar", {
+            method: "DELETE",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ hoja: NOMBRE_HOJA, id: registroBorrando.id })
+        });
+        const resultado = await respuesta.json();
+        if (resultado.error) {
+            alert("Error: " + resultado.error);
+            return;
+        }
+        cerrarModalBorrar();
+        cargarMovimientos();
+    } catch (error) {
+        console.error("Error al borrar:", error);
+        alert("Error al borrar el registro");
+    }
+}
+
+// ============ AUXILIAR ============
+// Convierte fecha al formato YYYY-MM-DD que acepta <input type="date">
+function formatearFechaInput(fecha) {
+    if (!fecha) return "";
+    const f = new Date(fecha);
+    const yyyy = f.getFullYear();
+    const mm = String(f.getMonth() + 1).padStart(2, "0");
+    const dd = String(f.getDate()).padStart(2, "0");
+    return `${yyyy}-${mm}-${dd}`;
+}
+
+// Cerrar modales al hacer clic en el fondo oscuro
+document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById("modalEditarFondo").addEventListener("click", (e) => {
+        if (e.target.id === "modalEditarFondo") cerrarModalEditar();
+    });
+    document.getElementById("modalBorrarFondo").addEventListener("click", (e) => {
+        if (e.target.id === "modalBorrarFondo") cerrarModalBorrar();
+    });
+    document.getElementById("btnGuardarEdicion").addEventListener("click", guardarEdicion);
+    document.getElementById("btnCancelarEdicion").addEventListener("click", cerrarModalEditar);
+    document.getElementById("btnConfirmarBorrar").addEventListener("click", confirmarBorrar);
+    document.getElementById("btnCancelarBorrar").addEventListener("click", cerrarModalBorrar);
+
+    // Botón de sincronización manual en el nav
+    const btnSync = document.getElementById("btnSync");
+    if (btnSync) btnSync.addEventListener("click", forzarSync);
+});
+
+// ============ SINCRONIZACIÓN MANUAL ============
+async function forzarSync() {
+    const btnSync = document.getElementById("btnSync");
+    btnSync.disabled = true;
+    btnSync.textContent = "⏳";
+
+    try {
+        const respuesta = await fetch("/sincronizar", { method: "POST" });
+        const resultado = await respuesta.json();
+
+        if (resultado.pendientes === 0) {
+            btnSync.textContent = "✅";
+        } else {
+            btnSync.textContent = `⚠️ ${resultado.pendientes}`;
+        }
+        // Recargar la tabla por si hubo cambios de estado
+        cargarMovimientos();
+    } catch (error) {
+        console.error("Error al sincronizar:", error);
+        btnSync.textContent = "❌";
+    }
+
+    // Volver al estado normal después de 2 segundos
+    setTimeout(() => {
+        btnSync.disabled = false;
+        btnSync.textContent = "🔄 Sync";
+    }, 2000);
+}