102 lines
3.2 KiB
Vue
102 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
|
|
<div class="container mx-auto px-4">
|
|
<MangaGrid v-if="viewMode === 'grid'" :mangas="collection?.items || []" />
|
|
<MangaList
|
|
v-else-if="viewMode === 'list'"
|
|
:mangas="collection?.items || []"
|
|
@manga-click="handleMangaClick" />
|
|
<div
|
|
v-if="isBackgroundLoading"
|
|
class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg">
|
|
Mise à jour en cours...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ArrowPathIcon,
|
|
ArrowsUpDownIcon,
|
|
Cog6ToothIcon,
|
|
EyeIcon,
|
|
FunnelIcon,
|
|
MagnifyingGlassIcon
|
|
} from '@heroicons/vue/24/outline';
|
|
import { storeToRefs } from 'pinia';
|
|
import { onMounted, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
|
|
import { useMangaStore } from '../../application/store/mangaStore';
|
|
import MangaGrid from '../components/MangaGrid.vue';
|
|
import MangaList from '../components/MangaList.vue';
|
|
|
|
const router = useRouter();
|
|
const mangaStore = useMangaStore();
|
|
|
|
const {
|
|
collection,
|
|
loadingCollection: loading,
|
|
errorCollection: error,
|
|
isBackgroundLoadingCollection: isBackgroundLoading
|
|
} = storeToRefs(mangaStore);
|
|
|
|
const viewMode = ref('grid');
|
|
|
|
onMounted(() => {
|
|
mangaStore.loadCollection();
|
|
});
|
|
|
|
const handleMangaClick = manga => {
|
|
router.push({ name: 'manga-details', params: { id: manga.id } });
|
|
};
|
|
|
|
const toolbarConfig = {
|
|
leftSection: [
|
|
{
|
|
icon: ArrowPathIcon,
|
|
label: 'Refresh',
|
|
type: 'button',
|
|
onClick: () => mangaStore.refreshCollectionInBackground(),
|
|
active: isBackgroundLoading.value
|
|
},
|
|
{ icon: MagnifyingGlassIcon, label: 'Search', type: 'button', onClick: () => {} }
|
|
],
|
|
rightSection: [
|
|
{ icon: Cog6ToothIcon, type: 'button', onClick: () => {} },
|
|
{
|
|
icon: EyeIcon,
|
|
type: 'dropdown',
|
|
label: 'View',
|
|
items: [
|
|
{ label: 'List', onClick: () => (viewMode.value = 'list') },
|
|
{ label: 'Grid', onClick: () => (viewMode.value = 'grid') }
|
|
]
|
|
},
|
|
{
|
|
icon: ArrowsUpDownIcon,
|
|
type: 'dropdown',
|
|
label: 'Sort',
|
|
items: [
|
|
{ label: 'Title', onClick: () => {} },
|
|
{ label: 'Author', onClick: () => {} },
|
|
{ label: 'Status', onClick: () => {} },
|
|
{ label: 'Year', onClick: () => {} }
|
|
]
|
|
},
|
|
{
|
|
icon: FunnelIcon,
|
|
type: 'dropdown',
|
|
label: 'Filter',
|
|
items: [
|
|
{ label: 'All', onClick: () => {} },
|
|
{ label: 'Completed', onClick: () => {} },
|
|
{ label: 'In Progress', onClick: () => {} }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
</script>
|