feat(home): toolbar filtre/affichage et modale options d'affichage
- 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
parent
214f470e77
commit
e525c9b7bd
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user