fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-01 13:10:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

Creado filtrado por nombre, displayname, cantidadposts y fechacreacion en panel admin

Browse Source
This commit is contained in:
TroianoLuca
2025-12-04 00:38:10 -03:00
parent 987bd966ab
commit fb757597e3
1 changed files with 70 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/lib/components/TablaUsuarios.svelte
View File

@@ -34,15 +34,66 @@
let usuarioModificar: UserResponseDto | null = $state(null);
let search = $state("");
type SortKey = 'username' | 'displayName' | 'postsCount' | 'createdAt';
let sortBy = $state<SortKey | null>(null);
let sortDirection = $state<'asc' | 'desc'>('asc');
function ordenarPor(campo: SortKey) {
if (sortBy === campo) {
sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
} else {
sortBy = campo;
sortDirection = 'asc';
}
}
let usuariosFiltrados = $derived(
usuarios.filter((u) =>
u.username.toLowerCase().startsWith(search.toLowerCase()) ||
u.displayName.toLowerCase().startsWith(search.toLowerCase())
)
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);
})
);
//let usuariosFiltrados = $derived(() => usuarios.filter((u) => u.username.toLowerCase().includes(search.toLowerCase()) || u.displayName.toLowerCase().includes(search.toLowerCase())));
//let usuariosFiltrados = $derived(usuarios.filter(u => u.username.toLowerCase().includes(search.toLowerCase()) || u.displayName.toLowerCase().includes(search.toLowerCase())));
//$: usuariosFiltrados = usuarios.filter(u => u.username.toLowerCase().includes(search.toLowerCase()) || u.displayName.toLowerCase().includes(search.toLowerCase()));
function getSortIcon(campo: SortKey) {
if (sortBy !== campo) return ""; // no ícono si no está ordenando por esa columna
return sortDirection === "asc" ? "↑" : "↓"; // ascendente / descendente
}
//let usuariosFiltrados = $derived(
//usuarios.filter((u) =>
// u.username.toLowerCase().startsWith(search.toLowerCase()) ||
// u.displayName.toLowerCase().startsWith(search.toLowerCase())
// )
//);
$effect(() => {
if (!open) {
@@ -72,10 +123,18 @@
<Table>
<TableHeader>
<TableRow>
<TableHead>Usuario</TableHead>
<TableHead>Nombre</TableHead>
<TableHead>Cantidad de posts</TableHead>
<TableHead>Fecha de Creacion</TableHead>
<TableHead onclick={() => ordenarPor("username")} class="cursor-pointer select-none">
Usuario {getSortIcon("username")}
</TableHead>
<TableHead onclick={() => ordenarPor("displayName")} class="cursor-pointer select-none">
Nombre {getSortIcon("displayName")}
</TableHead>
<TableHead onclick={() => ordenarPor("postsCount")} class="cursor-pointer select-none">
Cantidad de posts {getSortIcon("postsCount")}
</TableHead>
<TableHead onclick={() => ordenarPor("createdAt")} class="cursor-pointer select-none">
Fecha de Creacion {getSortIcon("createdAt")}
</TableHead>
<TableHead>Acciones</TableHead>
</TableRow>
</TableHeader>