73 lines
1.9 KiB
Vue
73 lines
1.9 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,
|
|
loading,
|
|
error,
|
|
isBackgroundLoading
|
|
} = storeToRefs(mangaStore);
|
|
|
|
onMounted(() => {
|
|
console.log('HomePage mounted');
|
|
console.log('Store state before loadCollection:', {
|
|
collection: collection.value,
|
|
loading: loading.value,
|
|
error: error.value
|
|
});
|
|
|
|
mangaStore.loadCollection();
|
|
|
|
console.log('loadCollection called');
|
|
});
|
|
|
|
const handleAddMangaClick = (query = '') => {
|
|
router.push(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
|
|
};
|
|
|
|
const toolbarConfig = {
|
|
leftSection: [
|
|
{
|
|
icon: ArrowPathIcon,
|
|
label: 'Refresh',
|
|
onClick: () => mangaStore.refreshCollectionInBackground(),
|
|
active: isBackgroundLoading
|
|
},
|
|
{ icon: MagnifyingGlassIcon, label: 'Search', onClick: () => {} }
|
|
],
|
|
rightSection: [
|
|
{ icon: Cog6ToothIcon, onClick: () => {} },
|
|
{ icon: EyeIcon, onClick: () => {} },
|
|
{ icon: ArrowsUpDownIcon, onClick: () => {} },
|
|
{ icon: FunnelIcon, onClick: () => {} }
|
|
]
|
|
};
|
|
</script> |