feat(b3): M3 — panneau « toutes les fiches » sur / et /agences (desktop + mobile), fiches sans géoloc visibles, ?vue=fiches

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Jules
2026-09-25 12:17:52 +02:00
co-authored by Claude Sonnet 5
parent 5b504b3e04
commit 1838f4b02d
3 changed files with 316 additions and 21 deletions
+84 -10
View File
@@ -40,7 +40,7 @@
Mode dev — données seed
</div>
<!-- ── VUE DESKTOP : Onglets Métropole / Outre-mer ── -->
<!-- ── VUE DESKTOP : Onglets Métropole / Outre-mer / Toutes les fiches ── -->
<div class="hidden lg:flex lg:flex-1 lg:flex-col lg:overflow-hidden">
<!-- Barre onglets desktop -->
<div class="shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
@@ -49,15 +49,22 @@
:style="desktopMapView === 'metropole'
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
@click="desktopMapView = 'metropole'"
@click="setDesktopView('metropole')"
>Métropolitain</button>
<button
class="px-5 py-2 text-sm font-medium transition-colors"
:style="desktopMapView === 'outremer'
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
@click="desktopMapView = 'outremer'"
@click="setDesktopView('outremer')"
>Outre-mer</button>
<button
class="px-5 py-2 text-sm font-medium transition-colors"
:style="desktopMapView === 'fiches'
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
@click="setDesktopView('fiches')"
>Toutes les fiches</button>
</div>
<!-- Carte Métropole desktop -->
@@ -94,26 +101,58 @@
</div>
<ChatbotPlaceholder @highlightOrgs="onHighlightOrgs" />
</div>
<!-- Panneau « Toutes les fiches » desktop (B3-M3) — remplace la carte,
fiches sans géoloc incluses (gain principal de cette mission) -->
<div v-show="desktopMapView === 'fiches'" class="flex-1 flex flex-col overflow-hidden">
<div
class="shrink-0 px-4 py-2"
style="border-bottom: 1px solid var(--nav-bg-alt); background: var(--nav-surface);"
>
<button
type="button"
class="text-xs font-medium underline"
style="color: var(--nav-text-muted);"
@click="setDesktopView('metropole')"
>← Carte</button>
</div>
<FichesPanel
:fiches="allFichesMini"
:hashtags="[...FONCTIONS]"
:selected="fonctions"
:query="search"
intention="Toutes les structures d'entraide, y compris celles sans adresse sur la carte. Cochez une fonction pour filtrer."
@update:selected="onFonctions"
@open="(fiche) => onSelectOrg(Number(fiche.id))"
/>
</div>
</div>
<!-- ── VUE MOBILE : Onglets Métro/Outre-mer + carte pleine hauteur + sheet swipable ── -->
<!-- Onglets Métropolitain / Outre-mer -->
<!-- Onglets Métropolitain / Outre-mer / Toutes les fiches -->
<div class="lg:hidden shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
<button
class="flex-1 py-2 text-sm font-medium transition-colors"
:style="mobileMapView === 'metropole'
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
@click="mobileMapView = 'metropole'"
@click="setMobileView('metropole')"
>Métropolitain</button>
<button
class="flex-1 py-2 text-sm font-medium transition-colors"
:style="mobileMapView === 'outremer'
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
@click="mobileMapView = 'outremer'"
@click="setMobileView('outremer')"
>Outre-mer</button>
<button
class="flex-1 py-2 text-sm font-medium transition-colors"
:style="mobileMapView === 'fiches'
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
@click="setMobileView('fiches')"
>Fiches</button>
</div>
<div class="lg:hidden flex-1 relative overflow-hidden">
@@ -154,9 +193,12 @@
</ClientOnly>
</div>
<!-- Bottom sheet swipable (Métropole et Outre-mer) -->
<!-- Fond neutre pour l'onglet « Fiches » (pas de carte dessous) -->
<div v-show="mobileMapView === 'fiches'" class="absolute inset-0" style="background: var(--nav-bg-alt);" />
<!-- Bottom sheet swipable (Métropole, Outre-mer et Fiches) -->
<ClientOnly>
<MobileSheet :resultCount="filtered.length" :pending="pending">
<MobileSheet v-if="mobileMapView !== 'fiches'" :resultCount="filtered.length" :pending="pending">
<!-- Barre recherche -->
<div class="px-3 pt-2 pb-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
<label class="mobile-search-label" aria-label="Rechercher une organisation">
@@ -272,6 +314,19 @@
</div>
</div>
</MobileSheet>
<!-- Bottom sheet — onglet « Fiches » mobile (B3-M3), contenu dédié -->
<MobileSheet v-else :resultCount="filtered.length" :pending="pending">
<FichesPanel
:fiches="allFichesMini"
:hashtags="[...FONCTIONS]"
:selected="fonctions"
:query="search"
intention="Toutes les structures d'entraide, y compris celles sans adresse sur la carte. Cochez une fonction pour filtrer."
@update:selected="onFonctions"
@open="(fiche) => onSelectOrgMobile(Number(fiche.id))"
/>
</MobileSheet>
</ClientOnly>
</div>
@@ -358,12 +413,14 @@ const territoireMode = ref<string>(
(route.query.mode as string) === 'outremer' ? 'outremer' : 'metropole'
)
const desktopMapView = ref<'metropole' | 'outremer'>('metropole')
type MapView = 'metropole' | 'outremer' | 'fiches'
const desktopMapView = ref<MapView>((route.query.vue as string) === 'fiches' ? 'fiches' : 'metropole')
const selectedId = ref<number | null>(null)
const chatbotOpen = ref(false)
const ficheModalOpen = ref(false)
const ficheModalId = ref<number | null>(null)
const mobileMapView = ref<'metropole' | 'outremer'>('metropole')
const mobileMapView = ref<MapView>((route.query.vue as string) === 'fiches' ? 'fiches' : 'metropole')
const missionOpen = ref(false)
onMounted(() => {
@@ -411,9 +468,20 @@ function syncUrl() {
if (fonctions.value.length) q.fonctions = fonctions.value.join(',')
if (territoire.value) q.territoire = territoire.value
if (territoireMode.value === 'outremer') q.mode = 'outremer'
if (desktopMapView.value === 'fiches' || mobileMapView.value === 'fiches') q.vue = 'fiches'
router.replace({ query: Object.keys(q).length ? q : undefined })
}
// Changement de vue (carte/fiches) — passe par syncUrl pour poser/retirer ?vue=fiches
function setDesktopView(v: MapView) {
desktopMapView.value = v
syncUrl()
}
function setMobileView(v: MapView) {
mobileMapView.value = v
syncUrl()
}
// Sauvegarde les filtres courants dans sessionStorage pour le bouton retour des fiches
function storeFiltersForBack() {
if (typeof window === 'undefined') return
@@ -541,6 +609,12 @@ const filtered = computed<Org[]>(() => {
return result
})
// Panneau « Toutes les fiches » (B3-M3) — mêmes fiches que `filtered`, sans
// filtrer par géolocalisation : c'est le gain principal de cette mission,
// les fiches sans latitude/longitude (invisibles sur la carte) y apparaissent.
const { toMini } = useFicheAdapter()
const allFichesMini = computed(() => filtered.value.map((org) => toMini(org)))
const DOM_TOM = ['Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte']
const DOM_TOM_LIST = DOM_TOM