feat(taff): page /trouver-du-taf + types + JSON + PlatformeTaffCard sur main
Cherry-pick depuis feat/aep-taff-v1 — 24 plateformes scorées, page Jobs complète. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules Neny
154
components/PlatformeTaffCard.vue
Normal file
154
components/PlatformeTaffCard.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full text-left rounded-xl border transition-all duration-200 hover:shadow-md focus-visible:outline-none"
|
||||
:style="`
|
||||
background: var(--nav-surface);
|
||||
border-color: ${tagBorderColor};
|
||||
border-left: 4px solid ${tagAccentColor};
|
||||
`"
|
||||
@click="$emit('open', plateforme)"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-2 px-4 pt-4 pb-2">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap mb-0.5">
|
||||
<span
|
||||
class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold shrink-0"
|
||||
:style="`background: ${tagBgColor}; color: ${tagTextColor};`"
|
||||
>
|
||||
<span>{{ tagEmoji }}</span>
|
||||
<span>{{ tagLabel }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-if="plateforme.type === 'appel-offre-public'"
|
||||
class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium shrink-0"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
|
||||
>AO public</span>
|
||||
</div>
|
||||
<h3 class="font-semibold text-base leading-snug" style="color: var(--nav-text);">
|
||||
{{ plateforme.nom }}
|
||||
</h3>
|
||||
</div>
|
||||
<a
|
||||
:href="plateforme.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="shrink-0 flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-opacity hover:opacity-70"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text);"
|
||||
@click.stop
|
||||
title="Visiter le site"
|
||||
>
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>
|
||||
Visiter
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Description courte -->
|
||||
<p class="px-4 pb-3 text-sm leading-relaxed line-clamp-2" style="color: var(--nav-text-muted);">
|
||||
{{ plateforme.description_courte }}
|
||||
</p>
|
||||
|
||||
<!-- Scoring axes -->
|
||||
<div class="px-4 pb-3 flex items-center gap-2 flex-wrap">
|
||||
<template v-for="axe in axes" :key="axe.id">
|
||||
<span
|
||||
v-if="plateforme.scoring[axe.id] !== null"
|
||||
class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
:style="`background: ${axeScoreBg(plateforme.scoring[axe.id])}; color: ${axeScoreText(plateforme.scoring[axe.id])};`"
|
||||
:title="axe.label"
|
||||
>
|
||||
<span>{{ axe.icon }}</span>
|
||||
<span>{{ plateforme.scoring[axe.id] }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Footer: secteurs + coût -->
|
||||
<div class="px-4 pb-3 flex items-center gap-2 flex-wrap">
|
||||
<span
|
||||
v-for="s in plateforme.secteurs_servis.slice(0, 3)"
|
||||
:key="s"
|
||||
class="inline-block px-2 py-0.5 rounded-full text-xs"
|
||||
style="background: var(--nav-bg); color: var(--nav-text-muted); border: 1px solid var(--nav-bg-alt);"
|
||||
>{{ secteurLabel(s) }}</span>
|
||||
<span
|
||||
v-if="plateforme.secteurs_servis.length > 3"
|
||||
class="text-xs"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>+{{ plateforme.secteurs_servis.length - 3 }}</span>
|
||||
<span class="ml-auto text-xs font-medium" style="color: var(--nav-text-muted);">
|
||||
{{ coutLabel(plateforme.cout_entree) }}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PlateformeTaff } from '~/types/plateforme-taff'
|
||||
|
||||
const props = defineProps<{ plateforme: PlateformeTaff }>()
|
||||
defineEmits<{ open: [p: PlateformeTaff] }>()
|
||||
|
||||
const axes = [
|
||||
{ id: 'remuneration' as const, icon: '🪙', label: 'Rémunération' },
|
||||
{ id: 'transparence' as const, icon: '🔍', label: 'Transparence' },
|
||||
{ id: 'pratiques' as const, icon: '⚖️', label: 'Pratiques pro' },
|
||||
{ id: 'ecologie' as const, icon: '🌿', label: 'Écologie' },
|
||||
{ id: 'matching' as const, icon: '🎯', label: 'Matching' },
|
||||
]
|
||||
|
||||
const TAG_CONFIG = {
|
||||
'recommande': { emoji: '✅', label: 'Recommandé AEP', accent: '#5a7a4a', bg: 'rgba(90,122,74,0.12)', text: '#3d5534', border: 'rgba(90,122,74,0.25)' },
|
||||
'sous-reserve': { emoji: '⚠️', label: 'Sous réserve', accent: '#c4a472', bg: 'rgba(196,164,114,0.15)', text: '#7a5f2a', border: 'rgba(196,164,114,0.35)' },
|
||||
'a-eviter': { emoji: '❌', label: 'À éviter', accent: '#a85d3e', bg: 'rgba(168,93,62,0.12)', text: '#7a3322', border: 'rgba(168,93,62,0.25)' },
|
||||
}
|
||||
|
||||
const tagConfig = computed(() => TAG_CONFIG[props.plateforme.scoring.tag_global] ?? TAG_CONFIG['sous-reserve'])
|
||||
const tagEmoji = computed(() => tagConfig.value.emoji)
|
||||
const tagLabel = computed(() => tagConfig.value.label)
|
||||
const tagAccentColor = computed(() => tagConfig.value.accent)
|
||||
const tagBgColor = computed(() => tagConfig.value.bg)
|
||||
const tagTextColor = computed(() => tagConfig.value.text)
|
||||
const tagBorderColor = computed(() => tagConfig.value.border)
|
||||
|
||||
function axeScoreBg(score: string | null) {
|
||||
if (score === '✅') return 'rgba(90,122,74,0.12)'
|
||||
if (score === '⚠️') return 'rgba(196,164,114,0.15)'
|
||||
if (score === '❌') return 'rgba(168,93,62,0.12)'
|
||||
return 'var(--nav-bg-alt)'
|
||||
}
|
||||
|
||||
function axeScoreText(score: string | null) {
|
||||
if (score === '✅') return '#3d5534'
|
||||
if (score === '⚠️') return '#7a5f2a'
|
||||
if (score === '❌') return '#7a3322'
|
||||
return 'var(--nav-text-muted)'
|
||||
}
|
||||
|
||||
const SECTEUR_LABELS: Record<string, string> = {
|
||||
'renovation': 'Rénovation',
|
||||
'construction-neuve': 'Neuf',
|
||||
'urbanisme': 'Urbanisme',
|
||||
'architecture-interieure': 'Archi intérieure',
|
||||
'paysage': 'Paysage',
|
||||
'mar-conseil': 'MAR/Conseil',
|
||||
'transversal': 'Transversal',
|
||||
}
|
||||
|
||||
function secteurLabel(s: string) { return SECTEUR_LABELS[s] ?? s }
|
||||
|
||||
const COUT_LABELS: Record<string, string> = {
|
||||
'gratuit': 'Gratuit',
|
||||
'freemium': 'Freemium',
|
||||
'abonnement': 'Abonnement',
|
||||
'lead-paye': 'Lead payant',
|
||||
'commission': 'Commission',
|
||||
}
|
||||
|
||||
function coutLabel(c: string) { return COUT_LABELS[c] ?? c }
|
||||
</script>
|
||||
Reference in New Issue
Block a user