colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ajout de la fonctionnalité de réinitialisation des résultats de recherche dans le store Manga, mise à jour des routes pour une meilleure structure, et amélioration de l'affichage des mangas dans les composants MangaCard et MangaList avec des liens RouterLink

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-03-31 16:50:03 +02:00
parent a172e224c1
commit 9950d7ff84
7 changed files with 151 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/vue/app/domain/manga/application/store/mangaStore.js
View File

@@ -105,6 +105,12 @@ export const useMangaStore = defineStore('manga', {
}
},
clearSearchResults() {
this.searchResults = [];
this.searchError = null;
this.loadingSearch = false;
},
// --- Add Manga Actions ---
async createFromMangaDex(externalId) {
if (this.addingManga) return;

19
assets/vue/app/domain/manga/presentation/components/MangaCard.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
@click="navigateToDetails">
<RouterLink
:to="{ name: 'manga-details', params: { id: manga.id } }"
class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105 block">
<div class="relative pb-[150%]">
<img
:src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
@@ -15,14 +15,10 @@
</div>
<div class="mt-1 text-sm text-gray-500"> Added: {{ formatDate(manga.createdAt) }} </div>
</div>
</div>
</RouterLink>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
manga: {
type: Object,
@@ -30,13 +26,6 @@
}
});
const navigateToDetails = () => {
router.push({
name: 'manga-details',
params: { id: props.manga.id }
});
};
const formatDate = dateString => {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {

21
assets/vue/app/domain/manga/presentation/components/MangaList.vue
View File

@@ -19,8 +19,8 @@
<p v-if="manga.publicationYear" class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{
manga.publicationYear
}}</p>
<p v-if="manga.description" class="text-sm text-gray-700 dark:text-gray-300 mt-2 line-clamp-3">
{{ manga.description }}
<p v-if="manga.description" class="text-sm text-gray-700 dark:text-gray-300 mt-2">
{{ truncateDescription(manga.description) }}
</p>
<p v-if="manga.createdAt" class="text-sm text-gray-500 dark:text-gray-400 mt-2">
Added: {{ formatDate(manga.createdAt) }}
@@ -49,9 +49,14 @@
return new Date(dateString).toLocaleDateString(undefined, options);
} catch (e) {
console.error('Error formatting date:', e);
return dateString; // Return original string if formatting fails
return dateString;
}
};
const truncateDescription = description => {
if (!description) return '';
return description.length > 500 ? description.slice(0, 500) + '...' : description;
};
</script>
<style scoped>
@@ -66,4 +71,14 @@
-webkit-box-orient: vertical;
}
}
.description-truncate {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
max-width: 500px;
}
</style>

10
assets/vue/app/domain/manga/presentation/pages/AddManga.vue
View File

@@ -29,8 +29,10 @@
</div>
<!-- Résultats de recherche -->
<div class="max-w-full overflow-hidden">
<MangaList v-if="searchResults.length > 0" :mangas="searchResults" @manga-click="openMangaModal" />
<p v-else-if="!loading && searchQuery" class="text-center text-gray-600">Aucun résultat trouvé</p>
</div>
<!-- Modal de confirmation -->
<Dialog :open="isModalOpen" @close="closeModal" class="relative z-50">
@@ -80,7 +82,7 @@
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import { ref, onMounted, computed, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useMangaStore } from '../../application/store/mangaStore';
@@ -115,6 +117,12 @@
}
});
// Nettoyer la recherche et les résultats lors du démontage du composant
onBeforeUnmount(() => {
searchQuery.value = '';
mangaStore.clearSearchResults();
});
const performSearch = async () => {
if (!searchQuery.value.trim()) return;
try {

10
assets/vue/app/router/index.js
View File

@@ -38,30 +38,30 @@ const routes = [
component: HomePage
},
{
path: '/manga/:id',
path: '/manga/details/:id',
name: 'manga-details',
component: MangaDetails
},
{
path: '/add',
path: '/manga/add',
name: 'add-manga',
component: AddManga
},
{
path: '/reader/:chapterId',
path: '/manga/reader/:chapterId',
name: 'reader',
component: ChapterPage,
props: { title: 'Lecteur' }
},
// Pages placeholder avec chargement différé
{
path: '/import',
path: '/manga/import',
name: 'import',
component: PlaceholderComponent,
props: { title: 'Import de bibliothèque' }
},
{
path: '/discover',
path: '/manga/discover',
name: 'discover',
component: PlaceholderComponent,
props: { title: 'Découvrir' }

75
assets/vue/app/shared/components/layout/SearchBar.vue
View File

@@ -8,48 +8,53 @@
@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"
/>
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>
<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
<h3 class="px-4 py-2 text-sm font-semibold text-gray-400"> Mangas existants </h3>
<RouterLink
v-for="manga in results"
:key="manga.id"
@click="handleMangaClick(manga.id)"
class="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white"
>
<img
:src="manga.thumbnailUrl"
:alt="manga.title"
class="w-10 h-14 object-cover rounded"
/>
:to="{ name: 'manga-details', params: { id: manga.id } }"
@click="
() => {
isOpen = false;
query = '';
hasSearched = false;
}
"
class="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white">
<img :src="manga.thumbnailUrl" :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>
</RouterLink>
</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"
>
<RouterLink
:to="{ name: 'add-manga', query: query ? { q: query } : undefined }"
@click="
() => {
isOpen = false;
query = '';
hasSearched = false;
}
"
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>
</RouterLink>
</div>
</template>
</div>
@@ -58,15 +63,13 @@
<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";
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([]);
@@ -102,21 +105,7 @@ const searchManga = async () => {
}
};
const handleMangaClick = (id) => {
router.push(`/manga/${id}`);
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) => {
const handleClickOutside = event => {
if (searchRef.value && !searchRef.value.contains(event.target)) {
isOpen.value = false;
}

6
assets/vue/app/shared/components/layout/Sidebar.vue
View File

@@ -49,13 +49,13 @@
to: '/manga',
id: 'manga',
subItems: [
{ icon: PlusIcon.render, text: 'Ajouter un nouveau', to: '/add' },
{ icon: PlusIcon.render, text: 'Ajouter un nouveau', to: '/manga/add' },
{
icon: ArrowDownTrayIcon,
text: 'Import bibliothèque',
to: '/import'
to: '/manga/import'
},
{ icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' }
{ icon: GlobeAltIcon, text: 'Découvrir', to: '/manga/discover' }
]
},
{