wip: snapshot V2 cascade onglet 2 (sauvegarde avant chirurgie git-hygiene)
This commit is contained in:
Jules Neny
@@ -461,12 +461,10 @@ const jaugePct = computed(() => {
|
||||
}
|
||||
|
||||
/* ── FAB mobile soutenir ─────────────────────────────────────────────────── */
|
||||
/* Stack vertical avec le FAB Chatbot a droite (evite l'overlap avec les chips
|
||||
sidebar mobile sur viewport intermediaire ~880px - bug E2E M3) */
|
||||
.fab-soutenir {
|
||||
position: fixed;
|
||||
bottom: 84px; /* au-dessus du FAB chatbot a bottom-6 (24px) + 48px de hauteur + 12px gap */
|
||||
right: 16px;
|
||||
bottom: 68px; /* au-dessus du FAB chatbot à 24px du bas + 48px de hauteur */
|
||||
left: 16px;
|
||||
z-index: 1000;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-bold text-sm" style="color: var(--nav-text);">{{ title }}</span>
|
||||
<span class="font-bold text-sm" style="color: var(--nav-text);">Chatbot</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -69,20 +69,18 @@
|
||||
<div ref="messagesContainer" class="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-3">
|
||||
<!-- Message onboarding (avant la première question) -->
|
||||
<div v-if="messages.length === 0" class="onboarding-bubble">
|
||||
<slot name="onboarding">
|
||||
<p>Ce chatbot fonctionne sur un serveur européen souverain
|
||||
<p>Ce chatbot fonctionne sur un serveur européen souverain
|
||||
(Mistral FR, zéro rétention), conçu sobre en énergie.</p>
|
||||
<p>Pour m'aider à te répondre efficacement,
|
||||
<p>Pour m'aider à te répondre efficacement,
|
||||
formule ta requête ainsi :</p>
|
||||
<ul>
|
||||
<li>• Besoin : [ce que tu cherches]</li>
|
||||
<li>• Thématique : [juridique / technique / économique / ...]</li>
|
||||
<li>• Lieu : [région ou ville]</li>
|
||||
</ul>
|
||||
<p class="example">Exemple : "Je suis salarié d'agence, litige avec mon
|
||||
<ul>
|
||||
<li>• Besoin : [ce que tu cherches]</li>
|
||||
<li>• Thématique : [juridique / technique / économique / ...]</li>
|
||||
<li>• Lieu : [région ou ville]</li>
|
||||
</ul>
|
||||
<p class="example">Exemple : "Je suis salarié d'agence, litige avec mon
|
||||
employeur, besoin conseil juridique droit du travail,
|
||||
Île-de-France."</p>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
@@ -102,7 +100,7 @@ employeur, besoin conseil juridique droit du travail,
|
||||
<a
|
||||
v-for="fiche in msg.fiches"
|
||||
:key="fiche.id"
|
||||
:href="`${ficheBasePath}/${fiche.id}`"
|
||||
:href="`/fiche/${fiche.id}`"
|
||||
class="fiche-card"
|
||||
>
|
||||
<span class="fiche-nom">{{ fiche.nom }}</span>
|
||||
@@ -178,16 +176,9 @@ interface ChatMessage {
|
||||
fiches?: FicheReco[]
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
endpoint?: string
|
||||
title?: string
|
||||
ficheBasePath?: string
|
||||
}>(), {
|
||||
endpoint: '/api/chatbot',
|
||||
title: 'Chatbot',
|
||||
ficheBasePath: '/fiche',
|
||||
})
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
@@ -234,7 +225,7 @@ async function sendMessage() {
|
||||
const res = await $fetch<{
|
||||
reponse_texte: string
|
||||
fiches_recommandees: { id: number | string; nom: string; explication: string }[]
|
||||
}>(props.endpoint, {
|
||||
}>('/api/chatbot', {
|
||||
method: 'POST',
|
||||
body: { question },
|
||||
})
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">CRITÈRES RÉGÉ</span>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<button
|
||||
v-for="critere in CRITERES"
|
||||
:key="critere.id"
|
||||
type="button"
|
||||
class="px-2 py-0.5 rounded-full text-xs transition-all"
|
||||
:style="modelValue.includes(critere.id)
|
||||
? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
|
||||
: 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
||||
@click="toggle(critere.id)"
|
||||
>
|
||||
{{ critere.label }}
|
||||
<span v-if="counts && counts[critere.id] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[critere.id] }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CRITERES } from '~/types/pratique'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: number[]
|
||||
counts?: Record<number, number>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: number[]]
|
||||
}>()
|
||||
|
||||
function toggle(id: number) {
|
||||
if (props.modelValue.includes(id)) {
|
||||
emit('update:modelValue', props.modelValue.filter(v => v !== id))
|
||||
} else {
|
||||
emit('update:modelValue', [...props.modelValue, id])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
284
components/FicheFamilleModal.vue
Normal file
284
components/FicheFamilleModal.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<!-- Backdrop -->
|
||||
<Transition name="backdrop">
|
||||
<div
|
||||
v-if="modelValue && familleId != null"
|
||||
class="fixed inset-0 z-[1400]"
|
||||
style="background: rgba(26,34,56,0.55);"
|
||||
@click="close"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Transition>
|
||||
|
||||
<!-- Modal -->
|
||||
<Transition name="modal">
|
||||
<div
|
||||
v-if="modelValue && familleId != null"
|
||||
class="fixed z-[1401] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
|
||||
style="
|
||||
width: min(720px, 94vw);
|
||||
max-height: 88vh;
|
||||
background: var(--nav-bg);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 16px 64px rgba(26,34,56,0.28);
|
||||
overflow: hidden;
|
||||
"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-label="familleLabel"
|
||||
@keydown.esc="close"
|
||||
>
|
||||
<!-- Header : background couleur famille -->
|
||||
<div
|
||||
class="flex items-center justify-between px-5 py-4 shrink-0"
|
||||
:style="`background: ${familleColor}; color: white;`"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-3 h-3 rounded-full shrink-0"
|
||||
style="background: white;"
|
||||
/>
|
||||
<h2 class="text-lg font-bold" style="color: white;">{{ familleLabel }}</h2>
|
||||
</div>
|
||||
<button
|
||||
@click="close"
|
||||
class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors"
|
||||
style="background: rgba(255,255,255,0.18); color: white;"
|
||||
aria-label="Fermer"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Body scrollable -->
|
||||
<div class="flex-1 overflow-y-auto px-5 py-5">
|
||||
<!-- Description longue editoriale -->
|
||||
<p
|
||||
class="text-sm leading-relaxed mb-5"
|
||||
style="color: var(--nav-text); white-space: pre-wrap;"
|
||||
>{{ familleDescription }}</p>
|
||||
|
||||
<!-- Separateur -->
|
||||
<div style="height: 1px; background: var(--nav-bg-alt); margin-bottom: 16px;" />
|
||||
|
||||
<!-- Mode fusion : Principal+Secondaire melanges (peu de secondaires) -->
|
||||
<template v-if="!showSplit">
|
||||
<h3
|
||||
class="text-xs font-bold uppercase tracking-wide mb-3"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>{{ allStructures.length }} structure{{ allStructures.length > 1 ? 's' : '' }}</h3>
|
||||
<ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px;">
|
||||
<li
|
||||
v-for="s in allStructures"
|
||||
:key="s.id"
|
||||
@click="selectStructure(s.id)"
|
||||
class="structure-row"
|
||||
style="
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 10px; border-radius: 6px;
|
||||
cursor: pointer; transition: background 0.1s;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;"
|
||||
:style="`background: ${FAMILLE_COLORS[s.famille_principale] ?? '#888'};`"
|
||||
:title="`Famille principale : ${FAMILLE_LABELS[s.famille_principale] ?? ''}`"
|
||||
/>
|
||||
<span class="text-sm font-medium" style="color: var(--nav-text);">{{ s.nom }}</span>
|
||||
<span class="text-xs" style="color: var(--nav-text-muted);">{{ s.ville }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<!-- Mode split : Principal / Secondaire separes -->
|
||||
<template v-else>
|
||||
<div v-if="principalStructures.length" class="mb-5">
|
||||
<h3
|
||||
class="text-xs font-bold uppercase tracking-wide mb-3"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>Principal ({{ principalStructures.length }})</h3>
|
||||
<ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px;">
|
||||
<li
|
||||
v-for="s in principalStructures"
|
||||
:key="s.id"
|
||||
@click="selectStructure(s.id)"
|
||||
class="structure-row"
|
||||
style="
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 10px; border-radius: 6px;
|
||||
cursor: pointer; transition: background 0.1s;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;"
|
||||
:style="`background: ${FAMILLE_COLORS[s.famille_principale] ?? '#888'};`"
|
||||
/>
|
||||
<span class="text-sm font-medium" style="color: var(--nav-text);">{{ s.nom }}</span>
|
||||
<span class="text-xs" style="color: var(--nav-text-muted);">{{ s.ville }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="secondaireStructures.length">
|
||||
<h3
|
||||
class="text-xs font-bold uppercase tracking-wide mb-3"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>Secondaire ({{ secondaireStructures.length }})</h3>
|
||||
<ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px;">
|
||||
<li
|
||||
v-for="s in secondaireStructures"
|
||||
:key="s.id"
|
||||
@click="selectStructure(s.id)"
|
||||
class="structure-row"
|
||||
style="
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 10px; border-radius: 6px;
|
||||
cursor: pointer; transition: background 0.1s;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;"
|
||||
:style="`background: ${FAMILLE_COLORS[s.famille_principale] ?? '#888'};`"
|
||||
:title="`Famille principale : ${FAMILLE_LABELS[s.famille_principale] ?? ''}`"
|
||||
/>
|
||||
<span class="text-sm font-medium" style="color: var(--nav-text);">{{ s.nom }}</span>
|
||||
<span class="text-xs" style="color: var(--nav-text-muted);">{{ s.ville }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div
|
||||
class="px-5 py-3 shrink-0 text-xs"
|
||||
style="border-top: 1px solid var(--nav-bg-alt); color: var(--nav-text-muted); background: var(--nav-surface);"
|
||||
>
|
||||
Click sur une structure pour ouvrir sa fiche
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ReseauxBifurcationData, StructureV2 } from '~/types/structure-v2'
|
||||
|
||||
const FAMILLE_COLORS: Record<number, string> = {
|
||||
1: '#a85d3e',
|
||||
2: '#c4a472',
|
||||
3: '#d4a017',
|
||||
4: '#5a7a4a',
|
||||
5: '#3d6a8c',
|
||||
6: '#6b3fa0',
|
||||
}
|
||||
|
||||
const FAMILLE_LABELS: Record<number, string> = {
|
||||
1: 'Reemploi & filieres',
|
||||
2: 'Frugalite & low-tech',
|
||||
3: 'Architecture sociale',
|
||||
4: 'Collectifs & AMO',
|
||||
5: 'Urbanisme de transition',
|
||||
6: 'Recherche-action',
|
||||
}
|
||||
|
||||
const FAMILLE_DESCRIPTIONS: Record<number, string> = {
|
||||
1: "Structures dont le geste premier est de travailler avec la matiere existante : deconstruction selective, plateformes de redistribution, filieres biosourcees et geosourcees.",
|
||||
2: "Pratiques qui partent du principe qu'on peut faire mieux avec moins. Renovation profonde, materiaux locaux, sobriete choisie.",
|
||||
3: "Structures dont le terrain premier est le mal-logement, la precarite, l'hospitalite. Architecture comme reponse a l'urgence sociale.",
|
||||
4: "Structures qui accompagnent les projets collectifs : cooperatives d'habitat, ecovillages, accompagnement vers l'autogestion ou la renovation.",
|
||||
5: "Demarches a l'echelle du territoire : villes en transition, PLU alternatifs, coalitions territoriales.",
|
||||
6: "Recherche-action et production de contre-savoirs (Forensic Architecture, Rural Studio, PEROU, Centrala). Badge transversal aux familles.",
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
familleId: number | null
|
||||
data: ReseauxBifurcationData | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
'select-structure': [id: string]
|
||||
}>()
|
||||
|
||||
function close() {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
function selectStructure(id: string) {
|
||||
// Fermer d'abord pour eviter superposition de modales
|
||||
emit('update:modelValue', false)
|
||||
emit('select-structure', id)
|
||||
}
|
||||
|
||||
// Fermeture Esc globale
|
||||
onMounted(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && props.modelValue) close()
|
||||
}
|
||||
window.addEventListener('keydown', handler)
|
||||
onUnmounted(() => window.removeEventListener('keydown', handler))
|
||||
})
|
||||
|
||||
const familleColor = computed(() =>
|
||||
FAMILLE_COLORS[props.familleId ?? 0] ?? '#888'
|
||||
)
|
||||
|
||||
const familleLabel = computed(() =>
|
||||
FAMILLE_LABELS[props.familleId ?? 0] ?? ''
|
||||
)
|
||||
|
||||
const familleDescription = computed(() =>
|
||||
FAMILLE_DESCRIPTIONS[props.familleId ?? 0] ?? ''
|
||||
)
|
||||
|
||||
const principalStructures = computed<StructureV2[]>(() => {
|
||||
if (!props.data || props.familleId == null) return []
|
||||
return props.data.structures
|
||||
.filter(s => s.famille_principale === props.familleId)
|
||||
.sort((a, b) => a.nom.localeCompare(b.nom, 'fr'))
|
||||
})
|
||||
|
||||
const secondaireStructures = computed<StructureV2[]>(() => {
|
||||
if (!props.data || props.familleId == null) return []
|
||||
return props.data.structures
|
||||
.filter(s =>
|
||||
s.famille_principale !== props.familleId
|
||||
&& (s.familles_secondaires ?? []).includes(props.familleId as number)
|
||||
)
|
||||
.sort((a, b) => a.nom.localeCompare(b.nom, 'fr'))
|
||||
})
|
||||
|
||||
const allStructures = computed<StructureV2[]>(() => {
|
||||
return [...principalStructures.value, ...secondaireStructures.value]
|
||||
})
|
||||
|
||||
// Heuristique : si > 3 secondaires, separer en sections distinctes
|
||||
const showSplit = computed(() => secondaireStructures.value.length > 3)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.structure-row:hover {
|
||||
background: var(--nav-bg-alt);
|
||||
}
|
||||
|
||||
.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
|
||||
.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
|
||||
|
||||
.modal-enter-active, .modal-leave-active {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.modal-enter-from, .modal-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -52%);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.backdrop-enter-active, .backdrop-leave-active { transition: none; }
|
||||
.modal-enter-active, .modal-leave-active { transition: none; }
|
||||
}
|
||||
</style>
|
||||
341
components/FicheModalV2.vue
Normal file
341
components/FicheModalV2.vue
Normal file
@@ -0,0 +1,341 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<!-- Backdrop -->
|
||||
<Transition name="backdrop">
|
||||
<div
|
||||
v-if="modelValue && structureId != null"
|
||||
class="fixed inset-0 z-[1500]"
|
||||
style="background: rgba(26,34,56,0.55);"
|
||||
@click="close"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Transition>
|
||||
|
||||
<!-- Modal -->
|
||||
<Transition name="modal">
|
||||
<div
|
||||
v-if="modelValue && structureId != null && structure"
|
||||
class="fixed z-[1501] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
|
||||
style="
|
||||
width: min(780px, 94vw);
|
||||
max-height: 90vh;
|
||||
background: var(--nav-bg);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 16px 64px rgba(26,34,56,0.28);
|
||||
overflow: hidden;
|
||||
"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-label="structure?.nom ?? 'Fiche structure'"
|
||||
@keydown.esc="close"
|
||||
>
|
||||
<!-- Header modal -->
|
||||
<div
|
||||
class="flex items-center justify-between px-5 py-3 shrink-0"
|
||||
:style="`border-bottom: 3px solid ${familleColor}; background: var(--nav-surface);`"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Pastille famille -->
|
||||
<div
|
||||
class="w-3 h-3 rounded-full shrink-0"
|
||||
:style="`background: ${familleColor};`"
|
||||
/>
|
||||
<span class="text-sm font-semibold" style="color: var(--nav-text-muted);">
|
||||
{{ familleLabel }}
|
||||
</span>
|
||||
<!-- Badges -->
|
||||
<div class="flex gap-1.5">
|
||||
<span
|
||||
v-if="structure.badges.centre_ressources"
|
||||
class="px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
style="background: #2d8a6b22; color: #2d8a6b;"
|
||||
>Centre ressources</span>
|
||||
<span
|
||||
v-if="structure.badges.mouvement_manifeste"
|
||||
class="px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
style="background: #c44a2f22; color: #c44a2f;"
|
||||
>Manifeste</span>
|
||||
<span
|
||||
v-if="structure.badges.contre_pouvoir_spatial"
|
||||
class="px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
style="background: #1a3a6b22; color: #1a3a6b;"
|
||||
>Contre-pouvoir</span>
|
||||
<span
|
||||
v-if="structure.badges.f6_recherche_politique"
|
||||
class="px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
style="background: #6b3fa022; color: #6b3fa0;"
|
||||
>Recherche pol.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<a
|
||||
v-if="structure.url"
|
||||
:href="structure.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-opacity hover:opacity-70"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text);"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
|
||||
<polyline points="15 3 21 3 21 9"/>
|
||||
<line x1="10" y1="14" x2="21" y2="3"/>
|
||||
</svg>
|
||||
Site web
|
||||
</a>
|
||||
<button
|
||||
@click="close"
|
||||
class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
|
||||
aria-label="Fermer"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenu scrollable -->
|
||||
<div class="flex-1 overflow-y-auto px-5 py-5">
|
||||
<!-- Nom + meta -->
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl font-bold mb-1" style="color: var(--nav-text);">{{ structure.nom }}</h2>
|
||||
<div class="flex flex-wrap gap-2 text-sm" style="color: var(--nav-text-muted);">
|
||||
<span>{{ structure.type_principal }}</span>
|
||||
<span>·</span>
|
||||
<span>{{ structure.ville }}, {{ structure.pays }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hashtags -->
|
||||
<div v-if="structure.hashtags.length" class="flex flex-wrap gap-1.5 mb-4">
|
||||
<span
|
||||
v-for="tag in structure.hashtags"
|
||||
:key="tag"
|
||||
class="px-2 py-0.5 rounded-full text-xs"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
|
||||
>{{ tag }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Description courte -->
|
||||
<p class="text-sm leading-relaxed mb-4" style="color: var(--nav-text);">{{ structure.description_courte }}</p>
|
||||
|
||||
<!-- Description longue (expandable) -->
|
||||
<div v-if="structure.description_longue" class="mb-4">
|
||||
<div
|
||||
class="text-sm leading-relaxed"
|
||||
style="color: var(--nav-text); white-space: pre-wrap;"
|
||||
:style="showFullDesc ? '' : 'max-height: 120px; overflow: hidden;'"
|
||||
>{{ structure.description_longue }}</div>
|
||||
<button
|
||||
@click="showFullDesc = !showFullDesc"
|
||||
class="mt-2 text-xs underline"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>{{ showFullDesc ? 'Réduire' : 'Lire la suite…' }}</button>
|
||||
</div>
|
||||
|
||||
<!-- Pensées rattachées -->
|
||||
<div v-if="structure.pensees && structure.pensees.length" class="mb-4">
|
||||
<h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Pensées rattachées</h3>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span
|
||||
v-for="pensee in structure.pensees"
|
||||
:key="pensee.id"
|
||||
class="px-2 py-0.5 rounded text-xs"
|
||||
:style="pensee.confiance === 'ia_suggested'
|
||||
? 'background: var(--nav-bg-alt); color: var(--nav-text-muted); border: 1px dashed var(--nav-bg-alt);'
|
||||
: 'background: var(--nav-bg-alt); color: var(--nav-text);'"
|
||||
:title="pensee.confiance === 'ia_suggested' ? 'IA suggéré' : ''"
|
||||
>
|
||||
{{ pensee.label }}<span v-if="pensee.confiance === 'ia_suggested'" class="ml-1 opacity-60">~</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projets emblématiques -->
|
||||
<div v-if="projetsStructure.length" class="mb-4">
|
||||
<h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Projets emblématiques</h3>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="projet in projetsStructure.slice(0, 5)"
|
||||
:key="projet.id"
|
||||
class="rounded-lg p-3"
|
||||
style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<span class="font-medium text-sm" style="color: var(--nav-text);">{{ projet.nom }}</span>
|
||||
<span v-if="projet.annee" class="text-xs shrink-0" style="color: var(--nav-text-muted);">{{ projet.annee }}</span>
|
||||
</div>
|
||||
<div v-if="projet.lieu" class="text-xs mt-0.5" style="color: var(--nav-text-muted);">{{ projet.lieu }}</div>
|
||||
<p class="text-xs mt-1 leading-relaxed" style="color: var(--nav-text-muted);">{{ projet.description.slice(0, 120) }}{{ projet.description.length > 120 ? '…' : '' }}</p>
|
||||
<a
|
||||
v-if="projet.url"
|
||||
:href="projet.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-xs mt-1 inline-block"
|
||||
style="color: var(--nav-text-muted); text-decoration: underline;"
|
||||
>En savoir plus →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Structures voisines (graphe) -->
|
||||
<div v-if="structuresVoisines.length" class="mb-4">
|
||||
<h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Structures liées</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="voisine in structuresVoisines.slice(0, 6)"
|
||||
:key="voisine.id"
|
||||
class="px-2 py-1 rounded text-xs transition-colors hover:opacity-70"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text); border: 1px solid transparent;"
|
||||
@click="emit('update:structureId', voisine.id)"
|
||||
>{{ voisine.nom }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sources -->
|
||||
<div v-if="structure.sources && structure.sources.length" class="mb-4">
|
||||
<h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Sources</h3>
|
||||
<div class="space-y-1">
|
||||
<div v-for="(source, i) in structure.sources" :key="i" class="flex items-center gap-2">
|
||||
<span
|
||||
class="px-1.5 py-0.5 rounded text-xs shrink-0"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
|
||||
>{{ source.type }}</span>
|
||||
<a
|
||||
v-if="source.url"
|
||||
:href="source.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-xs underline truncate"
|
||||
style="color: var(--nav-text);"
|
||||
>{{ source.titre }}</a>
|
||||
<span v-else class="text-xs" style="color: var(--nav-text);">{{ source.titre }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTAs -->
|
||||
<div class="flex gap-3 pt-2" style="border-top: 1px solid var(--nav-bg-alt);">
|
||||
<a
|
||||
href="/contribuer"
|
||||
class="text-xs underline"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>Signaler une erreur</a>
|
||||
<a
|
||||
href="/contribuer"
|
||||
class="text-xs underline"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>Réclamer cette fiche</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ReseauxBifurcationData, StructureV2, ProjetEmblematique } from '~/types/structure-v2'
|
||||
|
||||
const FAMILLE_COLORS: Record<number, string> = {
|
||||
1: '#a85d3e',
|
||||
2: '#c4a472',
|
||||
3: '#d4a017',
|
||||
4: '#5a7a4a',
|
||||
5: '#3d6a8c',
|
||||
}
|
||||
|
||||
const FAMILLE_LABELS: Record<number, string> = {
|
||||
1: 'Réemploi & filières',
|
||||
2: 'Frugalité & low-tech',
|
||||
3: 'Architecture sociale',
|
||||
4: 'Collectifs & AMO',
|
||||
5: 'Urbanisme de transition',
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
structureId: string | null
|
||||
data: ReseauxBifurcationData | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
'update:structureId': [id: string]
|
||||
}>()
|
||||
|
||||
const showFullDesc = ref(false)
|
||||
|
||||
function close() {
|
||||
emit('update:modelValue', false)
|
||||
showFullDesc.value = false
|
||||
}
|
||||
|
||||
// Fermeture Esc globale
|
||||
onMounted(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && props.modelValue) close()
|
||||
}
|
||||
window.addEventListener('keydown', handler)
|
||||
onUnmounted(() => window.removeEventListener('keydown', handler))
|
||||
})
|
||||
|
||||
// Remettre showFullDesc a false a chaque changement de fiche
|
||||
watch(() => props.structureId, () => {
|
||||
showFullDesc.value = false
|
||||
})
|
||||
|
||||
const structure = computed<StructureV2 | null>(() => {
|
||||
if (!props.data || !props.structureId) return null
|
||||
return props.data.structures.find(s => s.id === props.structureId) ?? null
|
||||
})
|
||||
|
||||
const familleColor = computed(() =>
|
||||
FAMILLE_COLORS[structure.value?.famille_principale ?? 1] ?? '#888'
|
||||
)
|
||||
|
||||
const familleLabel = computed(() =>
|
||||
FAMILLE_LABELS[structure.value?.famille_principale ?? 1] ?? ''
|
||||
)
|
||||
|
||||
const projetsStructure = computed<ProjetEmblematique[]>(() => {
|
||||
if (!props.data || !props.structureId) return []
|
||||
return props.data.projets?.filter(p => p.structure_parent === props.structureId) ?? []
|
||||
})
|
||||
|
||||
const structuresVoisines = computed<StructureV2[]>(() => {
|
||||
if (!props.data || !props.structureId) return []
|
||||
const edges = props.data.graphe?.edges ?? []
|
||||
const voisineIds = edges
|
||||
.filter(e => e.source === props.structureId || e.target === props.structureId)
|
||||
.sort((a, b) => (b.score ?? 0) - (a.score ?? 0))
|
||||
.map(e => e.source === props.structureId ? e.target : e.source)
|
||||
.slice(0, 8)
|
||||
|
||||
return voisineIds
|
||||
.map(id => props.data!.structures.find(s => s.id === id))
|
||||
.filter(Boolean) as StructureV2[]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Backdrop */
|
||||
.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
|
||||
.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
|
||||
|
||||
/* Modal */
|
||||
.modal-enter-active, .modal-leave-active {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.modal-enter-from, .modal-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -52%);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.backdrop-enter-active, .backdrop-leave-active { transition: none; }
|
||||
.modal-enter-active, .modal-leave-active { transition: none; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,18 @@
|
||||
<template>
|
||||
<div class="space-y-1.5">
|
||||
<p class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">Fonction</p>
|
||||
<p class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">Fonction (1–5)</p>
|
||||
<div class="space-y-1">
|
||||
<button
|
||||
v-for="fn in FONCTIONS"
|
||||
:key="fn"
|
||||
@click="toggle(fn)"
|
||||
:aria-pressed="modelValue.includes(fn)"
|
||||
class="flex items-center gap-2.5 w-full rounded px-1 py-0.5 transition-all text-left hover:opacity-80"
|
||||
:disabled="!modelValue.includes(fn) && modelValue.length >= 5"
|
||||
class="flex items-center gap-2.5 w-full rounded px-1 py-0.5 transition-all text-left"
|
||||
:class="!modelValue.includes(fn) && modelValue.length >= 5 ? 'cursor-not-allowed opacity-40' : 'hover:opacity-80'"
|
||||
:style="modelValue.includes(fn) ? 'background: rgba(26,34,56,0.06);' : ''"
|
||||
>
|
||||
<!-- Case : affiche le rang de priorité si actif, sinon le nombre d'orgs -->
|
||||
<!-- Case checkbox -->
|
||||
<span
|
||||
class="flex items-center justify-center shrink-0 text-xs font-bold transition-all"
|
||||
style="width: 24px; height: 24px; border: 1.5px solid; border-radius: 4px;"
|
||||
@@ -18,7 +20,7 @@
|
||||
? 'background: var(--nav-primary); border-color: var(--nav-primary); color: var(--nav-text-on-primary);'
|
||||
: 'background: var(--nav-bg-alt); border-color: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
||||
>
|
||||
{{ modelValue.includes(fn) ? (modelValue.indexOf(fn) + 1) : (counts[fn] ?? 0) }}
|
||||
{{ counts[fn] ?? 0 }}
|
||||
</span>
|
||||
<!-- Label -->
|
||||
<span
|
||||
@@ -28,7 +30,7 @@
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="modelValue.length" class="text-xs pt-0.5" style="color: var(--nav-text-muted);">
|
||||
{{ modelValue.length }} actif{{ modelValue.length > 1 ? 's' : '' }}
|
||||
{{ modelValue.length }}/5 actif{{ modelValue.length > 1 ? 's' : '' }}
|
||||
<button @click="emit('update:modelValue', [])" class="ml-2 underline hover:opacity-70">Effacer</button>
|
||||
</p>
|
||||
</div>
|
||||
@@ -60,7 +62,7 @@ const emit = defineEmits<{
|
||||
function toggle(fn: string) {
|
||||
if (props.modelValue.includes(fn)) {
|
||||
emit('update:modelValue', props.modelValue.filter(f => f !== fn))
|
||||
} else {
|
||||
} else if (props.modelValue.length < 5) {
|
||||
emit('update:modelValue', [...props.modelValue, fn])
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
}"
|
||||
></svg>
|
||||
|
||||
<!-- Sidebar hashtags droite (repliable) -->
|
||||
<!-- Sidebar droite (repliable) - 3 sections : AFFICHER / HASHTAGS / MODE D'EMPLOI -->
|
||||
<aside
|
||||
:style="{
|
||||
position: 'absolute', top: '0', right: '0', bottom: '0',
|
||||
@@ -46,46 +46,92 @@
|
||||
"
|
||||
>HASHTAGS ({{ activeHashtags.length }}/{{ props.allHashtags.length }})</div>
|
||||
|
||||
<!-- Mode deplie : header + liste groupee -->
|
||||
<!-- Mode deplie : 3 sections empilees -->
|
||||
<template v-if="sidebarOpen">
|
||||
<div style="padding: 8px 12px; border-bottom: 1px solid var(--nav-bg-alt); flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 8px;">
|
||||
<span style="font-size: 0.72rem; font-weight: 700; color: var(--nav-text); text-transform: uppercase; letter-spacing: 0.08em;">Hashtags</span>
|
||||
<span style="font-size: 0.68rem; color: var(--nav-text-muted);">{{ activeHashtags.length }} actif{{ activeHashtags.length > 1 ? 's' : '' }}</span>
|
||||
</div>
|
||||
<button
|
||||
v-if="activeHashtags.length"
|
||||
@click="activeHashtags = []"
|
||||
style="margin-top: 4px; font-size: 0.68rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
|
||||
>Tout effacer</button>
|
||||
</div>
|
||||
<div style="flex: 1; overflow-y: auto; display: flex; flex-direction: column;">
|
||||
|
||||
<div style="flex: 1; overflow-y: auto; padding: 6px 10px 10px;">
|
||||
<div
|
||||
v-for="group in hashtagsByFamille"
|
||||
:key="group.famille"
|
||||
style="margin-bottom: 10px;"
|
||||
>
|
||||
<div
|
||||
<!-- SECTION 1 : AFFICHER (toggles familles / pratiques) -->
|
||||
<div style="padding: 10px 12px; flex-shrink: 0;">
|
||||
<div style="font-size: 0.72rem; font-weight: 700; color: var(--nav-text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px;">Afficher</div>
|
||||
<label
|
||||
:style="{
|
||||
fontSize: '0.65rem', fontWeight: 700,
|
||||
color: group.color, textTransform: 'uppercase',
|
||||
letterSpacing: '0.06em', marginBottom: '4px',
|
||||
paddingLeft: '2px',
|
||||
display: 'flex', alignItems: 'center', gap: '8px',
|
||||
padding: '7px 10px', marginBottom: '4px',
|
||||
borderRadius: '6px', cursor: 'pointer',
|
||||
fontSize: '0.82rem', fontWeight: 600,
|
||||
background: showFamilles ? 'var(--nav-bg-alt)' : 'transparent',
|
||||
color: showFamilles ? 'var(--nav-text)' : 'var(--nav-text-muted)',
|
||||
transition: 'all 0.12s',
|
||||
}"
|
||||
>{{ group.label }}</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 3px;">
|
||||
<span
|
||||
v-for="tag in group.tags"
|
||||
:key="tag"
|
||||
style="padding: 2px 7px; border-radius: 9999px; font-size: 0.66rem; cursor: pointer; transition: all 0.12s;"
|
||||
:style="activeHashtags.includes(tag)
|
||||
? `background: ${group.color}; color: white; font-weight: 600;`
|
||||
: 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
||||
@click="toggleHashtag(tag)"
|
||||
>{{ tag }}</span>
|
||||
>
|
||||
<input type="checkbox" v-model="showFamilles" style="cursor: pointer; width: 14px; height: 14px;" />
|
||||
<span>Familles</span>
|
||||
</label>
|
||||
<label
|
||||
:style="{
|
||||
display: 'flex', alignItems: 'center', gap: '8px',
|
||||
padding: '7px 10px',
|
||||
borderRadius: '6px', cursor: 'pointer',
|
||||
fontSize: '0.82rem', fontWeight: 600,
|
||||
background: showPratiques ? 'var(--nav-bg-alt)' : 'transparent',
|
||||
color: showPratiques ? 'var(--nav-text)' : 'var(--nav-text-muted)',
|
||||
transition: 'all 0.12s',
|
||||
}"
|
||||
>
|
||||
<input type="checkbox" v-model="showPratiques" style="cursor: pointer; width: 14px; height: 14px;" />
|
||||
<span>Pratiques</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- SECTION 2 : HASHTAGS (chips groupees) -->
|
||||
<div style="border-top: 1px solid var(--nav-bg-alt); margin-top: 0; padding: 10px 12px 8px; flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px;">
|
||||
<span style="font-size: 0.72rem; font-weight: 700; color: var(--nav-text); text-transform: uppercase; letter-spacing: 0.08em;">Hashtags</span>
|
||||
<span style="font-size: 0.68rem; color: var(--nav-text-muted);">{{ activeHashtags.length }} actif{{ activeHashtags.length > 1 ? 's' : '' }}</span>
|
||||
</div>
|
||||
<button
|
||||
v-if="activeHashtags.length"
|
||||
@click="activeHashtags = []"
|
||||
style="margin-bottom: 6px; font-size: 0.68rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
|
||||
>Tout effacer</button>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1; overflow-y: auto; padding: 0 10px 10px;">
|
||||
<div
|
||||
v-for="group in hashtagsByFamille"
|
||||
:key="group.famille"
|
||||
style="margin-bottom: 10px;"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
fontSize: '0.65rem', fontWeight: 700,
|
||||
color: group.color, textTransform: 'uppercase',
|
||||
letterSpacing: '0.06em', marginBottom: '4px',
|
||||
paddingLeft: '2px',
|
||||
}"
|
||||
>{{ group.label }}</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 3px;">
|
||||
<span
|
||||
v-for="tag in group.tags"
|
||||
:key="tag"
|
||||
style="padding: 2px 7px; border-radius: 9999px; font-size: 0.66rem; cursor: pointer; transition: all 0.12s;"
|
||||
:style="activeHashtags.includes(tag)
|
||||
? `background: ${group.color}; color: white; font-weight: 600;`
|
||||
: 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
||||
@click="toggleHashtag(tag)"
|
||||
>{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SECTION 3 : MODE D'EMPLOI -->
|
||||
<div style="border-top: 1px solid var(--nav-bg-alt); padding: 10px 12px; flex-shrink: 0;">
|
||||
<div style="font-size: 0.72rem; font-weight: 700; color: var(--nav-text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;">Mode d'emploi</div>
|
||||
<div style="font-size: 0.7rem; color: var(--nav-text-muted); line-height: 1.5;">
|
||||
La carte croise des familles editoriales avec des pratiques (hashtags). Coche les couches a afficher, filtre par hashtag, clique sur un noeud pour en savoir plus.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</aside>
|
||||
@@ -98,6 +144,123 @@
|
||||
color: var(--nav-text); max-width: 220px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
opacity: 0; transition: opacity 0.15s; z-index: 100;
|
||||
"></div>
|
||||
|
||||
<!-- Popover unifie (famille OU hashtag) -->
|
||||
<div
|
||||
v-if="popover.open"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: popover.x + 'px',
|
||||
top: popover.y + 'px',
|
||||
background: 'var(--nav-surface)',
|
||||
border: '1px solid var(--nav-bg-alt)',
|
||||
borderRadius: '8px',
|
||||
padding: '12px 14px',
|
||||
maxWidth: '280px',
|
||||
boxShadow: '0 6px 18px rgba(0,0,0,0.18)',
|
||||
zIndex: 50,
|
||||
}"
|
||||
@click.stop
|
||||
>
|
||||
<button
|
||||
@click="closePopover"
|
||||
style="
|
||||
position: absolute; top: 4px; right: 6px;
|
||||
background: none; border: none; cursor: pointer;
|
||||
font-size: 1rem; color: var(--nav-text-muted); padding: 2px 6px;
|
||||
line-height: 1;
|
||||
"
|
||||
title="Fermer"
|
||||
>x</button>
|
||||
<div
|
||||
:style="{
|
||||
fontWeight: 700, fontSize: '0.92rem',
|
||||
color: popover.color, marginBottom: '6px',
|
||||
paddingRight: '14px',
|
||||
}"
|
||||
>{{ popover.title }}</div>
|
||||
|
||||
<!-- Body famille : description + compteur + 6 structures + bouton "Voir toutes" -->
|
||||
<div v-if="popover.kind === 'famille'">
|
||||
<div style="font-size: 0.78rem; line-height: 1.45; color: var(--nav-text); margin-bottom: 10px;">
|
||||
{{ popover.body }}
|
||||
</div>
|
||||
<div style="font-size: 0.72rem; color: var(--nav-text-muted); margin-bottom: 6px;">
|
||||
{{ popover.structures.length }} structure{{ popover.structures.length > 1 ? 's' : '' }} dans cette famille
|
||||
</div>
|
||||
<ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px;">
|
||||
<li
|
||||
v-for="s in popover.structures.slice(0, 6)"
|
||||
:key="s.id"
|
||||
@click="selectStructureFromPopover(s.id)"
|
||||
style="
|
||||
font-size: 0.78rem; color: var(--nav-text);
|
||||
padding: 4px 6px; border-radius: 4px;
|
||||
cursor: pointer; transition: background 0.1s;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
"
|
||||
@mouseenter="(e: any) => e.currentTarget.style.background = 'var(--nav-bg-alt)'"
|
||||
@mouseleave="(e: any) => e.currentTarget.style.background = 'transparent'"
|
||||
>
|
||||
<span
|
||||
style="width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;"
|
||||
:style="`background: ${popover.color};`"
|
||||
/>
|
||||
<span>{{ s.nom }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
v-if="popover.familleId != null"
|
||||
@click="openFicheFamilleFromPopover"
|
||||
style="
|
||||
margin-top: 10px; width: 100%;
|
||||
padding: 7px 10px; border-radius: 6px;
|
||||
background: var(--nav-bg-alt); border: none;
|
||||
font-size: 0.75rem; font-weight: 600; cursor: pointer;
|
||||
color: var(--nav-text); transition: opacity 0.12s;
|
||||
text-align: left;
|
||||
"
|
||||
@mouseenter="(e: any) => e.currentTarget.style.opacity = '0.7'"
|
||||
@mouseleave="(e: any) => e.currentTarget.style.opacity = '1'"
|
||||
>Voir toutes les {{ popover.structures.length }} pratiques -></button>
|
||||
</div>
|
||||
|
||||
<!-- Body hashtag : ligne generique + compteur + liste structures cliquables -->
|
||||
<div v-else-if="popover.kind === 'hashtag'">
|
||||
<div
|
||||
style="
|
||||
font-size: 0.72rem; color: var(--nav-text-muted);
|
||||
font-style: italic; margin-bottom: 8px; line-height: 1.4;
|
||||
"
|
||||
>Pratique transversale - portee par {{ popover.structures.length }} structure{{ popover.structures.length > 1 ? 's' : '' }} de {{ popover.famillesCount }} famille{{ popover.famillesCount > 1 ? 's' : '' }}</div>
|
||||
<ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px;">
|
||||
<li
|
||||
v-for="s in popover.structures.slice(0, 6)"
|
||||
:key="s.id"
|
||||
@click="selectStructureFromPopover(s.id)"
|
||||
style="
|
||||
font-size: 0.78rem; color: var(--nav-text);
|
||||
padding: 4px 6px; border-radius: 4px;
|
||||
cursor: pointer; transition: background 0.1s;
|
||||
"
|
||||
@mouseenter="(e: any) => e.currentTarget.style.background = 'var(--nav-bg-alt)'"
|
||||
@mouseleave="(e: any) => e.currentTarget.style.background = 'transparent'"
|
||||
>{{ s.nom }}</li>
|
||||
</ul>
|
||||
<div
|
||||
v-if="popover.structures.length > 6"
|
||||
style="font-size: 0.7rem; color: var(--nav-text-muted); margin-top: 6px; padding-left: 6px;"
|
||||
>+ {{ popover.structures.length - 6 }} autre{{ popover.structures.length - 6 > 1 ? 's' : '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fiche famille modale -->
|
||||
<FicheFamilleModal
|
||||
v-model="ficheFamilleOpen"
|
||||
:famille-id="ficheFamilleId"
|
||||
:data="props.data"
|
||||
@select-structure="(id) => emit('select-structure', id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -121,17 +284,68 @@ const tooltipRef = ref<HTMLElement | null>(null)
|
||||
const activeHashtags = ref<string[]>([])
|
||||
const sidebarOpen = ref(true)
|
||||
|
||||
// Layers superposables (remplace viewMode exclusif PV2-5e)
|
||||
const showFamilles = ref(true)
|
||||
const showPratiques = ref(false)
|
||||
|
||||
function toggleHashtag(tag: string) {
|
||||
activeHashtags.value = activeHashtags.value.includes(tag)
|
||||
? activeHashtags.value.filter(t => t !== tag)
|
||||
: [...activeHashtags.value, tag]
|
||||
}
|
||||
|
||||
// Popover unifie (famille | hashtag)
|
||||
type PopoverState = {
|
||||
open: boolean
|
||||
kind: 'famille' | 'hashtag' | null
|
||||
x: number
|
||||
y: number
|
||||
title: string
|
||||
body: string
|
||||
color: string
|
||||
structures: { id: string; nom: string }[]
|
||||
familleId: number | null
|
||||
famillesCount: number
|
||||
}
|
||||
|
||||
const popover = ref<PopoverState>({
|
||||
open: false,
|
||||
kind: null,
|
||||
x: 0,
|
||||
y: 0,
|
||||
title: '',
|
||||
body: '',
|
||||
color: '#000',
|
||||
structures: [],
|
||||
familleId: null,
|
||||
famillesCount: 0,
|
||||
})
|
||||
|
||||
// Fiche famille modale
|
||||
const ficheFamilleOpen = ref(false)
|
||||
const ficheFamilleId = ref<number | null>(null)
|
||||
|
||||
function closePopover() {
|
||||
popover.value.open = false
|
||||
popover.value.kind = null
|
||||
}
|
||||
|
||||
function selectStructureFromPopover(id: string) {
|
||||
closePopover()
|
||||
emit('select-structure', id)
|
||||
}
|
||||
|
||||
function openFicheFamilleFromPopover() {
|
||||
if (popover.value.familleId == null) return
|
||||
ficheFamilleId.value = popover.value.familleId
|
||||
ficheFamilleOpen.value = true
|
||||
closePopover()
|
||||
}
|
||||
|
||||
// Mapping hashtag -> famille majoritaire
|
||||
// En cas d'egalite : prendre la famille la plus petite (visibilite minoritaires)
|
||||
const hashtagsByFamille = computed(() => {
|
||||
if (!props.data) return []
|
||||
// 1. Pour chaque hashtag, compter les structures par famille
|
||||
const tagToFamille = computed<Record<string, number>>(() => {
|
||||
if (!props.data) return {}
|
||||
const counts: Record<string, Record<number, number>> = {}
|
||||
props.data.structures.forEach(s => {
|
||||
s.hashtags.forEach(tag => {
|
||||
@@ -139,32 +353,33 @@ const hashtagsByFamille = computed(() => {
|
||||
counts[tag][s.famille_principale] = (counts[tag][s.famille_principale] ?? 0) + 1
|
||||
})
|
||||
})
|
||||
// 2. Pour chaque hashtag, trouver la famille majoritaire (egalite -> + petite famille)
|
||||
// Pour preferer la famille la moins peuplee globalement, calculer la taille de chaque famille.
|
||||
const familleSize: Record<number, number> = {}
|
||||
props.data.structures.forEach(s => {
|
||||
familleSize[s.famille_principale] = (familleSize[s.famille_principale] ?? 0) + 1
|
||||
})
|
||||
const tagToFamille: Record<string, number> = {}
|
||||
const out: Record<string, number> = {}
|
||||
for (const tag in counts) {
|
||||
const entries = Object.entries(counts[tag])
|
||||
entries.sort((a, b) => {
|
||||
const diff = (b[1] as number) - (a[1] as number)
|
||||
if (diff !== 0) return diff
|
||||
// egalite : famille avec moins de structures gagne
|
||||
return (familleSize[Number(a[0])] ?? 0) - (familleSize[Number(b[0])] ?? 0)
|
||||
})
|
||||
tagToFamille[tag] = Number(entries[0][0])
|
||||
out[tag] = Number(entries[0][0])
|
||||
}
|
||||
// 3. Grouper les hashtags par famille
|
||||
return out
|
||||
})
|
||||
|
||||
const hashtagsByFamille = computed(() => {
|
||||
if (!props.data) return []
|
||||
const map = tagToFamille.value
|
||||
const groups: Record<number, string[]> = {}
|
||||
props.allHashtags.forEach(tag => {
|
||||
const fam = tagToFamille[tag]
|
||||
const fam = map[tag]
|
||||
if (fam == null) return
|
||||
if (!groups[fam]) groups[fam] = []
|
||||
groups[fam].push(tag)
|
||||
})
|
||||
// 4. Sortie ordonnee selon ID de famille
|
||||
return [1, 2, 3, 4, 5, 6]
|
||||
.filter(famId => groups[famId]?.length)
|
||||
.map(famId => ({
|
||||
@@ -175,6 +390,14 @@ const hashtagsByFamille = computed(() => {
|
||||
}))
|
||||
})
|
||||
|
||||
// Structures portant un hashtag donne (pour popover)
|
||||
function structuresForHashtag(tag: string): { id: string; nom: string }[] {
|
||||
if (!props.data) return []
|
||||
return props.data.structures
|
||||
.filter(s => s.hashtags.includes(tag))
|
||||
.map(s => ({ id: s.id, nom: s.nom }))
|
||||
}
|
||||
|
||||
// IDs de structures correspondant aux hashtags actifs
|
||||
const filteredStructureIds = computed(() => {
|
||||
if (!props.data || !activeHashtags.value.length) return null
|
||||
@@ -204,6 +427,15 @@ const FAMILLE_LABELS: Record<number, string> = {
|
||||
6: 'Recherche',
|
||||
}
|
||||
|
||||
const FAMILLE_DESCRIPTIONS: Record<number, string> = {
|
||||
1: "Structures dont le geste premier est de travailler avec la matiere existante : deconstruction selective, plateformes de redistribution, filieres biosourcees et geosourcees.",
|
||||
2: "Pratiques qui partent du principe qu'on peut faire mieux avec moins. Renovation profonde, materiaux locaux, sobriete choisie.",
|
||||
3: "Structures dont le terrain premier est le mal-logement, la precarite, l'hospitalite. Architecture comme reponse a l'urgence sociale.",
|
||||
4: "Structures qui accompagnent les projets collectifs : cooperatives d'habitat, ecovillages, accompagnement vers l'autogestion ou la renovation.",
|
||||
5: "Demarches a l'echelle du territoire : villes en transition, PLU alternatifs, coalitions territoriales.",
|
||||
6: "Recherche-action et production de contre-savoirs (Forensic Architecture, Rural Studio, PEROU, Centrala). Badge transversal aux familles.",
|
||||
}
|
||||
|
||||
let simulation: any = null
|
||||
let d3NodeSelection: any = null
|
||||
let d3LinkSelection: any = null
|
||||
@@ -219,74 +451,43 @@ async function initGraph() {
|
||||
|
||||
// Nettoyer
|
||||
d3.select(svgEl).selectAll('*').remove()
|
||||
closePopover()
|
||||
|
||||
const svg = d3.select(svgEl)
|
||||
.attr('viewBox', `0 0 ${width} ${height}`)
|
||||
|
||||
// Click sur le SVG vide -> fermer popover
|
||||
svg.on('click', (event: any) => {
|
||||
if (event.target === svgEl) closePopover()
|
||||
})
|
||||
|
||||
// Groupe principal avec zoom
|
||||
const g = svg.append('g')
|
||||
const zoomBehavior = d3.zoom<SVGElement, unknown>()
|
||||
.scaleExtent([0.2, 4])
|
||||
.on('zoom', (event) => g.attr('transform', event.transform))
|
||||
.on('zoom', (event) => {
|
||||
g.attr('transform', event.transform)
|
||||
closePopover()
|
||||
})
|
||||
|
||||
svg.call(zoomBehavior as any)
|
||||
|
||||
// Noeuds familles (centres fixes en etoile)
|
||||
const familyNodes = [1, 2, 3, 4, 5, 6].map(id => ({
|
||||
id: `family-${id}`,
|
||||
type: 'family',
|
||||
familleId: id,
|
||||
label: FAMILLE_LABELS[id],
|
||||
color: FAMILLE_COLORS[id],
|
||||
r: 32,
|
||||
x: width / 2 + Math.cos((id - 1) * Math.PI * 2 / 6) * 180,
|
||||
y: height / 2 + Math.sin((id - 1) * Math.PI * 2 / 6) * 180,
|
||||
fx: width / 2 + Math.cos((id - 1) * Math.PI * 2 / 6) * 180,
|
||||
fy: height / 2 + Math.sin((id - 1) * Math.PI * 2 / 6) * 180,
|
||||
}))
|
||||
|
||||
// Noeuds structures
|
||||
const structureNodes = props.data.structures.map(s => ({
|
||||
id: s.id,
|
||||
type: 'structure',
|
||||
label: s.nom,
|
||||
famille: s.famille_principale,
|
||||
familles_secondaires: s.familles_secondaires ?? [],
|
||||
hashtags: s.hashtags,
|
||||
color: FAMILLE_COLORS[s.famille_principale] ?? '#888',
|
||||
r: 8,
|
||||
x: undefined as number | undefined,
|
||||
y: undefined as number | undefined,
|
||||
fx: undefined as number | null | undefined,
|
||||
fy: undefined as number | null | undefined,
|
||||
}))
|
||||
|
||||
const allNodes: any[] = [...familyNodes, ...structureNodes]
|
||||
|
||||
// Liens structures -> familles
|
||||
const links: any[] = []
|
||||
structureNodes.forEach(s => {
|
||||
links.push({
|
||||
source: s.id,
|
||||
target: `family-${s.famille}`,
|
||||
type: 'primary',
|
||||
strength: 0.55,
|
||||
})
|
||||
s.familles_secondaires.forEach((f: number) => {
|
||||
links.push({
|
||||
source: s.id,
|
||||
target: `family-${f}`,
|
||||
type: 'secondary',
|
||||
strength: 0.45,
|
||||
})
|
||||
})
|
||||
})
|
||||
const { allNodes, links } = buildNodesLinks(width, height)
|
||||
|
||||
// Simulation force-directed
|
||||
if (simulation) simulation.stop()
|
||||
|
||||
// Adapter la charge selon le nombre de noeuds (mode "tout coche" = plus de repulsion)
|
||||
const heavyMode = showPratiques.value && allNodes.length > 150
|
||||
|
||||
simulation = d3.forceSimulation(allNodes)
|
||||
.force('link', d3.forceLink(links).id((d: any) => d.id).distance((d: any) => d.type === 'primary' ? 80 : 120).strength((d: any) => d.strength ?? 0.5))
|
||||
.force('charge', d3.forceManyBody().strength(-120))
|
||||
.force('link', d3.forceLink(links).id((d: any) => d.id)
|
||||
.distance((d: any) => {
|
||||
if (d.type === 'practice') return 90
|
||||
return d.type === 'primary' ? 80 : 120
|
||||
})
|
||||
.strength((d: any) => d.strength ?? 0.5))
|
||||
.force('charge', d3.forceManyBody().strength(heavyMode ? -80 : -120))
|
||||
.force('center', d3.forceCenter(width / 2, height / 2))
|
||||
.force('collision', d3.forceCollide().radius((d: any) => d.r + 4))
|
||||
|
||||
@@ -294,7 +495,10 @@ async function initGraph() {
|
||||
d3LinkSelection = g.append('g').selectAll('line')
|
||||
.data(links)
|
||||
.join('line')
|
||||
.attr('stroke', (d: any) => d.type === 'primary' ? 'rgba(150,150,150,0.45)' : 'rgba(150,150,150,0.35)')
|
||||
.attr('stroke', (d: any) => {
|
||||
if (d.type === 'practice') return 'rgba(150,150,150,0.25)'
|
||||
return d.type === 'primary' ? 'rgba(150,150,150,0.45)' : 'rgba(150,150,150,0.35)'
|
||||
})
|
||||
.attr('stroke-width', 1.5)
|
||||
.attr('stroke-dasharray', null)
|
||||
|
||||
@@ -302,13 +506,19 @@ async function initGraph() {
|
||||
d3NodeSelection = g.append('g').selectAll('g')
|
||||
.data(allNodes)
|
||||
.join('g')
|
||||
.style('cursor', (d: any) => d.type === 'structure' ? 'pointer' : 'default')
|
||||
.style('cursor', (d: any) => {
|
||||
if (d.type === 'structure') return 'pointer'
|
||||
if (d.type === 'family') return 'pointer'
|
||||
if (d.type === 'hashtag') return 'pointer'
|
||||
return 'default'
|
||||
})
|
||||
.call(
|
||||
d3.drag<any, any>()
|
||||
.on('start', (event: any, d: any) => {
|
||||
if (!event.active) simulation.alphaTarget(0.3).restart()
|
||||
d.fx = d.x
|
||||
d.fy = d.y
|
||||
closePopover()
|
||||
})
|
||||
.on('drag', (event: any, d: any) => {
|
||||
d.fx = event.x
|
||||
@@ -322,16 +532,35 @@ async function initGraph() {
|
||||
}
|
||||
})
|
||||
)
|
||||
.on('click', (_event: any, d: any) => {
|
||||
if (d.type === 'structure') emit('select-structure', d.id)
|
||||
.on('click', (event: any, d: any) => {
|
||||
event.stopPropagation()
|
||||
if (d.type === 'structure') {
|
||||
emit('select-structure', d.id)
|
||||
} else if (d.type === 'family') {
|
||||
openFamillePopover(d, event, svgEl)
|
||||
} else if (d.type === 'hashtag') {
|
||||
openHashtagPopover(d, event, svgEl)
|
||||
}
|
||||
})
|
||||
|
||||
// Cercles
|
||||
d3NodeSelection.append('circle')
|
||||
.attr('r', (d: any) => d.r)
|
||||
.attr('fill', (d: any) => d.type === 'family' ? d.color : d.color + 'cc')
|
||||
.attr('stroke', (d: any) => d.type === 'family' ? 'white' : d.color)
|
||||
.attr('stroke-width', (d: any) => d.type === 'family' ? 3 : 1.5)
|
||||
.attr('fill', (d: any) => {
|
||||
if (d.type === 'family') return d.color
|
||||
if (d.type === 'hashtag') return d.fill
|
||||
return d.color + 'cc'
|
||||
})
|
||||
.attr('stroke', (d: any) => {
|
||||
if (d.type === 'family') return 'white'
|
||||
if (d.type === 'hashtag') return d.stroke
|
||||
return d.color
|
||||
})
|
||||
.attr('stroke-width', (d: any) => {
|
||||
if (d.type === 'family') return 3
|
||||
if (d.type === 'hashtag') return 2
|
||||
return 1.5
|
||||
})
|
||||
|
||||
// Labels familles
|
||||
d3NodeSelection.filter((d: any) => d.type === 'family')
|
||||
@@ -344,6 +573,20 @@ async function initGraph() {
|
||||
.attr('fill', 'white')
|
||||
.style('pointer-events', 'none')
|
||||
|
||||
// Labels hashtags : texte noir sur fond clair, tronque a 12 caracteres
|
||||
d3NodeSelection.filter((d: any) => d.type === 'hashtag')
|
||||
.append('text')
|
||||
.text((d: any) => {
|
||||
const raw = d.label as string
|
||||
return raw.length > 12 ? raw.slice(0, 12) + '...' : raw
|
||||
})
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('dy', '0.35em')
|
||||
.attr('font-size', '9px')
|
||||
.attr('font-weight', '600')
|
||||
.attr('fill', '#2a2a2a')
|
||||
.style('pointer-events', 'none')
|
||||
|
||||
// Tooltip hover pour structures
|
||||
d3NodeSelection.filter((d: any) => d.type === 'structure')
|
||||
.on('mouseenter', (_event: any, d: any) => {
|
||||
@@ -376,6 +619,181 @@ async function initGraph() {
|
||||
})
|
||||
}
|
||||
|
||||
function buildNodesLinks(width: number, height: number) {
|
||||
const allNodes: any[] = []
|
||||
const links: any[] = []
|
||||
|
||||
if (!props.data) return { allNodes, links }
|
||||
|
||||
const tagFamilleMap = tagToFamille.value
|
||||
|
||||
// Noeuds structures (toujours presents)
|
||||
const structureNodes = props.data.structures.map(s => ({
|
||||
id: s.id,
|
||||
type: 'structure',
|
||||
label: s.nom,
|
||||
famille: s.famille_principale,
|
||||
familles_secondaires: s.familles_secondaires ?? [],
|
||||
hashtags: s.hashtags,
|
||||
color: FAMILLE_COLORS[s.famille_principale] ?? '#888',
|
||||
r: 8,
|
||||
}))
|
||||
allNodes.push(...structureNodes)
|
||||
|
||||
// Layer Familles : 6 noeuds famille fixes en etoile + liens primaires/secondaires
|
||||
if (showFamilles.value) {
|
||||
const familyNodes = [1, 2, 3, 4, 5, 6].map(id => ({
|
||||
id: `family-${id}`,
|
||||
type: 'family',
|
||||
familleId: id,
|
||||
label: FAMILLE_LABELS[id],
|
||||
color: FAMILLE_COLORS[id],
|
||||
r: 32,
|
||||
x: width / 2 + Math.cos((id - 1) * Math.PI * 2 / 6) * 180,
|
||||
y: height / 2 + Math.sin((id - 1) * Math.PI * 2 / 6) * 180,
|
||||
fx: width / 2 + Math.cos((id - 1) * Math.PI * 2 / 6) * 180,
|
||||
fy: height / 2 + Math.sin((id - 1) * Math.PI * 2 / 6) * 180,
|
||||
}))
|
||||
allNodes.push(...familyNodes)
|
||||
|
||||
structureNodes.forEach(s => {
|
||||
links.push({
|
||||
source: s.id,
|
||||
target: `family-${s.famille}`,
|
||||
type: 'primary',
|
||||
strength: 0.55,
|
||||
})
|
||||
;(s.familles_secondaires as number[]).forEach((f: number) => {
|
||||
links.push({
|
||||
source: s.id,
|
||||
target: `family-${f}`,
|
||||
type: 'secondary',
|
||||
strength: 0.45,
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Layer Pratiques : noeuds hashtag + liens structure -> hashtag
|
||||
if (showPratiques.value) {
|
||||
const uniqueTags = new Set<string>()
|
||||
props.data.structures.forEach(s => s.hashtags.forEach(t => uniqueTags.add(t)))
|
||||
const tagsArr = Array.from(uniqueTags).sort()
|
||||
|
||||
// Si seul layer Pratiques actif : disposition radiale comme reference
|
||||
// Si superpose avec Familles : laisser la simulation placer
|
||||
const radius = Math.min(width, height) * 0.32
|
||||
const hashtagNodes = tagsArr.map((tag, i) => {
|
||||
const famId = tagFamilleMap[tag]
|
||||
const strokeColor = famId != null ? FAMILLE_COLORS[famId] : '#888'
|
||||
const node: any = {
|
||||
id: `hashtag-${tag}`,
|
||||
type: 'hashtag',
|
||||
label: tag.startsWith('#') ? tag.slice(1) : tag,
|
||||
tag,
|
||||
fill: 'var(--nav-bg-alt)',
|
||||
stroke: strokeColor,
|
||||
color: strokeColor,
|
||||
r: 22,
|
||||
}
|
||||
if (!showFamilles.value) {
|
||||
const angle = (i / tagsArr.length) * Math.PI * 2
|
||||
node.x = width / 2 + Math.cos(angle) * radius
|
||||
node.y = height / 2 + Math.sin(angle) * radius
|
||||
}
|
||||
return node
|
||||
})
|
||||
allNodes.push(...hashtagNodes)
|
||||
|
||||
structureNodes.forEach(s => {
|
||||
s.hashtags.forEach(tag => {
|
||||
if (uniqueTags.has(tag)) {
|
||||
links.push({
|
||||
source: s.id,
|
||||
target: `hashtag-${tag}`,
|
||||
type: 'practice',
|
||||
strength: 0.3,
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return { allNodes, links }
|
||||
}
|
||||
|
||||
function clampPopoverPosition(rect: DOMRect, evtX: number, evtY: number, w = 280, h = 180) {
|
||||
const margin = 12
|
||||
let x = evtX - rect.left + 14
|
||||
let y = evtY - rect.top + 10
|
||||
if (x + w > rect.width - margin) {
|
||||
x = Math.max(margin, rect.width - w - margin)
|
||||
}
|
||||
if (y + h > rect.height - margin) {
|
||||
y = Math.max(margin, rect.height - h - margin)
|
||||
}
|
||||
return { x, y }
|
||||
}
|
||||
|
||||
function structuresForFamille(famId: number): { id: string; nom: string }[] {
|
||||
if (!props.data) return []
|
||||
return props.data.structures
|
||||
.filter(s =>
|
||||
s.famille_principale === famId
|
||||
|| (s.familles_secondaires ?? []).includes(famId)
|
||||
)
|
||||
.sort((a, b) => a.nom.localeCompare(b.nom, 'fr'))
|
||||
.map(s => ({ id: s.id, nom: s.nom }))
|
||||
}
|
||||
|
||||
function openFamillePopover(d: any, event: any, svgEl: SVGElement) {
|
||||
const rect = (svgEl as HTMLElement).getBoundingClientRect()
|
||||
const famId = d.familleId as number
|
||||
const desc = FAMILLE_DESCRIPTIONS[famId] ?? ''
|
||||
const structures = structuresForFamille(famId)
|
||||
const { x, y } = clampPopoverPosition(rect, event.clientX, event.clientY, 280, 280)
|
||||
popover.value = {
|
||||
open: true,
|
||||
kind: 'famille',
|
||||
x,
|
||||
y,
|
||||
title: FAMILLE_LABELS[famId] ?? '',
|
||||
body: desc,
|
||||
color: FAMILLE_COLORS[famId] ?? '#000',
|
||||
structures,
|
||||
familleId: famId,
|
||||
famillesCount: 0,
|
||||
}
|
||||
}
|
||||
|
||||
function openHashtagPopover(d: any, event: any, svgEl: SVGElement) {
|
||||
const rect = (svgEl as HTMLElement).getBoundingClientRect()
|
||||
const tag = d.tag as string
|
||||
const structures = structuresForHashtag(tag)
|
||||
const famId = tagToFamille.value[tag]
|
||||
const color = famId != null ? FAMILLE_COLORS[famId] : '#444'
|
||||
// Compter les familles distinctes parmi les porteuses (famille_principale)
|
||||
const famSet = new Set<number>()
|
||||
if (props.data) {
|
||||
props.data.structures
|
||||
.filter(s => s.hashtags.includes(tag))
|
||||
.forEach(s => famSet.add(s.famille_principale))
|
||||
}
|
||||
const { x, y } = clampPopoverPosition(rect, event.clientX, event.clientY, 280, 220)
|
||||
popover.value = {
|
||||
open: true,
|
||||
kind: 'hashtag',
|
||||
x,
|
||||
y,
|
||||
title: tag.startsWith('#') ? tag : '#' + tag,
|
||||
body: '',
|
||||
color,
|
||||
structures,
|
||||
familleId: null,
|
||||
famillesCount: famSet.size,
|
||||
}
|
||||
}
|
||||
|
||||
function applyHashtagFilter() {
|
||||
if (!d3NodeSelection || !d3LinkSelection) return
|
||||
if (filteredStructureIds.value) {
|
||||
@@ -384,7 +802,8 @@ function applyHashtagFilter() {
|
||||
.attr('opacity', (d: any) => ids.has(d.id) ? 1 : 0.1)
|
||||
d3LinkSelection.attr('opacity', (d: any) => {
|
||||
const srcId = typeof d.source === 'object' ? d.source.id : d.source
|
||||
return ids.has(srcId) ? 1 : 0.05
|
||||
const tgtId = typeof d.target === 'object' ? d.target.id : d.target
|
||||
return ids.has(srcId) || ids.has(tgtId) ? 1 : 0.05
|
||||
})
|
||||
} else {
|
||||
d3NodeSelection.select('circle').attr('opacity', 1)
|
||||
@@ -392,16 +811,14 @@ function applyHashtagFilter() {
|
||||
}
|
||||
}
|
||||
|
||||
// Déclencher quand l'onglet devient visible
|
||||
// Double rAF : nextTick met à jour le vdom, les 2 frames garantissent que
|
||||
// le browser a calculé le layout et que clientWidth/clientHeight != 0
|
||||
// Declencher quand l'onglet devient visible
|
||||
watch(() => props.active, (val) => {
|
||||
if (val && import.meta.client && props.data) {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => initGraph()))
|
||||
}
|
||||
})
|
||||
|
||||
// Relancer si les données arrivent après l'activation
|
||||
// Relancer si les donnees arrivent apres l'activation
|
||||
watch(() => props.data, (val) => {
|
||||
if (val && props.active && import.meta.client) {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => initGraph()))
|
||||
@@ -414,6 +831,14 @@ watch(activeHashtags, () => {
|
||||
if (simulation) simulation.alpha(0.01).restart()
|
||||
}, { deep: true })
|
||||
|
||||
// Watchers layers : rebuild simulation
|
||||
watch([showFamilles, showPratiques], () => {
|
||||
closePopover()
|
||||
if (import.meta.client && props.data && props.active) {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => initGraph()))
|
||||
}
|
||||
})
|
||||
|
||||
// Toggle sidebar : largeur SVG change -> reinit graphe apres transition CSS
|
||||
watch(sidebarOpen, () => {
|
||||
if (!import.meta.client || !props.active || !props.data) return
|
||||
|
||||
97
components/HashtagFilter.vue
Normal file
97
components/HashtagFilter.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="hashtag-filter" style="padding: 8px 12px; background: var(--nav-surface);">
|
||||
<!-- Filtres famille -->
|
||||
<div style="margin-bottom: 6px;">
|
||||
<span class="filter-label">FAMILLES</span>
|
||||
<div class="chips-row">
|
||||
<span
|
||||
v-for="fam in FAMILLES"
|
||||
:key="fam.id"
|
||||
class="chip"
|
||||
:style="selectedFamille === fam.id
|
||||
? `background: ${fam.color}; color: white; font-weight: 600; border: 2px solid ${fam.color};`
|
||||
: `background: var(--nav-bg-alt); color: ${fam.color}; border: 2px solid ${fam.color}; font-weight: 600;`"
|
||||
@click="toggleFamille(fam.id)"
|
||||
>{{ fam.shortLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtres hashtags avec toggle -->
|
||||
<div>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;">
|
||||
<span class="filter-label">HASHTAGS</span>
|
||||
<button
|
||||
@click="hashtagsVisible = !hashtagsVisible"
|
||||
style="font-size: 0.7rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
|
||||
>{{ hashtagsVisible ? 'Replier' : 'Afficher (' + props.allHashtags.length + ')' }}</button>
|
||||
</div>
|
||||
<div v-if="hashtagsVisible" class="chips-row">
|
||||
<span
|
||||
v-for="tag in props.allHashtags"
|
||||
:key="tag"
|
||||
class="chip chip-small"
|
||||
:style="selectedHashtags.includes(tag)
|
||||
? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
|
||||
: 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
||||
@click="toggleHashtag(tag)"
|
||||
>{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const FAMILLES = [
|
||||
{ id: 1, shortLabel: 'Réemploi', color: '#a85d3e' },
|
||||
{ id: 2, shortLabel: 'Frugalité', color: '#c4a472' },
|
||||
{ id: 3, shortLabel: 'Social', color: '#d4a017' },
|
||||
{ id: 4, shortLabel: 'Collectifs', color: '#5a7a4a' },
|
||||
{ id: 5, shortLabel: 'Urbanisme', color: '#3d6a8c' },
|
||||
{ id: 6, shortLabel: 'Recherche', color: '#6b3fa0' },
|
||||
]
|
||||
|
||||
const props = defineProps<{
|
||||
allHashtags: string[]
|
||||
selectedHashtags: string[]
|
||||
selectedFamille: number | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:selectedHashtags': [v: string[]]
|
||||
'update:selectedFamille': [v: number | null]
|
||||
}>()
|
||||
|
||||
const hashtagsVisible = ref(false)
|
||||
|
||||
function toggleFamille(id: number) {
|
||||
emit('update:selectedFamille', props.selectedFamille === id ? null : id)
|
||||
}
|
||||
|
||||
function toggleHashtag(tag: string) {
|
||||
const current = props.selectedHashtags
|
||||
emit('update:selectedHashtags',
|
||||
current.includes(tag) ? current.filter(t => t !== tag) : [...current, tag]
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.filter-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--nav-text-muted);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
|
||||
.chip {
|
||||
cursor: pointer;
|
||||
padding: 3px 10px;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
.chip-small { font-size: 0.7rem; padding: 2px 8px; }
|
||||
</style>
|
||||
76
components/IntentionBanner.vue
Normal file
76
components/IntentionBanner.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="visible"
|
||||
class="intention-overlay"
|
||||
style="
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
background: rgba(20, 18, 14, 0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
"
|
||||
@click.self="dismiss"
|
||||
>
|
||||
<div style="
|
||||
max-width: 540px;
|
||||
width: 100%;
|
||||
background: #faf8f5;
|
||||
border-radius: 8px;
|
||||
padding: 32px;
|
||||
color: #2c2416;
|
||||
">
|
||||
<p style="font-size: 1rem; line-height: 1.7; margin: 0 0 12px 0;">
|
||||
Cette carte recense les réseaux, collectifs, agences et projets où des
|
||||
pensées écologiques deviennent des pratiques d'architecture et d'habiter.
|
||||
</p>
|
||||
<p style="font-size: 0.875rem; line-height: 1.6; opacity: 0.75; margin: 0 0 24px 0;">
|
||||
Elle ne prétend pas à l'exhaustivité. Elle est un geste politique :
|
||||
rendre visible ce qui se transforme, comment, par qui, où.
|
||||
5 familles et des hashtags vous permettent d'explorer.
|
||||
</p>
|
||||
<button
|
||||
@click="dismiss"
|
||||
style="
|
||||
background: #2c2416;
|
||||
color: #faf8f5;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 10px 24px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
"
|
||||
>Explorer la carte</button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const visible = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof localStorage !== 'undefined' && !localStorage.getItem('aep_intention_seen')) {
|
||||
visible.value = true
|
||||
}
|
||||
})
|
||||
|
||||
function dismiss() {
|
||||
visible.value = false
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('aep_intention_seen', '1')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
</style>
|
||||
@@ -128,8 +128,6 @@ async function initMap() {
|
||||
updateMarkers(L)
|
||||
}
|
||||
|
||||
let initialFitDone = false
|
||||
|
||||
function updateMarkers(L?: any) {
|
||||
if (!mapInstance || !clusterGroup) return
|
||||
const leaflet = L || (window as any).L
|
||||
@@ -170,25 +168,6 @@ function updateMarkers(L?: any) {
|
||||
markers.set(org.Id, marker)
|
||||
clusterGroup.addLayer(marker)
|
||||
})
|
||||
|
||||
// Bug E2E L3 : recadrer la carte sur les resultats filtres
|
||||
if (orgsWithCoords.length > 0 && initialFitDone) {
|
||||
try {
|
||||
const bounds = leaflet.latLngBounds(
|
||||
orgsWithCoords.map((o: any) => [o.latitude!, o.longitude!])
|
||||
)
|
||||
if (orgsWithCoords.length <= 15) {
|
||||
mapInstance.fitBounds(bounds, {
|
||||
padding: [40, 40],
|
||||
maxZoom: 10,
|
||||
animate: true,
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[NavMap] fitBounds echoue:', e)
|
||||
}
|
||||
}
|
||||
initialFitDone = true
|
||||
}
|
||||
|
||||
// Réagir aux changements de filtres (liste d'orgs)
|
||||
|
||||
@@ -6,40 +6,42 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Map, Marker, DivIcon } from 'leaflet'
|
||||
import type { StructureV2 } from '~/types/structure-v2'
|
||||
|
||||
interface Pratique {
|
||||
id: number
|
||||
nom: string
|
||||
lat?: number | null
|
||||
lng?: number | null
|
||||
pays?: string
|
||||
ville?: string
|
||||
type?: string
|
||||
score?: number
|
||||
// Couleurs par famille (synchronisées avec v2-bifurcation.css)
|
||||
const FAMILLE_COLORS: Record<number, string> = {
|
||||
1: '#a85d3e',
|
||||
2: '#c4a472',
|
||||
3: '#d4a017',
|
||||
4: '#5a7a4a',
|
||||
5: '#3d6a8c',
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
orgs: Pratique[]
|
||||
selectedId?: number | null
|
||||
structures: StructureV2[]
|
||||
selectedId?: string | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'select-org': [id: number]
|
||||
'select-structure': [id: string]
|
||||
}>()
|
||||
|
||||
const mapContainer = ref<HTMLElement | null>(null)
|
||||
let mapInstance: Map | null = null
|
||||
let clusterGroup: any = null
|
||||
const markers = new Map<number, Marker>()
|
||||
const markers = new Map<string, Marker>()
|
||||
let tileLayerInstance: any = null
|
||||
|
||||
function createPinIcon(score: number, isSelected = false): DivIcon {
|
||||
function getFamilleColor(famille: number): string {
|
||||
return FAMILLE_COLORS[famille] ?? '#888888'
|
||||
}
|
||||
|
||||
function createPinIcon(famille: number, isSelected = false): DivIcon {
|
||||
const L = (window as any).L
|
||||
// Couleur selon score (1-5) : du pale au vif
|
||||
const bg = score >= 4 ? '#f5b342' : score >= 3 ? 'rgba(26,34,56,0.75)' : 'rgba(26,34,56,0.5)'
|
||||
const border = isSelected ? '#f5b342' : '#ffffff'
|
||||
const size = isSelected ? 18 : 14
|
||||
const shadow = isSelected ? '0 0 0 4px rgba(245,179,66,0.5)' : 'none'
|
||||
const bg = getFamilleColor(famille)
|
||||
const size = isSelected ? 20 : 14
|
||||
const border = isSelected ? 'white' : 'rgba(255,255,255,0.7)'
|
||||
const shadow = isSelected ? `0 0 0 4px ${bg}55` : 'none'
|
||||
|
||||
return L.divIcon({
|
||||
className: '',
|
||||
@@ -69,19 +71,18 @@ async function initMap() {
|
||||
// @ts-ignore
|
||||
await import('leaflet.markercluster/dist/MarkerCluster.Default.css')
|
||||
|
||||
// Installer L globalement AVANT le plugin
|
||||
;(window as any).L = L
|
||||
// @ts-ignore
|
||||
await import('leaflet.markercluster')
|
||||
const MarkerClusterGroup = L.MarkerClusterGroup
|
||||
|
||||
mapInstance = L.map(mapContainer.value, {
|
||||
center: [50.0, 10.0],
|
||||
zoom: 4,
|
||||
center: [46.6, 2.3],
|
||||
zoom: 5,
|
||||
zoomControl: true,
|
||||
attributionControl: true,
|
||||
maxBounds: [[30.0, -15.0], [72.0, 40.0]],
|
||||
maxBoundsViscosity: 0.8,
|
||||
minZoom: 3,
|
||||
minZoom: 2,
|
||||
maxZoom: 18,
|
||||
})
|
||||
|
||||
@@ -97,7 +98,7 @@ async function initMap() {
|
||||
tileLayerInstance.addTo(mapInstance!)
|
||||
|
||||
clusterGroup = new MarkerClusterGroup({
|
||||
disableClusteringAtZoom: 12,
|
||||
disableClusteringAtZoom: 14,
|
||||
maxClusterRadius: 50,
|
||||
showCoverageOnHover: false,
|
||||
iconCreateFunction: (cluster: any) => {
|
||||
@@ -123,12 +124,6 @@ async function initMap() {
|
||||
updateMarkers(L)
|
||||
}
|
||||
|
||||
// Vue initiale (centre Europe + zoom 4) - sauvegardee pour reset
|
||||
const INITIAL_CENTER: [number, number] = [50.0, 10.0]
|
||||
const INITIAL_ZOOM = 4
|
||||
|
||||
let initialFitDone = false
|
||||
|
||||
function updateMarkers(L?: any) {
|
||||
if (!mapInstance || !clusterGroup) return
|
||||
const leaflet = L || (window as any).L
|
||||
@@ -137,60 +132,53 @@ function updateMarkers(L?: any) {
|
||||
clusterGroup.clearLayers()
|
||||
markers.clear()
|
||||
|
||||
const orgsWithCoords = props.orgs.filter(
|
||||
(o) => o.lat != null && o.lng != null
|
||||
const structuresWithCoords = props.structures.filter(
|
||||
(s) => s.latitude != null && s.longitude != null
|
||||
)
|
||||
|
||||
orgsWithCoords.forEach((org) => {
|
||||
const isSelected = org.id === props.selectedId
|
||||
const icon = createPinIcon(org.score ?? 1, isSelected)
|
||||
structuresWithCoords.forEach((structure) => {
|
||||
const isSelected = structure.id === props.selectedId
|
||||
const icon = createPinIcon(structure.famille_principale, isSelected)
|
||||
|
||||
const marker = leaflet.marker([org.lat!, org.lng!], { icon })
|
||||
const marker = leaflet.marker([structure.latitude!, structure.longitude!], { icon })
|
||||
|
||||
const hashtagsHtml = structure.hashtags.slice(0, 2)
|
||||
.map(h => `<span style="font-size:10px;color:var(--nav-text-muted);">${h}</span>`)
|
||||
.join(' ')
|
||||
|
||||
marker.bindPopup(`
|
||||
<div style="font-family: var(--nav-font); min-width: 180px; padding: 4px 0;">
|
||||
<div style="font-weight: 700; color: var(--nav-text); margin-bottom: 4px;">${org.nom}</div>
|
||||
${org.pays ? `<div style="font-size: 11px; color: var(--nav-text-muted);">${org.pays}${org.ville ? ' · ' + org.ville : ''}</div>` : ''}
|
||||
${org.type ? `<div style="font-size: 11px; color: var(--nav-text-muted); margin-top: 2px;">${org.type}</div>` : ''}
|
||||
<a href="/pratique/${org.id}" style="
|
||||
display: inline-block; margin-top: 8px; font-size: 12px;
|
||||
color: var(--nav-primary-solid); text-decoration: underline;
|
||||
">Voir la fiche →</a>
|
||||
<div style="font-family: var(--nav-font); min-width: 190px; padding: 4px 0;">
|
||||
<div style="font-weight: 700; color: var(--nav-text); margin-bottom: 2px; font-size: 0.9rem;">${structure.nom}</div>
|
||||
<div style="font-size: 11px; color: var(--nav-text-muted); margin-bottom: 4px;">${structure.type_principal} · ${structure.ville}, ${structure.pays}</div>
|
||||
${hashtagsHtml ? `<div style="margin-bottom: 6px;">${hashtagsHtml}</div>` : ''}
|
||||
<div style="font-size: 11px; color: var(--nav-text); line-height: 1.4; margin-bottom: 8px;">${structure.description_courte.slice(0, 100)}…</div>
|
||||
<button onclick="document.dispatchEvent(new CustomEvent('nav-v2-select', {detail:'${structure.id}'}))" style="
|
||||
font-size: 12px;
|
||||
color: var(--nav-primary-solid);
|
||||
text-decoration: underline;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-family: var(--nav-font);
|
||||
">Voir la fiche →</button>
|
||||
</div>
|
||||
`, { maxWidth: 240 })
|
||||
`, { maxWidth: 260 })
|
||||
|
||||
marker.on('click', () => emit('select-org', org.id))
|
||||
marker.on('click', () => emit('select-structure', structure.id))
|
||||
|
||||
markers.set(org.id, marker)
|
||||
markers.set(structure.id, marker)
|
||||
clusterGroup.addLayer(marker)
|
||||
})
|
||||
}
|
||||
|
||||
// Bug E2E L3 : recadrer la carte sur les resultats filtres
|
||||
// Conditions : 1+ resultat, et au moins 1 marker hors viewport actuel.
|
||||
// On evite de recadrer au tout premier rendu (laisser la vue initiale).
|
||||
if (orgsWithCoords.length > 0 && initialFitDone) {
|
||||
try {
|
||||
const bounds = leaflet.latLngBounds(
|
||||
orgsWithCoords.map((o) => [o.lat!, o.lng!])
|
||||
)
|
||||
// On recadre uniquement si la liste filtree est restreinte
|
||||
// (evite un recadrage permanent quand toutes les fiches sont la).
|
||||
if (orgsWithCoords.length <= 15) {
|
||||
mapInstance.fitBounds(bounds, {
|
||||
padding: [40, 40],
|
||||
maxZoom: 10,
|
||||
animate: true,
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[EuropeMap] fitBounds echoue:', e)
|
||||
}
|
||||
}
|
||||
initialFitDone = true
|
||||
// Ecouter l'event custom depuis les popups Leaflet
|
||||
function onNavV2Select(e: CustomEvent) {
|
||||
emit('select-structure', e.detail)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.orgs,
|
||||
() => props.structures,
|
||||
() => updateMarkers(),
|
||||
{ deep: false }
|
||||
)
|
||||
@@ -204,16 +192,16 @@ watch(
|
||||
|
||||
if (oldId != null) {
|
||||
const oldMarker = markers.get(oldId)
|
||||
const oldOrg = props.orgs.find(o => o.id === oldId)
|
||||
if (oldMarker && oldOrg) {
|
||||
oldMarker.setIcon(createPinIcon(oldOrg.score ?? 1, false))
|
||||
const oldStructure = props.structures.find(s => s.id === oldId)
|
||||
if (oldMarker && oldStructure) {
|
||||
oldMarker.setIcon(createPinIcon(oldStructure.famille_principale, false))
|
||||
}
|
||||
}
|
||||
if (newId != null) {
|
||||
const newMarker = markers.get(newId)
|
||||
const newOrg = props.orgs.find(o => o.id === newId)
|
||||
if (newMarker && newOrg) {
|
||||
newMarker.setIcon(createPinIcon(newOrg.score ?? 1, true))
|
||||
const newStructure = props.structures.find(s => s.id === newId)
|
||||
if (newMarker && newStructure) {
|
||||
newMarker.setIcon(createPinIcon(newStructure.famille_principale, true))
|
||||
const latLng = newMarker.getLatLng()
|
||||
mapInstance.panTo(latLng, { animate: true })
|
||||
}
|
||||
@@ -235,6 +223,7 @@ let themeObserver: MutationObserver | null = null
|
||||
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
document.addEventListener('nav-v2-select', onNavV2Select as EventListener)
|
||||
|
||||
themeObserver = new MutationObserver(() => {
|
||||
const dark = document.documentElement.classList.contains('dark')
|
||||
@@ -244,6 +233,7 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('nav-v2-select', onNavV2Select as EventListener)
|
||||
themeObserver?.disconnect()
|
||||
if (mapInstance) {
|
||||
mapInstance.remove()
|
||||
@@ -136,18 +136,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════ CTA PROPOSER -->
|
||||
<div
|
||||
class="shrink-0 px-4 py-3 border-t"
|
||||
style="border-color: var(--nav-bg-alt);"
|
||||
>
|
||||
<NuxtLink
|
||||
to="/contribuer"
|
||||
class="sidebar-cta-link"
|
||||
>
|
||||
+ Proposer une fiche
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
</template>
|
||||
@@ -266,24 +254,4 @@ function orgFonctions(org: Org): string[] {
|
||||
color: var(--nav-text);
|
||||
background: var(--nav-bg-alt);
|
||||
}
|
||||
|
||||
.sidebar-cta-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: center;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: var(--nav-primary-solid);
|
||||
background: transparent;
|
||||
border: 1px solid var(--nav-primary-solid);
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.sidebar-cta-link:hover {
|
||||
background: var(--nav-primary);
|
||||
color: var(--nav-text-on-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<NuxtLink
|
||||
:to="`/fiche/${org.Id}`"
|
||||
class="block bg-white rounded-xl shadow-sm border border-warm-200 hover:shadow-md hover:border-sage-300 transition-all duration-200 p-5"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3 mb-2">
|
||||
<h2 class="font-semibold text-gray-900 text-base leading-snug">{{ org.nom }}</h2>
|
||||
<TypeBadge v-if="org.type_org" :type="org.type_org" class="shrink-0 mt-0.5" />
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 text-sm leading-relaxed mb-3 line-clamp-2">
|
||||
{{ org.description }}
|
||||
</p>
|
||||
|
||||
<div v-if="tags.length" class="flex flex-wrap gap-1.5">
|
||||
<TagBadge
|
||||
v-for="tag in tags"
|
||||
:key="tag"
|
||||
:tag="tag"
|
||||
@click="$emit('filter-tag', tag)"
|
||||
/>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
org: {
|
||||
Id: number
|
||||
nom: string
|
||||
type_org?: string
|
||||
description?: string
|
||||
tags?: string
|
||||
lien?: string
|
||||
}
|
||||
}>()
|
||||
|
||||
defineEmits<{ 'filter-tag': [tag: string] }>()
|
||||
|
||||
const tags = computed(() =>
|
||||
props.org.tags
|
||||
? props.org.tags.split(',').map((t) => t.trim()).filter(Boolean)
|
||||
: []
|
||||
)
|
||||
</script>
|
||||
@@ -1,276 +0,0 @@
|
||||
<template>
|
||||
<div class="outremer-accordion">
|
||||
<div
|
||||
v-for="dom in DOM_TOM_PRATIQUES"
|
||||
:key="dom.code"
|
||||
class="outremer-item"
|
||||
>
|
||||
<button
|
||||
class="outremer-header"
|
||||
@click="toggle(dom.code)"
|
||||
:aria-expanded="openDom === dom.code"
|
||||
>
|
||||
<span class="outremer-title">{{ dom.label }}</span>
|
||||
<span class="outremer-meta">
|
||||
<span class="outremer-count-badge" :style="orgCounts[dom.code] === 0 ? 'opacity:0.4' : ''">
|
||||
{{ orgCounts[dom.code] ?? 0 }} fiche{{ (orgCounts[dom.code] ?? 0) > 1 ? 's' : '' }}
|
||||
</span>
|
||||
<svg
|
||||
width="14" height="14" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
|
||||
aria-hidden="true"
|
||||
class="outremer-chevron"
|
||||
:class="{ 'outremer-chevron--open': openDom === dom.code }"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-show="openDom === dom.code"
|
||||
class="outremer-map-container"
|
||||
>
|
||||
<div :ref="el => { if (el) mapRefs[dom.code] = el as HTMLElement }" class="outremer-map" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Map as LeafletMap, TileLayer } from 'leaflet'
|
||||
|
||||
interface Pratique {
|
||||
id: number
|
||||
nom: string
|
||||
lat?: number | null
|
||||
lng?: number | null
|
||||
pays?: string
|
||||
ville?: string
|
||||
type?: string
|
||||
score?: number
|
||||
}
|
||||
|
||||
const DOM_TOM_PRATIQUES = [
|
||||
{ code: 'GP', label: 'Guadeloupe', center: [16.25, -61.58] as [number, number], zoom: 9 },
|
||||
{ code: 'MQ', label: 'Martinique', center: [14.65, -61.02] as [number, number], zoom: 9 },
|
||||
{ code: 'GF', label: 'Guyane', center: [4.0, -53.0] as [number, number], zoom: 6 },
|
||||
{ code: 'RE', label: 'La Réunion', center: [-21.11, 55.53] as [number, number], zoom: 9 },
|
||||
{ code: 'YT', label: 'Mayotte', center: [-12.83, 45.16] as [number, number], zoom: 10 },
|
||||
{ code: 'PF', label: 'Polynésie française', center: [-17.5, -149.5] as [number, number], zoom: 8 },
|
||||
{ code: 'NC', label: 'Nouvelle-Calédonie', center: [-20.9, 165.6] as [number, number], zoom: 7 },
|
||||
]
|
||||
|
||||
const props = defineProps<{
|
||||
orgs: Pratique[]
|
||||
selectedId?: number | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'select-org': [id: number]
|
||||
}>()
|
||||
|
||||
const mapRefs: Record<string, HTMLElement> = {}
|
||||
const mapInstances: Record<string, LeafletMap> = {}
|
||||
const tileLayers: Record<string, TileLayer> = {}
|
||||
|
||||
const openDom = ref<string | null>(null)
|
||||
|
||||
const orgCounts = computed<Record<string, number>>(() => {
|
||||
const counts: Record<string, number> = {}
|
||||
DOM_TOM_PRATIQUES.forEach(d => { counts[d.code] = 0 })
|
||||
props.orgs.forEach(o => {
|
||||
if (o.pays && counts[o.pays] !== undefined) {
|
||||
counts[o.pays]++
|
||||
}
|
||||
})
|
||||
return counts
|
||||
})
|
||||
|
||||
function toggle(code: string) {
|
||||
openDom.value = openDom.value === code ? null : code
|
||||
nextTick(() => {
|
||||
if (openDom.value === code && !mapInstances[code]) {
|
||||
initSingleMap(code)
|
||||
} else if (openDom.value === code) {
|
||||
mapInstances[code]?.invalidateSize()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function createPinIcon(L: any, score: number, isSelected = false) {
|
||||
const bg = score >= 4 ? '#f5b342' : 'rgba(26, 34, 56, 0.6)'
|
||||
const border = isSelected ? '#f5b342' : '#ffffff'
|
||||
const size = isSelected ? 16 : 12
|
||||
return L.divIcon({
|
||||
className: '',
|
||||
html: `<div style="width:${size}px;height:${size}px;border-radius:50%;background:${bg};border:2px solid ${border};"></div>`,
|
||||
iconSize: [size, size],
|
||||
iconAnchor: [size / 2, size / 2],
|
||||
popupAnchor: [0, -(size / 2 + 4)],
|
||||
})
|
||||
}
|
||||
|
||||
function getTileUrl(dark: boolean) {
|
||||
return dark
|
||||
? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
|
||||
: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
|
||||
}
|
||||
|
||||
async function initSingleMap(code: string) {
|
||||
const dom = DOM_TOM_PRATIQUES.find(d => d.code === code)
|
||||
if (!dom) return
|
||||
const Lmod = await import('leaflet')
|
||||
const L: any = (Lmod as any).default || Lmod
|
||||
await import('leaflet/dist/leaflet.css')
|
||||
const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
|
||||
const el = mapRefs[code]
|
||||
if (!el) return
|
||||
const map = L.map(el, {
|
||||
center: dom.center, zoom: dom.zoom,
|
||||
zoomControl: false, attributionControl: false,
|
||||
dragging: true, scrollWheelZoom: true, doubleClickZoom: true,
|
||||
touchZoom: true, keyboard: false,
|
||||
})
|
||||
const tileLayer = L.tileLayer(getTileUrl(isDark), {
|
||||
attribution: '© OpenStreetMap contributors © CARTO', maxZoom: 19,
|
||||
})
|
||||
tileLayer.addTo(map)
|
||||
tileLayers[code] = tileLayer as unknown as TileLayer
|
||||
mapInstances[code] = map as unknown as LeafletMap
|
||||
renderPins(L, code)
|
||||
}
|
||||
|
||||
function updateTheme(dark: boolean) {
|
||||
const url = getTileUrl(dark)
|
||||
Object.values(tileLayers).forEach(tl => {
|
||||
(tl as any).setUrl(url)
|
||||
})
|
||||
}
|
||||
|
||||
function renderPins(L: any, code: string) {
|
||||
const map = mapInstances[code] as any
|
||||
if (!map) return
|
||||
|
||||
if (map._navMarkers) {
|
||||
map._navMarkers.forEach((m: any) => m.remove())
|
||||
}
|
||||
map._navMarkers = []
|
||||
|
||||
const domOrgs = props.orgs.filter(o => o.pays === code && o.lat != null && o.lng != null)
|
||||
domOrgs.forEach(org => {
|
||||
const icon = createPinIcon(L, org.score ?? 1, org.id === props.selectedId)
|
||||
const marker = L.marker([org.lat!, org.lng!], { icon })
|
||||
|
||||
marker.bindPopup(`
|
||||
<div style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;min-width:160px;padding:4px 0;">
|
||||
<div style="font-weight:700;color:#1a2238;margin-bottom:2px;">${org.nom}</div>
|
||||
${org.ville ? `<div style="font-size:11px;color:rgba(26,34,56,0.55);">${org.ville}</div>` : ''}
|
||||
${org.type ? `<div style="font-size:11px;color:rgba(26,34,56,0.55);margin-top:2px;">${org.type}</div>` : ''}
|
||||
<a href="/pratique/${org.id}" style="display:inline-block;margin-top:8px;font-size:12px;color:#1a2238;text-decoration:underline;">Voir la fiche →</a>
|
||||
</div>
|
||||
`, { maxWidth: 200 })
|
||||
|
||||
marker.on('click', () => emit('select-org', org.id))
|
||||
marker.addTo(map)
|
||||
map._navMarkers.push(marker)
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.orgs, () => {
|
||||
DOM_TOM_PRATIQUES.forEach(dom => {
|
||||
if (mapInstances[dom.code]) {
|
||||
import('leaflet').then(L => renderPins(L, dom.code))
|
||||
}
|
||||
})
|
||||
}, { deep: false })
|
||||
|
||||
watch(() => props.selectedId, () => {
|
||||
DOM_TOM_PRATIQUES.forEach(dom => {
|
||||
if (mapInstances[dom.code]) {
|
||||
import('leaflet').then(L => renderPins(L, dom.code))
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
let themeObserver: MutationObserver | null = null
|
||||
|
||||
onMounted(() => {
|
||||
themeObserver = new MutationObserver(() => {
|
||||
const dark = document.documentElement.classList.contains('dark')
|
||||
updateTheme(dark)
|
||||
})
|
||||
themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
themeObserver?.disconnect()
|
||||
Object.values(mapInstances).forEach(m => (m as any).remove())
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.outremer-accordion {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.outremer-item {
|
||||
border-bottom: 1px solid var(--nav-bg-alt);
|
||||
}
|
||||
|
||||
.outremer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: var(--nav-surface);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.outremer-header:hover {
|
||||
background: var(--nav-bg-alt);
|
||||
}
|
||||
|
||||
.outremer-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--nav-text);
|
||||
}
|
||||
|
||||
.outremer-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.outremer-count-badge {
|
||||
font-size: 0.75rem;
|
||||
color: var(--nav-text-muted);
|
||||
}
|
||||
|
||||
.outremer-chevron {
|
||||
color: var(--nav-text-muted);
|
||||
transition: transform 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.outremer-chevron--open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.outremer-map-container {
|
||||
height: 220px;
|
||||
border-top: 1px solid var(--nav-bg-alt);
|
||||
}
|
||||
|
||||
.outremer-map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Groupe Europe -->
|
||||
<span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">PAYS — EUROPE</span>
|
||||
<div class="flex flex-wrap gap-1 mb-2">
|
||||
<button
|
||||
v-for="code in EUROPE_CODES"
|
||||
:key="code"
|
||||
type="button"
|
||||
class="px-2 py-0.5 rounded-full text-xs transition-all"
|
||||
:style="modelValue.includes(code)
|
||||
? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
|
||||
: 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
||||
@click="toggle(code)"
|
||||
>
|
||||
{{ PAYS_LABELS[code] ?? code }}
|
||||
<span v-if="counts && counts[code] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[code] }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Groupe Outre-mer -->
|
||||
<span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">OUTRE-MER</span>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<button
|
||||
v-for="code in OUTREMER_CODES"
|
||||
:key="code"
|
||||
type="button"
|
||||
class="px-2 py-0.5 rounded-full text-xs transition-all"
|
||||
:style="modelValue.includes(code)
|
||||
? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
|
||||
: 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
||||
@click="toggle(code)"
|
||||
>
|
||||
{{ PAYS_LABELS[code] ?? code }}
|
||||
<span v-if="counts && counts[code] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[code] }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { EUROPE_CODES, OUTREMER_CODES, PAYS_LABELS } from '~/types/pratique'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string[]
|
||||
counts?: Record<string, number>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string[]]
|
||||
}>()
|
||||
|
||||
function toggle(code: string) {
|
||||
if (props.modelValue.includes(code)) {
|
||||
emit('update:modelValue', props.modelValue.filter(v => v !== code))
|
||||
} else {
|
||||
emit('update:modelValue', [...props.modelValue, code])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,274 +0,0 @@
|
||||
<template>
|
||||
<aside
|
||||
class="flex flex-col h-full overflow-hidden"
|
||||
style="background: var(--nav-surface); border-right: 1px solid var(--nav-bg-alt);"
|
||||
>
|
||||
|
||||
<!-- ═══════════════════════════════════ BARRE DE RECHERCHE -->
|
||||
<div
|
||||
class="shrink-0 px-4 pt-4 pb-3 border-b"
|
||||
style="border-color: var(--nav-bg-alt);"
|
||||
>
|
||||
<label class="sidebar-search-label" aria-label="Rechercher une pratique">
|
||||
<svg
|
||||
width="15" height="15" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
class="sidebar-search-icon"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
<input
|
||||
ref="searchInputEl"
|
||||
:value="search"
|
||||
type="search"
|
||||
placeholder="Rechercher une pratique…"
|
||||
class="sidebar-search-input"
|
||||
autocomplete="off"
|
||||
@input="emit('update:search', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<button
|
||||
v-if="search"
|
||||
type="button"
|
||||
class="sidebar-search-clear"
|
||||
aria-label="Effacer la recherche"
|
||||
@click.stop="emit('update:search', '')"
|
||||
>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════ FILTRES -->
|
||||
<div
|
||||
class="shrink-0 px-4 pt-3 pb-3 space-y-4 border-b overflow-y-auto"
|
||||
style="border-color: var(--nav-bg-alt); max-height: 280px;"
|
||||
>
|
||||
<!-- Critères régé -->
|
||||
<CritereFilter
|
||||
:modelValue="criteres"
|
||||
:counts="critereCount"
|
||||
@update:modelValue="emit('update:criteres', $event)"
|
||||
/>
|
||||
|
||||
<!-- Type entité -->
|
||||
<TypeEntiteFilter
|
||||
:modelValue="typesEntite"
|
||||
:counts="typeCount"
|
||||
@update:modelValue="emit('update:typesEntite', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════ LISTE FICHES -->
|
||||
<div class="flex-1 flex flex-col min-h-0">
|
||||
<div
|
||||
class="shrink-0 flex items-center justify-between px-4 py-2 border-b"
|
||||
style="border-color: var(--nav-bg-alt);"
|
||||
>
|
||||
<span class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">
|
||||
{{ resultCount }} résultat{{ resultCount > 1 ? 's' : '' }}
|
||||
</span>
|
||||
<button
|
||||
v-if="hasActiveFilters"
|
||||
@click="emit('reset-filters')"
|
||||
class="text-xs underline hover:opacity-70"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>
|
||||
Effacer les filtres
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto px-3 py-2 space-y-1.5">
|
||||
<div
|
||||
v-if="pending"
|
||||
class="flex items-center justify-center py-8"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>
|
||||
Chargement…
|
||||
</div>
|
||||
|
||||
<div v-else-if="pratiques.length === 0" class="text-center py-8">
|
||||
<p class="text-xs" style="color: var(--nav-text-muted);">Aucun résultat</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="pratique in pratiques"
|
||||
:key="pratique.id"
|
||||
class="rounded-lg px-3 py-2 cursor-pointer transition-all"
|
||||
:style="selectedId === pratique.id
|
||||
? 'background: var(--nav-bg-alt); border-left: 3px solid var(--nav-accent); padding-left: 9px;'
|
||||
: 'background: var(--nav-bg); border-left: 3px solid transparent; padding-left: 9px;'"
|
||||
@click="emit('select-pratique', pratique.id)"
|
||||
@mouseenter="emit('hover-pratique', pratique.id)"
|
||||
@mouseleave="emit('hover-pratique', null)"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-1.5">
|
||||
<span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ pratique.nom }}</span>
|
||||
<span
|
||||
v-if="pratique.pays"
|
||||
class="shrink-0 px-1.5 py-0.5 rounded-full text-xs"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted); margin-top: 1px;"
|
||||
>{{ pratique.pays }}</span>
|
||||
</div>
|
||||
<div v-if="pratique.criteres?.length" class="mt-1 flex flex-wrap gap-1">
|
||||
<span
|
||||
v-for="cId in pratique.criteres.slice(0, 3)"
|
||||
:key="cId"
|
||||
class="px-1.5 py-0.5 rounded text-xs"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
|
||||
>{{ CRITERES.find(c => c.id === cId)?.label }}</span>
|
||||
</div>
|
||||
<div v-if="pratique.ville" class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">
|
||||
{{ pratique.ville }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════ CTA PROPOSER -->
|
||||
<div
|
||||
class="shrink-0 px-4 py-3 border-t"
|
||||
style="border-color: var(--nav-bg-alt);"
|
||||
>
|
||||
<NuxtLink
|
||||
to="/proposer-pratique"
|
||||
class="sidebar-cta-link"
|
||||
>
|
||||
+ Proposer une pratique
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CRITERES } from '~/types/pratique'
|
||||
|
||||
interface Pratique {
|
||||
id: number
|
||||
nom: string
|
||||
pays?: string
|
||||
ville?: string
|
||||
type?: string
|
||||
criteres?: number[]
|
||||
score?: number
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
search: string
|
||||
criteres: number[]
|
||||
typesEntite: string[]
|
||||
critereCount: Record<number, number>
|
||||
typeCount: Record<string, number>
|
||||
resultCount: number
|
||||
pratiques: Pratique[]
|
||||
selectedId: number | null
|
||||
hasActiveFilters: boolean
|
||||
pending?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:search': [value: string]
|
||||
'update:criteres': [value: number[]]
|
||||
'update:typesEntite': [value: string[]]
|
||||
'select-pratique': [id: number]
|
||||
'hover-pratique': [id: number | null]
|
||||
'reset-filters': []
|
||||
}>()
|
||||
|
||||
const searchInputEl = ref<HTMLInputElement | null>(null)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-search-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 1.5px solid var(--nav-bg-alt);
|
||||
border-radius: 10px;
|
||||
background: var(--nav-bg);
|
||||
padding: 7px 10px;
|
||||
cursor: text;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-search-label:focus-within {
|
||||
border-color: var(--nav-primary);
|
||||
background: var(--nav-surface);
|
||||
}
|
||||
|
||||
.sidebar-search-icon {
|
||||
color: var(--nav-text-muted);
|
||||
flex-shrink: 0;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-search-label:focus-within .sidebar-search-icon {
|
||||
color: var(--nav-primary-solid);
|
||||
}
|
||||
|
||||
.sidebar-search-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: var(--nav-text);
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
font-family: var(--nav-font);
|
||||
}
|
||||
|
||||
.sidebar-search-input::placeholder {
|
||||
color: var(--nav-text-muted);
|
||||
}
|
||||
|
||||
.sidebar-search-input::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-search-clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--nav-text-muted);
|
||||
flex-shrink: 0;
|
||||
padding: 2px;
|
||||
border-radius: 50%;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-search-clear:hover {
|
||||
color: var(--nav-text);
|
||||
background: var(--nav-bg-alt);
|
||||
}
|
||||
|
||||
.sidebar-cta-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: center;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: var(--nav-primary-solid);
|
||||
background: transparent;
|
||||
border: 1px solid var(--nav-primary-solid);
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.sidebar-cta-link:hover {
|
||||
background: var(--nav-primary);
|
||||
color: var(--nav-text-on-primary);
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<span
|
||||
class="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-sage-100 text-sage-700 border border-sage-200 cursor-pointer hover:bg-sage-200 transition-colors"
|
||||
@click.prevent="$emit('click', tag)"
|
||||
>{{ tag }}</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ tag: string }>()
|
||||
defineEmits<{ click: [tag: string] }>()
|
||||
</script>
|
||||
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<span :class="['inline-block px-2.5 py-0.5 rounded-full text-xs font-semibold uppercase tracking-wide', colorClass]">
|
||||
{{ type }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{ type: string }>()
|
||||
|
||||
const colors: Record<string, string> = {
|
||||
association: 'bg-blue-100 text-blue-700',
|
||||
syndicat: 'bg-orange-100 text-orange-700',
|
||||
institution: 'bg-purple-100 text-purple-700',
|
||||
reseau: 'bg-teal-100 text-teal-700',
|
||||
collectif: 'bg-pink-100 text-pink-700',
|
||||
ecole: 'bg-yellow-100 text-yellow-700',
|
||||
media: 'bg-red-100 text-red-700',
|
||||
}
|
||||
|
||||
const colorClass = computed(() => colors[props.type] ?? 'bg-gray-100 text-gray-700')
|
||||
</script>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">TYPE D'ENTITÉ</span>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<button
|
||||
v-for="type in TYPES_ENTITE"
|
||||
:key="type"
|
||||
type="button"
|
||||
class="px-2 py-0.5 rounded-full text-xs transition-all"
|
||||
:style="modelValue.includes(type)
|
||||
? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
|
||||
: 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
||||
@click="toggle(type)"
|
||||
>
|
||||
{{ TYPES_ENTITE_LABELS[type] ?? type }}
|
||||
<span v-if="counts && counts[type] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[type] }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TYPES_ENTITE, TYPES_ENTITE_LABELS } from '~/types/pratique'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string[]
|
||||
counts?: Record<string, number>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string[]]
|
||||
}>()
|
||||
|
||||
function toggle(type: string) {
|
||||
if (props.modelValue.includes(type)) {
|
||||
emit('update:modelValue', props.modelValue.filter(v => v !== type))
|
||||
} else {
|
||||
emit('update:modelValue', [...props.modelValue, type])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user