Fix Widgets Carousel

2025-10-18 10:51:51 -03:00
parent ae846f2d48
commit 17a5b333fd
4 changed files with 58 additions and 58 deletions
--- a/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx
@@ -77,6 +77,18 @@ export const DevAppLegislativas = () => {
                />
            </div>

+            <div style={sectionStyle}>
+                <h2>Widget: Carrusel de Resultados Nación (Home)</h2>
+                <p style={descriptionStyle}>
+                    Uso: <code style={codeStyle}>&lt;HomeCarouselNacionalWidget eleccionId={2} categoriaId={2} titulo="Senadores - Argentina" /&gt;</code>
+                </p>
+                <HomeCarouselNacionalWidget
+                    eleccionId={2}
+                    categoriaId={2} // 3 para Diputados, 2 para Senadores
+                    titulo="Senadores - Total País"
+                />
+            </div>
+
            {/* --- SECCIÓN PARA EL WIDGET DE TARJETAS CON EJEMPLOS --- */}
            <div style={sectionStyle}>
                <h2>Widget: Resultados por Provincia (Tarjetas)</h2>
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselNacionalWidget.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselNacionalWidget.tsx
@@ -1,4 +1,5 @@
 // src/features/legislativas/nacionales/HomeCarouselNacionalWidget.tsx
+
 import { useQuery } from '@tanstack/react-query';
 import { getHomeResumenNacional } from '../../../apiService';
 import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
@@ -12,41 +13,42 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import styles from './HomeCarouselWidget.module.css';

-const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
-const formatNumber = (num: number) => num.toLocaleString('es-AR');
-
-const formatDateTime = (dateString: string | undefined | null) => {
-    if (!dateString) return '...';
-    try {
-        const date = new Date(dateString);
-        if (isNaN(date.getTime())) {
-            return dateString;
-        }
-        const day = String(date.getDate()).padStart(2, '0');
-        const month = String(date.getMonth() + 1).padStart(2, '0');
-        const year = date.getFullYear();
-        const hours = String(date.getHours()).padStart(2, '0');
-        const minutes = String(date.getMinutes()).padStart(2, '0');
-        return `${day}/${month}/${year}, ${hours}:${minutes} hs.`;
-    } catch (e) {
-        return dateString;
-    }
-};
-
-// Las props ya no incluyen distritoId
 interface Props {
  eleccionId: number;
  categoriaId: number;
  titulo: string;
 }

+const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
+const formatNumber = (num: number) => num.toLocaleString('es-AR');
+const formatDateTime = (dateString: string | undefined | null) => {
+  if (!dateString) return '...';
+  try {
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) {
+      return dateString;
+    }
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = date.getFullYear();
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${day}/${month}/${year}, ${hours}:${minutes} hs.`;
+  } catch (e) {
+    return dateString;
+  }
+};
+
 export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }: Props) => {
+  const uniqueId = `swiper-${Math.random().toString(36).substring(2, 9)}`;
+  const prevButtonClass = `prev-${uniqueId}`;
+  const nextButtonClass = `next-${uniqueId}`;
+
  const { data, isLoading, error } = useQuery({
-    // La queryKey ahora no necesita distritoId
    queryKey: ['homeResumenNacional', eleccionId, categoriaId],
-    // Llama a la nueva función de la API
    queryFn: () => getHomeResumenNacional(eleccionId, categoriaId),
  });
+
  if (isLoading) return <div>Cargando widget...</div>;
  if (error || !data) return <div>No se pudieron cargar los datos.</div>;

@@ -82,8 +84,8 @@ export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }:
          spaceBetween={16}
          slidesPerView={1.3}
          navigation={{
-            prevEl: `.${styles.navButtonPrev}`,
-            nextEl: `.${styles.navButtonNext}`,
+            prevEl: `.${prevButtonClass}`,
+            nextEl: `.${nextButtonClass}`,
          }}
          breakpoints={{
            320: { slidesPerView: 1.25, spaceBetween: 10 },
@@ -96,7 +98,6 @@ export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }:
          {data.resultados.map(candidato => (
            <SwiperSlide key={candidato.agrupacionId}>
              <div className={styles.candidateCard} style={{ '--candidate-color': candidato.color || '#ccc' } as React.CSSProperties}>
-
                <div className={styles.candidatePhotoWrapper}>
                  <ImageWithFallback
                    src={candidato.fotoUrl ?? undefined}
@@ -105,22 +106,15 @@ export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }:
                    className={styles.candidatePhoto}
                  />
                </div>
-
                <div className={styles.candidateDetails}>
                  <div className={styles.candidateInfo}>
                    {candidato.nombreCandidato ? (
                      <>
-                        <span className={styles.candidateName}>
-                          {candidato.nombreCandidato}
-                        </span>
-                        <span className={styles.partyName}>
-                          {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
-                        </span>
+                        <span className={styles.candidateName}>{candidato.nombreCandidato}</span>
+                        <span className={styles.partyName}>{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}</span>
                      </>
                    ) : (
-                      <span className={styles.candidateName}>
-                        {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
-                      </span>
+                      <span className={styles.candidateName}>{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}</span>
                    )}
                  </div>
                  <div className={styles.candidateResults}>
@@ -128,14 +122,13 @@ export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }:
                    <span className={styles.votes}>{formatNumber(candidato.votos)} votos</span>
                  </div>
                </div>
-
              </div>
            </SwiperSlide>
          ))}
        </Swiper>

-        <div className={`${styles.navButton} ${styles.navButtonPrev}`}></div>
-        <div className={`${styles.navButton} ${styles.navButtonNext}`}></div>
+        <div className={`${styles.navButton} ${styles.navButtonPrev} ${prevButtonClass}`}></div>
+        <div className={`${styles.navButton} ${styles.navButtonNext} ${nextButtonClass}`}></div>
      </div>

      <div className={styles.widgetFooter}>
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx
@@ -1,4 +1,5 @@
 // src/features/legislativas/nacionales/HomeCarouselWidget.tsx
+
 import { useQuery } from '@tanstack/react-query';
 import { getHomeResumen } from '../../../apiService';
 import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
@@ -21,7 +22,6 @@ interface Props {

 const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
 const formatNumber = (num: number) => num.toLocaleString('es-AR');
-
 const formatDateTime = (dateString: string | undefined | null) => {
    if (!dateString) return '...';
    try {
@@ -41,6 +41,10 @@ const formatDateTime = (dateString: string | undefined | null) => {
 };

 export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo }: Props) => {
+    const uniqueId = `swiper-${Math.random().toString(36).substring(2, 9)}`;
+    const prevButtonClass = `prev-${uniqueId}`;
+    const nextButtonClass = `next-${uniqueId}`;
+
    const { data, isLoading, error } = useQuery({
        queryKey: ['homeResumen', eleccionId, distritoId, categoriaId],
        queryFn: () => getHomeResumen(eleccionId, distritoId, categoriaId),
@@ -81,8 +85,8 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
                    spaceBetween={16}
                    slidesPerView={1.3}
                    navigation={{
-                        prevEl: `.${styles.navButtonPrev}`,
-                        nextEl: `.${styles.navButtonNext}`,
+                        prevEl: `.${prevButtonClass}`,
+                        nextEl: `.${nextButtonClass}`,
                    }}
                    breakpoints={{
                        320: { slidesPerView: 1.25, spaceBetween: 10 },
@@ -95,7 +99,6 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
                    {data.resultados.map(candidato => (
                        <SwiperSlide key={candidato.agrupacionId}>
                            <div className={styles.candidateCard} style={{ '--candidate-color': candidato.color || '#ccc' } as React.CSSProperties}>
-
                                <div className={styles.candidatePhotoWrapper}>
                                    <ImageWithFallback
                                        src={candidato.fotoUrl ?? undefined}
@@ -104,22 +107,15 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
                                        className={styles.candidatePhoto}
                                    />
                                </div>
-
                                <div className={styles.candidateDetails}>
                                    <div className={styles.candidateInfo}>
                                        {candidato.nombreCandidato ? (
                                            <>
-                                                <span className={styles.candidateName}>
-                                                    {candidato.nombreCandidato}
-                                                </span>
-                                                <span className={styles.partyName}>
-                                                    {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
-                                                </span>
+                                                <span className={styles.candidateName}>{candidato.nombreCandidato}</span>
+                                                <span className={styles.partyName}>{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}</span>
                                            </>
                                        ) : (
-                                            <span className={styles.candidateName}>
-                                                {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
-                                            </span>
+                                            <span className={styles.candidateName}>{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}</span>
                                        )}
                                    </div>
                                    <div className={styles.candidateResults}>
@@ -127,14 +123,13 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
                                        <span className={styles.votes}>{formatNumber(candidato.votos)} votos</span>
                                    </div>
                                </div>
-
                            </div>
                        </SwiperSlide>
                    ))}
                </Swiper>

-                <div className={`${styles.navButton} ${styles.navButtonPrev}`}></div>
-                <div className={`${styles.navButton} ${styles.navButtonNext}`}></div>
+                <div className={`${styles.navButton} ${styles.navButtonPrev} ${prevButtonClass}`}></div>
+                <div className={`${styles.navButton} ${styles.navButtonNext} ${nextButtonClass}`}></div>
            </div>

            <div className={styles.widgetFooter}>
--- a/Elecciones-Web/src/Elecciones.Api/obj/Debug/net9.0/Elecciones.Api.AssemblyInfo.cs
+++ b/Elecciones-Web/src/Elecciones.Api/obj/Debug/net9.0/Elecciones.Api.AssemblyInfo.cs
@@ -14,7 +14,7 @@ using System.Reflection;
 [assembly: System.Reflection.AssemblyCompanyAttribute("Elecciones.Api")]
 [assembly: System.Reflection.AssemblyConfigurationAttribute("Debug")]
 [assembly: System.Reflection.AssemblyFileVersionAttribute("1.0.0.0")]
-[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+4bc257df43f5813ec432b89b47fa078c1cfa1fc8")]
+[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+ae846f2d4834f3cd03079e91a8225e9f74cd073b")]
 [assembly: System.Reflection.AssemblyProductAttribute("Elecciones.Api")]
 [assembly: System.Reflection.AssemblyTitleAttribute("Elecciones.Api")]
 [assembly: System.Reflection.AssemblyVersionAttribute("1.0.0.0")]