91 lines
2.8 KiB
Vue
91 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
|
|
<div class="container mx-auto px-4">
|
|
<MangaGrid :mangas="collection?.items || []" />
|
|
<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 { onMounted } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useMangaStore } from '../../application/store/mangaStore';
|
|
import MangaGrid from '../components/MangaGrid.vue';
|
|
import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
|
|
import {
|
|
ArrowPathIcon,
|
|
MagnifyingGlassIcon,
|
|
Cog6ToothIcon,
|
|
EyeIcon,
|
|
ArrowsUpDownIcon,
|
|
FunnelIcon
|
|
} from '@heroicons/vue/24/outline';
|
|
|
|
const router = useRouter();
|
|
const mangaStore = useMangaStore();
|
|
|
|
const {
|
|
collection,
|
|
loadingCollection: loading,
|
|
errorCollection: error,
|
|
isBackgroundLoadingCollection: isBackgroundLoading
|
|
} = storeToRefs(mangaStore);
|
|
|
|
onMounted(() => {
|
|
mangaStore.loadCollection();
|
|
});
|
|
|
|
const toolbarConfig = {
|
|
leftSection: [
|
|
{
|
|
icon: ArrowPathIcon,
|
|
label: 'Refresh',
|
|
type: 'button',
|
|
onClick: () => mangaStore.refreshCollectionInBackground(),
|
|
active: isBackgroundLoading
|
|
},
|
|
{ icon: MagnifyingGlassIcon, label: 'Search', type: 'button', onClick: () => {} }
|
|
],
|
|
rightSection: [
|
|
{ icon: Cog6ToothIcon, type: 'button', onClick: () => {} },
|
|
{
|
|
icon: EyeIcon,
|
|
type: 'dropdown',
|
|
label: 'View',
|
|
items: [
|
|
{ label: 'List', onClick: () => {} },
|
|
{ label: 'Grid', onClick: () => {} }
|
|
]
|
|
},
|
|
{
|
|
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>
|