añadido soporte para mandar una query al back

This commit is contained in:
2026-01-26 16:33:26 -03:00
parent 9c59c3d036
commit ceec19fb91
3 changed files with 68 additions and 36 deletions

View File

@@ -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<SortKey | null>(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<typeof setTimeout> | 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);
};
}
</script>
<div class="mb-4 flex gap-2">
<InputGroup>
<InputGroupAddon align="inline-start"><Search></Search></InputGroupAddon>
<InputGroupInput type="text" placeholder="Buscar usuario..." bind:value={search} />
<InputGroupInput
type="text"
placeholder="Buscar usuario..."
bind:value={search}
oninput={() => buscarUsuarios()}
/>
</InputGroup>
<Button
onclick={() => (opencrearUsuario = !opencrearUsuario)}