58 lines
2.5 KiB
Vue
58 lines
2.5 KiB
Vue
<script setup>
|
|
import { usePage } from '@inertiajs/vue3'
|
|
import StatutBadge from './StatutBadge.vue'
|
|
|
|
defineProps({
|
|
historique: { type: Array, required: true },
|
|
})
|
|
|
|
const page = usePage()
|
|
const statuts = page.props.config?.statuts ?? {}
|
|
|
|
function formatDate(dt) {
|
|
if (!dt) return ''
|
|
return new Intl.DateTimeFormat('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }).format(new Date(dt))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flow-root">
|
|
<ul class="-mb-8">
|
|
<li v-for="(entry, idx) in historique" :key="entry.id" class="relative pb-8">
|
|
<!-- Vertical line (except last) -->
|
|
<span v-if="idx !== historique.length - 1"
|
|
class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true" />
|
|
|
|
<div class="relative flex items-start space-x-3">
|
|
<!-- Dot -->
|
|
<div class="relative flex h-8 w-8 items-center justify-center rounded-full bg-white ring-8 ring-white">
|
|
<div class="h-3 w-3 rounded-full bg-blue-500 ring-2 ring-white" />
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex flex-wrap items-center gap-2 text-sm">
|
|
<span class="font-medium text-gray-900">{{ entry.user?.name ?? 'Système' }}</span>
|
|
<template v-if="entry.ancien_statut">
|
|
<StatutBadge :statut="entry.ancien_statut" size="sm" />
|
|
<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</template>
|
|
<StatutBadge :statut="entry.nouveau_statut" size="sm" />
|
|
</div>
|
|
<p v-if="entry.commentaire" class="mt-1 text-sm text-gray-600 italic">
|
|
"{{ entry.commentaire }}"
|
|
</p>
|
|
<time class="mt-0.5 block text-xs text-gray-400">{{ formatDate(entry.created_at) }}</time>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<p v-if="!historique.length" class="text-sm text-gray-400 italic text-center py-4">
|
|
Aucun historique disponible.
|
|
</p>
|
|
</div>
|
|
</template>
|