fix: añadida paginacion

src/lib/components/TablaUsuarios.svelte

@@ -33,10 +33,12 @@
 
 	interface Props {
 		usuarios: UserResponseDto[];
+		hayMas: boolean;
 	}
 
-	let { usuarios = $bindable() }: Props = $props();
+	let { usuarios = $bindable(), hayMas }: Props = $props();
 
+	let hayMass = $state(hayMas);
 	let open = $state(false);
 	let openModificarUsuario = $state(false);
 	let openDarAdmin = $state(false);
@@ -112,19 +114,18 @@
 
 	// $inspect(usuarios);
 	let timeoutId: ReturnType<typeof setTimeout> | number | undefined;
-
 	function buscarUsuarios() {
 		if (timeoutId) {
 			clearTimeout(timeoutId);
 		}
 
 		timeoutId = setTimeout(async () => {
-			paginaActual = 1;
 			if (search === '') {
-				usuariosFiltrados = usuarios;
-				return;
+				search = '';
 			}
-			usuariosFiltrados = await busquedaAdminUsuarios(search);
+			let ret = await busquedaAdminUsuarios(search, ITEMS_POR_PAGINA, paginaActual);
+			usuariosFiltrados = ret.usuarios;
+			hayMass = ret.hayMas;
 		}, 200);
 
 		return () => {
@@ -135,11 +136,9 @@
 
 	let paginaActual = $state(1);
 
-	const totalPaginas = $derived(Math.ceil(usuariosFiltrados.length / ITEMS_POR_PAGINA));
-
-	const usuariosPaginados = $derived(
-		usuariosFiltrados.slice((paginaActual - 1) * ITEMS_POR_PAGINA, paginaActual * ITEMS_POR_PAGINA)
-	);
+	// const usuariosPaginados = $derived(
+	// 	usuariosFiltrados.slice((paginaActual - 1) * ITEMS_POR_PAGINA, paginaActual * ITEMS_POR_PAGINA)
+	// );
 </script>
 
 <div class="mb-4 flex gap-2">
@@ -184,7 +183,7 @@
 					<p class="text-center">No hay usuarios por el nombre de: {search}</p>
 				</TableCell>
 			</TableRow>{:else}
-			{#each usuariosPaginados as usuario}
+			{#each usuariosFiltrados as usuario}
 				<TableRow>
 					<TableCell
 						>@<a href={'/' + usuario.username}>
@@ -253,23 +252,25 @@
 	</TableBody>
 </Table>
 <div class="mt-4 flex items-center justify-between">
-	<p class="text-sm text-muted-foreground">
-		Página {paginaActual} de {totalPaginas}
-	</p>
+	<Button
+		disabled={paginaActual === 1}
+		onclick={() => {
+			paginaActual--;
+			buscarUsuarios();
+		}}
+		variant="secondary"
+	>
+		Anterior
+	</Button>
 
-	<div class="flex gap-2">
-		<Button disabled={paginaActual === 1} onclick={() => paginaActual--} variant="secondary">
-			Anterior
-		</Button>
-
-		<Button
-			disabled={paginaActual === totalPaginas || totalPaginas === 0}
-			onclick={() => paginaActual++}
-			variant="secondary"
-		>
-			Siguiente
-		</Button>
-	</div>
+	<Button
+		disabled={!hayMass}
+		onclick={() => {
+			paginaActual++;
+			buscarUsuarios();
+		}}
+		variant="secondary">Siguiente</Button
+	>
 </div>
 <BorrarUsuario bind:open={openBorrar} usuario={usuarioBorrar} />
 <RecuperarContraseña bind:open usuario={usuarioCambioPass} />

src/lib/hooks/UsuariosAdmin.ts

@@ -1,25 +1,25 @@
-import { apiBase } from "@/stores/url";
-import { sesionStore } from "@/stores/usuario";
-import { redirect } from "@sveltejs/kit";
-import { get } from "svelte/store";
-import type { UserResponseDto } from "../../types";
+import { apiBase } from '@/stores/url';
+import { sesionStore } from '@/stores/usuario';
+import { redirect } from '@sveltejs/kit';
+import { get } from 'svelte/store';
+import type { UserResponseDto } from '../../types';
 
 export async function fetchUsuariosAdmin(page: number, limit: number) {
-    let response = await fetch(get(apiBase) + `/api/admin/users?page=${page}&pageSize=${limit}`,{
-            method: 'GET',
-            headers: {
-                'Content-Type': 'application/json',
-                Authorization: `Bearer ${get(sesionStore)?.accessToken}`
-            }
-        });
+	let response = await fetch(get(apiBase) + `/api/admin/users?page=${page}&pageSize=${limit}`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+		}
+	});
 
-    if (response.status === 401) {
-        throw redirect(302, '/');
-    }
+	if (response.status === 401) {
+		throw redirect(302, '/');
+	}
 
-    if (!response.ok) {
-        return { error: true };
-    }
-    const usuarios: UserResponseDto[] = await response.json();  
-    return { usuarios, error: false };
+	if (!response.ok) {
+		return { error: true };
+	}
+	const ret: { usuarios: UserResponseDto[]; hayMas: boolean } = await response.json();
+	return { ret, error: false };
 }

src/lib/hooks/busquedaAdminUsuarios.ts

@@ -2,15 +2,19 @@ import { apiBase } from '@/stores/url';
 import { sesionStore } from '@/stores/usuario';
 import { get } from 'svelte/store';
 
-export async function busquedaAdminUsuarios(q: string) {
+export async function busquedaAdminUsuarios(q: string, limit = 5, page = 1) {
 	try {
-		const response = await fetch(get(apiBase) + '/api/admin/users?q=' + q, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+		const response = await fetch(
+			get(apiBase) +
+				`/api/admin/users${q ? `?q=${q}` : ''}${q ? '&' : '?'}page=${page}&pageSize=${limit}`,
+			{
+				method: 'GET',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+				}
 			}
-		});
+		);
 		if (response.ok) {
 			return await response.json();
 		}

src/routes/(privado)/admin/+page.svelte

@@ -10,6 +10,7 @@
 	interface Prop {
 		data: {
 			usuarios?: UserResponseDto[];
+			hayMas: boolean;
 			error: boolean;
 		};
 	}
@@ -31,7 +32,7 @@
 				{#if data.usuarios?.length === 0}
 					<CardDescription>No hay usuarios que mostar</CardDescription>
 				{:else}
-					<TablaUsuarios usuarios={data.usuarios || []}></TablaUsuarios>
+					<TablaUsuarios usuarios={data.usuarios || []} hayMas={data.hayMas}></TablaUsuarios>
 				{/if}
 			</CardContent>
 		</Card>

src/routes/(privado)/admin/+page.ts

@@ -3,16 +3,17 @@ import { fetchUsuariosAdmin } from '@/hooks/UsuariosAdmin.js';
 
 export const ssr = false;
 
-export const load: PageLoad = async ({ depends}) => {
+export const load: PageLoad = async ({ depends }) => {
 	depends('admin:load');
-	const result = await fetchUsuariosAdmin(1, 10);
+	const result = await fetchUsuariosAdmin(1, 5);
 
 	if (result.error) {
 		return { error: true };
 	}
 
 	return {
-		usuarios: result.usuarios,
+		usuarios: result.ret?.usuarios,
+		hayMas: result.ret?.hayMas,
 		error: false
 	};
-}
+};