From fb757597e3e08e8ff3f63fab08455604fbd53478 Mon Sep 17 00:00:00 2001
From: TroianoLuca <lucattroiano@gmail.com>
Date: Thu, 4 Dec 2025 00:38:10 -0300
Subject: [PATCH] Creado filtrado por nombre, displayname, cantidadposts y
 fechacreacion en panel admin

---
 src/lib/components/TablaUsuarios.svelte | 81 +++++++++++++++++++++----
 1 file changed, 70 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/TablaUsuarios.svelte b/src/lib/components/TablaUsuarios.svelte
index 5bb5dcb..ba43f83 100644
--- a/src/lib/components/TablaUsuarios.svelte
+++ b/src/lib/components/TablaUsuarios.svelte
@@ -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>