feat: Implémentation de la pagination et mise à jour du devbook
- Ajout de la pagination pour les séries et les livres - Indicateurs de chargement pendant la navigation - Animations de transition entre les pages - Mise à jour du devbook pour refléter les fonctionnalités complétées - Amélioration de l'affichage des états de chargement (skeletons, spinners) - Optimisation des transitions de page
This commit is contained in:
Julien Froidefond
102
src/components/library/PaginatedSeriesGrid.tsx
Normal file
102
src/components/library/PaginatedSeriesGrid.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
|
||||
import { SeriesGrid } from "./SeriesGrid";
|
||||
import { Pagination } from "@/components/ui/Pagination";
|
||||
import { useRouter, usePathname, useSearchParams } from "next/navigation";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface PaginatedSeriesGridProps {
|
||||
series: any[];
|
||||
serverUrl: string;
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
totalElements: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
export function PaginatedSeriesGrid({
|
||||
series,
|
||||
serverUrl,
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalElements,
|
||||
pageSize,
|
||||
}: PaginatedSeriesGridProps) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const [isChangingPage, setIsChangingPage] = useState(false);
|
||||
|
||||
// Réinitialiser l'état de chargement quand les séries changent
|
||||
useEffect(() => {
|
||||
setIsChangingPage(false);
|
||||
}, [series]);
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setIsChangingPage(true);
|
||||
// Créer un nouvel objet URLSearchParams pour manipuler les paramètres
|
||||
const params = new URLSearchParams(searchParams);
|
||||
params.set("page", page.toString());
|
||||
|
||||
// Rediriger vers la nouvelle URL avec les paramètres mis à jour
|
||||
router.push(`${pathname}?${params.toString()}`);
|
||||
};
|
||||
|
||||
// Calcul des indices de début et de fin pour l'affichage
|
||||
const startIndex = (currentPage - 1) * pageSize + 1;
|
||||
const endIndex = Math.min(currentPage * pageSize, totalElements);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{totalElements > 0 ? (
|
||||
<>
|
||||
Affichage des séries <span className="font-medium">{startIndex}</span> à{" "}
|
||||
<span className="font-medium">{endIndex}</span> sur{" "}
|
||||
<span className="font-medium">{totalElements}</span>
|
||||
</>
|
||||
) : (
|
||||
"Aucune série trouvée"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
{/* Indicateur de chargement */}
|
||||
{isChangingPage && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-10">
|
||||
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background border shadow-sm">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span className="text-sm">Chargement...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Grille avec animation de transition */}
|
||||
<div
|
||||
className={cn(
|
||||
"transition-opacity duration-200",
|
||||
isChangingPage ? "opacity-25" : "opacity-100"
|
||||
)}
|
||||
>
|
||||
<SeriesGrid series={series} serverUrl={serverUrl} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
|
||||
<p className="text-sm text-muted-foreground order-2 sm:order-1">
|
||||
Page {currentPage} sur {totalPages}
|
||||
</p>
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={handlePageChange}
|
||||
className="order-1 sm:order-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
114
src/components/ui/Pagination.tsx
Normal file
114
src/components/ui/Pagination.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface PaginationProps {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
onPageChange: (page: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Pagination({ currentPage, totalPages, onPageChange, className }: PaginationProps) {
|
||||
// Ne pas afficher la pagination s'il n'y a qu'une seule page
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
// Fonction pour générer la liste des pages à afficher
|
||||
const getPageNumbers = () => {
|
||||
const pages: (number | "...")[] = [];
|
||||
|
||||
if (totalPages <= 7) {
|
||||
// Si moins de 7 pages, afficher toutes les pages
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
// Toujours afficher la première page
|
||||
pages.push(1);
|
||||
|
||||
if (currentPage > 3) {
|
||||
pages.push("...");
|
||||
}
|
||||
|
||||
// Pages autour de la page courante
|
||||
for (
|
||||
let i = Math.max(2, currentPage - 1);
|
||||
i <= Math.min(totalPages - 1, currentPage + 1);
|
||||
i++
|
||||
) {
|
||||
pages.push(i);
|
||||
}
|
||||
|
||||
if (currentPage < totalPages - 2) {
|
||||
pages.push("...");
|
||||
}
|
||||
|
||||
// Toujours afficher la dernière page
|
||||
pages.push(totalPages);
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
return (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-label="Pagination"
|
||||
className={cn("flex justify-center items-center gap-1", className)}
|
||||
>
|
||||
{/* Bouton précédent */}
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
|
||||
aria-label="Page précédente"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span className="sr-only md:not-sr-only">Précédent</span>
|
||||
</button>
|
||||
|
||||
{/* Liste des pages */}
|
||||
<div className="flex items-center gap-1">
|
||||
{getPageNumbers().map((page, index) => {
|
||||
if (page === "...") {
|
||||
return (
|
||||
<div key={`ellipsis-${index}`} className="flex items-center justify-center h-10 w-10">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={page}
|
||||
onClick={() => onPageChange(page)}
|
||||
disabled={page === currentPage}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center rounded-md text-sm font-medium h-10 w-10",
|
||||
page === currentPage
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-accent hover:text-accent-foreground"
|
||||
)}
|
||||
aria-label={`Page ${page}`}
|
||||
aria-current={page === currentPage ? "page" : undefined}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Bouton suivant */}
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 gap-1 hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
|
||||
aria-label="Page suivante"
|
||||
>
|
||||
<span className="sr-only md:not-sr-only">Suivant</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user