diff --git a/src/lib/components/TablaUsuarios.svelte b/src/lib/components/TablaUsuarios.svelte index 3db5dc0..9d81d50 100644 --- a/src/lib/components/TablaUsuarios.svelte +++ b/src/lib/components/TablaUsuarios.svelte @@ -29,6 +29,7 @@ import InputGroupInput from './ui/input-group/input-group-input.svelte'; import AgregarUsuario from './admin/AgregarUsuario.svelte'; import DarAdmin from './admin/DarAdmin.svelte'; + import { busquedaAdminUsuarios } from '@/hooks/busquedaAdminUsuarios'; interface Props { usuarios: UserResponseDto[]; @@ -43,12 +44,8 @@ let opencrearUsuario = $state(false); let usuarioBorrar: UserResponseDto | null = $state(null); - - //si ponia contraseña en español quedaba muy largo el nombre let usuarioCambioPass: UserResponseDto | null = $state(null); - let usuarioModificar: UserResponseDto | null = $state(null); - let usuarioDarAdmin: UserResponseDto | null = $state(null); let search = $state(''); @@ -57,6 +54,8 @@ let sortBy = $state(null); let sortDirection = $state<'asc' | 'desc'>('asc'); + let usuariosFiltrados = $state(usuarios); + function ordenarPor(campo: SortKey) { if (sortBy === campo) { sortDirection = sortDirection === 'asc' ? 'desc' : 'asc'; @@ -64,38 +63,27 @@ sortBy = campo; sortDirection = 'asc'; } + usuariosFiltrados = usuariosFiltrados.toSorted((a, b) => { + if (!sortBy) return 0; + + const key: SortKey = sortBy; + + if (key === 'createdAt') { + const ta = new Date(a.createdAt).getTime(); + const tb = new Date(b.createdAt).getTime(); + return sortDirection === 'asc' ? ta - tb : tb - ta; + } + + if (key === 'postsCount') { + return sortDirection === 'asc' ? a.postsCount - b.postsCount : b.postsCount - a.postsCount; + } + + const sa = a[key].toString().toLowerCase(); + const sb = b[key].toString().toLowerCase(); + return sortDirection === 'asc' ? sa.localeCompare(sb) : sb.localeCompare(sa); + }); } - let usuariosFiltrados = $derived( - usuarios - .filter( - (u) => - u.username.toLowerCase().startsWith(search.toLowerCase()) || - u.displayName.toLowerCase().startsWith(search.toLowerCase()) - ) - .toSorted((a, b) => { - if (!sortBy) return 0; - - const key: SortKey = sortBy; - - if (key === 'createdAt') { - const ta = new Date(a.createdAt).getTime(); - const tb = new Date(b.createdAt).getTime(); - return sortDirection === 'asc' ? ta - tb : tb - ta; - } - - if (key === 'postsCount') { - return sortDirection === 'asc' - ? a.postsCount - b.postsCount - : b.postsCount - a.postsCount; - } - - const sa = a[key].toString().toLowerCase(); - const sb = b[key].toString().toLowerCase(); - return sortDirection === 'asc' ? sa.localeCompare(sb) : sb.localeCompare(sa); - }) - ); - function getSortIcon(campo: SortKey) { if (sortBy !== campo) return ''; return sortDirection === 'asc' ? '↑' : '↓'; @@ -122,12 +110,36 @@ } // $inspect(usuarios); + let timeoutId: ReturnType | number | undefined; + + function buscarUsuarios() { + if (timeoutId) { + clearTimeout(timeoutId); + } + + timeoutId = setTimeout(async () => { + if (search === '') { + usuariosFiltrados = usuarios; + return; + } + usuariosFiltrados = await busquedaAdminUsuarios(search); + }, 200); + + return () => { + if (timeoutId) clearTimeout(timeoutId); + }; + }
- + buscarUsuarios()} + />