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

161
assets/vue/app/domain/manga/presentation/components/HomeDisplaySettingsModal.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<TransitionRoot as="template" :show="isOpen">
<Dialog as="div" class="relative z-50" @close="$emit('close')">
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" />
</TransitionChild>
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<DialogPanel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-6 pb-6 pt-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div class="mb-6">
<DialogTitle as="h3" class="text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100">
Options d'affichage
</DialogTitle>
</div>
<div class="space-y-6">
<!-- Vue Grid -->
<section>
<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
Vue Grille
</h4>
<div class="space-y-3">
<ToggleRow
label="Titre"
:value="options.grid.showTitle"
@update="setOption('grid', 'showTitle', $event)" />
<ToggleRow
label="Année de publication"
:value="options.grid.showYear"
@update="setOption('grid', 'showYear', $event)" />
<ToggleRow
label="Auteur(s)"
:value="options.grid.showAuthor"
@update="setOption('grid', 'showAuthor', $event)" />
</div>
</section>
<div class="border-t border-gray-200 dark:border-gray-700" />
<!-- Vue Overview -->
<section>
<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
Vue Overview
</h4>
<div class="space-y-3">
<ToggleRow
label="Couverture"
:value="options.overview.showCover"
@update="setOption('overview', 'showCover', $event)" />
<ToggleRow
label="Statut"
:value="options.overview.showStatus"
@update="setOption('overview', 'showStatus', $event)" />
<ToggleRow
label="Description"
:value="options.overview.showDescription"
@update="setOption('overview', 'showDescription', $event)" />
<ToggleRow
label="Auteur(s)"
:value="options.overview.showAuthor"
@update="setOption('overview', 'showAuthor', $event)" />
<ToggleRow
label="Année de publication"
:value="options.overview.showYear"
@update="setOption('overview', 'showYear', $event)" />
</div>
</section>
<div class="border-t border-gray-200 dark:border-gray-700" />
<!-- Vue Table -->
<section>
<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
Vue Table
</h4>
<div class="space-y-3">
<ToggleRow
label="Monitoring"
:value="options.table.showMonitoring"
@update="setOption('table', 'showMonitoring', $event)" />
<ToggleRow
label="Source préférée"
:value="options.table.showPreferredSource"
@update="setOption('table', 'showPreferredSource', $event)" />
<ToggleRow
label="Progression chapitres"
:value="options.table.showChapters"
@update="setOption('table', 'showChapters', $event)" />
<ToggleRow
label="Statut"
:value="options.table.showStatus"
@update="setOption('table', 'showStatus', $event)" />
<ToggleRow
label="Auteur(s)"
:value="options.table.showAuthor"
@update="setOption('table', 'showAuthor', $event)" />
<ToggleRow
label="Année de publication"
:value="options.table.showYear"
@update="setOption('table', 'showYear', $event)" />
</div>
</section>
</div>
<div class="mt-6 flex justify-end">
<button
type="button"
class="inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
@click="$emit('close')"
>
Fermer
</button>
</div>
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
</TransitionRoot>
</template>
<script setup>
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
import ToggleRow from '../../../../shared/components/ui/ToggleRow.vue';
defineProps({
isOpen: {
type: Boolean,
required: true
},
options: {
type: Object,
required: true
}
});
const emit = defineEmits(['close', 'update']);
function setOption(view, key, value) {
emit('update', { view, key, value });
}
</script>

11
assets/vue/app/domain/manga/presentation/components/MangaCard.vue
View File

@@ -35,12 +35,13 @@
</div>
</div>
<!-- Titre + année -->
<!-- Titre + méta -->
<RouterLink
:to="{ name: 'manga-details', params: { id: manga.id } }"
class="block p-2">
<h3 class="text-xs font-medium text-gray-800 dark:text-gray-100 truncate">{{ manga.title }}</h3>
<span v-if="manga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
<h3 v-if="options.showTitle" class="text-xs font-medium text-gray-800 dark:text-gray-100 truncate">{{ manga.title }}</h3>
<span v-if="options.showYear && manga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
<span v-if="options.showAuthor && manga.authors?.length" class="text-xs text-gray-500 dark:text-gray-400 truncate block">{{ manga.authors[0] }}</span>
</RouterLink>
</div>
</template>
@@ -53,6 +54,10 @@ defineProps({
manga: {
type: Object,
required: true
},
options: {
type: Object,
default: () => ({ showTitle: true, showYear: true, showAuthor: false })
}
});

5
assets/vue/app/domain/manga/presentation/components/MangaGrid.vue
View File

@@ -4,6 +4,7 @@
v-for="manga in mangas"
:key="manga.id"
:manga="manga"
:options="options"
@edit="openEdit"
@sources="openSources"
@refresh="doRefresh" />
@@ -41,6 +42,10 @@ defineProps({
mangas: {
type: Array,
required: true
},
options: {
type: Object,
default: () => ({ showTitle: true, showYear: true, showAuthor: false })
}
});

17
assets/vue/app/domain/manga/presentation/components/MangaOverview.vue
View File

@@ -8,6 +8,7 @@
<!-- Cover -->
<img
v-if="options.showCover"
:src="manga.thumbnailUrl || manga.imageUrl || '/placeholder-cover.png'"
alt=""
class="h-36 w-24 object-cover flex-shrink-0 self-start"
@@ -23,13 +24,21 @@
{{ manga.title }}
</RouterLink>
<span
v-if="manga.status"
v-if="options.showStatus && manga.status"
class="text-xs font-medium px-2 py-0.5 rounded-full flex-shrink-0"
:class="statusClass(manga.status)">
{{ manga.status }}
</span>
</div>
<p v-if="manga.description" class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-4">
<div class="flex items-center gap-3 mt-1 flex-wrap">
<span v-if="options.showAuthor && manga.authors?.length" class="text-xs text-gray-500 dark:text-gray-400">
{{ manga.authors.join(', ') }}
</span>
<span v-if="options.showYear && manga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">
{{ manga.publicationYear }}
</span>
</div>
<p v-if="options.showDescription && manga.description" class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-4">
{{ manga.description }}
</p>
</div>
@@ -100,6 +109,10 @@ const props = defineProps({
mangas: {
type: Array,
required: true
},
options: {
type: Object,
default: () => ({ showCover: true, showStatus: true, showDescription: true, showAuthor: false, showYear: false })
}
});

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);