diff --git a/src/lib/components/TablaUsuarios.svelte b/src/lib/components/TablaUsuarios.svelte index 27f6c8d..5337b88 100644 --- a/src/lib/components/TablaUsuarios.svelte +++ b/src/lib/components/TablaUsuarios.svelte @@ -16,12 +16,7 @@ import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte'; import TooltipContent from './ui/tooltip/tooltip-content.svelte'; import RecuperarContraseña from './admin/RecuperarContraseña.svelte'; - import { Dialog } from './ui/dialog'; - import DialogContent from './ui/dialog/dialog-content.svelte'; import ModificarUsuario from './admin/ModificarUsuario.svelte'; - import { fade } from 'svelte/transition'; - import type { Unsubscriber } from 'svelte/store'; - import Input from './ui/input/input.svelte'; import Trash_2 from '@lucide/svelte/icons/trash-2'; import BorrarUsuario from './BorrarUsuario.svelte'; import InputGroup from './ui/input-group/input-group.svelte'; @@ -30,6 +25,7 @@ import AgregarUsuario from './admin/AgregarUsuario.svelte'; import DarAdmin from './admin/DarAdmin.svelte'; import { busquedaAdminUsuarios } from '@/hooks/busquedaAdminUsuarios'; + import { invalidate, replaceState } from '$app/navigation'; interface Props { usuarios: UserResponseDto[]; @@ -38,7 +34,17 @@ let { usuarios = $bindable(), hayMas }: Props = $props(); - let hayMass = $state(hayMas); + let paginaActual = $derived.by(() => { + const url = new URL(window.location.href); + return Number(url.searchParams.get('p')) || 1; + }); + let search = $derived.by(() => { + const url = new URL(window.location.href); + let ret = url.searchParams.get('q') || ''; + return ret; + }); + let hayMass = $derived(hayMas); + let open = $state(false); let openModificarUsuario = $state(false); let openDarAdmin = $state(false); @@ -50,13 +56,11 @@ let usuarioModificar: UserResponseDto | null = $state(null); let usuarioDarAdmin: UserResponseDto | null = $state(null); - let search = $state(''); - type SortKey = 'username' | 'displayName' | 'postsCount' | 'createdAt'; let sortBy = $state(null); let sortDirection = $state<'asc' | 'desc'>('asc'); - let usuariosFiltrados = $state(usuarios); + let usuariosFiltrados = $derived(usuarios); function ordenarPor(campo: SortKey) { if (sortBy === campo) { @@ -100,11 +104,17 @@ } timeoutId = setTimeout(async () => { - if (search === '') { - search = ''; + const url = new URL(window.location.href); + if (!search.trim()) { + url.searchParams.delete('q'); + } else { + url.searchParams.set('q', search); } + replaceState(url, {}); + let ret = await busquedaAdminUsuarios(search, ITEMS_POR_PAGINA, paginaActual); usuariosFiltrados = ret.usuarios; + // invalidate('admin:load'); hayMass = ret.hayMas; }, 200); @@ -114,8 +124,6 @@ } const ITEMS_POR_PAGINA = 5; - let paginaActual = $state(1); - // const usuariosPaginados = $derived( // usuariosFiltrados.slice((paginaActual - 1) * ITEMS_POR_PAGINA, paginaActual * ITEMS_POR_PAGINA) // ); @@ -250,7 +258,9 @@ import CardContent from '@/components/ui/card/card-content.svelte'; import Card from '@/components/ui/card/card.svelte'; - import CardDescription from '@/components/ui/card/card-description.svelte'; import TablaUsuarios from '@/components/TablaUsuarios.svelte'; import CardTitle from '@/components/ui/card/card-title.svelte'; import CardHeader from '@/components/ui/card/card-header.svelte'; @@ -9,7 +8,7 @@ interface Prop { data: { - usuarios?: UserResponseDto[]; + usuarios: UserResponseDto[]; hayMas: boolean; error: boolean; }; @@ -29,11 +28,7 @@ - {#if data.usuarios?.length === 0} - No hay usuarios que mostar - {:else} - - {/if} + diff --git a/src/routes/(privado)/admin/+page.ts b/src/routes/(privado)/admin/+page.ts index 17ad0f9..81316a9 100644 --- a/src/routes/(privado)/admin/+page.ts +++ b/src/routes/(privado)/admin/+page.ts @@ -1,19 +1,27 @@ +import { busquedaAdminUsuarios } from '@/hooks/busquedaAdminUsuarios.js'; import type { PageLoad } from './$types.js'; import { fetchUsuariosAdmin } from '@/hooks/UsuariosAdmin.js'; export const ssr = false; -export const load: PageLoad = async ({ depends }) => { +export const load: PageLoad = async ({ depends, fetch }) => { depends('admin:load'); - const result = await fetchUsuariosAdmin(1, 5); + let url = new URL(location.href); + let query = url.searchParams.get('q') ?? ''; + let page = Number(url.searchParams.get('p')); + if (isNaN(page) || page < 1) { + page = 1; + } + + const result = await busquedaAdminUsuarios(query, 5, page, fetch); if (result.error) { return { error: true }; } return { - usuarios: result.ret?.usuarios, - hayMas: result.ret?.hayMas, + usuarios: result.usuarios, + hayMas: result.hayMas, error: false }; };