feat: debut d'un front vue.js + ajout de cursorrules
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
parent
ca9a74fe69
commit
bee8572dc5
29
assets/vue/app/App.vue
Normal file
29
assets/vue/app/App.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-100">
|
||||
<main>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,18 @@
|
||||
export class SearchMangas {
|
||||
constructor(mangaRepository) {
|
||||
this.mangaRepository = mangaRepository;
|
||||
}
|
||||
|
||||
async execute(query) {
|
||||
if (!query || query.trim().length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
return await this.mangaRepository.searchMangas(query);
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
72
assets/vue/app/domain/manga/application/store/mangaStore.js
Normal file
72
assets/vue/app/domain/manga/application/store/mangaStore.js
Normal file
@@ -0,0 +1,72 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref } from 'vue';
|
||||
import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
|
||||
|
||||
const mangaRepository = new ApiMangaRepository();
|
||||
|
||||
export const useMangaStore = defineStore('manga', () => {
|
||||
const collection = ref(null);
|
||||
const detailedMangas = ref({});
|
||||
const loading = ref(false);
|
||||
const error = ref(null);
|
||||
const isBackgroundLoading = ref(false);
|
||||
|
||||
const loadCollection = async () => {
|
||||
if (loading.value) return;
|
||||
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
collection.value = await mangaRepository.getCollection();
|
||||
} catch (err) {
|
||||
error.value = err.message;
|
||||
console.error('Failed to load collection:', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const refreshCollectionInBackground = async () => {
|
||||
if (isBackgroundLoading.value) return;
|
||||
|
||||
isBackgroundLoading.value = true;
|
||||
|
||||
try {
|
||||
const updatedCollection = await mangaRepository.getCollection();
|
||||
collection.value = updatedCollection;
|
||||
} catch (err) {
|
||||
console.error('Failed to refresh collection:', err);
|
||||
} finally {
|
||||
isBackgroundLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadMangaDetail = async (slug) => {
|
||||
if (detailedMangas.value[slug]) return;
|
||||
|
||||
try {
|
||||
const manga = await mangaRepository.getMangaBySlug(slug);
|
||||
detailedMangas.value[slug] = manga;
|
||||
} catch (err) {
|
||||
console.error(`Failed to load manga details for ${slug}:`, err);
|
||||
throw err;
|
||||
}
|
||||
};
|
||||
|
||||
const getMangaFromCollection = (slug) => {
|
||||
return collection.value?.items.find(manga => manga.slug === slug);
|
||||
};
|
||||
|
||||
return {
|
||||
collection,
|
||||
detailedMangas,
|
||||
loading,
|
||||
error,
|
||||
isBackgroundLoading,
|
||||
loadCollection,
|
||||
refreshCollectionInBackground,
|
||||
loadMangaDetail,
|
||||
getMangaFromCollection
|
||||
};
|
||||
});
|
||||
42
assets/vue/app/domain/manga/domain/entities/manga.js
Normal file
42
assets/vue/app/domain/manga/domain/entities/manga.js
Normal file
@@ -0,0 +1,42 @@
|
||||
export class Manga {
|
||||
constructor({
|
||||
id,
|
||||
slug,
|
||||
title,
|
||||
description = null,
|
||||
authors = [],
|
||||
imageUrl = null,
|
||||
publicationYear = null,
|
||||
status = null,
|
||||
rating = null,
|
||||
genres = [],
|
||||
createdAt = new Date().toISOString()
|
||||
}) {
|
||||
this.id = id;
|
||||
this.slug = slug;
|
||||
this.title = title;
|
||||
this.description = description;
|
||||
this.authors = authors;
|
||||
this.imageUrl = imageUrl;
|
||||
this.publicationYear = publicationYear;
|
||||
this.status = status;
|
||||
this.rating = rating;
|
||||
this.genres = genres;
|
||||
this.createdAt = createdAt;
|
||||
}
|
||||
|
||||
static create(data) {
|
||||
return new Manga(data);
|
||||
}
|
||||
}
|
||||
|
||||
export class MangaCollection {
|
||||
constructor(items, total, page, limit, hasNextPage, hasPreviousPage) {
|
||||
this.items = items.map(item => Manga.create(item));
|
||||
this.total = total;
|
||||
this.page = page;
|
||||
this.limit = limit;
|
||||
this.hasNextPage = hasNextPage;
|
||||
this.hasPreviousPage = hasPreviousPage;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { MangaCollection } from '../../domain/entities/manga';
|
||||
|
||||
export class ApiMangaRepository {
|
||||
async getCollection() {
|
||||
try {
|
||||
const response = await fetch('/api/mangas');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch manga collection');
|
||||
}
|
||||
const data = await response.json();
|
||||
return new MangaCollection(
|
||||
data.items,
|
||||
data.total,
|
||||
data.page,
|
||||
data.limit,
|
||||
data.hasNextPage,
|
||||
data.hasPreviousPage
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('API Error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async getMangaBySlug(slug) {
|
||||
try {
|
||||
const response = await fetch(`/api/mangas/${slug}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch manga details');
|
||||
}
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('API Error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async searchMangas(query) {
|
||||
try {
|
||||
const response = await fetch(`/api/mangas/search?q=${encodeURIComponent(query)}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to search mangas');
|
||||
}
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('API Error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div class="relative pb-[150%]">
|
||||
<img
|
||||
:src="manga.imageUrl || 'https://via.placeholder.com/300x400'"
|
||||
:alt="manga.title"
|
||||
class="absolute inset-0 w-full h-full object-contain bg-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-1">{{ manga.title }}</h3>
|
||||
<div class="flex items-center">
|
||||
<span class="text-sm text-gray-500">{{ manga.publicationYear }}</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-500">
|
||||
Added: {{ formatDate(manga.createdAt) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps({
|
||||
manga: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const handleClick = () => {
|
||||
router.push(`/manga/${props.manga.slug}`);
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
|
||||
<MangaCard
|
||||
v-for="manga in mangas"
|
||||
:key="manga.id"
|
||||
:manga="manga"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MangaCard from './MangaCard.vue';
|
||||
|
||||
defineProps({
|
||||
mangas: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
67
assets/vue/app/domain/manga/presentation/pages/HomePage.vue
Normal file
67
assets/vue/app/domain/manga/presentation/pages/HomePage.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<Layout @add-manga-click="handleAddMangaClick">
|
||||
<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>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useMangaStore } from '../../application/store/mangaStore';
|
||||
import Layout from '../../../../shared/components/layout/Layout.vue';
|
||||
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);
|
||||
|
||||
const { loadCollection, refreshCollectionInBackground } = mangaStore;
|
||||
|
||||
onMounted(() => {
|
||||
loadCollection();
|
||||
});
|
||||
|
||||
const handleAddMangaClick = (query = '') => {
|
||||
router.push(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
|
||||
};
|
||||
|
||||
const toolbarConfig = {
|
||||
leftSection: [
|
||||
{
|
||||
icon: ArrowPathIcon,
|
||||
label: 'Refresh',
|
||||
onClick: refreshCollectionInBackground,
|
||||
active: isBackgroundLoading
|
||||
},
|
||||
{ icon: MagnifyingGlassIcon, label: 'Search', onClick: () => {} }
|
||||
],
|
||||
rightSection: [
|
||||
{ icon: Cog6ToothIcon, onClick: () => {} },
|
||||
{ icon: EyeIcon, onClick: () => {} },
|
||||
{ icon: ArrowsUpDownIcon, onClick: () => {} },
|
||||
{ icon: FunnelIcon, onClick: () => {} }
|
||||
]
|
||||
};
|
||||
</script>
|
||||
25
assets/vue/app/index.js
Normal file
25
assets/vue/app/index.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { createPinia } from 'pinia'
|
||||
import App from './App.vue'
|
||||
import routes from './router'
|
||||
import '../../styles/app.scss'
|
||||
|
||||
// Création du router
|
||||
const router = createRouter({
|
||||
history: createWebHistory('/vue/'),
|
||||
routes
|
||||
})
|
||||
|
||||
// Création du store
|
||||
const pinia = createPinia()
|
||||
|
||||
// Création de l'application
|
||||
const app = createApp(App)
|
||||
|
||||
// Installation des plugins
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
|
||||
// Montage de l'application
|
||||
app.mount('#vue-app')
|
||||
127
assets/vue/app/router/index.js
Normal file
127
assets/vue/app/router/index.js
Normal file
@@ -0,0 +1,127 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import HomePage from '../domain/manga/presentation/pages/HomePage.vue';
|
||||
|
||||
// Placeholder component for new routes
|
||||
const PlaceholderComponent = {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-2xl font-bold mb-4">{{ title }}</h1>
|
||||
<p class="text-gray-600">Cette fonctionnalité sera bientôt disponible.</p>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomePage
|
||||
},
|
||||
{
|
||||
path: '/manga/:slug',
|
||||
name: 'manga-detail',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Détails du manga' }
|
||||
},
|
||||
{
|
||||
path: '/add',
|
||||
name: 'add-manga',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Ajouter un manga' }
|
||||
},
|
||||
{
|
||||
path: '/reader/:chapterId',
|
||||
name: 'reader',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Lecteur' }
|
||||
},
|
||||
// Pages placeholder avec chargement différé
|
||||
{
|
||||
path: '/import',
|
||||
name: 'import',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Import de bibliothèque' }
|
||||
},
|
||||
{
|
||||
path: '/discover',
|
||||
name: 'discover',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Découvrir' }
|
||||
},
|
||||
{
|
||||
path: '/convert',
|
||||
name: 'convert',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Convertir CBR en CBZ' }
|
||||
},
|
||||
{
|
||||
path: '/calendar',
|
||||
name: 'calendar',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Calendrier' }
|
||||
},
|
||||
{
|
||||
path: '/activity',
|
||||
name: 'activity',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Activité' }
|
||||
},
|
||||
// Paramètres
|
||||
{
|
||||
path: '/settings/general',
|
||||
name: 'settings-general',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Paramètres généraux' }
|
||||
},
|
||||
{
|
||||
path: '/settings/folders',
|
||||
name: 'settings-folders',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Gestion des dossiers' }
|
||||
},
|
||||
{
|
||||
path: '/settings/scrappers',
|
||||
name: 'settings-scrappers',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Configuration des scrappers' }
|
||||
},
|
||||
{
|
||||
path: '/settings/ui',
|
||||
name: 'settings-ui',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: "Paramètres de l'interface" }
|
||||
},
|
||||
// Système
|
||||
{
|
||||
path: '/system/status',
|
||||
name: 'system-status',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Status du système' }
|
||||
},
|
||||
{
|
||||
path: '/system/backup',
|
||||
name: 'system-backup',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Sauvegarde' }
|
||||
},
|
||||
{
|
||||
path: '/system/logs',
|
||||
name: 'system-logs',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Journaux système' }
|
||||
},
|
||||
{
|
||||
path: '/system/updates',
|
||||
name: 'system-updates',
|
||||
component: PlaceholderComponent,
|
||||
props: { title: 'Mises à jour' }
|
||||
}
|
||||
];
|
||||
|
||||
export default routes;
|
||||
23
assets/vue/app/shared/components/layout/Header.vue
Normal file
23
assets/vue/app/shared/components/layout/Header.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<header class="bg-green-600 h-16 flex items-center fixed w-full z-50">
|
||||
<button
|
||||
@click="$emit('menu-click')"
|
||||
class="ml-4 text-white p-2 md:hidden"
|
||||
>
|
||||
<Bars3Icon class="h-6 w-6" />
|
||||
</button>
|
||||
<div class="flex items-center flex-1">
|
||||
<router-link to="/" class="text-white text-2xl font-bold ml-4">
|
||||
Mangarr
|
||||
</router-link>
|
||||
<SearchBar />
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Bars3Icon } from '@heroicons/vue/24/outline';
|
||||
import SearchBar from './SearchBar.vue';
|
||||
|
||||
defineEmits(['menu-click']);
|
||||
</script>
|
||||
36
assets/vue/app/shared/components/layout/Layout.vue
Normal file
36
assets/vue/app/shared/components/layout/Layout.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<Header
|
||||
@menu-click="toggleSidebar"
|
||||
@manga-click="$emit('manga-click', $event)"
|
||||
@add-manga-click="$emit('add-manga-click', $event)"
|
||||
/>
|
||||
<Sidebar
|
||||
:is-open="isSidebarOpen"
|
||||
@close="closeSidebar"
|
||||
@add-manga-click="$emit('add-manga-click', $event)"
|
||||
/>
|
||||
|
||||
<main class="pt-16 md:ml-60">
|
||||
<slot></slot>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Header from './Header.vue';
|
||||
import Sidebar from './Sidebar.vue';
|
||||
|
||||
const isSidebarOpen = ref(false);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
isSidebarOpen.value = !isSidebarOpen.value;
|
||||
};
|
||||
|
||||
const closeSidebar = () => {
|
||||
isSidebarOpen.value = false;
|
||||
};
|
||||
|
||||
defineEmits(['manga-click', 'add-manga-click']);
|
||||
</script>
|
||||
130
assets/vue/app/shared/components/layout/SearchBar.vue
Normal file
130
assets/vue/app/shared/components/layout/SearchBar.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div ref="searchRef" class="relative flex-1 max-w-xl mx-4">
|
||||
<div class="flex items-center py-1">
|
||||
<MagnifyingGlassIcon class="h-5 w-5 text-white" />
|
||||
<input
|
||||
type="text"
|
||||
v-model="query"
|
||||
@input="handleInput"
|
||||
@focus="isOpen = true"
|
||||
placeholder="Rechercher"
|
||||
class="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isOpen && query.trim()" class="absolute w-full mt-2 bg-gray-800/95 backdrop-blur-sm rounded-lg shadow-lg border border-gray-700 max-h-96 overflow-y-auto z-50">
|
||||
<div v-if="loading" class="p-4 text-center text-gray-400">
|
||||
Chargement...
|
||||
</div>
|
||||
|
||||
<template v-else-if="results.length > 0">
|
||||
<div class="py-2">
|
||||
<h3 class="px-4 py-2 text-sm font-semibold text-gray-400">
|
||||
Mangas existants
|
||||
</h3>
|
||||
<button
|
||||
v-for="manga in results"
|
||||
:key="manga.id"
|
||||
@click="handleMangaClick(manga.slug)"
|
||||
class="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white"
|
||||
>
|
||||
<img
|
||||
:src="manga.imageUrl"
|
||||
:alt="manga.title"
|
||||
class="w-10 h-14 object-cover rounded"
|
||||
/>
|
||||
<div class="text-left">
|
||||
<div class="font-medium">{{ manga.title }}</div>
|
||||
<div class="text-sm text-gray-400">{{ manga.author }} ({{ manga.publicationYear }})</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="hasSearched">
|
||||
<div class="py-2">
|
||||
<button
|
||||
@click="handleAddMangaClick"
|
||||
class="w-full px-4 py-2 flex items-center gap-2 text-green-400 hover:bg-gray-700/50"
|
||||
>
|
||||
<PlusIcon class="h-5 w-5" />
|
||||
<span>Ajouter "{{ query }}"</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { MagnifyingGlassIcon, PlusIcon } from '@heroicons/vue/24/outline';
|
||||
import {ApiMangaRepository} from "../../../domain/manga/infrastructure/api/apiMangaRepository";
|
||||
import {SearchMangas} from "../../../domain/manga/application/queries/searchMangas";
|
||||
|
||||
const mangaRepository = new ApiMangaRepository();
|
||||
const searchMangas = new SearchMangas(mangaRepository);
|
||||
|
||||
const router = useRouter();
|
||||
const searchRef = ref(null);
|
||||
const query = ref('');
|
||||
const results = ref([]);
|
||||
const isOpen = ref(false);
|
||||
const loading = ref(false);
|
||||
const hasSearched = ref(false);
|
||||
|
||||
let searchTimeout;
|
||||
|
||||
const handleInput = () => {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(searchManga, 300);
|
||||
};
|
||||
|
||||
const searchManga = async () => {
|
||||
if (!query.value.trim()) {
|
||||
results.value = [];
|
||||
hasSearched.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
results.value = await searchMangas.execute(query.value);
|
||||
hasSearched.value = true;
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMangaClick = (slug) => {
|
||||
router.push(`/manga/${slug}`);
|
||||
isOpen.value = false;
|
||||
query.value = '';
|
||||
hasSearched.value = false;
|
||||
};
|
||||
|
||||
const handleAddMangaClick = () => {
|
||||
router.push(`/add${query.value ? `?q=${encodeURIComponent(query.value)}` : ''}`);
|
||||
isOpen.value = false;
|
||||
query.value = '';
|
||||
hasSearched.value = false;
|
||||
};
|
||||
|
||||
const handleClickOutside = (event) => {
|
||||
if (searchRef.value && !searchRef.value.contains(event.target)) {
|
||||
isOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
clearTimeout(searchTimeout);
|
||||
});
|
||||
</script>
|
||||
155
assets/vue/app/shared/components/layout/Sidebar.vue
Normal file
155
assets/vue/app/shared/components/layout/Sidebar.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<aside
|
||||
:class="[
|
||||
'fixed top-16 bottom-0 left-0 w-60 bg-white transform transition-transform duration-300 ease-in-out z-40',
|
||||
isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
|
||||
]"
|
||||
>
|
||||
<nav class="h-full overflow-y-auto py-4">
|
||||
<div v-for="(item, index) in menuItems" :key="index" class="mb-2">
|
||||
<!-- Menu item with submenu -->
|
||||
<template v-if="item.id">
|
||||
<button
|
||||
@click="toggleMenu(item.id)"
|
||||
class="w-full px-4 py-2 flex items-center justify-between hover:bg-gray-100"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<component :is="item.icon" class="w-5 h-5 mr-3" />
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
<component
|
||||
:is="expandedMenus[item.id] ? ChevronUpIcon : ChevronDownIcon"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<div v-show="expandedMenus[item.id]">
|
||||
<template v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
|
||||
<router-link
|
||||
v-if="subItem.to"
|
||||
:to="subItem.to"
|
||||
class="block px-4 py-2 pl-12 hover:bg-gray-100"
|
||||
>
|
||||
{{ subItem.text }}
|
||||
</router-link>
|
||||
<button
|
||||
v-else
|
||||
@click="subItem.onClick"
|
||||
class="w-full text-left px-4 py-2 pl-12 hover:bg-gray-100"
|
||||
>
|
||||
{{ subItem.text }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Simple menu item -->
|
||||
<router-link
|
||||
v-else
|
||||
:to="item.to"
|
||||
class="block px-4 py-2 hover:bg-gray-100"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<component :is="item.icon" class="w-5 h-5 mr-3" />
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="item.badge"
|
||||
class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"
|
||||
>
|
||||
{{ item.badge }}
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
BookOpenIcon,
|
||||
PlusIcon,
|
||||
ArrowDownTrayIcon,
|
||||
GlobeAltIcon,
|
||||
ArrowsRightLeftIcon,
|
||||
CalendarIcon,
|
||||
ClockIcon,
|
||||
Cog6ToothIcon,
|
||||
ComputerDesktopIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon
|
||||
} from '@heroicons/vue/24/outline';
|
||||
|
||||
const props = defineProps({
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'add-manga-click']);
|
||||
|
||||
const expandedMenus = ref({
|
||||
mangas: true,
|
||||
settings: false,
|
||||
system: false
|
||||
});
|
||||
|
||||
const toggleMenu = (menuId) => {
|
||||
expandedMenus.value[menuId] = !expandedMenus.value[menuId];
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: BookOpenIcon,
|
||||
text: 'Mangas',
|
||||
id: 'mangas',
|
||||
subItems: [
|
||||
{ icon: PlusIcon, text: 'Ajouter un nouveau', onClick: () => emit('add-manga-click') },
|
||||
{ icon: ArrowDownTrayIcon, text: 'Import bibliothèque', to: '/import' },
|
||||
{ icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: ArrowsRightLeftIcon,
|
||||
text: 'Convertir CBR en CBZ',
|
||||
to: '/convert'
|
||||
},
|
||||
{
|
||||
icon: CalendarIcon,
|
||||
text: 'Calendrier',
|
||||
to: '/calendar'
|
||||
},
|
||||
{
|
||||
icon: ClockIcon,
|
||||
text: 'Activité',
|
||||
to: '/activity',
|
||||
badge: '3'
|
||||
},
|
||||
{
|
||||
icon: Cog6ToothIcon,
|
||||
text: 'Paramètres',
|
||||
id: 'settings',
|
||||
subItems: [
|
||||
{ text: 'Général', to: '/settings/general' },
|
||||
{ text: 'Dossiers', to: '/settings/folders' },
|
||||
{ text: 'Scrappers', to: '/settings/scrappers' },
|
||||
{ text: 'UI', to: '/settings/ui' }
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: ComputerDesktopIcon,
|
||||
text: 'Système',
|
||||
id: 'system',
|
||||
subItems: [
|
||||
{ text: 'Status', to: '/system/status' },
|
||||
{ text: 'Backup', to: '/system/backup' },
|
||||
{ text: 'Logs', to: '/system/logs' },
|
||||
{ text: 'Updates', to: '/system/updates' }
|
||||
]
|
||||
},
|
||||
];
|
||||
</script>
|
||||
47
assets/vue/app/shared/components/ui/Toolbar.vue
Normal file
47
assets/vue/app/shared/components/ui/Toolbar.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div :class="['bg-white shadow-sm px-4 py-2', $attrs.class]">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
<!-- Left section -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<button
|
||||
v-for="(item, index) in config.leftSection"
|
||||
:key="index"
|
||||
@click="item.onClick"
|
||||
:class="[
|
||||
'p-2 rounded-lg transition-colors',
|
||||
item.active
|
||||
? 'bg-green-100 text-green-600'
|
||||
: 'hover:bg-gray-100'
|
||||
]"
|
||||
>
|
||||
<component :is="item.icon" class="h-5 w-5" />
|
||||
<span v-if="item.label" class="ml-2">{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Right section -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<button
|
||||
v-for="(item, index) in config.rightSection"
|
||||
:key="index"
|
||||
@click="item.onClick"
|
||||
class="p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<component :is="item.icon" class="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (value) => {
|
||||
return value.leftSection && value.rightSection;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user