Files
Mangarr/assets/vue/app/domain/system/presentation/components/MangasStatusCard.vue
ext.jeremy.guillot@maxicoffee.domains ca8791cc0d feat(system): page Status avec endpoint API Platform et composants Vue
- Nouveau domaine System/Domain/Model/SystemStatus (value object)
- QueryHandler agrégeant métriques mangas, chapitres, jobs (global/24h/7j), stockage et sources
- Endpoint GET /api/system/status via API Platform (singleton)
- Calcul de l'espace disque par RecursiveDirectoryIterator sur public/images
- Page Vue /system/status avec 6 cards (Mangas, Chapitres, Jobs, Stockage, Sources, Système)
- Nettoyage du router : suppression des PlaceholderComponent et routes placeholder
- Sidebar : suppression des entrées sans page réelle
2026-03-17 22:04:48 +01:00

34 lines
1.2 KiB
Vue

<template>
<StatusCard title="Mangas" :icon="BookOpenIcon">
<div class="flex items-baseline gap-2 mb-3">
<span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.totalMangas }}</span>
<span class="text-sm text-gray-500">total</span>
<span class="ml-auto text-sm text-blue-600 dark:text-blue-400">{{ status.monitoredMangas }} suivis</span>
</div>
<div class="flex flex-wrap gap-2">
<span
v-for="(count, label) in status.mangasByStatus"
:key="label"
class="px-2 py-0.5 text-xs rounded-full border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400">
{{ label }}: {{ count }}
</span>
<span v-if="!hasStatuses" class="text-xs text-gray-400">Aucun statut disponible</span>
</div>
</StatusCard>
</template>
<script setup>
import { computed } from 'vue';
import { BookOpenIcon } from '@heroicons/vue/24/outline';
import StatusCard from './StatusCard.vue';
const props = defineProps({
status: {
type: Object,
required: true,
},
});
const hasStatuses = computed(() => Object.keys(props.status.mangasByStatus ?? {}).length > 0);
</script>