/* global React, Icon */ // ============================================================================ // GeoPicker — picker en cascade Pays → Région → Département → Arrondissement // → Commune → Quartier // ---------------------------------------------------------------------------- // Composant réutilisable. Utilisé par : // - Baseline · Nouveau site (saisie unitaire) // - Baseline · Importer un CSV (auto-mapping) // - Activités · saisie d'une activité (l'attache géo de l'activité) // - Définitions de base · panneau de gestion du référentiel // // API // --- // setValue(v)} // lang="fr" // showQuartier={true} // affiche le 6e niveau (par défaut false) // allowQuartierCreate={true} // bouton "+ Nouveau quartier" inline // compact={false} // false = grille 2x3, true = ligne horizontale // defaultCountry="SN" // pré-sélection si value vide // /> // // onChange reçoit l'objet complet (pas un patch) ; quand un niveau supérieur // change, tous les niveaux inférieurs sont remis à null automatiquement — // sinon l'utilisateur garderait des incohérences (ex: Région Dakar mais // département Saint-Louis). // // Le composant GeoBreadcrumb (en bas) affiche le chemin résolu en lecture // seule, utile pour les listes / tableaux. // ============================================================================ function GeoPicker({ value, onChange, lang = "fr", showQuartier = false, allowQuartierCreate = false, compact = false, defaultCountry = "SN", showLabels = true, }) { const { useEffect, useState } = React; const v = value || {}; const cIso = v.country_iso2 || null; // Pré-sélection du pays par défaut une fois au montage si rien n'est défini. useEffect(() => { if (!v.country_iso2 && defaultCountry) { onChange({ ...v, country_iso2: defaultCountry }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Hooks de fetch — chacun retourne { data, loading } const { data: countries } = window.melr.useCountries(); const { data: regions } = window.melr.useGeoRegions(cIso); const { data: departments } = window.melr.useGeoDepartments(v.region_id || null); const { data: arrondissements } = window.melr.useGeoArrondissements(v.department_id || null); const { data: communes } = window.melr.useGeoCommunes(v.arrondissement_id || null); const { data: quartiers } = window.melr.useGeoQuartiers(v.commune_id || null); // Setters · quand on change un niveau, on efface tous les niveaux inférieurs // pour éviter les incohérences (Région Dakar mais Département Saint-Louis). const setCountry = (iso) => onChange({ country_iso2: iso || null, region_id: null, department_id: null, arrondissement_id: null, commune_id: null, quartier_id: null, }); const setRegion = (id) => onChange({ ...v, region_id: id || null, department_id: null, arrondissement_id: null, commune_id: null, quartier_id: null, }); const setDepartment = (id) => onChange({ ...v, department_id: id || null, arrondissement_id: null, commune_id: null, quartier_id: null, }); const setArrondissement = (id) => onChange({ ...v, arrondissement_id: id || null, commune_id: null, quartier_id: null, }); const setCommune = (id) => onChange({ ...v, commune_id: id || null, quartier_id: null, }); const setQuartier = (id) => onChange({ ...v, quartier_id: id || null }); // ── Création inline d'un quartier ───────────────────────────────────── const [creatingQuartier, setCreatingQuartier] = useState(false); const [newQuartierName, setNewQuartierName] = useState(""); const [creating, setCreating] = useState(false); const [createErr, setCreateErr] = useState(null); const onCreateQuartier = async () => { setCreateErr(null); if (!newQuartierName.trim()) { setCreateErr(lang === "fr" ? "Nom requis." : "Name required."); return; } if (!v.commune_id) return; setCreating(true); try { const row = await window.melr.geoQuartiersCrud.create({ commune_id: v.commune_id, name_fr: newQuartierName.trim(), }); setQuartier(row.id); setCreatingQuartier(false); setNewQuartierName(""); } catch (e) { setCreateErr(e.message); } finally { setCreating(false); } }; // ── Styles ───────────────────────────────────────────────────────────── const inp = { padding: "7px 9px", borderRadius: 6, border: "1px solid var(--line)", fontSize: 12.5, background: "var(--bg, white)", color: "var(--text)", width: "100%", boxSizing: "border-box", }; const lbl = { display: "block", fontSize: 10.5, color: "var(--text-faint)", marginBottom: 3, textTransform: "uppercase", letterSpacing: "0.04em", }; const wrapStyle = compact ? { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "flex-end" } : { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }; const Field = ({ label, children }) => (
{showLabels && } {children}
); return (
{showQuartier && ( {!creatingQuartier ? (
{allowQuartierCreate && v.commune_id && ( )}
) : (
setNewQuartierName(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); onCreateQuartier(); } }} />
)} {createErr &&
{createErr}
} )}
); } // ============================================================================ // GeoBreadcrumb — affichage en lecture seule du chemin Commune → Arr → Dépt → Région → Pays // Utilise resolveCommuneBreadcrumb (cache). Idéal pour les listes / // tableaux de sites où l'on ne veut pas re-fetcher 5 niveaux à chaque ligne. // ============================================================================ function GeoBreadcrumb({ communeId, quartierId, lang = "fr" }) { const { useState, useEffect } = React; const [bc, setBc] = useState(null); const [quartierName, setQuartierName] = useState(null); useEffect(() => { let mounted = true; if (!communeId) { setBc(null); return; } window.melr.resolveCommuneBreadcrumb(communeId).then((r) => { if (mounted) setBc(r); }); return () => { mounted = false; }; }, [communeId]); useEffect(() => { let mounted = true; if (!quartierId) { setQuartierName(null); return; } (async () => { const sb = window.melr && window.melr.supabase; if (!sb) return; const r = await sb.from("geo_quartiers").select("name_fr").eq("id", quartierId).single(); if (mounted && r.data) setQuartierName(r.data.name_fr); })(); return () => { mounted = false; }; }, [quartierId]); if (!bc) return —; const parts = [quartierName, bc.commune.name, bc.arrondissement.name, bc.department.name, bc.region.name, bc.country.name].filter(Boolean); return {parts.join(" · ")}; } // Expose globally for screens that load this file. window.GeoPicker = GeoPicker; window.GeoBreadcrumb = GeoBreadcrumb;