feat: ajout de la gestion des jobs avec création, récupération, suppression et filtrage via l'API, incluant des entités, des composants Vue.js et des mises à jour de la documentation API

assets/vue/app/domain/manga/presentation/pages/HomePage.vue

@@ -1,60 +1,85 @@
 <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>
+        <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>
-  </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';
+    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 router = useRouter();
+    const mangaStore = useMangaStore();
 
-const {
-  collection,
-  loading,
-  error,
-  isBackgroundLoading
-} = storeToRefs(mangaStore);
+    const { collection, loading, error, isBackgroundLoading } = storeToRefs(mangaStore);
 
-onMounted(() => {
-  mangaStore.loadCollection();
-});
+    onMounted(() => {
+        mangaStore.loadCollection();
+    });
 
-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: () => {} }
-  ]
-};
+    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>