Fix Overrides Candidatos

Elecciones-Web/frontend-admin/src/components/AgrupacionesManager.tsx

@@ -9,6 +9,14 @@ const SENADORES_ID = 5;
 const DIPUTADOS_ID = 6;
 const CONCEJALES_ID = 7;
 
+// Esta función limpia cualquier carácter no válido de un string de color.
+const sanitizeColor = (color: string | null | undefined): string => {
+    if (!color) return '#000000'; // Devuelve un color válido por defecto si es nulo
+    // Usa una expresión regular para eliminar todo lo que no sea un '#' o un carácter hexadecimal
+    const sanitized = color.replace(/[^#0-9a-fA-F]/g, '');
+    return sanitized.startsWith('#') ? sanitized : `#${sanitized}`;
+};
+
 export const AgrupacionesManager = () => {
     const queryClient = useQueryClient();
 
@@ -27,20 +35,33 @@ export const AgrupacionesManager = () => {
         queryFn: getLogos,
     });
 
-    // Usamos useEffect para reaccionar cuando los datos de 'logos' se cargan o cambian.
     useEffect(() => {
-        if (logos) {
-            setEditedLogos(logos);
+        // Solo procedemos si los datos de agrupaciones están disponibles
+        if (agrupaciones && agrupaciones.length > 0) {
+            // Inicializamos el estado de 'editedAgrupaciones' una sola vez.
+            // Usamos una función en setState para asegurarnos de que solo se ejecute
+            // si el estado está vacío, evitando sobreescribir ediciones del usuario.
+            setEditedAgrupaciones(prev => {
+                if (Object.keys(prev).length === 0) {
+                    return Object.fromEntries(agrupaciones.map(a => [a.id, {}]));
+                }
+                return prev;
+            });
         }
-    }, [logos]);
 
-    // Usamos otro useEffect para reaccionar a los datos de 'agrupaciones'.
-    useEffect(() => {
-        if (agrupaciones) {
-            const initialEdits = Object.fromEntries(agrupaciones.map(a => [a.id, {}]));
-            setEditedAgrupaciones(initialEdits);
+        // Hacemos lo mismo para los logos
+        if (logos && logos.length > 0) {
+            setEditedLogos(prev => {
+                if (prev.length === 0) {
+                    // Creamos una copia profunda para evitar mutaciones accidentales
+                    return JSON.parse(JSON.stringify(logos));
+                }
+                return prev;
+            });
         }
-    }, [agrupaciones]);
+        // La dependencia ahora es el estado de carga. El hook se ejecutará cuando
+        // isLoadingAgrupaciones o isLoadingLogos cambien de true a false.
+    }, [agrupaciones, logos]);
 
     const handleInputChange = (id: string, field: 'nombreCorto' | 'color', value: string) => {
         setEditedAgrupaciones(prev => ({
@@ -130,7 +151,14 @@ export const AgrupacionesManager = () => {
                                 <tr key={agrupacion.id}>
                                     <td>{agrupacion.nombre}</td>
                                     <td><input type="text" value={editedAgrupaciones[agrupacion.id]?.nombreCorto ?? agrupacion.nombreCorto ?? ''} onChange={(e) => handleInputChange(agrupacion.id, 'nombreCorto', e.target.value)} /></td>
-                                    <td><input type="color" value={editedAgrupaciones[agrupacion.id]?.color ?? agrupacion.color ?? '#000000'} onChange={(e) => handleInputChange(agrupacion.id, 'color', e.target.value)} /></td>
+                                    <td>
+                                        <input 
+                                            type="color" 
+                                            // Usamos la función sanitizeColor para asegurarnos de que el valor sea siempre válido
+                                            value={sanitizeColor(editedAgrupaciones[agrupacion.id]?.color ?? agrupacion.color)} 
+                                            onChange={(e) => handleInputChange(agrupacion.id, 'color', e.target.value)} 
+                                        />
+                                    </td>
                                     <td><input type="text" placeholder="URL de la imagen" value={getLogoUrl(agrupacion.id, SENADORES_ID)} onChange={(e) => handleLogoChange(agrupacion.id, SENADORES_ID, e.target.value)} /></td>
                                     <td><input type="text" placeholder="URL de la imagen" value={getLogoUrl(agrupacion.id, DIPUTADOS_ID)} onChange={(e) => handleLogoChange(agrupacion.id, DIPUTADOS_ID, e.target.value)} /></td>
                                     <td><input type="text" placeholder="URL de la imagen" value={getLogoUrl(agrupacion.id, CONCEJALES_ID)} onChange={(e) => handleLogoChange(agrupacion.id, CONCEJALES_ID, e.target.value)} /></td>

Elecciones-Web/frontend-admin/src/components/CandidatoOverridesManager.tsx

@@ -1,10 +1,11 @@
+// src/components/CandidatoOverridesManager.tsx
+
 import { useState, useMemo, useEffect } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import Select from 'react-select';
 import { getMunicipiosForAdmin, getAgrupaciones, getCandidatos, updateCandidatos } from '../services/apiService';
 import type { MunicipioSimple, AgrupacionPolitica, CandidatoOverride } from '../types';
 
-// Las categorías son las mismas que para los logos
 const CATEGORIAS_OPTIONS = [
     { value: 5, label: 'Senadores' },
     { value: 6, label: 'Diputados' },
@@ -15,23 +16,31 @@ export const CandidatoOverridesManager = () => {
     const queryClient = useQueryClient();
     const { data: municipios = [] } = useQuery<MunicipioSimple[]>({ queryKey: ['municipiosForAdmin'], queryFn: getMunicipiosForAdmin });
     const { data: agrupaciones = [] } = useQuery<AgrupacionPolitica[]>({ queryKey: ['agrupaciones'], queryFn: getAgrupaciones });
-    // --- Usar la query para candidatos ---
     const { data: candidatos = [] } = useQuery<CandidatoOverride[]>({ queryKey: ['candidatos'], queryFn: getCandidatos });
 
     const [selectedCategoria, setSelectedCategoria] = useState<{ value: number; label: string } | null>(null);
     const [selectedMunicipio, setSelectedMunicipio] = useState<{ value: string; label: string } | null>(null);
     const [selectedAgrupacion, setSelectedAgrupacion] = useState<{ value: string; label: string } | null>(null);
-    // --- El estado es para el nombre del candidato ---
     const [nombreCandidato, setNombreCandidato] = useState('');
 
-    const municipioOptions = useMemo(() => municipios.map(m => ({ value: m.id, label: m.nombre })), [municipios]);
+    const municipioOptions = useMemo(() => 
+        // Añadimos la opción "General" que representará un ámbito nulo
+        [{ value: 'general', label: 'General (Todos los Municipios)' }, ...municipios.map(m => ({ value: m.id, label: m.nombre }))]
+    , [municipios]);
+    
     const agrupacionOptions = useMemo(() => agrupaciones.map(a => ({ value: a.id, label: a.nombre })), [agrupaciones]);
 
-    // --- Lógica para encontrar el nombre del candidato actual ---
     const currentCandidato = useMemo(() => {
-        if (!selectedMunicipio || !selectedAgrupacion || !selectedCategoria) return '';
+        if (!selectedAgrupacion || !selectedCategoria) return '';
+        
+        // Determina si estamos buscando un override general (null) o específico (ID numérico)
+        const ambitoIdBuscado = selectedMunicipio?.value === 'general' ? null : (selectedMunicipio ? parseInt(selectedMunicipio.value) : undefined);
+
+        // Si no se ha seleccionado un municipio, no buscamos nada
+        if (ambitoIdBuscado === undefined) return '';
+
         return candidatos.find(c => 
-            c.ambitoGeograficoId === parseInt(selectedMunicipio.value) && 
+            c.ambitoGeograficoId === ambitoIdBuscado && 
             c.agrupacionPoliticaId === selectedAgrupacion.value &&
             c.categoriaId === selectedCategoria.value
         )?.nombreCandidato || '';
@@ -42,34 +51,40 @@ export const CandidatoOverridesManager = () => {
     const handleSave = async () => {
         if (!selectedMunicipio || !selectedAgrupacion || !selectedCategoria) return;
 
-        // --- Construir el objeto CandidatoOverride ---
+        const ambitoIdParaEnviar = selectedMunicipio.value === 'general' 
+            ? null 
+            : parseInt(selectedMunicipio.value);
+
         const newCandidatoEntry: CandidatoOverride = {
-            id: 0, // El backend no necesita el ID para un upsert
+            id: 0, // El backend no lo necesita para el upsert
             agrupacionPoliticaId: selectedAgrupacion.value,
             categoriaId: selectedCategoria.value,
-            ambitoGeograficoId: parseInt(selectedMunicipio.value),
-            nombreCandidato: nombreCandidato
+            ambitoGeograficoId: ambitoIdParaEnviar,
+            nombreCandidato: nombreCandidato || null
         };
 
         try {
             await updateCandidatos([newCandidatoEntry]);
             queryClient.invalidateQueries({ queryKey: ['candidatos'] });
             alert('Override de candidato guardado.');
-        } catch { alert('Error al guardar.'); }
+        } catch (error) {
+            console.error(error);
+            alert('Error al guardar el override del candidato.');
+        }
     };
     
     return (
         <div className="admin-module">
             <h3>Overrides de Nombres de Candidatos</h3>
-            <p>Configure un nombre de candidato específico para un partido en un municipio y categoría determinados.</p>
-            <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-end' }}>
+            <p>Configure un nombre de candidato específico para un partido, categoría y municipio (o general).</p>
+            <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-end', flexWrap: 'wrap' }}>
                 <div style={{ flex: 1 }}>
                     <label>Categoría</label>
                     <Select options={CATEGORIAS_OPTIONS} value={selectedCategoria} onChange={setSelectedCategoria} isClearable placeholder="Seleccione..."/>
                 </div>
                 <div style={{ flex: 1 }}>
-                    <label>Municipio</label>
-                    <Select options={municipioOptions} value={selectedMunicipio} onChange={setSelectedMunicipio} isClearable placeholder="Seleccione..."/>
+                    <label>Municipio (Opcional)</label>
+                    <Select options={municipioOptions} value={selectedMunicipio} onChange={setSelectedMunicipio} isClearable placeholder="General..."/>
                 </div>
                 <div style={{ flex: 1 }}>
                     <label>Agrupación</label>
@@ -77,9 +92,9 @@ export const CandidatoOverridesManager = () => {
                 </div>
                 <div style={{ flex: 2 }}>
                     <label>Nombre del Candidato</label>
-                    <input type="text" value={nombreCandidato} onChange={e => setNombreCandidato(e.target.value)} style={{ width: '100%' }} disabled={!selectedMunicipio || !selectedAgrupacion || !selectedCategoria} />
+                    <input type="text" value={nombreCandidato} onChange={e => setNombreCandidato(e.target.value)} style={{ width: '100%' }} disabled={!selectedAgrupacion || !selectedCategoria} />
                 </div>
-                <button onClick={handleSave} disabled={!selectedMunicipio || !selectedAgrupacion || !selectedCategoria}>Guardar</button>
+                <button onClick={handleSave} disabled={!selectedAgrupacion || !selectedCategoria}>Guardar</button>
             </div>
         </div>
     );

Elecciones-Web/frontend-admin/src/components/LogoOverridesManager.tsx

@@ -24,7 +24,9 @@ export const LogoOverridesManager = () => {
     const [selectedAgrupacion, setSelectedAgrupacion] = useState<{ value: string; label: string } | null>(null);
     const [logoUrl, setLogoUrl] = useState('');
 
-    const municipioOptions = useMemo(() => municipios.map(m => ({ value: m.id, label: m.nombre })), [municipios]);
+    const municipioOptions = useMemo(() => 
+        [{ value: 'general', label: 'General (Todas las secciones)' }, ...municipios.map(m => ({ value: m.id, label: m.nombre }))]
+    , [municipios]);
     const agrupacionOptions = useMemo(() => agrupaciones.map(a => ({ value: a.id, label: a.nombre })), [agrupaciones]);
 
     const currentLogo = useMemo(() => {

Elecciones-Web/frontend-admin/src/types/index.ts

@@ -55,5 +55,5 @@ export interface CandidatoOverride {
   agrupacionPoliticaId: string;
   categoriaId: number;
   ambitoGeograficoId: number | null;
-  nombreCandidato: string;
+  nombreCandidato: string | null;
 }