83 lines
4.5 KiB
TypeScript
83 lines
4.5 KiB
TypeScript
|
// src/components/LogoOverridesManager.tsx
|
||
|
|
import { useState, useMemo, useEffect } from 'react';
|
||
|
|
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||
|
|
import Select from 'react-select';
|
||
|
|
import { getMunicipiosForAdmin, getAgrupaciones, getLogos, updateLogos } from '../services/apiService';
|
||
|
|
import type { MunicipioSimple, AgrupacionPolitica, LogoAgrupacionCategoria } from '../types';
|
||
|
|
|
||
|
|
// --- AÑADIMOS LAS CATEGORÍAS PARA EL SELECTOR ---
|
||
|
|
const CATEGORIAS_OPTIONS = [
|
||
|
|
{ value: 5, label: 'Senadores' },
|
||
|
|
{ value: 6, label: 'Diputados' },
|
||
|
|
{ value: 7, label: 'Concejales' }
|
||
|
|
];
|
||
|
|
|
||
|
|
export const LogoOverridesManager = () => {
|
||
|
|
const queryClient = useQueryClient();
|
||
|
|
const { data: municipios = [] } = useQuery<MunicipioSimple[]>({ queryKey: ['municipiosForAdmin'], queryFn: getMunicipiosForAdmin });
|
||
|
|
const { data: agrupaciones = [] } = useQuery<AgrupacionPolitica[]>({ queryKey: ['agrupaciones'], queryFn: getAgrupaciones });
|
||
|
|
const { data: logos = [] } = useQuery<LogoAgrupacionCategoria[]>({ queryKey: ['logos'], queryFn: getLogos });
|
||
|
|
|
||
|
|
// --- NUEVO ESTADO PARA LA CATEGORÍA ---
|
||
|
|
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);
|
||
|
|
const [logoUrl, setLogoUrl] = useState('');
|
||
|
|
|
||
|
|
const municipioOptions = useMemo(() => 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(() => {
|
||
|
|
// La búsqueda ahora depende de los 3 selectores
|
||
|
|
if (!selectedMunicipio || !selectedAgrupacion || !selectedCategoria) return '';
|
||
|
|
return logos.find(l =>
|
||
|
|
l.ambitoGeograficoId === parseInt(selectedMunicipio.value) &&
|
||
|
|
l.agrupacionPoliticaId === selectedAgrupacion.value &&
|
||
|
|
l.categoriaId === selectedCategoria.value
|
||
|
|
)?.logoUrl || '';
|
||
|
|
}, [logos, selectedMunicipio, selectedAgrupacion, selectedCategoria]);
|
||
|
|
|
||
|
|
useEffect(() => { setLogoUrl(currentLogo) }, [currentLogo]);
|
||
|
|
|
||
|
|
const handleSave = async () => {
|
||
|
|
if (!selectedMunicipio || !selectedAgrupacion || !selectedCategoria) return;
|
||
|
|
const newLogoEntry: LogoAgrupacionCategoria = {
|
||
|
|
id: 0,
|
||
|
|
agrupacionPoliticaId: selectedAgrupacion.value,
|
||
|
|
categoriaId: selectedCategoria.value,
|
||
|
|
ambitoGeograficoId: parseInt(selectedMunicipio.value),
|
||
|
|
logoUrl: logoUrl || null
|
||
|
|
};
|
||
|
|
try {
|
||
|
|
await updateLogos([newLogoEntry]);
|
||
|
|
queryClient.invalidateQueries({ queryKey: ['logos'] });
|
||
|
|
alert('Override de logo guardado.');
|
||
|
|
} catch { alert('Error al guardar.'); }
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="admin-module">
|
||
|
|
<h3>Overrides de Logos por Municipio y Categoría</h3>
|
||
|
|
<p>Configure una imagen específica para un partido en un municipio y categoría determinados.</p>
|
||
|
|
<div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-end' }}>
|
||
|
|
<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..."/>
|
||
|
|
</div>
|
||
|
|
<div style={{ flex: 1 }}>
|
||
|
|
<label>Agrupación</label>
|
||
|
|
<Select options={agrupacionOptions} value={selectedAgrupacion} onChange={setSelectedAgrupacion} isClearable placeholder="Seleccione..."/>
|
||
|
|
</div>
|
||
|
|
<div style={{ flex: 2 }}>
|
||
|
|
<label>URL del Logo Específico</label>
|
||
|
|
<input type="text" value={logoUrl} onChange={e => setLogoUrl(e.target.value)} style={{ width: '100%' }} disabled={!selectedMunicipio || !selectedAgrupacion || !selectedCategoria} />
|
||
|
|
</div>
|
||
|
|
<button onClick={handleSave} disabled={!selectedMunicipio || !selectedAgrupacion || !selectedCategoria}>Guardar</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|