Mangarr/assets/vue/app/domain/system/presentation/components/LogItem.vue

<template>
    <div class="border-t border-gray-200 dark:border-gray-700 py-4 px-6">
        <!-- Ligne 1 : Titre manga + chapitre + badge statut + date + bouton supprimer -->
        <div class="flex items-start justify-between gap-4">
            <div class="flex items-baseline gap-2 min-w-0">
                <span class="font-semibold text-gray-900 dark:text-gray-100 truncate">
                    {{ log.context?.mangaTitle ?? 'Manga inconnu' }}
                </span>
                <span class="text-gray-400 dark:text-gray-500 text-sm shrink-0">•</span>
                <span class="text-sm text-gray-600 dark:text-gray-400 shrink-0">
                    Chapitre {{ log.context?.chapterNumber ?? '?' }}
                </span>
                <span
                    :class="[
                        'px-1.5 py-0.5 text-xs font-medium shrink-0',
                        log.status === 'completed'
                            ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
                            : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
                    ]">
                    {{ log.status === 'completed' ? 'Terminé' : 'Échec' }}
                </span>
            </div>
            <div class="flex items-center gap-3 shrink-0">
                <span class="text-xs text-gray-400 dark:text-gray-500">{{ formattedDate }}</span>
                <button
                    @click="$emit('delete', log.id)"
                    class="text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors"
                    title="Supprimer ce log">
                    <TrashIcon class="w-4 h-4" />
                </button>
            </div>
        </div>

        <!-- Ligne 2 : Source + slug + durée -->
        <div class="flex items-center justify-between mt-1 gap-4">
            <div class="flex items-center gap-3 min-w-0 text-sm text-gray-500 dark:text-gray-400">
                <!-- Domaine de la source (lien vers la page d'édition) -->
                <RouterLink
                    v-if="source"
                    :to="{ name: 'scrapper-edit', params: { id: source.id } }"
                    class="flex items-center gap-1 hover:text-blue-500 dark:hover:text-blue-400 transition-colors shrink-0">
                    <GlobeAltIcon class="w-3.5 h-3.5" />
                    <span class="font-mono">{{ cleanDomain }}</span>
                </RouterLink>
                <span v-else class="font-mono shrink-0">
                    ID {{ log.context?.sourceId ?? '-' }}
                </span>

                <!-- Badge type de scraping -->
                <span
                    v-if="source?.scrapingType"
                    :class="[
                        'px-1.5 py-0.5 text-xs font-medium shrink-0',
                        source.scrapingType === 'Javascript'
                            ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
                            : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
                    ]">
                    {{ source.scrapingType }}
                </span>

                <!-- Slug utilisé -->
                <span v-if="log.context?.slug" class="truncate text-gray-400 dark:text-gray-500">
                    slug : <span class="font-mono">{{ log.context.slug }}</span>
                </span>
            </div>

            <span v-if="duration !== null" class="text-xs text-gray-400 dark:text-gray-500 shrink-0">
                {{ duration }}
            </span>
        </div>

        <!-- Ligne 3 : Message d'erreur -->
        <div v-if="log.error" class="mt-2">
            <p
                :class="[
                    'text-sm font-mono text-red-600 dark:text-red-400',
                    !expanded && isLong ? 'line-clamp-1' : ''
                ]">
                ↳ {{ log.error }}
            </p>
            <button
                v-if="isLong"
                @click="expanded = !expanded"
                class="mt-1 text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                {{ expanded ? 'voir moins' : 'voir plus' }}
            </button>
        </div>
    </div>
</template>

<script setup>
import { GlobeAltIcon, TrashIcon } from '@heroicons/vue/24/outline';
import { computed, ref } from 'vue';
import { RouterLink } from 'vue-router';

const props = defineProps({
    log: {
        type: Object,
        required: true,
    },
    source: {
        type: Object,
        default: null,
    },
});

defineEmits(['delete']);

const expanded = ref(false);

const isLong = computed(() => props.log.error && props.log.error.length > 120);

const cleanDomain = computed(() => {
    if (!props.source?.baseUrl) return null;
    return props.source.baseUrl.replace(/^(https?:\/\/)?(www\.)?/, '').replace(/\/+$/, '');
});

const formattedDate = computed(() => {
    if (!props.log.createdAt) return '';
    const d = new Date(props.log.createdAt);
    const pad = n => String(n).padStart(2, '0');
    return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
});

const duration = computed(() => {
    if (!props.log.startedAt || !props.log.completedAt) return null;
    const ms = new Date(props.log.completedAt) - new Date(props.log.startedAt);
    if (ms < 0) return null;
    return `${(ms / 1000).toLocaleString('fr-FR', { maximumFractionDigits: 1 })}s`;
});
</script>