Fix Mapa Error (Sección Sin Datos)

2025-10-17 13:55:38 -03:00
parent 45421f5c5f
commit 92c80f195b
4 changed files with 161 additions and 121 deletions
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacionalWidget.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacionalWidget.tsx
@@ -13,9 +13,10 @@ import Select from 'react-select';
 import type { PanelElectoralDto, ResultadoTicker } from '../../../types/types';
 import { FiMap, FiList, FiChevronDown, FiChevronUp } from 'react-icons/fi';
 import { useMediaQuery } from './hooks/useMediaQuery';
-import { Toaster } from 'react-hot-toast';
+import toast, { Toaster } from 'react-hot-toast';
 import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
 import { assetBaseUrl } from '../../../apiService';
+import { useQueryClient } from '@tanstack/react-query';

 // --- COMPONENTE INTERNO PARA LA TARJETA DE RESULTADOS EN MÓVIL ---
 interface MobileResultsCardProps {
@@ -31,25 +32,25 @@ const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ','
 // --- SUB-COMPONENTE PARA UNA FILA DE RESULTADO ---
 // 2. Todas las props 'className' ahora usan el objeto 'styles'
 const ResultRow = ({ partido }: { partido: ResultadoTicker }) => (
-    <div className={styles.mobileResultRow} style={{ borderLeftColor: partido.color || '#ccc' }}>
-        <div className={styles.mobileResultLogo} style={{ backgroundColor: partido.color || '#e9ecef' }}>
-             <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={partido.nombre} />
-        </div>
-        <div className={styles.mobileResultInfo}>
-            {partido.nombreCandidato ? (
-                <>
-                    <span className={styles.mobileResultPartyName}>{partido.nombreCandidato}</span>
-                    <span className={styles.mobileResultCandidateName}>{partido.nombreCorto || partido.nombre}</span>
-                </>
-            ) : (
-                <span className={styles.mobileResultPartyName}>{partido.nombreCorto || partido.nombre}</span>
-            )}
-        </div>
-        <div className={styles.mobileResultStats}>
-            <strong>{formatPercent(partido.porcentaje)}</strong>
-            <span>{partido.votos.toLocaleString('es-AR')}</span>
-        </div>
+  <div className={styles.mobileResultRow} style={{ borderLeftColor: partido.color || '#ccc' }}>
+    <div className={styles.mobileResultLogo} style={{ backgroundColor: partido.color || '#e9ecef' }}>
+      <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={partido.nombre} />
    </div>
+    <div className={styles.mobileResultInfo}>
+      {partido.nombreCandidato ? (
+        <>
+          <span className={styles.mobileResultPartyName}>{partido.nombreCandidato}</span>
+          <span className={styles.mobileResultCandidateName}>{partido.nombreCorto || partido.nombre}</span>
+        </>
+      ) : (
+        <span className={styles.mobileResultPartyName}>{partido.nombreCorto || partido.nombre}</span>
+      )}
+    </div>
+    <div className={styles.mobileResultStats}>
+      <strong>{formatPercent(partido.porcentaje)}</strong>
+      <span>{partido.votos.toLocaleString('es-AR')}</span>
+    </div>
+  </div>
 );

 // --- COMPONENTE REFACTORIZADO PARA LA TARJETA MÓVIL ---
@@ -63,75 +64,75 @@ interface MobileResultsCardProps {
  setMobileView: (view: 'mapa' | 'resultados') => void;
 }

-const MobileResultsCard = ({ 
-    eleccionId, ambitoId, categoriaId, ambitoNombre, ambitoNivel, mobileView, setMobileView 
+const MobileResultsCard = ({
+  eleccionId, ambitoId, categoriaId, ambitoNombre, ambitoNivel, mobileView, setMobileView
 }: MobileResultsCardProps) => {
-    
-    const [isExpanded, setIsExpanded] = useState(false);

-    const { data } = useSuspenseQuery<PanelElectoralDto>({
-        queryKey: ['panelElectoral', eleccionId, ambitoId, categoriaId],
-        queryFn: () => getPanelElectoral(eleccionId, ambitoId, categoriaId),
-    });
-    
-    useEffect(() => {
-        setIsExpanded(ambitoNivel === 'municipio');
-    }, [ambitoNivel]);
+  const [isExpanded, setIsExpanded] = useState(false);

-    const topResults = data.resultadosPanel.slice(0, 3);
+  const { data } = useSuspenseQuery<PanelElectoralDto>({
+    queryKey: ['panelElectoral', eleccionId, ambitoId, categoriaId],
+    queryFn: () => getPanelElectoral(eleccionId, ambitoId, categoriaId),
+  });

-    if (topResults.length === 0 && ambitoNivel === 'pais') {
-        return null;
-    }
+  useEffect(() => {
+    setIsExpanded(ambitoNivel === 'municipio');
+  }, [ambitoNivel]);

-    // 3. Clases condicionales también se construyen con el objeto 'styles'
-    const cardClasses = [
-        styles.mobileResultsCardContainer,
-        isExpanded ? styles.expanded : '',
-        styles[`view-${mobileView}`]
-    ].join(' ');
+  const topResults = data.resultadosPanel.slice(0, 3);

-    return (
-        <div className={cardClasses}>
-            {/* Sección Colapsable con Resultados */}
-            <div className={styles.collapsibleSection}>
-                <div className={styles.mobileResultsHeader} onClick={() => setIsExpanded(!isExpanded)}>
-                    <div className={styles.headerInfo}>
-                        <h4>{ambitoNombre}</h4>
-                        <span className={styles.headerActionText}>{isExpanded ? 'Ocultar resultados' : 'Ver top 3'}</span>
-                    </div>
-                    <div className={styles.headerToggleIcon}>
-                        {isExpanded ? <FiChevronDown /> : <FiChevronUp />}
-                    </div>
-                </div>
-                <div className={styles.mobileResultsContent}>
-                    {topResults.length > 0 ? (
-                        topResults.map(partido => <ResultRow key={partido.id} partido={partido} />)
-                    ) : (
-                        <p className={styles.noResultsText}>No hay resultados para esta selección.</p>
-                    )}
-                </div>
-            </div>
+  if (topResults.length === 0 && ambitoNivel === 'pais') {
+    return null;
+  }

-            {/* Footer Fijo con Botones de Navegación */}
-            <div className={styles.mobileCardViewToggle}>
-                <button
-                    className={`${styles.toggleBtn} ${mobileView === 'mapa' ? styles.active : ''}`}
-                    onClick={() => setMobileView('mapa')}
-                >
-                    <FiMap />
-                    <span>Mapa</span>
-                </button>
-                <button
-                    className={`${styles.toggleBtn} ${mobileView === 'resultados' ? styles.active : ''}`}
-                    onClick={() => setMobileView('resultados')}
-                >
-                    <FiList />
-                    <span>Detalles</span>
-                </button>
-            </div>
+  // 3. Clases condicionales también se construyen con el objeto 'styles'
+  const cardClasses = [
+    styles.mobileResultsCardContainer,
+    isExpanded ? styles.expanded : '',
+    styles[`view-${mobileView}`]
+  ].join(' ');
+
+  return (
+    <div className={cardClasses}>
+      {/* Sección Colapsable con Resultados */}
+      <div className={styles.collapsibleSection}>
+        <div className={styles.mobileResultsHeader} onClick={() => setIsExpanded(!isExpanded)}>
+          <div className={styles.headerInfo}>
+            <h4>{ambitoNombre}</h4>
+            <span className={styles.headerActionText}>{isExpanded ? 'Ocultar resultados' : 'Ver top 3'}</span>
+          </div>
+          <div className={styles.headerToggleIcon}>
+            {isExpanded ? <FiChevronDown /> : <FiChevronUp />}
+          </div>
        </div>
-    );
+        <div className={styles.mobileResultsContent}>
+          {topResults.length > 0 ? (
+            topResults.map(partido => <ResultRow key={partido.id} partido={partido} />)
+          ) : (
+            <p className={styles.noResultsText}>No hay resultados para esta selección.</p>
+          )}
+        </div>
+      </div>
+
+      {/* Footer Fijo con Botones de Navegación */}
+      <div className={styles.mobileCardViewToggle}>
+        <button
+          className={`${styles.toggleBtn} ${mobileView === 'mapa' ? styles.active : ''}`}
+          onClick={() => setMobileView('mapa')}
+        >
+          <FiMap />
+          <span>Mapa</span>
+        </button>
+        <button
+          className={`${styles.toggleBtn} ${mobileView === 'resultados' ? styles.active : ''}`}
+          onClick={() => setMobileView('resultados')}
+        >
+          <FiList />
+          <span>Detalles</span>
+        </button>
+      </div>
+    </div>
+  );
 };

 // --- WIDGET PRINCIPAL ---
@@ -157,10 +158,22 @@ const PanelContenido = ({ eleccionId, ambitoActual, categoriaId }: { eleccionId:
    queryKey: ['panelElectoral', eleccionId, ambitoActual.id, categoriaId],
    queryFn: () => getPanelElectoral(eleccionId, ambitoActual.id, categoriaId),
  });
+  // Si la API devolvió la bandera 'sinDatos', mostramos un mensaje.
+  if (data.sinDatos) {
+    return (
+      <div style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
+        <h4>Sin Resultados Detallados</h4>
+        <p>Aún no hay datos disponibles para esta selección.</p>
+        <p>Por favor, intente de nuevo más tarde.</p>
+      </div>
+    );
+  }
+  // Si no, renderizamos los resultados.
  return <PanelResultados resultados={data.resultadosPanel} estadoRecuento={data.estadoRecuento} />;
 };

 export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) => {
+  const queryClient = useQueryClient();
  const [ambitoActual, setAmbitoActual] = useState<AmbitoState>({ id: null, nivel: 'pais', nombre: 'Argentina', provinciaDistritoId: null });
  const [categoriaId, setCategoriaId] = useState<number>(2);
  const [isPanelOpen, setIsPanelOpen] = useState(true);
@@ -168,6 +181,16 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
  const isMobile = useMediaQuery('(max-width: 800px)');

  const handleAmbitoSelect = (nuevoAmbitoId: string, nuevoNivel: 'provincia' | 'municipio', nuevoNombre: string) => {
+    if (nuevoNivel === 'municipio') {
+      toast.promise(
+        queryClient.invalidateQueries({ queryKey: ['panelElectoral', eleccionId, nuevoAmbitoId, categoriaId] }),
+        {
+          loading: `Cargando datos de ${nuevoNombre}...`,
+          success: <b>Datos cargados</b>,
+          error: <b>No se pudieron cargar los datos.</b>,
+        }
+      );
+    }
    setAmbitoActual(prev => ({
      id: nuevoAmbitoId,
      nivel: nuevoNivel,
@@ -208,41 +231,43 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>

  return (
    <div className={styles.panelNacionalContainer}>
-      <Toaster containerClassName={styles.widgetToasterContainer} />
+      <Toaster
+        position="bottom-center"
+        containerClassName={styles.widgetToasterContainer}
+      />
      <header className={styles.panelHeader}>
        <div className={styles.headerTopRow}>
          <Select
            options={CATEGORIAS_NACIONALES}
            value={selectedCategoria}
            onChange={(option) => option && setCategoriaId(option.value)}
-            // 4. Usamos un prefijo de clase simple que se asociará con las clases del módulo CSS
            classNamePrefix="categoriaSelector"
            className={styles.categoriaSelectorContainer}
            isSearchable={false}
          />
        </div>
        <div className={styles.headerBottomRow}>
-            <Breadcrumbs
-                nivel={ambitoActual.nivel}
-                nombreAmbito={ambitoActual.nombre}
-                nombreProvincia={ambitoActual.provinciaNombre}
-                onReset={handleResetToPais}
-                onVolverProvincia={handleVolverAProvincia}
+          <Breadcrumbs
+            nivel={ambitoActual.nivel}
+            nombreAmbito={ambitoActual.nombre}
+            nombreProvincia={ambitoActual.provinciaNombre}
+            onReset={handleResetToPais}
+            onVolverProvincia={handleVolverAProvincia}
+          />
+          {ambitoActual.nivel === 'provincia' && ambitoActual.provinciaDistritoId && (
+            <MunicipioSearch
+              distritoId={ambitoActual.provinciaDistritoId}
+              onMunicipioSelect={(municipioId, municipioNombre) =>
+                handleAmbitoSelect(municipioId, 'municipio', municipioNombre)
+              }
            />
-            {ambitoActual.nivel === 'provincia' && ambitoActual.provinciaDistritoId && (
-                <MunicipioSearch 
-                    distritoId={ambitoActual.provinciaDistritoId}
-                    onMunicipioSelect={(municipioId, municipioNombre) => 
-                        handleAmbitoSelect(municipioId, 'municipio', municipioNombre)
-                    }
-                />
-            )}
+          )}
        </div>
      </header>
      <main className={mainContentClasses}>
        <div className={styles.mapaColumn}>
          <button className={styles.panelToggleBtn} onClick={() => setIsPanelOpen(!isPanelOpen)} title={isPanelOpen ? "Ocultar panel" : "Mostrar panel"}> {isPanelOpen ? '›' : '‹'} </button>
-          
+
          <Suspense fallback={<div className={styles.spinner} />}>
            <MapaNacional eleccionId={eleccionId} categoriaId={categoriaId} nivel={ambitoActual.nivel} nombreAmbito={ambitoActual.nombre} nombreProvinciaActiva={ambitoActual.provinciaNombre} provinciaDistritoId={ambitoActual.provinciaDistritoId ?? null} onAmbitoSelect={handleAmbitoSelect} onVolver={ambitoActual.nivel === 'municipio' ? handleVolverAProvincia : handleResetToPais} isMobileView={isMobile} />
          </Suspense>
@@ -254,17 +279,17 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
        </div>

        <Suspense fallback={null}>
-            {isMobile && (
-              <MobileResultsCard 
-                eleccionId={eleccionId}
-                ambitoId={ambitoActual.id}
-                categoriaId={categoriaId}
-                ambitoNombre={ambitoActual.nombre}
-                ambitoNivel={ambitoActual.nivel}
-                mobileView={mobileView}
-                setMobileView={setMobileView}
-              />
-            )}
+          {isMobile && (
+            <MobileResultsCard
+              eleccionId={eleccionId}
+              ambitoId={ambitoActual.id}
+              categoriaId={categoriaId}
+              ambitoNombre={ambitoActual.nombre}
+              ambitoNivel={ambitoActual.nivel}
+              mobileView={mobileView}
+              setMobileView={setMobileView}
+            />
+          )}
        </Suspense>
      </main>
    </div>