Fase 2 Completa: Implementada UI con formulario de configuración, modal de adición y funcionalidad CRUD completa en la tabla de titulares.

2025-10-28 11:54:36 -03:00
parent 8e783b73d5
commit 7eee798c99
6 changed files with 257 additions and 87 deletions
--- a/frontend/src/components/Dashboard.tsx
+++ b/frontend/src/components/Dashboard.tsx
@@ -0,0 +1,88 @@
+// frontend/src/components/Dashboard.tsx
+
+import { useEffect, useState } from 'react';
+import { Box, Button, Typography, Stack } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import SyncIcon from '@mui/icons-material/Sync';
+import type { Titular } from '../types';
+import * as api from '../services/apiService';
+import FormularioConfiguracion from './FormularioConfiguracion';
+import TablaTitulares from './TablaTitulares';
+import AddTitularModal from './AddTitularModal';
+
+const Dashboard = () => {
+  const [titulares, setTitulares] = useState<Titular[]>([]);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const cargarTitulares = async () => {
+    try {
+      const data = await api.obtenerTitulares();
+      setTitulares(data);
+    } catch (error) {
+      console.error("Error al cargar titulares:", error);
+    }
+  };
+
+  useEffect(() => {
+    cargarTitulares();
+  }, []);
+
+  const handleReorder = async (titularesReordenados: Titular[]) => {
+    setTitulares(titularesReordenados); // Actualización optimista de la UI
+    const payload = titularesReordenados.map((item, index) => ({
+      id: item.id,
+      nuevoOrden: index
+    }));
+    try {
+      await api.actualizarOrdenTitulares(payload);
+    } catch (err) {
+      console.error("Error al reordenar:", err);
+      cargarTitulares(); // Revertir en caso de error
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (window.confirm('¿Estás seguro de que quieres eliminar este titular?')) {
+      try {
+        await api.eliminarTitular(id);
+        setTitulares(titulares.filter(t => t.id !== id)); // Actualizar UI
+      } catch (err) {
+        console.error("Error al eliminar:", err);
+      }
+    }
+  };
+
+  const handleAdd = async (texto: string) => {
+    try {
+      await api.crearTitularManual(texto);
+      cargarTitulares(); // Recargar la lista para ver el nuevo titular
+    } catch (err) {
+      console.error("Error al añadir titular:", err);
+    }
+  };
+
+  return (
+    <>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+        <Typography variant="h4" component="h1">
+          Titulares Dashboard
+        </Typography>
+        <Stack direction="row" spacing={2}>
+          <Button variant="outlined" startIcon={<SyncIcon />}>
+            Generate CSV
+          </Button>
+          <Button variant="contained" startIcon={<AddIcon />} onClick={() => setModalOpen(true)}>
+            Add Manual
+          </Button>
+        </Stack>
+      </Box>
+
+      <FormularioConfiguracion />
+      <TablaTitulares titulares={titulares} onReorder={handleReorder} onDelete={handleDelete} />
+
+      <AddTitularModal open={modalOpen} onClose={() => setModalOpen(false)} onAdd={handleAdd} />
+    </>
+  );
+};
+
+export default Dashboard;