74 lines
4.7 KiB
Vue
74 lines
4.7 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { getStatusLabel, getModelLabel } from '@/Utils/statuses';
|
|
|
|
const props = defineProps({
|
|
activities: Array,
|
|
});
|
|
|
|
const formatEvent = (activity) => {
|
|
const events = {
|
|
'created': 'Création',
|
|
'updated': 'Mise à jour',
|
|
'deleted': 'Suppression',
|
|
};
|
|
return events[activity.description] || activity.description;
|
|
};
|
|
|
|
const getBadgeColor = (description) => {
|
|
if (description === 'created') return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
|
|
if (description === 'updated') return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
|
|
return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Historique d'activité</h3>
|
|
</div>
|
|
<div class="border-t border-gray-200 dark:border-gray-700 px-4 py-5 sm:p-6">
|
|
<div class="flow-root">
|
|
<ul role="list" class="-mb-8">
|
|
<li v-for="(activity, index) in activities" :key="activity.id">
|
|
<div class="relative pb-8">
|
|
<span v-if="index !== activities.length - 1" class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-700" aria-hidden="true"></span>
|
|
<div class="relative flex space-x-3">
|
|
<div>
|
|
<span :class="[getBadgeColor(activity.description), 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white dark:ring-gray-800']">
|
|
<svg v-if="activity.description === 'created'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
|
|
<svg v-else-if="activity.description === 'updated'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
|
|
<svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
</span>
|
|
</div>
|
|
<div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
<span class="font-medium text-gray-900 dark:text-gray-100">{{ activity.causer?.name || 'Système' }}</span>
|
|
{{ activity.description === 'created' ? ' a créé ' : ' a mis à jour ' }}
|
|
<span class="font-medium text-gray-900 dark:text-gray-100">
|
|
{{ getModelLabel(activity.subject_type) }}
|
|
</span>
|
|
</p>
|
|
<div v-if="activity.properties?.attributes" class="mt-2 text-xs text-gray-400 bg-gray-50 dark:bg-gray-900/50 p-2 rounded">
|
|
<div v-for="(val, key) in activity.properties.attributes" :key="key">
|
|
<span v-if="key === 'status'">Nouveau statut: <span class="font-bold text-blue-500">{{ getStatusLabel(val) }}</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400">
|
|
<time :datetime="activity.created_at">{{ new Date(activity.created_at).toLocaleString() }}</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li v-if="activities.length === 0" class="text-sm text-gray-500 italic pb-4">
|
|
Aucune activité enregistrée.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|