feat(b3): M2 — FicheMiniCard + adaptateur Org/Structure, story de test
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Jules
Claude Sonnet 5
@@ -0,0 +1,103 @@
|
|||||||
|
<template>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="fiche-mini-card"
|
||||||
|
:aria-label="fiche.nom"
|
||||||
|
@click="emit('open')"
|
||||||
|
>
|
||||||
|
<span class="fiche-mini-card__nom">{{ fiche.nom }}</span>
|
||||||
|
<span v-if="fiche.resume" class="fiche-mini-card__resume">{{ fiche.resume }}</span>
|
||||||
|
|
||||||
|
<ChipGroup
|
||||||
|
v-if="fiche.chips.length || fiche.echelle"
|
||||||
|
:aria-label="`Étiquettes de ${fiche.nom}`"
|
||||||
|
class="fiche-mini-card__chips"
|
||||||
|
>
|
||||||
|
<Chip v-if="fiche.echelle" as="span" variant="echelle" :label="fiche.echelle" />
|
||||||
|
<Chip v-for="chip in fiche.chips" :key="chip" as="span" variant="fonction" :label="chip" />
|
||||||
|
</ChipGroup>
|
||||||
|
|
||||||
|
<span v-if="!fiche.geoloc" class="fiche-mini-card__no-geo">Sans localisation</span>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { MiniFiche } from '~/composables/useFicheAdapter'
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
fiche: MiniFiche
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
open: []
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.fiche-mini-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-sm);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--text);
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: background-color var(--dur-fast) var(--ease-out),
|
||||||
|
box-shadow var(--dur-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.fiche-mini-card {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiche-mini-card:hover {
|
||||||
|
background: var(--surface-2);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiche-mini-card:focus-visible {
|
||||||
|
outline: 2px solid var(--focus-ring);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiche-mini-card__nom {
|
||||||
|
width: 100%;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
font-weight: var(--fw-semibold);
|
||||||
|
line-height: var(--lh-tight);
|
||||||
|
color: var(--text);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiche-mini-card__resume {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: var(--space-2xs);
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
line-height: var(--lh-base);
|
||||||
|
color: var(--text-muted);
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiche-mini-card__chips {
|
||||||
|
margin-top: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiche-mini-card__no-geo {
|
||||||
|
margin-top: var(--space-2xs);
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--text-subtle);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
/**
|
||||||
|
* useFicheAdapter — B3-M2
|
||||||
|
* Adaptateur léger Org | StructureV2 → MiniFiche, format commun consommé par
|
||||||
|
* FicheMiniCard / FichesPanel. Aucune mutation des types sources.
|
||||||
|
*
|
||||||
|
* Repli résumé (brief B3, le champ `resume_court` du batch B2b n'existe pas
|
||||||
|
* encore) : première phrase du premier champ non vide parmi une liste de
|
||||||
|
* candidats ordonnée par type, tronquée proprement à ~110 caractères sur un
|
||||||
|
* mot (jamais au milieu).
|
||||||
|
*/
|
||||||
|
import type { Org } from '~/types/org'
|
||||||
|
import type { StructureV2 } from '~/types/structure-v2'
|
||||||
|
|
||||||
|
export interface MiniFiche {
|
||||||
|
id: string | number
|
||||||
|
nom: string
|
||||||
|
resume: string
|
||||||
|
chips: string[]
|
||||||
|
echelle?: string
|
||||||
|
geoloc: boolean
|
||||||
|
kind: 'org' | 'structure'
|
||||||
|
}
|
||||||
|
|
||||||
|
const RESUME_MAX = 110
|
||||||
|
|
||||||
|
/** Première phrase d'un texte (coupe sur ". "/"! "/"? " ou fin de chaîne). */
|
||||||
|
function firstSentence(text: string): string {
|
||||||
|
const match = text.match(/^.*?[.!?](?=\s|$)/)
|
||||||
|
return (match ? match[0] : text).trim()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Tronque proprement sur un mot, jamais au milieu. */
|
||||||
|
function truncateOnWord(text: string, max = RESUME_MAX): string {
|
||||||
|
if (text.length <= max) return text
|
||||||
|
const slice = text.slice(0, max)
|
||||||
|
const lastSpace = slice.lastIndexOf(' ')
|
||||||
|
const cut = lastSpace > max * 0.4 ? slice.slice(0, lastSpace) : slice
|
||||||
|
return `${cut.trimEnd()}…`
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildResume(candidates: Array<string | null | undefined>): string {
|
||||||
|
const source = candidates.find((c) => !!c && c.trim().length > 0)
|
||||||
|
if (!source) return ''
|
||||||
|
return truncateOnWord(firstSentence(source.trim()))
|
||||||
|
}
|
||||||
|
|
||||||
|
function isStructure(source: Org | StructureV2): source is StructureV2 {
|
||||||
|
return 'famille_principale' in source
|
||||||
|
}
|
||||||
|
|
||||||
|
function orgFonctions(org: Org): string[] {
|
||||||
|
return (org.tags_fonction ?? '')
|
||||||
|
.split(',')
|
||||||
|
.map((f) => f.trim())
|
||||||
|
.filter(Boolean)
|
||||||
|
.slice(0, 3)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useFicheAdapter() {
|
||||||
|
function toMini(source: Org | StructureV2): MiniFiche {
|
||||||
|
if (isStructure(source)) {
|
||||||
|
return {
|
||||||
|
id: source.id,
|
||||||
|
nom: source.nom,
|
||||||
|
resume: buildResume([source.description_courte, source.description_longue]),
|
||||||
|
chips: (source.hashtags ?? []).slice(0, 3),
|
||||||
|
geoloc: source.latitude != null && source.longitude != null,
|
||||||
|
kind: 'structure',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: source.Id,
|
||||||
|
nom: source.nom,
|
||||||
|
resume: buildResume([source.description_enrichie, source.description]),
|
||||||
|
chips: orgFonctions(source),
|
||||||
|
echelle: source.echelle,
|
||||||
|
geoloc: source.latitude != null && source.longitude != null,
|
||||||
|
kind: 'org',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { toMini }
|
||||||
|
}
|
||||||
@@ -0,0 +1,150 @@
|
|||||||
|
<!--
|
||||||
|
Page de dev — story de test FicheMiniCard (B3-M2)
|
||||||
|
Sert uniquement à la vérification visuelle. Aucun lien vers cette page
|
||||||
|
nulle part dans l'app (pas dans app.vue, pas dans les pages) : navigation
|
||||||
|
directe par URL uniquement (/dev/fiche-mini-card).
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="story">
|
||||||
|
<h1 class="story__title">FicheMiniCard — story de test (B3-M2)</h1>
|
||||||
|
|
||||||
|
<section class="story__section">
|
||||||
|
<h2 class="story__heading">Org — cas nominal</h2>
|
||||||
|
<div class="story__grid">
|
||||||
|
<FicheMiniCard :fiche="orgNominal" @open="log('org-nominal')" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="story__section">
|
||||||
|
<h2 class="story__heading">Structure — cas nominal</h2>
|
||||||
|
<div class="story__grid">
|
||||||
|
<FicheMiniCard :fiche="structureNominal" @open="log('structure-nominal')" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="story__section">
|
||||||
|
<h2 class="story__heading">Cas limites</h2>
|
||||||
|
<div class="story__grid">
|
||||||
|
<FicheMiniCard :fiche="nomLong" @open="log('nom-long')" />
|
||||||
|
<FicheMiniCard :fiche="sansDescription" @open="log('sans-description')" />
|
||||||
|
<FicheMiniCard :fiche="sansChips" @open="log('sans-chips')" />
|
||||||
|
<FicheMiniCard :fiche="sansGeoloc" @open="log('sans-geoloc')" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="story__section">
|
||||||
|
<h2 class="story__heading">Dernier événement « open »</h2>
|
||||||
|
<p class="story__log">{{ lastOpen ?? '(aucun clic pour le moment)' }}</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { MiniFiche } from '~/composables/useFicheAdapter'
|
||||||
|
|
||||||
|
definePageMeta({ layout: false })
|
||||||
|
|
||||||
|
const lastOpen = ref<string | null>(null)
|
||||||
|
function log(label: string) {
|
||||||
|
lastOpen.value = label
|
||||||
|
}
|
||||||
|
|
||||||
|
const orgNominal: MiniFiche = {
|
||||||
|
id: 1,
|
||||||
|
nom: 'Réseau Bâti Vivant',
|
||||||
|
resume: 'Un réseau national d\'accompagnement juridique et technique pour les collectifs d\'auto-construction.',
|
||||||
|
chips: ['Juridique', 'Technique'],
|
||||||
|
echelle: 'National',
|
||||||
|
geoloc: true,
|
||||||
|
kind: 'org',
|
||||||
|
}
|
||||||
|
|
||||||
|
const structureNominal: MiniFiche = {
|
||||||
|
id: 'f1-rotor',
|
||||||
|
nom: 'Rotor',
|
||||||
|
resume: 'Rotor invente en Belgique le protocole de la déconstruction sélective comme geste politique contre la culture du tout-neuf.',
|
||||||
|
chips: ['#reemploi-structurel', '#plateforme-materiaux'],
|
||||||
|
geoloc: true,
|
||||||
|
kind: 'structure',
|
||||||
|
}
|
||||||
|
|
||||||
|
const nomLong: MiniFiche = {
|
||||||
|
id: 2,
|
||||||
|
nom: 'Collectif Régional de Réemploi et d\'Accompagnement des Chantiers Participatifs du Grand Ouest',
|
||||||
|
resume: 'Nom volontairement long pour vérifier l\'ellipse sur une ligne.',
|
||||||
|
chips: ['Chantier'],
|
||||||
|
echelle: 'Régional',
|
||||||
|
geoloc: true,
|
||||||
|
kind: 'org',
|
||||||
|
}
|
||||||
|
|
||||||
|
const sansDescription: MiniFiche = {
|
||||||
|
id: 3,
|
||||||
|
nom: 'Structure sans description',
|
||||||
|
resume: '',
|
||||||
|
chips: ['Formation'],
|
||||||
|
echelle: 'Local',
|
||||||
|
geoloc: true,
|
||||||
|
kind: 'org',
|
||||||
|
}
|
||||||
|
|
||||||
|
const sansChips: MiniFiche = {
|
||||||
|
id: 4,
|
||||||
|
nom: 'Structure sans chips',
|
||||||
|
resume: 'Une organisation dont aucune fonction ni hashtag n\'est renseigné dans la source.',
|
||||||
|
chips: [],
|
||||||
|
geoloc: true,
|
||||||
|
kind: 'org',
|
||||||
|
}
|
||||||
|
|
||||||
|
const sansGeoloc: MiniFiche = {
|
||||||
|
id: 5,
|
||||||
|
nom: 'Structure sans localisation',
|
||||||
|
resume: 'Une fiche nationale sans latitude ni longitude — invisible sur la carte, visible ici.',
|
||||||
|
chips: ['Administratif', 'Comptabilité'],
|
||||||
|
echelle: 'National',
|
||||||
|
geoloc: false,
|
||||||
|
kind: 'org',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.story {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--space-lg);
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
.story__title {
|
||||||
|
font-size: var(--fs-xl);
|
||||||
|
font-weight: var(--fw-bold);
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.story__section {
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.story__heading {
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
font-weight: var(--fw-semibold);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.story__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.story__log {
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user