colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(home): toolbar filtre/affichage et modale options d'affichage

Browse Source 
- Correction du dropdown toolbar : prop align (left/right) pour éviter le débordement hors écran côté droit
- Filtre de collection par statut (all/completed/ongoing) persisté dans userPreferencesStore
- toolbarConfig rendu réactif (computed) avec isSelected sur Filter, Sort et View
- Modale Options d'affichage par vue (Grille, Overview, Table) avec toggles persistés
- Composant ToggleRow réutilisable
- Normalisation author → authors dans l'entité Manga (l'API renvoie author string)
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2026-03-27 16:25:45 +01:00
parent 214f470e77
commit e525c9b7bd
12 changed files with 331 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
assets/vue/app/domain/manga/presentation/components/MangaTable.vue
View File

@@ -4,10 +4,13 @@
<table class="w-full text-sm">
<thead>
<tr class="bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<th class="w-10 px-4 py-3"></th>
<th v-if="options.showMonitoring" class="w-10 px-4 py-3"></th>
<th class="py-3 pr-4 text-left font-medium">Titre</th>
<th class="py-3 pr-4 text-left font-medium w-44">Source préférée</th>
<th class="py-3 pr-4 text-left font-medium w-44">Chapitres</th>
<th v-if="options.showAuthor" class="py-3 pr-4 text-left font-medium w-36">Auteur</th>
<th v-if="options.showYear" class="py-3 pr-4 text-left font-medium w-20">Année</th>
<th v-if="options.showStatus" class="py-3 pr-4 text-left font-medium w-28">Statut</th>
<th v-if="options.showPreferredSource" class="py-3 pr-4 text-left font-medium w-44">Source préférée</th>
<th v-if="options.showChapters" class="py-3 pr-4 text-left font-medium w-44">Chapitres</th>
<th class="py-3 px-4 text-right font-medium w-28">Actions</th>
</tr>
</thead>
@@ -18,7 +21,7 @@
class="hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors">
<!-- Monitoring -->
<td class="px-4 py-3 text-center">
<td v-if="options.showMonitoring" class="px-4 py-3 text-center">
<button
:title="manga.monitored ? 'Monitoring actif — cliquer pour désactiver' : 'Monitoring inactif — cliquer pour activer'"
:class="manga.monitored
@@ -41,13 +44,34 @@
</RouterLink>
</td>
<!-- Auteur -->
<td v-if="options.showAuthor" class="py-3 pr-4">
<span class="text-sm text-gray-600 dark:text-gray-300">{{ manga.authors?.join(', ') || '—' }}</span>
</td>
<!-- Année -->
<td v-if="options.showYear" class="py-3 pr-4">
<span class="text-sm text-gray-600 dark:text-gray-300">{{ manga.publicationYear || '—' }}</span>
</td>
<!-- Statut -->
<td v-if="options.showStatus" class="py-3 pr-4">
<span
v-if="manga.status"
class="text-xs font-medium px-2 py-0.5 rounded-full"
:class="statusClass(manga.status)">
{{ manga.status }}
</span>
<span v-else class="text-gray-400 dark:text-gray-600 text-xs">—</span>
</td>
<!-- Source préférée -->
<td class="py-3 pr-4">
<td v-if="options.showPreferredSource" class="py-3 pr-4">
<MangaPreferredSourceCell :manga-id="manga.id" />
</td>
<!-- Chapitres — barre de progression -->
<td class="py-3 pr-4">
<td v-if="options.showChapters" class="py-3 pr-4">
<div v-if="manga.chaptersTotal > 0">
<div class="flex items-center justify-between mb-1">
<span class="text-xs tabular-nums text-gray-500 dark:text-gray-400">
@@ -139,9 +163,19 @@ const props = defineProps({
mangas: {
type: Array,
required: true
},
options: {
type: Object,
default: () => ({ showMonitoring: true, showPreferredSource: true, showChapters: true, showStatus: false, showAuthor: false, showYear: false })
}
});
function statusClass(status) {
if (status === 'ongoing') return 'text-blue-600 bg-blue-50 dark:bg-blue-900/20';
if (status === 'completed') return 'text-green-600 bg-green-50 dark:bg-green-900/20';
return 'text-gray-500 bg-gray-100 dark:bg-gray-700';
}
function progressPercent(manga) {
if (!manga.chaptersTotal) return 0;
return Math.round((manga.chaptersScraped / manga.chaptersTotal) * 100);