feat(codev): M5 phase 1 - mode demo factice + build local OK
This commit is contained in:
Jules Neny
367
pages/codev/demo.vue
Normal file
367
pages/codev/demo.vue
Normal file
@@ -0,0 +1,367 @@
|
|||||||
|
<template>
|
||||||
|
<div class="codev-demo">
|
||||||
|
|
||||||
|
<header class="demo-header">
|
||||||
|
<span class="demo-badge">DEMO</span>
|
||||||
|
<h1>Co-developpement - exemple</h1>
|
||||||
|
<p class="subtitle">10 personnes fictives. Clique sur un mode pour voir les matchs.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<ClientOnly>
|
||||||
|
<CodevGraph
|
||||||
|
:fiches="fiches"
|
||||||
|
:matches="matches"
|
||||||
|
:mode="mode"
|
||||||
|
/>
|
||||||
|
<template #fallback>
|
||||||
|
<div class="graph-fallback">Chargement du graphe...</div>
|
||||||
|
</template>
|
||||||
|
</ClientOnly>
|
||||||
|
|
||||||
|
<!-- Bandeau info mode actif -->
|
||||||
|
<div v-if="mode !== 'none'" class="mode-banner">
|
||||||
|
<span>
|
||||||
|
Mode {{ MODE_LABELS[mode] }} actif -
|
||||||
|
{{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
|
||||||
|
</span>
|
||||||
|
<button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3 boutons matching identiques a carto.vue -->
|
||||||
|
<div class="matching-controls">
|
||||||
|
<button
|
||||||
|
:class="{ active: mode === 'solution' }"
|
||||||
|
style="--mode-color: #22c55e"
|
||||||
|
@click="setMode('solution')"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Solution
|
||||||
|
<span class="hint">besoin - offre</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
:class="{ active: mode === 'alliance' }"
|
||||||
|
style="--mode-color: #f97316"
|
||||||
|
@click="setMode('alliance')"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Alliance
|
||||||
|
<span class="hint">besoins partages</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
:class="{ active: mode === 'surprise' }"
|
||||||
|
style="--mode-color: #3b82f6"
|
||||||
|
@click="setMode('surprise')"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Surprise
|
||||||
|
<span class="hint">offres partagees</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="mode !== 'none'"
|
||||||
|
class="reset"
|
||||||
|
@click="setMode('none')"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Effacer
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { CodevFiche, CodevMatch } from '~/types/codev'
|
||||||
|
import { computeMatches } from '~/utils/codev/matching'
|
||||||
|
|
||||||
|
// 10 fiches factices - hashtags alignes pour demontrer les 3 modes :
|
||||||
|
//
|
||||||
|
// Solution : Lea(besoin coaching) -> Maya(offre coaching)
|
||||||
|
// Sami(besoin formation+vente) -> Ines(offre vente+formation)
|
||||||
|
// Tom(besoin tiers-lieu) -> Zoe(offre facilitation+tiers-lieu)
|
||||||
|
//
|
||||||
|
// Alliance : Lea + Maya (hashtag coaching commun dans besoins)
|
||||||
|
// Sami + Kenji (hashtag formation+vente dans besoins)
|
||||||
|
// Tom + Zoe (hashtag tiers-lieu dans besoins)
|
||||||
|
//
|
||||||
|
// Surprise : Lea + Zoe (hashtag facilitation dans offres)
|
||||||
|
// Tom + Roman (hashtag archi dans offres)
|
||||||
|
|
||||||
|
const FICHES_DEMO: CodevFiche[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
nom: 'Lea',
|
||||||
|
besoin: 'Structurer mon offre de coaching pour la lancer en septembre',
|
||||||
|
offre: 'Animation de groupes, facilitation de cercles de parole',
|
||||||
|
hashtags: ['coaching', 'facilitation'],
|
||||||
|
created_at: '2026-05-08T10:00:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
nom: 'Sami',
|
||||||
|
besoin: 'Comprendre comment vendre une formation en ligne',
|
||||||
|
offre: 'Developpement web, sites Astro et Nuxt',
|
||||||
|
hashtags: ['formation', 'vente'],
|
||||||
|
created_at: '2026-05-08T10:01:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
nom: 'Ines',
|
||||||
|
besoin: 'Aide pour la facilitation de mes ateliers ecriture',
|
||||||
|
offre: 'Vente de formations en ligne, marketing direct',
|
||||||
|
hashtags: ['vente', 'formation'],
|
||||||
|
created_at: '2026-05-08T10:02:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
nom: 'Tom',
|
||||||
|
besoin: 'Trouver un associe pour un projet de tiers-lieu',
|
||||||
|
offre: 'Architecture eco-responsable, conception bioclimatique',
|
||||||
|
hashtags: ['tiers-lieu', 'archi'],
|
||||||
|
created_at: '2026-05-08T10:03:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
nom: 'Maya',
|
||||||
|
besoin: 'Structurer mon offre de coaching freelance',
|
||||||
|
offre: 'Coaching de carriere, accompagnement transition pro',
|
||||||
|
hashtags: ['coaching', 'carriere'],
|
||||||
|
created_at: '2026-05-08T10:04:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
nom: 'Kenji',
|
||||||
|
besoin: 'Apprendre a vendre mes formations sans me sentir vendeur',
|
||||||
|
offre: 'Photographie, direction artistique de projets editoriaux',
|
||||||
|
hashtags: ['formation', 'vente'],
|
||||||
|
created_at: '2026-05-08T10:05:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
nom: 'Zoe',
|
||||||
|
besoin: 'Trouver des associes pour mon projet de tiers-lieu rural',
|
||||||
|
offre: 'Animation et facilitation de collectifs, intelligence collective',
|
||||||
|
hashtags: ['tiers-lieu', 'facilitation'],
|
||||||
|
created_at: '2026-05-08T10:06:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
nom: 'Nael',
|
||||||
|
besoin: 'Construire un site web pour ma formation',
|
||||||
|
offre: 'Strategie marketing, lancement de produits digitaux',
|
||||||
|
hashtags: ['web', 'strategie'],
|
||||||
|
created_at: '2026-05-08T10:07:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
nom: 'Eva',
|
||||||
|
besoin: 'Lancer mon offre de coaching avec une page de vente',
|
||||||
|
offre: 'Ecriture longue forme, articles essais et tribunes',
|
||||||
|
hashtags: ['coaching', 'ecriture'],
|
||||||
|
created_at: '2026-05-08T10:08:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
nom: 'Roman',
|
||||||
|
besoin: 'Ameliorer mes articles de blog sur la renovation',
|
||||||
|
offre: 'Architecture, plans techniques pour renovation energetique',
|
||||||
|
hashtags: ['archi', 'reno'],
|
||||||
|
created_at: '2026-05-08T10:09:00Z',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const fiches = ref(FICHES_DEMO)
|
||||||
|
const matches = ref<CodevMatch[]>([])
|
||||||
|
const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')
|
||||||
|
|
||||||
|
const MODE_LABELS: Record<string, string> = {
|
||||||
|
solution: 'Solution',
|
||||||
|
alliance: 'Alliance',
|
||||||
|
surprise: 'Surprise',
|
||||||
|
}
|
||||||
|
|
||||||
|
useHead({ title: 'Demo - Co-developpement' })
|
||||||
|
|
||||||
|
function setMode(newMode: typeof mode.value) {
|
||||||
|
mode.value = newMode
|
||||||
|
if (newMode === 'none') {
|
||||||
|
matches.value = []
|
||||||
|
} else {
|
||||||
|
matches.value = computeMatches(fiches.value, newMode)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.codev-demo {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--nav-bg, #fafafa);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1.25rem 1rem 2rem;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── En-tete ── */
|
||||||
|
|
||||||
|
.demo-header {
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-badge {
|
||||||
|
display: inline-block;
|
||||||
|
background: #f97316;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-header h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--nav-text, #1a1a2e);
|
||||||
|
margin: 0 0 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Fallback ── */
|
||||||
|
|
||||||
|
.graph-fallback {
|
||||||
|
width: 100%;
|
||||||
|
height: 70vh;
|
||||||
|
min-height: 320px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
background: var(--nav-bg-alt, #f3f4f6);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Bandeau mode actif ── */
|
||||||
|
|
||||||
|
.mode-banner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.5rem 0.875rem;
|
||||||
|
background: #f0fdf4;
|
||||||
|
border: 1px solid #bbf7d0;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #166534;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-clear {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #166534;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #166534;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.2rem 0.6rem;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-clear:hover {
|
||||||
|
background: #166534;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Boutons matching ── */
|
||||||
|
|
||||||
|
.matching-controls {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border-top: 1px solid #e5e7eb;
|
||||||
|
margin: 0 -1rem -2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button {
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px 8px;
|
||||||
|
border: 1px solid #d0d4dc;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: white;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button .hint {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.active {
|
||||||
|
background: var(--mode-color, #1B4436);
|
||||||
|
color: white;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.active .hint {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.reset {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: #f3f4f6;
|
||||||
|
border-color: #d0d4dc;
|
||||||
|
color: #374151;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.reset:hover {
|
||||||
|
background: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.matching-controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
margin: 0 -0.75rem -1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.reset {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Mobile ── */
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.codev-demo {
|
||||||
|
padding: 1rem 0.75rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-header h1 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user