feat: borrar usaurios

src/lib/components/BorrarUsuario.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { Dialog } from './ui/dialog';
+	import DialogContent from './ui/dialog/dialog-content.svelte';
+	import DialogHeader from './ui/dialog/dialog-header.svelte';
+	import DialogTitle from './ui/dialog/dialog-title.svelte';
+	import Button from './ui/button/button.svelte';
+	import Spinner from './ui/spinner/spinner.svelte';
+	import { borrarUsuario } from '@/hooks/borrarUsuario';
+	import { invalidate } from '$app/navigation';
+
+	let cargando = $state(false);
+
+	let { usuario, open = $bindable() } = $props();
+
+	async function handleBorrar() {
+		if (!usuario) return;
+
+		await borrarUsuario(usuario.id);
+		open = false;
+		invalidate('admin:load');
+	}
+</script>
+
+<div transition:fade>
+	<Dialog {open} onOpenChange={() => (open = false)}>
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>Borrar Usuario</DialogTitle>
+			</DialogHeader>
+			<p>¿Está seguro que desea borrar al usuario {usuario?.displayName}?</p>
+			<div class="mt-4 flex justify-between">
+				<Button variant="destructive" onclick={handleBorrar} disabled={cargando}>
+					{#if cargando}
+						<Spinner />
+					{:else}
+						Borrar
+					{/if}
+				</Button>
+				<Button variant="secondary" onclick={() => (open = false)} disabled={cargando}>
+					Cancelar
+				</Button>
+			</div>
+		</DialogContent>
+	</Dialog>
+</div>

src/lib/components/PostCard.svelte

@@ -99,12 +99,14 @@
 		<div class="flex flex-col">
 			<div class="flex items-center justify-between">
 				<div class="flex gap-3">
-					<a href={`/${post.authorName}`}>
-						<Avatar>
-							<AvatarImage src={post.authorImageUrl}></AvatarImage>
-							<AvatarFallback>{post.authorDisplayName[0].toUpperCase()}</AvatarFallback>
-						</Avatar>
-					</a>
+					{#if post.authorName !== '[deleted]'}
+						<a href={`/${post.authorName}`}>
+							<Avatar>
+								<AvatarImage src={post.authorImageUrl}></AvatarImage>
+								<AvatarFallback>{post.authorDisplayName[0].toUpperCase()}</AvatarFallback>
+							</Avatar>
+						</a>
+					{/if}
 					<div class="flex space-x-2">
 						<span class="text-lg font-medium">{post.authorDisplayName}</span>
 						<span class="text-lg text-muted-foreground">@{post.authorName}</span>

src/lib/components/TablaUsuarios.svelte

@@ -19,6 +19,8 @@
 	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';
 
 	interface Props {
 		usuarios: UserResponseDto[];
@@ -29,6 +31,9 @@
 	let open = $state(false);
 	let openModificarUsuario = $state(false);
 
+	let openBorrar = $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);
 
@@ -84,12 +89,6 @@
 		return sortDirection === 'asc' ? '↑' : '↓';
 	}
 
-	$effect(() => {
-		if (!open) {
-			usuarioCambioPass = null;
-		}
-	});
-
 	function handleCambiarContraseña(usuario: UserResponseDto) {
 		open = true;
 		usuarioCambioPass = usuario;
@@ -99,6 +98,13 @@
 		openModificarUsuario = true;
 		usuarioModificar = usuario;
 	}
+
+	function handleBorrar(usuario: UserResponseDto) {
+		openBorrar = true;
+		usuarioBorrar = usuario;
+	}
+
+	// $inspect(usuarios);
 </script>
 
 <div class="mb-4">
@@ -156,11 +162,27 @@
 							<p>Modificar Usuario</p>
 						</TooltipContent>
 					</Tooltip>
-					<Button></Button>
+					<Tooltip>
+						<TooltipTrigger>
+							<Button
+								disabled={usuario.isAdmin}
+								onclick={() => handleBorrar(usuario)}
+								variant="destructive"><Trash_2 /></Button
+							>
+						</TooltipTrigger>
+						<TooltipContent>
+							{#if usuario.isAdmin}
+								No se pueden eliminar usuarios Admin
+							{:else}
+								Eliminar Usuario
+							{/if}
+						</TooltipContent>
+					</Tooltip>
 				</TableCell>
 			</TableRow>
 		{/each}
 	</TableBody>
 </Table>
+<BorrarUsuario bind:open={openBorrar} usuario={usuarioBorrar} />
 <RecuperarContraseña bind:open usuario={usuarioCambioPass} />
 <ModificarUsuario bind:open={openModificarUsuario} bind:usuario={usuarioModificar} />