Test Public Side

2025-09-03 13:49:35 -03:00
parent 32e85b9b9d
commit a81f1fe894
33 changed files with 1205 additions and 133 deletions
--- a/Elecciones-Web/frontend/src/components/DiputadosPorSeccionWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/DiputadosPorSeccionWidget.tsx
@@ -0,0 +1,127 @@
+// src/components/DiputadosPorSeccionWidget.tsx
+import { useState, useMemo, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import Select from 'react-select';
+import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica } from '../apiService';
+import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../types/types';
+import { ImageWithFallback } from './ImageWithFallback';
+import './TickerWidget.css';
+
+const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
+const customSelectStyles = {
+  control: (base: any) => ({ ...base, minWidth: '220px', border: '1px solid #ced4da' }),
+  menu: (base: any) => ({ ...base, zIndex: 10 }),
+};
+
+const CATEGORIA_ID = 6; // ID para Diputados
+
+export const DiputadosPorSeccionWidget = () => {
+  const [selectedSeccion, setSelectedSeccion] = useState<{ value: string; label: string } | null>(null);
+
+  const { data: configData } = useQuery({
+    queryKey: ['configuracionPublica'],
+    queryFn: getConfiguracionPublica,
+    staleTime: 0,
+  });
+
+  const cantidadAMostrar = parseInt(configData?.ConcejalesResultadosCantidad || '5', 10);
+
+  // Ahora usamos useQuery para obtener las secciones filtradas
+  const { data: secciones = [], isLoading: isLoadingSecciones } = useQuery<MunicipioSimple[]>({
+    queryKey: ['seccionesElectorales', CATEGORIA_ID], // Key única para la caché
+    queryFn: () => getSeccionesElectorales(CATEGORIA_ID), // Pasamos el ID de la categoría
+  });
+
+  // useEffect para establecer la primera sección por defecto
+  useEffect(() => {
+    if (secciones.length > 0 && !selectedSeccion) {
+      // Ordenamos aquí solo para la selección inicial
+      const orden = new Map([
+          ['Capital', 0], ['Primera', 1], ['Segunda', 2], ['Tercera', 3],
+          ['Cuarta', 4], ['Quinta', 5], ['Sexta', 6], ['Séptima', 7]
+      ]);
+      const getOrden = (nombre: string) => {
+          const match = nombre.match(/Capital|Primera|Segunda|Tercera|Cuarta|Quinta|Sexta|Séptima/);
+          return match ? orden.get(match[0]) ?? 99 : 99;
+      };
+      const seccionesOrdenadas = [...secciones].sort((a, b) => getOrden(a.nombre) - getOrden(b.nombre));
+      
+      setSelectedSeccion({ value: seccionesOrdenadas[0].id, label: seccionesOrdenadas[0].nombre });
+    }
+  }, [secciones, selectedSeccion]);
+
+  const seccionOptions = useMemo(() =>
+    secciones
+      .map(s => ({ value: s.id, label: s.nombre }))
+      .sort((a, b) => { // Mantenemos el orden en el dropdown
+          const orden = new Map([
+              ['Sección Capital', 0], ['Sección Primera', 1], ['Sección Segunda', 2], ['Sección Tercera', 3],
+              ['Sección Cuarta', 4], ['Sección Quinta', 5], ['Sección Sexta', 6], ['Sección Séptima', 7]
+          ]);
+          return (orden.get(a.label) ?? 99) - (orden.get(b.label) ?? 99);
+      }),
+  [secciones]);
+
+  const { data, isLoading: isLoadingResultados } = useQuery<ApiResponseResultadosPorSeccion>({
+    queryKey: ['resultadosPorSeccion', selectedSeccion?.value, CATEGORIA_ID],
+    queryFn: () => getResultadosPorSeccion(selectedSeccion!.value, CATEGORIA_ID),
+    enabled: !!selectedSeccion,
+  });
+
+  const resultados = data?.resultados || [];
+
+  let displayResults: ResultadoTicker[] = resultados;
+  if (resultados && resultados.length > cantidadAMostrar) {
+    const topParties = resultados.slice(0, cantidadAMostrar - 1);
+    const otherParties = resultados.slice(cantidadAMostrar - 1);
+    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + (party.porcentaje || 0), 0);
+    const otrosEntry: ResultadoTicker = {
+      id: `otros-diputados-${selectedSeccion?.value}`,
+      nombre: 'Otros',
+      nombreCorto: 'Otros',
+      color: '#888888',
+      logoUrl: null,
+      votos: 0,
+      porcentaje: otrosPorcentaje,
+    };
+    displayResults = [...topParties, otrosEntry];
+  } else if (resultados) {
+    displayResults = resultados.slice(0, cantidadAMostrar);
+  }
+
+  return (
+    <div className="ticker-card">
+      <div className="ticker-header">
+        <h3>DIPUTADOS POR SECCIÓN</h3>
+        <Select
+          options={seccionOptions}
+          value={selectedSeccion}
+          onChange={(option) => setSelectedSeccion(option)}
+          isLoading={isLoadingSecciones}
+          placeholder="Seleccionar sección..."
+          styles={customSelectStyles}
+        />
+      </div>
+      <div className="ticker-results">
+        {(isLoadingResultados && selectedSeccion) && <p>Cargando...</p>}
+        {!selectedSeccion && !isLoadingSecciones && <p style={{textAlign: 'center', color: '#666'}}>Seleccione una sección.</p>}
+        {displayResults.map(partido => (
+          <div key={partido.id} className="ticker-party">
+            <div className="party-logo">
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+            </div>
+            <div className="party-details">
+              <div className="party-info">
+                <span className="party-name">{partido.nombreCorto || partido.nombre}</span>
+                <span className="party-percent">{formatPercent(partido.porcentaje)}</span>
+              </div>
+              <div className="party-bar-background">
+                <div className="party-bar-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};