101 lines
3.1 KiB
Vue
101 lines
3.1 KiB
Vue
<template>
|
|
<section class="mb-6">
|
|
<h2
|
|
class="text-lg font-semibold mb-4"
|
|
style="color: var(--nav-text);"
|
|
>
|
|
Commentaires
|
|
<span
|
|
v-if="comments.length"
|
|
class="ml-2 text-sm font-normal"
|
|
style="color: var(--nav-text-muted);"
|
|
>({{ comments.length }})</span>
|
|
</h2>
|
|
|
|
<!-- Texte d'intro -->
|
|
<p class="text-sm italic mb-4" style="color: var(--nav-text-muted);">
|
|
Les commentaires servent à confirmer ou attester de la fiabilité des services des organismes référencés.
|
|
</p>
|
|
|
|
<!-- Chargement -->
|
|
<div v-if="pending" class="text-sm py-4" style="color: var(--nav-text-muted);">
|
|
Chargement des commentaires…
|
|
</div>
|
|
|
|
<!-- Liste -->
|
|
<div v-else-if="comments.length" class="space-y-3">
|
|
<article
|
|
v-for="comment in comments"
|
|
:key="comment.Id"
|
|
class="rounded-xl p-4"
|
|
style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);"
|
|
>
|
|
<!-- Méta auteur + date -->
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<!-- Avatar initiale -->
|
|
<div
|
|
class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold shrink-0"
|
|
style="background: var(--nav-primary); color: var(--nav-text-on-primary);"
|
|
>{{ initiale(comment.auteur_pseudo) }}</div>
|
|
|
|
<span class="text-sm font-medium" style="color: var(--nav-text);">
|
|
{{ comment.auteur_pseudo || 'Anonyme' }}
|
|
</span>
|
|
|
|
<span v-if="comment.submitted_at" class="text-xs ml-auto" style="color: var(--nav-text-muted);">
|
|
{{ formatDate(comment.submitted_at) }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Contenu -->
|
|
<p class="text-sm leading-relaxed" style="color: var(--nav-text);">{{ comment.contenu }}</p>
|
|
</article>
|
|
</div>
|
|
|
|
<!-- Vide -->
|
|
<p v-else class="text-sm italic py-2" style="color: var(--nav-text-muted);">
|
|
Aucun commentaire pour le moment. Partage ton expérience ci-dessous.
|
|
</p>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Comment {
|
|
Id: number
|
|
auteur_pseudo?: string
|
|
contenu: string
|
|
orga_id: number
|
|
published?: boolean
|
|
submitted_at?: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
orgId: number
|
|
refresh?: number // incrémenter pour forcer un rechargement
|
|
}>()
|
|
|
|
const { data, pending, refresh } = await useFetch<{ list: Comment[] }>(
|
|
`/api/comment/${props.orgId}`,
|
|
{ key: `comments-${props.orgId}` }
|
|
)
|
|
|
|
const comments = computed<Comment[]>(() => data.value?.list ?? [])
|
|
|
|
// Rechargement si le parent incrément refresh
|
|
watch(() => props.refresh, () => {
|
|
refresh()
|
|
})
|
|
|
|
// ── Helpers ─────────────────────────────────────────────────────────────
|
|
function initiale(pseudo?: string): string {
|
|
if (!pseudo) return '?'
|
|
return pseudo.trim().charAt(0).toUpperCase()
|
|
}
|
|
|
|
function formatDate(iso?: string): string {
|
|
if (!iso) return ''
|
|
const d = new Date(iso)
|
|
return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
|
|
}
|
|
</script>
|