Gestion des états pour afficher une région dans le filtre
D'après les captures d'écran, je vois que vous avez besoin d'implémenter la gestion des états pour sélectionner et afficher une région dans votre système de filtres. Je vais vous proposer une solution complète.
Explication de la solution
J'ai créé une solution complète pour gérer les états de sélection des régions dans votre système de filtres. Voici les points clés :
- Structure des données : J'ai défini des types pour
RegionData,TerritoryDataetPointOfSaleDataavec des relations entre eux (via regionId et territoryId). Gestion des états :
- États pour l'ouverture/fermeture des popovers (
openRegion,openTerritory,openPointSale) - États pour les valeurs sélectionnées (
selectedRegion,selectedTerritory,selectedPointSale)
- États pour l'ouverture/fermeture des popovers (
Filtrage en cascade :
- Les territoires sont filtrés en fonction de la région sélectionnée
- Les points de vente sont filtrés en fonction du territoire sélectionné
Interface utilisateur :
- Utilisation de
Popoverpour créer des menus déroulants - Affichage conditionnel des composants en fonction des sélections
- Utilisation de
Gestion des événements :
- Fonction
handleRegionChangequi met à jour la région sélectionnée et réinitialise les sélections dépendantes
- Fonction
Cette approche permet une sélection hiérarchique où le choix d'une région filtre les territoires disponibles, et le choix d'un territoire filtre les points de vente disponibles.
Pour implémenter cette solution, vous devrez adapter les composants TerritoryChart et PointOfSaleChart de manière similaire au RegionChart que j'ai fourni.
Comment filtrer les territoires par région
D'après votre code, je vois que vous utilisez Prisma pour récupérer vos données. Voici comment vous pouvez filtrer les territoires en fonction d'une région sélectionnée :
1. Filtrage côté client (JavaScript)
Si vous avez déjà récupéré toutes les données et que vous souhaitez filtrer côté client :
// Supposons que vous avez un état pour la région sélectionnée
const [selectedRegion, setSelectedRegion] = React.useState<string | null>(null);
// Filtrer les territoires en fonction de la région sélectionnée
const filteredTerritories = React.useMemo(() => {
if (!selectedRegion) return allTerritories; // Retourne tous les territoires si aucune région n'est sélectionnée
// Filtre les territoires qui appartiennent à la région sélectionnée
return allTerritories.filter(territory => territory.region === selectedRegion);
}, [allTerritories, selectedRegion]);2. Filtrage côté serveur (Prisma)
Si vous préférez filtrer directement dans votre requête Prisma (plus efficace pour de grandes quantités de données) :
// Dans votre fonction de chargement de données
async function loadTerritoriesByRegion(regionId: string) {
const territories = await prismadb.territoires.findMany({
where: {
region: regionId // Assurez-vous que le nom du champ correspond à votre modèle
}
});
return territories;
}
// Utilisation dans un composant avec React Query ou SWR
const { data: territories } = useSWR(
selectedRegion ? `territories-${selectedRegion}` : null,
() => selectedRegion ? loadTerritoriesByRegion(selectedRegion) : []
);3. Implémentation dans votre composant FiltersChart
Voici comment vous pourriez implémenter cela dans votre composant de filtres :
export function FiltersChart({ regions, territories, pdv }: FiltersChartProps) {
// État pour la région sélectionnée
const [selectedRegion, setSelectedRegion] = React.useState<string | null>(null);
// Filtrer les territoires en fonction de la région sélectionnée
const filteredTerritories = React.useMemo(() => {
if (!selectedRegion) return territories;
return territories.filter(territory => territory.region === selectedRegion);
}, [territories, selectedRegion]);
// Fonction pour gérer le changement de région
const handleRegionChange = (regionId: string) => {
setSelectedRegion(regionId === selectedRegion ? null : regionId);
};
return (
<div>
{/* Sélecteur de région */}
<div>
{regions.map(region => (
<button
key={region.id}
onClick={() => handleRegionChange(region.id)}
className={selectedRegion === region.id ? "active" : ""}
>
{region.name}
</button>
))}
</div>
{/* Affichage des territoires filtrés */}
<div>
<h3>Territoires {selectedRegion ? `de la région sélectionnée` : ''}</h3>
<ul>
{filteredTerritories.map(territory => (
<li key={territory.id}>{territory.name}</li>
))}
</ul>
</div>
</div>
);
}4. Avec Server Actions (Next.js)
Si vous utilisez les Server Actions de Next.js, vous pourriez implémenter une action pour récupérer les territoires filtrés :
// Dans un fichier actions.ts
'use server'
export async function getTerritoriesByRegion(regionId: string) {
const territories = await prismadb.territoires.findMany({
where: {
region: regionId
}
});
return territories;
}
// Dans votre composant
'use client'
import { getTerritoriesByRegion } from './actions';
export function RegionSelector({ regions }) {
const [selectedRegion, setSelectedRegion] = useState(null);
const [territories, setTerritories] = useState([]);
async function handleRegionChange(regionId) {
setSelectedRegion(regionId);
if (regionId) {
const filteredTerritories = await getTerritoriesByRegion(regionId);
setTerritories(filteredTerritories);
} else {
setTerritories([]);
}
}
// Reste du composant...
}Ces approches vous permettront de filtrer efficacement les territoires en fonction de la région sélectionnée, que ce soit côté client ou côté serveur.